suzanne.soy/scribble-mathjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1479 from dpvc/issue1478

Browse Source 
Properly determine container widths.  Resolves issue #1478.
This commit is contained in:
Davide P. Cervone 2016-06-08 07:32:15 -04:00
commit abb7084ae9
4 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
unpacked/extensions/HTML-CSS/handle-floats.js
View File

@ -41,42 +41,9 @@ MathJax.Extension["HTML-CSS/handle-floats"] = {
};
//
// Make the display DIV be a table-cell
// Use padding to get the separation, since table cells don't do margin
// Make the width large (it will shrink to fit the remaining room)
// This file is now obsolete, since the HTML-CSS output already handles
// floating elements properly.
//
MathJax.Hub.Config({
"HTML-CSS": {
styles: {
".MathJax_Display": {
display: "table-cell",
padding: "1em 0 ! important",
width: (MathJax.Hub.Browser.isMSIE && (document.documentMode||0) < 8 ? "100%" : "1000em")
}
}
}
});
//
// Two consecutive equations would end up side-by-side, so force a separator
// (Needed by IE8, IE9, and Firefox, at least).
//
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
var HTMLCSS = MathJax.OutputJax["HTML-CSS"],
TRANSLATE = HTMLCSS.Translate;
HTMLCSS.Augment({
Translate: function (script,state) {
TRANSLATE.apply(this,arguments);
if (script.MathJax.elementJax.HTMLCSS.display) {
var next = script.nextSibling;
if (!next || next.className !== "MathJax_MSIE_Separator") {
var span = HTMLCSS.Element("span",{className:"MathJax_MSIE_Separator"});
script.parentNode.insertBefore(span,next);
}
}
}
});
MathJax.Hub.Startup.signal.Post("HTML-CSS handle-floats Ready");
});
MathJax.Hub.Startup.signal.Post("HTML-CSS handle-floats Ready");
MathJax.Ajax.loadComplete("[MathJax]/extensions/HTML-CSS/handle-floats.js");

34
unpacked/jax/output/CommonHTML/jax.js
View File

@ -71,6 +71,10 @@
".mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex]": {
display: "inline-table" // see issues #1282 and #1338
},
".mjx-full-width": {
display: "table-cell",
width: "10000em"
},
".mjx-math": {
"display": "inline-block",
@ -170,6 +174,12 @@
position: "absolute",
width:"1px", height:"60ex"
},
".mjx-line-box-test": {
display: "table-cell!important",
width: "10000em!important",
"min-width":0, "max-width":"none",
padding:0, border:0, margin:0
},
"#MathJax_CHTML_Tooltip": {
"background-color": "InfoBackground", color: "InfoText",
@ -232,6 +242,11 @@
//
this.TestSpan = CHTML.Element("mjx-test",{style:{left:"1em"}},[["mjx-ex-box-test"]]);
//
// Used in preTranslate to get linebreak width
//
this.linebreakSpan = HTML.Element("span",{className:"mjx-line-box-test"});
//
// Set up styles and preload web fonts
//
@ -260,9 +275,11 @@
// Get the default sizes (need styles in place to do this)
//
document.body.appendChild(this.TestSpan);
document.body.appendChild(this.linebreakSpan);
this.defaultEm = this.getFontSize(this.TestSpan);
this.defaultEx = this.TestSpan.firstChild.offsetHeight/60;
this.defaultWidth = this.TestSpan.offsetWidth;
this.defaultWidth = this.linebreakSpan.offsetWidth;
document.body.removeChild(this.linebreakSpan);
document.body.removeChild(this.TestSpan);
},
getFontSize: (window.getComputedStyle ?
@ -417,6 +434,7 @@
//
// Add test nodes for determineing scales and linebreak widths
//
script.parentNode.insertBefore(this.linebreakSpan.cloneNode(true),script);
script.parentNode.insertBefore(this.TestSpan.cloneNode(true),script);
}
//
@ -429,12 +447,10 @@
jax = script.MathJax.elementJax; if (!jax) continue;
em = CHTML.getFontSize(test);
ex = test.firstChild.offsetHeight/60;
if (ex === 0 || ex === "NaN") ex = this.defaultEx
node = test;
while (node) {
cwidth = node.offsetWidth; if (cwidth) break;
cwidth = CHTML.getMaxWidth(node); if (cwidth) break;
node = node.parentNode;
cwidth = Math.max(0,test.previousSibling.offsetWidth-2);
if (ex === 0 || ex === "NaN") {
ex = this.defaultEx;
cwidth = this.defaultWidth;
}
if (relwidth) maxwidth = cwidth;
scale = (this.config.matchFontHeight ? ex/this.TEX.x_height/em : 1);
@ -450,7 +466,9 @@
for (i = 0; i < m; i++) {
script = scripts[i]; if (!script.parentNode) continue;
test = scripts[i].previousSibling;
span = test.previousSibling;
jax = scripts[i].MathJax.elementJax; if (!jax) continue;
span.parentNode.removeChild(span);
test.parentNode.removeChild(test);
}
state.CHTMLeqn = state.CHTMLlast = 0; state.CHTMLi = -1;
@ -1720,8 +1738,8 @@
var alttext = this.Get("alttext");
if (alttext && !node.getAttribute("aria-label")) node.setAttribute("aria-label",alttext);
if (this.CHTML.pwidth) {
node.parentNode.style.width = this.CHTML.pwidth;
node.parentNode.style.minWidth = this.CHTML.mwidth||CHTML.Em(this.CHTML.w);
node.parentNode.className += " mjx-full-width";
} else if (!this.isMultiline && this.Get("display") === "block") {
var values = this.getValues("indentalignfirst","indentshiftfirst","indentalign","indentshift");
if (values.indentalignfirst !== MML.INDENTALIGN.INDENTALIGN) values.indentalign = values.indentalignfirst;

25
unpacked/jax/output/HTML-CSS/jax.js
View File

@ -241,6 +241,8 @@
var EVENT, TOUCH, HOVER; // filled in later
var oldIE = MathJax.Hub.Browser.isMSIE && (document.documentMode||0) < 8;
HTMLCSS.Augment({
config: {
styles: {
@ -278,6 +280,11 @@
"min-width": 0, "min-height": 0,
width: "100%"
},
".MathJax.MathJax_FullWidth": {
display: (oldIE ? "block" : "table-cell") + "!important",
width: (oldIE ? "100%" : "10000em") + "!important"
},
".MathJax img, .MathJax nobr, .MathJax a": {
border: 0, padding: 0, margin: 0,
@ -331,6 +338,12 @@
width:"1px", height:"60em",
"min-height": 0, "max-height":"none"
},
".MathJax_LineBox": {
display: (oldIE ? "block" : "table-cell") + "!important",
width: (oldIE ? "100%" : "10000em") + "!important",
"min-width":0, "max-width":"none",
padding:0, border:0, margin:0
},
".MathJax .MathJax_HitBox": {
cursor: "text",
@ -340,7 +353,7 @@
".MathJax .MathJax_HitBox *": {
filter: "none", opacity:1, background:"transparent" // for IE
},
"#MathJax_Tooltip": {
position: "absolute", left: 0, top: 0,
width: "auto", height: "auto",
@ -482,8 +495,7 @@
);
// Used in preTranslate to get linebreak width
this.linebreakSpan = this.Element("span",null,
[["hr",{style: {width:"100%", size:1, padding:0, border:0, margin:0}}]]);
this.linebreakSpan = MathJax.HTML.Element("span",{className:"MathJax_LineBox"});
// Set up styles and preload web fonts
return AJAX.Styles(this.config.styles,["InitializeHTML",this]);
@ -539,7 +551,7 @@
document.body.appendChild(this.linebreakSpan);
this.defaultEx = this.EmExSpan.firstChild.offsetHeight/60;
this.defaultEm = this.EmExSpan.lastChild.firstChild.offsetHeight/60;
this.defaultWidth = this.linebreakSpan.firstChild.offsetWidth;
this.defaultWidth = this.linebreakSpan.offsetWidth;
document.body.removeChild(this.linebreakSpan);
document.body.removeChild(this.EmExSpan);
},
@ -609,7 +621,7 @@
jax = script.MathJax.elementJax; if (!jax) continue;
ex = test.firstChild.offsetHeight/60;
em = test.lastChild.firstChild.offsetHeight/60;
cwidth = div.previousSibling.firstChild.offsetWidth;
cwidth = Math.max(0,div.previousSibling.offsetWidth - 2);
if (relwidth) {maxwidth = cwidth}
if (ex === 0 || ex === "NaN") {
// can't read width, so move to hidden div for processing
@ -2951,7 +2963,8 @@
if (math && math.bbox.width != null) {
span.style.minWidth = (math.bbox.minWidth || span.style.width);
span.style.width = math.bbox.width;
box.style.width = stack.style.width = SPAN.style.width = "100%";
box.style.width = stack.style.width = "100%";
SPAN.className += " MathJax_FullWidth";
}
//
// Add color (if any)

29
unpacked/jax/output/SVG/jax.js
View File

@ -100,6 +100,12 @@
"min-height": 0, "max-height":"none",
padding:0, border: 0, margin: 0
},
".MathJax_SVG_LineBox": {
display: "table-cell!important",
width: "10000em!important",
"min-width":0, "max-width":"none",
padding:0, border:0, margin:0
},
"#MathJax_SVG_Tooltip": {
position: "absolute", left: 0, top: 0,
@ -173,8 +179,7 @@
);
// Used in preTranslate to get linebreak width
this.linebreakSpan = HTML.Element("span",null,
[["hr",{style: {width:"auto", size:1, padding:0, border:0, margin:0}}]]);
this.linebreakSpan = HTML.Element("span",{className:"MathJax_SVG_LineBox"});
// Set up styles
return AJAX.Styles(this.config.styles,["InitializeSVG",this]);
@ -190,7 +195,7 @@
document.body.appendChild(this.ExSpan);
document.body.appendChild(this.linebreakSpan);
this.defaultEx = this.ExSpan.firstChild.offsetHeight/60;
this.defaultWidth = this.linebreakSpan.firstChild.offsetWidth;
this.defaultWidth = this.linebreakSpan.offsetWidth;
document.body.removeChild(this.linebreakSpan);
document.body.removeChild(this.ExSpan);
},
@ -256,16 +261,15 @@
test = script.previousSibling; div = test.previousSibling;
jax = script.MathJax.elementJax; if (!jax) continue;
ex = test.firstChild.offsetHeight/60;
cwidth = div.previousSibling.firstChild.offsetWidth / this.config.scale * 100;
if (relwidth) {maxwidth = cwidth}
cwidth = Math.max(0,(div.previousSibling.offsetWidth-2) / this.config.scale * 100);
if (ex === 0 || ex === "NaN") {
// can't read width, so move to hidden div for processing
// (this will cause a reflow for each math element that is hidden)
this.hiddenDiv.appendChild(div);
jax.SVG.isHidden = true;
ex = this.defaultEx; cwidth = this.defaultWidth;
if (relwidth) {maxwidth = cwidth}
}
if (relwidth) {maxwidth = cwidth}
jax.SVG.ex = ex;
jax.SVG.em = em = ex / SVG.TeX.x_height * 1000; // scale ex to x_height
jax.SVG.cwidth = cwidth/em * 1000;
@ -2089,13 +2093,14 @@
var style = svg.element.style, px = SVG.TeX.x_height/SVG.ex;
var H = (Math.ceil(svg.H/px)+1)*px+SVG.HFUZZ, // round to pixels and add padding
D = (Math.ceil(svg.D/px)+1)*px+SVG.DFUZZ;
svg.element.setAttribute("width",SVG.Ex(l+svg.w+r));
var w = l + svg.w + r;
svg.element.setAttribute("width",SVG.Ex(w));
svg.element.setAttribute("height",SVG.Ex(H+D));
style.verticalAlign = SVG.Ex(-D);
if (l) style.marginLeft = SVG.Ex(-l);
if (r) style.marginRight = SVG.Ex(-r);
svg.element.setAttribute("viewBox",SVG.Fixed(-l,1)+" "+SVG.Fixed(-H,1)+" "+
SVG.Fixed(l+svg.w+r,1)+" "+SVG.Fixed(H+D,1));
SVG.Fixed(w,1)+" "+SVG.Fixed(H+D,1));
//
// If there is extra height or depth, hide that
//
@ -2105,6 +2110,12 @@
style.verticalAlign = SVG.Ex(-svg.d);
}
//
// The approximate ex can cause full-width equations to be too wide,
// so if they are close to full width, make sure they aren't too big.
//
if (Math.abs(w-SVG.cwidth) < 10)
style.maxWidth = SVG.Fixed(SVG.cwidth*SVG.em/1000);
//
// Add it to the MathJax span
//
var alttext = this.Get("alttext");
@ -2131,7 +2142,7 @@
if (shift) {
HUB.Insert(style,({
left: {marginLeft: SVG.Ex(shift)},
right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-(l+svg.w+r)))},
right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-w))},
center: {marginLeft: SVG.Ex(shift), marginRight: SVG.Ex(-shift)}
})[values.indentalign]);
}