Merge pull request #598 from dpvc/issue558-loop

Improve width computation for MathML elements (issue #558)

unpacked/MathJax.js

@@ -789,7 +789,7 @@ MathJax.fileversion = "2.2";
         check = BASE.Callback(check);
         check.execute = this.execute; check.time = this.time;
         check.STATUS = AJAX.STATUS; check.timeout = timeout || AJAX.timeout;
-        check.delay = check.total = 0;
+        check.delay = check.total = delay || 0;
         if (delay) {setTimeout(check,delay)} else {check()}
       },
       //
@@ -2251,6 +2251,12 @@ MathJax.Hub = {
   },
   
   elementScripts: function (element) {
+    if (element instanceof Array) {
+      var scripts = [];
+      for (var i = 0, m = element.length; i < m; i++)
+        {scripts.push.apply(scripts,this.elementScripts(element[i]))}
+      return scripts;
+    }
     if (typeof(element) === 'string') {element = document.getElementById(element)}
     if (!document.body) {document.body = document.getElementsByTagName("body")[0]}
     if (element == null) {element = document.body}

unpacked/extensions/MatchWebFonts.js

@@ -0,0 +1,309 @@
+/* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+
+/*************************************************************
+ *
+ *  MathJax/extensions/MatchWebFonts.js
+ *  
+ *  Adds code to the output jax so that if web fonts are used on the page,
+ *  MathJax will be able to detect their arrival and update the math to
+ *  accommodate the change in font.  For the NativeMML output, this works
+ *  both for web fonts in main text, and for web fonts in the math as well.
+ *
+ *  ---------------------------------------------------------------------
+ *  
+ *  Copyright (c) 2013 The MathJax Consortium
+ * 
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+(function (HUB,AJAX) {
+  var VERSION = "2.2";
+  
+  var CONFIG = MathJax.Hub.CombineConfig("MatchWebFonts",{
+    matchFor: {
+      "HTML-CSS": true,
+      NativeMML: true,
+      SVG: true
+    },
+    fontCheckDelay: 500,          // initial delay for the first check for web fonts
+    fontCheckTimeout: 15 * 1000,  // how long to keep looking for fonts (15 seconds)
+  });
+  
+  var MATCH = MathJax.Extension.MatchWebFonts = {
+    version: VERSION,
+    config: CONFIG
+  };
+  
+  HUB.Register.StartupHook("HTML-CSS Jax Ready",function () {
+    var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
+    var POSTTRANSLATE = HTMLCSS.postTranslate;
+
+    HTMLCSS.Augment({
+      postTranslate: function (state,partial) {
+        if (!partial && CONFIG.matchFor["HTML-CSS"] && this.config.matchFontHeight) {
+          //
+          //  Check for changes in the web fonts that might affect the font
+          //  size for math elements.  This is a periodic check that goes on
+          //  until a timeout is reached.
+          //
+          AJAX.timer.start(AJAX,["checkFonts",this,state.jax[this.id]],
+                           CONFIG.fontCheckDelay,CONFIG.fontCheckTimeout);
+        }
+        return POSTTRANSLATE.apply(this,arguments); // do the original function
+      },
+      
+      checkFonts: function (check,scripts) {
+        if (check.time(function () {})) return;
+        var size = [], i, m, retry = false;
+        //
+        //  Add the elements used for testing ex and em sizes
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.insertBefore(this.EmExSpan.cloneNode(true),script);
+          }
+        }
+        //
+        //  Check to see if anything has changed
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i]; if (!script.parentNode) continue; retry = true;
+          var jax = script.MathJax.elementJax; if (!jax) continue;
+          var span = document.getElementById(jax.inputID+"-Frame");
+          //
+          //  Check if ex or mex has changed
+          //
+          var test = script.previousSibling;
+          var ex = test.firstChild.offsetHeight/60;
+          var em = test.lastChild.lastChild.offsetHeight/60;
+          if (ex === 0 || ex === "NaN") {ex = this.defaultEx; em = this.defaultEm}
+          if (ex !== jax.HTMLCSS.ex || em !== jax.HTMLCSS.em) {
+            var scale = ex/this.TeX.x_height/em;
+            scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale)*this.config.scale);
+            if (scale/100 !== jax.scale) {size.push(script); scripts[i] = {}}
+          }
+        }
+        //
+        //  Remove markers
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.removeChild(script.previousSibling);
+          }
+        }
+        //
+        //  Rerender the changed items
+        //
+        if (size.length) {HUB.Queue(["Rerender",HUB,[size],{}])}
+        //
+        //  Try again later
+        //
+        if (retry) {setTimeout(check,check.delay)}
+      }
+    });
+  });
+  
+  HUB.Register.StartupHook("SVG Jax Ready",function () {
+    var SVG = MathJax.OutputJax.SVG;
+    var POSTTRANSLATE = SVG.postTranslate;
+
+    SVG.Augment({
+      postTranslate: function (state,partial) {
+        if (!partial && CONFIG.matchFor.SVG) {
+          //
+          //  Check for changes in the web fonts that might affect the font
+          //  size for math elements.  This is a periodic check that goes on
+          //  until a timeout is reached.
+          //
+          AJAX.timer.start(AJAX,["checkFonts",this,state.jax[this.id]],
+                           CONFIG.fontCheckDelay,CONFIG.fontCheckTimeout);
+        }
+        return POSTTRANSLATE.apply(this,arguments); // do the original function
+      },
+      
+      checkFonts: function (check,scripts) {
+        if (check.time(function () {})) return;
+        var size = [], i, m, retry = false;
+        //
+        //  Add the elements used for testing ex and em sizes
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.insertBefore(this.ExSpan.cloneNode(true),script);
+          }
+        }
+        //
+        //  Check to see if anything has changed
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i]; if (!script.parentNode) continue; retry = true;
+          var jax = script.MathJax.elementJax; if (!jax) continue;
+          var span = document.getElementById(jax.inputID+"-Frame");
+          //
+          //  Check if ex or mex has changed
+          //
+          var test = script.previousSibling;
+          var ex = test.firstChild.offsetHeight/60;
+          if (ex === 0 || ex === "NaN") {ex = this.defaultEx; em = this.defaultEm}
+          if (ex !== jax.SVG.ex) {size.push(script); scripts[i] = {}}
+        }
+        //
+        //  Remove markers
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.removeChild(script.previousSibling);
+          }
+        }
+        //
+        //  Rerender the changed items
+        //
+        if (size.length) {HUB.Queue(["Rerender",HUB,[size],{}])}
+        //
+        //  Try again later (if not all the scripts are null)
+        //
+
+        if (retry) setTimeout(check,check.delay);
+      }
+    });
+  });
+ 
+  HUB.Register.StartupHook("NativeMML Jax Ready",function () {
+    var nMML = MathJax.OutputJax.NativeMML;
+    var POSTTRANSLATE = nMML.postTranslate;
+    
+    nMML.Augment({
+      postTranslate: function (state) {
+        if (!HUB.Browser.isMSIE && CONFIG.matchFor.NativeMML) {
+          //
+          //  Check for changes in the web fonts that might affect the sizes
+          //  of math elements.  This is a periodic check that goes on until
+          //  a timeout is reached.
+          //
+          AJAX.timer.start(AJAX,["checkFonts",this,state.jax[this.id]],
+                           CONFIG.fontCheckDelay,CONFIG.fontCheckTimeout);
+        }
+        POSTTRANSLATE.apply(this,arguments); // do the original routine
+      },
+      
+      //
+      //  Check to see if web fonts have been loaded that change the ex size
+      //  of the surrounding font, the ex size within the math, or the widths
+      //  of math elements.  We do this by rechecking the ex and mex sizes
+      //  (to see if the font scaling needs adjusting) and by checking the
+      //  size of the inner mrow of math elements and mtd elements.  The
+      //  sizes of these have been stored in the NativeMML object of the
+      //  element jax so that we can check for them here.
+      //
+      checkFonts: function (check,scripts) {
+        if (check.time(function () {})) return;
+        var adjust = [], mtd = [], size = [], i, m, script;
+        //
+        //  Add the elements used for testing ex and em sizes
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.insertBefore(this.EmExSpan.cloneNode(true),script);
+          }
+        }
+        //
+        //  Check to see if anything has changed
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i]; if (!script.parentNode) continue;
+          var jax = script.MathJax.elementJax; if (!jax) continue;
+          var span = document.getElementById(jax.inputID+"-Frame");
+          var math = span.getElementsByTagName("math")[0]; if (!math) continue;
+          jax = jax.NativeMML;
+          //
+          //  Check if ex or mex has changed
+          //
+          var test = script.previousSibling;
+          var ex = test.firstChild.offsetWidth/60;
+          var mex = test.lastChild.offsetWidth/60;
+          if (ex === 0 || ex === "NaN") {ex = this.defaultEx; mex = this.defaultMEx}
+          var newEx = (ex !== jax.ex);
+          if (newEx || mex != jax.mex) {
+            var scale = (this.config.matchFontHeight && mex > 1 ? ex/mex : 1);
+            scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale) * this.config.scale);
+            if (scale/100 !== jax.scale) {size.push([span.style,scale])}
+            jax.scale = scale/100; jax.fontScale = scale+"%"; jax.ex = ex; jax.mex = mex;
+          }
+          
+          //
+          //  Check width of math elements
+          //
+          if ("scrollWidth" in jax && (newEx || jax.scrollWidth !== math.firstChild.scrollWidth)) {
+            jax.scrollWidth = math.firstChild.scrollWidth;
+            adjust.push([math.parentNode.style,jax.scrollWidth/jax.ex/jax.scale]);
+          }
+          //
+          //  Check widths of mtd elements
+          //
+          if (math.MathJaxMtds) {
+            for (j = 0, n = math.MathJaxMtds.length; j < n; j++) {
+              if (!math.MathJaxMtds[j].parentNode) continue;
+              if (newEx || math.MathJaxMtds[j].firstChild.scrollWidth !== jax.mtds[j]) {
+                jax.mtds[j] = math.MathJaxMtds[j].firstChild.scrollWidth;
+                mtd.push([math.MathJaxMtds[j],jax.mtds[j]/jax.ex]);
+              }
+            }
+          }
+        }
+        //
+        //  Remove markers
+        //
+        for (i = 0, m = scripts.length; i < m; i++) {
+          script = scripts[i];
+          if (script.parentNode && script.MathJax.elementJax) {
+            script.parentNode.removeChild(script.previousSibling);
+          }
+        }
+        //
+        //  Adjust scaling factor
+        //
+        for (i = 0, m = size.length; i < m; i++) {
+          size[i][0].fontSize = size[i][1] + "%";
+        }
+        //
+        //  Adjust width of spans containing math elements that have changed
+        //
+        for (i = 0, m = adjust.length; i < m; i++) {
+          adjust[i][0].width = adjust[i][1].toFixed(3)+"ex";
+        }
+        //
+        //  Adjust widths of mtd elements that have changed
+        //
+        for (i = 0, m = mtd.length; i < m; i++) {
+          var style = mtd[i][0].getAttribute("style");
+          style = style.replace(/(($|;)\s*min-width:).*?ex/,"$1 "+mtd[i][1].toFixed(3)+"ex");
+          mtd[i][0].setAttribute("style",style);
+        }
+        //
+        //  Try again later
+        //
+        setTimeout(check,check.delay);
+      }
+    });
+  });
+  
+  HUB.Startup.signal.Post("MathWebFont Extension Ready");
+  AJAX.loadComplete("[MathJax]/extensions/MatchWebFonts.js");
+
+})(MathJax.Hub,MathJax.Ajax);

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

@@ -35,6 +35,7 @@ MathJax.OutputJax["HTML-CSS"] = MathJax.OutputJax({
   webfontDir: MathJax.OutputJax.fontDir + "/HTML-CSS",      // font name added later
   
   config: {
+    matchFontHeight: true,          // try to match math font height to surrounding font?
     scale: 100, minScaleAdjust: 50, // global math scaling factor, and minimum adjusted scale factor
     availableFonts: ["STIX","TeX"], // list of local fonts to check for
     preferredFont: "TeX",           // preferred local font (TeX or STIX)

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

@@ -534,7 +534,8 @@
           ex = this.defaultEx; em = this.defaultEm;
           if (relwidth) {maxwidth = this.defaultWidth}
         }
-        scale = Math.floor(Math.max(this.config.minScaleAdjust/100,(ex/this.TeX.x_height)/em) * this.config.scale);
+        scale = (this.config.matchFontHeight ? ex/this.TeX.x_height/em : 1);
+        scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale)*this.config.scale);
         jax.HTMLCSS.scale = scale/100; jax.HTMLCSS.fontSize = scale+"%";
         jax.HTMLCSS.em = jax.HTMLCSS.outerEm = em; this.em = em * scale/100; jax.HTMLCSS.ex = ex;
         jax.HTMLCSS.lineWidth = (linebreak ? this.length2em(width,1,maxwidth/this.em) : 1000000);
@@ -584,7 +585,7 @@
       this.em = MML.mbase.prototype.em = jax.HTMLCSS.em * jax.HTMLCSS.scale; 
       this.outerEm = jax.HTMLCSS.em; this.scale = jax.HTMLCSS.scale;
       this.linebreakWidth = jax.HTMLCSS.lineWidth;
-      span.style.fontSize = jax.HTMLCSS.fontSize;
+      if (this.scale !== 1) {span.style.fontSize = jax.HTMLCSS.fontSize}
       //
       //  Typeset the math
       //
@@ -617,14 +618,14 @@
         //
         state.HTMLCSSeqn += (state.i - state.HTMLCSSi); state.HTMLCSSi = state.i;
         if (state.HTMLCSSeqn >= state.HTMLCSSlast + state.HTMLCSSchunk) {
-          this.postTranslate(state);
+          this.postTranslate(state,true);
           state.HTMLCSSchunk = Math.floor(state.HTMLCSSchunk*this.config.EqnChunkFactor);
           state.HTMLCSSdelay = true;  // delay if there are more scripts
         }
       }
     },
 
-    postTranslate: function (state) {
+    postTranslate: function (state,partial) {
       var scripts = state.jax[this.id];
       if (!this.hideProcessedMath) return;
       //

unpacked/jax/output/NativeMML/config.js

@@ -32,9 +32,11 @@ MathJax.OutputJax.NativeMML = MathJax.OutputJax({
   extensionDir: MathJax.OutputJax.extensionDir + "/NativeMML",
   
   config: {
+    matchFontHeight: true,   // try to match math font height to surrounding font?
     scale: 100,              // scaling factor for all math
     minScaleAdjust: 50,      // minimum scaling to adjust to surrounding text
                              //  (since the code for that is a bit delicate)
+
     styles: {
       "DIV.MathJax_MathML": {
         "text-align": "center",

unpacked/jax/output/NativeMML/jax.js

@@ -120,7 +120,8 @@
       }
     },
     settings: HUB.config.menuSettings,
-    ex: 1, // filled in later
+    ex: 1, scale: 1,  // filled in later
+    adjustWidths: [], // array of elements to have their widths adjusted
     
     Config: function () {
       this.SUPER(arguments).Config.call(this);
@@ -252,24 +253,26 @@
         script = scripts[i]; if (!script.parentNode) continue;
         jax = script.MathJax.elementJax; if (!jax) continue;
         if (!isMSIE) {
-          test = script.previousSibling; span = test.previousSibling;
+          test = script.previousSibling;
           ex = test.firstChild.offsetWidth/60;
           mex = test.lastChild.offsetWidth/60;
           if (ex === 0 || ex === "NaN") {ex = this.defaultEx; mex = this.defaultMEx}
-          scale = (mex > 1 ? ex/mex : 1) * this.config.scale;
+          scale = (this.config.matchFontHeight && mex > 1 ? ex/mex : 1);
-          scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale));
+          scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale) * this.config.scale);
-          jax.NativeMML.ex = ex;
+          jax.NativeMML.ex = ex; jax.NativeMML.mex = mex;
         } else {scale = 100}
         jax.NativeMML.fontSize = scale+"%";
+        jax.NativeMML.scale = scale/100;
       }
       //
       //  Remove the test spans used for determining scales
       //
       if (!isMSIE) {
         for (i = 0; i < m; i++) {
-          script = scripts[i]; if (!script.parentNode || !script.MathJax.elementJax) continue;
+          script = scripts[i];
-          test = scripts[i].previousSibling;
+          if (script.parentNode && script.MathJax.elementJax) {
-          test.parentNode.removeChild(test);
+            script.parentNode.removeChild(script.previousSibling);
+          }
         }
       }
     },
@@ -285,8 +288,9 @@
       var jax = script.MathJax.elementJax, math = jax.root;
       var span = document.getElementById(jax.inputID+"-Frame"),
 	  container = span.firstChild, mspan = container.firstChild;
-      span.style.fontSize = jax.NativeMML.fontSize;
       this.ex = jax.NativeMML.ex || this.defaultEx;
+      this.scale = jax.NativeMML.scale || 1;
+      if (this.scale !== 1) {span.style.fontSize = jax.NativeMML.fontSize}
       //
       //  Convert to MathML (if restarted, remove any partial math)
       //
@@ -608,7 +612,7 @@
     });
 
     if (!isMSIE) {
-      var SPLIT = MathJax.Hub.SplitList;
+      var SPLIT = HUB.SplitList;
       MML.mtable.Augment({
         toNativeMML: function (parent) {
           var i, m;
@@ -820,7 +824,10 @@
         toNativeMML: function (parent) {
           var tag = parent.appendChild(this.NativeMMLelement(this.type));
           this.NativeMMLattributes(tag);
-          if (nMML.widthBug) {tag = tag.appendChild(this.NativeMMLelement("mrow"))}
+          if (nMML.mtdWidthBug) {
+            nMML.adjustWidths.push(tag);
+            tag = tag.appendChild(this.NativeMMLelement("mrow"));
+          }
           for (var i = 0, m = this.data.length; i < m; i++) {
             if (this.data[i]) {this.data[i].toNativeMML(tag)}
              else {tag.appendChild(this.NativeMMLelement("mrow"))}
@@ -834,14 +841,13 @@
           if (nMML.spaceWidthBug && this.width) {
             var mspace = parent.lastChild;
             var width = mspace.getAttribute("width");
-            var style = mspace.getAttribute("style") || "";
+            var style = (mspace.getAttribute("style") || "").replace(/;?\s*/,"; ");
-            if (style != "") {style += ";"}
             mspace.setAttribute("style",style+"width:"+width);
           }
         }
       });
 
-      var fontDir = MathJax.Ajax.fileURL(MathJax.OutputJax.fontDir+"/HTML-CSS/TeX/otf");
+      var fontDir = AJAX.fileURL(MathJax.OutputJax.fontDir+"/HTML-CSS/TeX/otf");
 
       /*
        *  Add fix for mathvariant issues in FF
@@ -895,7 +901,8 @@
     
     MML.math.Augment({
       toNativeMML: function (parent) {
-        var tag = this.NativeMMLelement(this.type), math = tag;
+        var tag = this.NativeMMLelement(this.type), math = tag, jax;
+        nMML.adjustWidths = [];
         //
         //  Some browsers don't seem to add the xmlns attribute, so do it by hand.
         //
@@ -942,12 +949,43 @@
         //  parent element to match.  Even if we set the <math> width properly,
         //  it doesn't seem to propagate up to the <span> correctly.
         //
-        if (nMML.widthBug && !mtable.nMMLforceWidth && mtable.nMMLlaMatch) {
+        if (nMML.widthBug &&
+            !(mtable.nMMLhasLabels && (mtable.nMMLforceWidth || !mtable.nMMLlaMatch))) {
           //
           //  Convert size to ex's so that it scales properly if the print media
           //    has a different font size.
           //
-          parent.style.width = (math.firstChild.scrollWidth/nMML.ex).toFixed(3) + "ex";
+          parent.style.width = (math.firstChild.scrollWidth/nMML.ex/nMML.scale).toFixed(3) + "ex";
+          //
+          //  Save size for later when we check if Web fonts have arrived
+          //
+          jax = HUB.getJaxFor(parent);
+          if (jax) {jax.NativeMML.scrollWidth = math.firstChild.scrollWidth}
+        }
+        if (nMML.adjustWidths.length) {
+          //
+          //  Firefox gets the widths of <mtd> elements wrong, so run
+          //  through them (now that the math is part of the page) and
+          //  fix them up.  Use ex's so that they print properly (see above).
+          //
+          var mtd = [];
+          for (var i = 0, m = nMML.adjustWidths.length; i < m; i++) {
+            var tag = nMML.adjustWidths[i];
+            var style = tag.getAttribute("style") || "";
+            if (!style.match(/(^|;)\s*min-width:/)) {
+              mtd.push(tag.scrollWidth);
+              var width = (tag.scrollWidth/nMML.ex).toFixed(3)+"ex";
+              style = style.replace(/;?\s*$/,"; ");
+              tag.setAttribute("style",style+"min-width:"+width);
+            }
+          }
+          //
+          //  Save the lists so that we can check them later for web font downloads
+          //
+          if (!jax) {jax = HUB.getJaxFor(parent)}
+          if (jax) {jax.NativeMML.mtds = mtd}
+          math.MathJaxMtds = nMML.adjustWidths;
+          nMML.adjustWidths = []; // clear it so we don't hold onto the DOM elements
         }
       }
     });
@@ -1271,6 +1309,8 @@
       // correctly and thus the element is displayed incorrectly in <mtable>.
       nMML.spaceWidthBug = !browser.versionAtLeast("20.0");
 
+      nMML.mtdWidthBug = true;     // <mtd> widths not properly determined
+
       nMML.tableSpacingBug = true; // mtable@rowspacing/mtable@columnspacing not
                                    // supported.
       nMML.tableLabelBug = true;   // mlabeledtr is not implemented.

unpacked/jax/output/SVG/jax.js

@@ -319,14 +319,14 @@
         //
         state.SVGeqn += (state.i - state.SVGi); state.SVGi = state.i;
         if (state.SVGeqn >= state.SVGlast + state.SVGchunk) {
-          this.postTranslate(state);
+          this.postTranslate(state,true);
           state.SVGchunk = Math.floor(state.SVGchunk*this.config.EqnChunkFactor);
           state.SVGdelay = true;  // delay if there are more scripts
         }
       }
     },
 
-    postTranslate: function (state) {
+    postTranslate: function (state,partial) {
       var scripts = state.jax[this.id];
       if (!this.hideProcessedMath) return;
       //