Skip to content

Commit abb7084

Browse files
dpvcdpvc
committed
Merge pull request #1479 from dpvc/issue1478
Properly determine container widths. Resolves issue #1478.
2 parents 9779801 + 559102f commit abb7084

File tree

4 files changed

+68
-59
lines changed

4 files changed

+68
-59
lines changed

‎unpacked/extensions/HTML-CSS/handle-floats.js

+3-36
Original file line numberDiff line numberDiff line change
@@ -41,42 +41,9 @@ MathJax.Extension["HTML-CSS/handle-floats"] = {
4141
};
4242

4343
//
44-
// Make the display DIV be a table-cell
45-
// Use padding to get the separation, since table cells don't do margin
46-
// Make the width large (it will shrink to fit the remaining room)
44+
// This file is now obsolete, since the HTML-CSS output already handles
45+
// floating elements properly.
4746
//
48-
MathJax.Hub.Config({
49-
"HTML-CSS": {
50-
styles: {
51-
".MathJax_Display": {
52-
display: "table-cell",
53-
padding: "1em 0 ! important",
54-
width: (MathJax.Hub.Browser.isMSIE && (document.documentMode||0) < 8 ? "100%" : "1000em")
55-
}
56-
}
57-
}
58-
});
59-
60-
//
61-
// Two consecutive equations would end up side-by-side, so force a separator
62-
// (Needed by IE8, IE9, and Firefox, at least).
63-
//
64-
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
65-
var HTMLCSS = MathJax.OutputJax["HTML-CSS"],
66-
TRANSLATE = HTMLCSS.Translate;
67-
HTMLCSS.Augment({
68-
Translate: function (script,state) {
69-
TRANSLATE.apply(this,arguments);
70-
if (script.MathJax.elementJax.HTMLCSS.display) {
71-
var next = script.nextSibling;
72-
if (!next || next.className !== "MathJax_MSIE_Separator") {
73-
var span = HTMLCSS.Element("span",{className:"MathJax_MSIE_Separator"});
74-
script.parentNode.insertBefore(span,next);
75-
}
76-
}
77-
}
78-
});
79-
MathJax.Hub.Startup.signal.Post("HTML-CSS handle-floats Ready");
80-
});
8147

48+
MathJax.Hub.Startup.signal.Post("HTML-CSS handle-floats Ready");
8249
MathJax.Ajax.loadComplete("[MathJax]/extensions/HTML-CSS/handle-floats.js");

‎unpacked/jax/output/CommonHTML/jax.js

+26-8
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
".mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex]": {
7272
display: "inline-table" // see issues #1282 and #1338
7373
},
74+
".mjx-full-width": {
75+
display: "table-cell",
76+
width: "10000em"
77+
},
7478

7579
".mjx-math": {
7680
"display": "inline-block",
@@ -170,6 +174,12 @@
170174
position: "absolute",
171175
width:"1px", height:"60ex"
172176
},
177+
".mjx-line-box-test": {
178+
display: "table-cell!important",
179+
width: "10000em!important",
180+
"min-width":0, "max-width":"none",
181+
padding:0, border:0, margin:0
182+
},
173183

174184
"#MathJax_CHTML_Tooltip": {
175185
"background-color": "InfoBackground", color: "InfoText",
@@ -232,6 +242,11 @@
232242
//
233243
this.TestSpan = CHTML.Element("mjx-test",{style:{left:"1em"}},[["mjx-ex-box-test"]]);
234244

245+
//
246+
// Used in preTranslate to get linebreak width
247+
//
248+
this.linebreakSpan = HTML.Element("span",{className:"mjx-line-box-test"});
249+
235250
//
236251
// Set up styles and preload web fonts
237252
//
@@ -260,9 +275,11 @@
260275
// Get the default sizes (need styles in place to do this)
261276
//
262277
document.body.appendChild(this.TestSpan);
278+
document.body.appendChild(this.linebreakSpan);
263279
this.defaultEm = this.getFontSize(this.TestSpan);
264280
this.defaultEx = this.TestSpan.firstChild.offsetHeight/60;
265-
this.defaultWidth = this.TestSpan.offsetWidth;
281+
this.defaultWidth = this.linebreakSpan.offsetWidth;
282+
document.body.removeChild(this.linebreakSpan);
266283
document.body.removeChild(this.TestSpan);
267284
},
268285
getFontSize: (window.getComputedStyle ?
@@ -417,6 +434,7 @@
417434
//
418435
// Add test nodes for determineing scales and linebreak widths
419436
//
437+
script.parentNode.insertBefore(this.linebreakSpan.cloneNode(true),script);
420438
script.parentNode.insertBefore(this.TestSpan.cloneNode(true),script);
421439
}
422440
//
@@ -429,12 +447,10 @@
429447
jax = script.MathJax.elementJax; if (!jax) continue;
430448
em = CHTML.getFontSize(test);
431449
ex = test.firstChild.offsetHeight/60;
432-
if (ex === 0 || ex === "NaN") ex = this.defaultEx
433-
node = test;
434-
while (node) {
435-
cwidth = node.offsetWidth; if (cwidth) break;
436-
cwidth = CHTML.getMaxWidth(node); if (cwidth) break;
437-
node = node.parentNode;
450+
cwidth = Math.max(0,test.previousSibling.offsetWidth-2);
451+
if (ex === 0 || ex === "NaN") {
452+
ex = this.defaultEx;
453+
cwidth = this.defaultWidth;
438454
}
439455
if (relwidth) maxwidth = cwidth;
440456
scale = (this.config.matchFontHeight ? ex/this.TEX.x_height/em : 1);
@@ -450,7 +466,9 @@
450466
for (i = 0; i < m; i++) {
451467
script = scripts[i]; if (!script.parentNode) continue;
452468
test = scripts[i].previousSibling;
469+
span = test.previousSibling;
453470
jax = scripts[i].MathJax.elementJax; if (!jax) continue;
471+
span.parentNode.removeChild(span);
454472
test.parentNode.removeChild(test);
455473
}
456474
state.CHTMLeqn = state.CHTMLlast = 0; state.CHTMLi = -1;
@@ -1720,8 +1738,8 @@
17201738
var alttext = this.Get("alttext");
17211739
if (alttext && !node.getAttribute("aria-label")) node.setAttribute("aria-label",alttext);
17221740
if (this.CHTML.pwidth) {
1723-
node.parentNode.style.width = this.CHTML.pwidth;
17241741
node.parentNode.style.minWidth = this.CHTML.mwidth||CHTML.Em(this.CHTML.w);
1742+
node.parentNode.className += " mjx-full-width";
17251743
} else if (!this.isMultiline && this.Get("display") === "block") {
17261744
var values = this.getValues("indentalignfirst","indentshiftfirst","indentalign","indentshift");
17271745
if (values.indentalignfirst !== MML.INDENTALIGN.INDENTALIGN) values.indentalign = values.indentalignfirst;

‎unpacked/jax/output/HTML-CSS/jax.js

+19-6
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,8 @@
241241

242242
var EVENT, TOUCH, HOVER; // filled in later
243243

244+
var oldIE = MathJax.Hub.Browser.isMSIE && (document.documentMode||0) < 8;
245+
244246
HTMLCSS.Augment({
245247
config: {
246248
styles: {
@@ -278,6 +280,11 @@
278280
"min-width": 0, "min-height": 0,
279281
width: "100%"
280282
},
283+
284+
".MathJax.MathJax_FullWidth": {
285+
display: (oldIE ? "block" : "table-cell") + "!important",
286+
width: (oldIE ? "100%" : "10000em") + "!important"
287+
},
281288

282289
".MathJax img, .MathJax nobr, .MathJax a": {
283290
border: 0, padding: 0, margin: 0,
@@ -331,6 +338,12 @@
331338
width:"1px", height:"60em",
332339
"min-height": 0, "max-height":"none"
333340
},
341+
".MathJax_LineBox": {
342+
display: (oldIE ? "block" : "table-cell") + "!important",
343+
width: (oldIE ? "100%" : "10000em") + "!important",
344+
"min-width":0, "max-width":"none",
345+
padding:0, border:0, margin:0
346+
},
334347

335348
".MathJax .MathJax_HitBox": {
336349
cursor: "text",
@@ -340,7 +353,7 @@
340353
".MathJax .MathJax_HitBox *": {
341354
filter: "none", opacity:1, background:"transparent" // for IE
342355
},
343-
356+
344357
"#MathJax_Tooltip": {
345358
position: "absolute", left: 0, top: 0,
346359
width: "auto", height: "auto",
@@ -482,8 +495,7 @@
482495
);
483496

484497
// Used in preTranslate to get linebreak width
485-
this.linebreakSpan = this.Element("span",null,
486-
[["hr",{style: {width:"100%", size:1, padding:0, border:0, margin:0}}]]);
498+
this.linebreakSpan = MathJax.HTML.Element("span",{className:"MathJax_LineBox"});
487499

488500
// Set up styles and preload web fonts
489501
return AJAX.Styles(this.config.styles,["InitializeHTML",this]);
@@ -539,7 +551,7 @@
539551
document.body.appendChild(this.linebreakSpan);
540552
this.defaultEx = this.EmExSpan.firstChild.offsetHeight/60;
541553
this.defaultEm = this.EmExSpan.lastChild.firstChild.offsetHeight/60;
542-
this.defaultWidth = this.linebreakSpan.firstChild.offsetWidth;
554+
this.defaultWidth = this.linebreakSpan.offsetWidth;
543555
document.body.removeChild(this.linebreakSpan);
544556
document.body.removeChild(this.EmExSpan);
545557
},
@@ -609,7 +621,7 @@
609621
jax = script.MathJax.elementJax; if (!jax) continue;
610622
ex = test.firstChild.offsetHeight/60;
611623
em = test.lastChild.firstChild.offsetHeight/60;
612-
cwidth = div.previousSibling.firstChild.offsetWidth;
624+
cwidth = Math.max(0,div.previousSibling.offsetWidth - 2);
613625
if (relwidth) {maxwidth = cwidth}
614626
if (ex === 0 || ex === "NaN") {
615627
// can't read width, so move to hidden div for processing
@@ -2951,7 +2963,8 @@
29512963
if (math && math.bbox.width != null) {
29522964
span.style.minWidth = (math.bbox.minWidth || span.style.width);
29532965
span.style.width = math.bbox.width;
2954-
box.style.width = stack.style.width = SPAN.style.width = "100%";
2966+
box.style.width = stack.style.width = "100%";
2967+
SPAN.className += " MathJax_FullWidth";
29552968
}
29562969
//
29572970
// Add color (if any)

‎unpacked/jax/output/SVG/jax.js

+20-9
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,12 @@
100100
"min-height": 0, "max-height":"none",
101101
padding:0, border: 0, margin: 0
102102
},
103+
".MathJax_SVG_LineBox": {
104+
display: "table-cell!important",
105+
width: "10000em!important",
106+
"min-width":0, "max-width":"none",
107+
padding:0, border:0, margin:0
108+
},
103109

104110
"#MathJax_SVG_Tooltip": {
105111
position: "absolute", left: 0, top: 0,
@@ -173,8 +179,7 @@
173179
);
174180

175181
// Used in preTranslate to get linebreak width
176-
this.linebreakSpan = HTML.Element("span",null,
177-
[["hr",{style: {width:"auto", size:1, padding:0, border:0, margin:0}}]]);
182+
this.linebreakSpan = HTML.Element("span",{className:"MathJax_SVG_LineBox"});
178183

179184
// Set up styles
180185
return AJAX.Styles(this.config.styles,["InitializeSVG",this]);
@@ -190,7 +195,7 @@
190195
document.body.appendChild(this.ExSpan);
191196
document.body.appendChild(this.linebreakSpan);
192197
this.defaultEx = this.ExSpan.firstChild.offsetHeight/60;
193-
this.defaultWidth = this.linebreakSpan.firstChild.offsetWidth;
198+
this.defaultWidth = this.linebreakSpan.offsetWidth;
194199
document.body.removeChild(this.linebreakSpan);
195200
document.body.removeChild(this.ExSpan);
196201
},
@@ -256,16 +261,15 @@
256261
test = script.previousSibling; div = test.previousSibling;
257262
jax = script.MathJax.elementJax; if (!jax) continue;
258263
ex = test.firstChild.offsetHeight/60;
259-
cwidth = div.previousSibling.firstChild.offsetWidth / this.config.scale * 100;
260-
if (relwidth) {maxwidth = cwidth}
264+
cwidth = Math.max(0,(div.previousSibling.offsetWidth-2) / this.config.scale * 100);
261265
if (ex === 0 || ex === "NaN") {
262266
// can't read width, so move to hidden div for processing
263267
// (this will cause a reflow for each math element that is hidden)
264268
this.hiddenDiv.appendChild(div);
265269
jax.SVG.isHidden = true;
266270
ex = this.defaultEx; cwidth = this.defaultWidth;
267-
if (relwidth) {maxwidth = cwidth}
268271
}
272+
if (relwidth) {maxwidth = cwidth}
269273
jax.SVG.ex = ex;
270274
jax.SVG.em = em = ex / SVG.TeX.x_height * 1000; // scale ex to x_height
271275
jax.SVG.cwidth = cwidth/em * 1000;
@@ -2089,13 +2093,14 @@
20892093
var style = svg.element.style, px = SVG.TeX.x_height/SVG.ex;
20902094
var H = (Math.ceil(svg.H/px)+1)*px+SVG.HFUZZ, // round to pixels and add padding
20912095
D = (Math.ceil(svg.D/px)+1)*px+SVG.DFUZZ;
2092-
svg.element.setAttribute("width",SVG.Ex(l+svg.w+r));
2096+
var w = l + svg.w + r;
2097+
svg.element.setAttribute("width",SVG.Ex(w));
20932098
svg.element.setAttribute("height",SVG.Ex(H+D));
20942099
style.verticalAlign = SVG.Ex(-D);
20952100
if (l) style.marginLeft = SVG.Ex(-l);
20962101
if (r) style.marginRight = SVG.Ex(-r);
20972102
svg.element.setAttribute("viewBox",SVG.Fixed(-l,1)+" "+SVG.Fixed(-H,1)+" "+
2098-
SVG.Fixed(l+svg.w+r,1)+" "+SVG.Fixed(H+D,1));
2103+
SVG.Fixed(w,1)+" "+SVG.Fixed(H+D,1));
20992104
//
21002105
// If there is extra height or depth, hide that
21012106
//
@@ -2105,6 +2110,12 @@
21052110
style.verticalAlign = SVG.Ex(-svg.d);
21062111
}
21072112
//
2113+
// The approximate ex can cause full-width equations to be too wide,
2114+
// so if they are close to full width, make sure they aren't too big.
2115+
//
2116+
if (Math.abs(w-SVG.cwidth) < 10)
2117+
style.maxWidth = SVG.Fixed(SVG.cwidth*SVG.em/1000);
2118+
//
21082119
// Add it to the MathJax span
21092120
//
21102121
var alttext = this.Get("alttext");
@@ -2131,7 +2142,7 @@
21312142
if (shift) {
21322143
HUB.Insert(style,({
21332144
left: {marginLeft: SVG.Ex(shift)},
2134-
right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-(l+svg.w+r)))},
2145+
right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-w))},
21352146
center: {marginLeft: SVG.Ex(shift), marginRight: SVG.Ex(-shift)}
21362147
})[values.indentalign]);
21372148
}

0 commit comments

Comments
 (0)