Add support for matching web fonts in HTML-CSS. Change the names of the paramters that control it in NativeMML (so both have the same names). Add a global matchWebFonts option to control whether to do the loop to check for web fonts (off by default). Resolves more of issue #558.

dpvc · dpvc · commit a012354f382e · 2013-09-29T19:44:15.000-04:00
diff --git a/unpacked/MathJax.js b/unpacked/MathJax.js
@@ -1741,6 +1741,10 @@ MathJax.Hub = {
     showMathMenuMSIE: true,  // separtely determine if MSIE should have math menu
                              //  (since the code for that is a bit delicate)
 
+    matchWebFonts: false,    // true means look for web fonts that may cause changes in the
+                             //   scaling factors for the math (off by default since it
+                             //   uses a loop every time math is rendered).
+
     menuSettings: {
       zoom: "None",        //  when to do MathZoom
       CTRL: false,         //    require CTRL for MathZoom?
@@ -1906,6 +1910,7 @@ MathJax.Hub = {
   
   takeAction: function (action,element,callback) {
     var ec = this.elementCallback(element,callback);
+console.log(element);
     var queue = MathJax.Callback.Queue(["Clear",this.signal]);
     for (var i = 0, m = ec.elements.length; i < m; i++) {
       if (ec.elements[i]) {
@@ -2229,6 +2234,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}
diff --git a/unpacked/jax/output/HTML-CSS/config.js b/unpacked/jax/output/HTML-CSS/config.js
@@ -44,6 +44,10 @@ MathJax.OutputJax["HTML-CSS"] = MathJax.OutputJax({
     undefinedFamily: "STIXGeneral,'Arial Unicode MS',serif", // fonts to use for unknown unicode characters
     mtextFontInherit: false,        // to make <mtext> be in page font rather than MathJax font
 
+    fontCheckDelay: 500,            // initial delay for the first check for web fonts
+                                    //  (set to null to prevent the checks)
+    fontCheckTimeout: 15 * 1000,    // how long to keep looking for font changes (15 seconds)
+
     EqnChunk: (MathJax.Hub.Browser.isMobile ? 10: 50),
                                     // number of equations to process before showing them
     EqnChunkFactor: 1.5,            // chunk size is multiplied by this after each chunk
diff --git a/unpacked/jax/output/HTML-CSS/jax.js b/unpacked/jax/output/HTML-CSS/jax.js
@@ -618,15 +618,25 @@
         //
         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 (!partial && HUB.config.matchWebFonts && 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]],
+                         this.config.fontCheckDelay,this.config.fontCheckTimeout);
+        
+      }
       if (!this.hideProcessedMath) return;
       //
       //  Reveal this chunk of math
@@ -651,7 +661,7 @@
       }
       if (this.forceReflow) {
         //  WebKit can misplace some elements that should wrap to the next line
-        //  but gets them right ona reflow, so force reflow by toggling a stylesheet
+        //  but gets them right on a reflow, so force reflow by toggling a stylesheet
         var sheet = (document.styleSheets||[])[0]||{};
         sheet.disabled = true; sheet.disabled = false;
       }
@@ -660,6 +670,57 @@
       //
       state.HTMLCSSlast = state.HTMLCSSeqn;
     },
+    
+    checkFonts: function (check,scripts) {
+      if (check.time(function () {})) return;
+      var size = [], i, m;
+      //
+      //  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");
+        //
+        //  Check if ex or mex has changed
+        //
+        var test = script.previousSibling, div = test.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) {MathJax.Hub.Queue(["Rerender",MathJax.Hub,[size],{}])}
+      //
+      //  Try again later
+      //
+      setTimeout(check,check.delay);
+    },
 
     getJaxFromMath: function (math) {
       if (math.parentNode.className === "MathJax_Display") {math = math.parentNode}
diff --git a/unpacked/jax/output/NativeMML/config.js b/unpacked/jax/output/NativeMML/config.js
@@ -36,9 +36,10 @@ MathJax.OutputJax.NativeMML = MathJax.OutputJax({
     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)
-    widthCheckDelay: 500,    // initial delay for the first width check for web fonts
-                             //  (set to null to prevent the width checks)
-    widthCheckTimeout: 15 * 1000,  // how long to keep looking for width changes (15 seconds)
+
+    fontCheckDelay: 500,          // initial delay for the first width check for web fonts
+                                  //  (set to null to prevent the width checks)
+    fontCheckTimeout: 15 * 1000,  // how long to keep looking for width changes (15 seconds)
 
     styles: {
       "DIV.MathJax_MathML": {
diff --git a/unpacked/jax/output/NativeMML/jax.js b/unpacked/jax/output/NativeMML/jax.js
@@ -327,14 +327,14 @@
     },
 
     postTranslate: function (state) {
-      if (!isMSIE && this.config.widthCheckDelay != null) {
+      if (!isMSIE && HUB.config.matchWebFonts) {
         //
         //  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,["checkWidths",this,state.jax[this.id]],
-                         this.config.widthCheckDelay,this.config.widthCheckTimeout);
+        AJAX.timer.start(AJAX,["checkFonts",this,state.jax[this.id]],
+                         this.config.fontCheckDelay,this.config.fontCheckTimeout);
       }
       if (this.forceReflow) {
         //
@@ -355,36 +355,37 @@
     //  sizes of these have been stored in the NativeMML object of the
     //  element jax so that we can check for them here.
     //
-    checkWidths: function (check,scripts) {
+    checkFonts: function (check,scripts) {
       if (check.time(function () {})) return;
-      var adjust = [], mtd = [], size = [], i, m;
+      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++) {
-        if (!scripts[i].parentNode || !scripts[i].MathJax.elementJax) continue;
-        scripts[i].parentNode.insertBefore(this.EmExSpan.cloneNode(true),scripts[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++) {
-        if (!scripts[i].parentNode) continue;
-        var jax = scripts[i].MathJax.elementJax;
-        if (!jax) continue;
+        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 = scripts[i].previousSibling;
+        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) {
-          scale = (this.config.matchFontHeight && mex > 1 ? ex/mex : 1);
+          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;
@@ -414,8 +415,9 @@
       //  Remove markers
       //
       for (i = 0, m = scripts.length; i < m; i++) {
-        if (scripts[i].parentNode && scripts[i].MathJax.elementJax) {
-          scripts[i].parentNode.removeChild(scripts[i].previousSibling);
+        script = scripts[i];
+        if (script.parentNode && script.MathJax.elementJax) {
+          script.parentNode.removeChild(script.previousSibling);
         }
       }
       //
@@ -438,6 +440,9 @@
         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);
     },
     
