Break HTML-CSS output into phases so that the final measurement can be done all at once. Restores timing improvements that were lost due to a change made in the testing for v2.5.

unpacked/MathJax.js

@@ -2273,15 +2273,23 @@ MathJax.Hub = {
         var jax = script.MathJax.elementJax; if (!jax) {state.i++; continue}
         //
         //  Call the output Jax's Process method (which will be its Translate()
-        //  method once loaded).  Mark it as complete and remove the preview.
+        //  method once loaded).  Mark it as complete and remove the preview unless
+        //  the Process() call returns an explicit false value (in which case, it will
+        //  handle this later during the postProcess phase, as HTML-CSS does).
         //
         result = MathJax.OutputJax[jax.outputJax].Process(script,state);
-        script.MathJax.state = STATE.PROCESSED; state.i++;
+        if (result !== false) {
+          script.MathJax.state = STATE.PROCESSED;
           if (script.MathJax.preview) {script.MathJax.preview.innerHTML = ""}
           //
           //  Signal that new math is available
           //
           this.signal.Post(["New Math",jax.inputID]); // FIXME: wait for this?  (i.e., restart if returns uncalled callback)
+        }
+        //
+        //  Go on to next math expression
+        //
+        state.i++;
         //
         //  Update the processing message, if needed
         //

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

@@ -176,7 +176,6 @@
     loadWebFont: function (font) {
       HUB.Startup.signal.Post("HTML-CSS Jax - Web-Font "+HTMLCSS.fontInUse+"/"+font.directory);
       var n = MESSAGE(["LoadWebFont","Loading web-font %1",HTMLCSS.fontInUse+"/"+font.directory]);
-      if (HTMLCSS.noReflows) return;
       var done = MathJax.Callback({}); // called when font is loaded
       var callback = MathJax.Callback(["loadComplete",this,font,n,done]);
       AJAX.timer.start(AJAX,[this.checkWebFont,font,callback],0,this.timeout);
@@ -358,8 +357,6 @@
     },
     settings: HUB.config.menuSettings,
 
-    hideProcessedMath: true,           // use display:none until all math is processed
-
     Font: null,                        // created by Config() below
     webFontDefault: "MathJax_Blank",
     allowWebFonts: "otf",              // assume browser can use OTF web fonts
@@ -637,6 +634,8 @@
       state.HTMLCSSdelay = false;
     },
 
+    PHASE: {I: 1, II: 2, III: 3},  // processing phases
+  
     Translate: function (script,state) {
       if (!script.parentNode) return;
 
@@ -658,10 +657,7 @@
       //
       //  Set the font metrics
       //
-      this.em = MML.mbase.prototype.em = jax.HTMLCSS.em * jax.HTMLCSS.scale; 
+      this.getMetrics(jax);
-      this.outerEm = jax.HTMLCSS.em; this.scale = jax.HTMLCSS.scale;
-      this.cwidth = jax.HTMLCSS.cwidth;
-      this.linebreakWidth = jax.HTMLCSS.lineWidth;
       if (this.scale !== 1) {span.style.fontSize = jax.HTMLCSS.fontSize}
       //
       //  Typeset the math
@@ -671,7 +667,8 @@
       this.savePreview(script);
       try {
         math.setTeXclass();
-        math.toHTML(span,div);
+        jax.HTMLCSS.span = span; jax.HTMLCSS.div = div;  // save for phase II and III
+        math.toHTML(span,div,this.PHASE.I);
       } catch (err) {
         if (err.restart) {while (span.firstChild) {span.removeChild(span.firstChild)}}
         this.restorePreview(script);
@@ -679,22 +676,11 @@
       }
       this.restorePreview(script);
       //
-      //  Put it in place, and remove the processing marker
+      //  Put it in place, remove the processing marker, and signal the new math
       //
       if (jax.HTMLCSS.isHidden) {script.parentNode.insertBefore(div,script)}
-      div.className = div.className.split(/ /)[0];
+      div.className = div.className.split(/ /)[0] + " MathJax_Processed";
-      //
+      HUB.signal.Post(["New Math Pending",jax.inputID]); // FIXME: wait for this?  (i.e., restart if returns uncalled callback)
-      //  Check if we are hiding the math until more is processed
-      //
-      if (this.hideProcessedMath) {
-        //
-        //  Hide the math and don't let its preview be removed
-        //
-        div.className += " MathJax_Processed";
-        if (script.MathJax.preview) {
-          jax.HTMLCSS.preview = script.MathJax.preview;
-          delete script.MathJax.preview;
-        }
       //
       //  Check if we should show this chunk of equations
       //
@@ -704,7 +690,7 @@
         state.HTMLCSSchunk = Math.floor(state.HTMLCSSchunk*this.config.EqnChunkFactor);
         state.HTMLCSSdelay = true;  // delay if there are more scripts
       }
-      }
+      return false;
     },
     //
     //  MathML previews can contain the same ID's as the HTML output,
@@ -725,16 +711,47 @@
         delete script.MathJax.tmpPreview;
       }
     },
+    //
+    //  Get the jax metric information
+    //
+    getMetrics: function(jax) {
+      var data = jax.HTMLCSS;
+      this.em = MML.mbase.prototype.em = data.em * data.scale; 
+      this.outerEm = data.em;
+      this.scale = data.scale;
+      this.cwidth = data.cwidth;
+      this.linebreakWidth = data.lineWidth;
+    },
 
     postTranslate: function (state,partial) {
-      var scripts = state.jax[this.id];
+      var scripts = state.jax[this.id], script, jax, i, m;
-      if (!this.hideProcessedMath) return;
+      //
+      //  Merasure the math in this chunk (toHTML phase II)
+      //
+      for (i = state.HTMLCSSlast, m = state.HTMLCSSeqn; i < m; i++) {
+        script = scripts[i];
+        if (script && script.MathJax.elementJax) {
+          jax = script.MathJax.elementJax; this.getMetrics(jax);
+          jax.root.toHTML(jax.HTMLCSS.span,jax.HTMLCSS.div,this.PHASE.II);
+        }
+      }
       //
       //  Reveal this chunk of math
       //
-      for (var i = state.HTMLCSSlast, m = state.HTMLCSSeqn; i < m; i++) {
+      for (i = state.HTMLCSSlast, m = state.HTMLCSSeqn; i < m; i++) {
         var script = scripts[i];
         if (script && script.MathJax.elementJax) {
+          //
+          //  Finish the math with its measured size (toHTML phase III)
+          //
+          jax = script.MathJax.elementJax; this.getMetrics(jax);
+          jax.root.toHTML(jax.HTMLCSS.span,jax.HTMLCSS.div,this.PHASE.III);
+          delete jax.HTMLCSS.span; delete jax.HTMLCSS.div;
+          //
+          //  The math is now fully processed
+          //
+          script.MathJax.state = jax.STATE.PROCESSED;
+          HUB.signal.Post(["New Math",script.MathJax.elementJax.inputID]); // FIXME: wait for this?  (i.e., restart if returns uncalled callback)
           //
           //  Remove the processed marker
           //
@@ -743,11 +760,7 @@
           //
           //  Remove the preview, if any
           //
-          if (data.preview) {
+          if (script.MathJax.preview) {script.MathJax.preview.innerHTML = ""}
-            data.preview.innerHTML = "";
-            script.MathJax.preview = data.preview;
-            delete data.preview;
-          }
         }
       }
       if (this.forceReflow) {
@@ -1113,8 +1126,7 @@
                 width:0, height:H, verticalAlign:D},
         bbox: {h:h, d:d, w:w, rw:w, lw:0, exactW:true}, noAdjust:true, HH:h+d, isMathJax:true
       });
-      // ### FIXME:  figure out which IE has this bug and make a flag for it
+      if (this.msieRuleBug && w > 0) {rule.style.width = this.Em(w)}
-      if (w > 0 && !this.noReflows && rule.offsetWidth == 0) {rule.style.width = this.Em(w)}
       if (span.isBox || span.className == "mspace") {span.bbox = rule.bbox, span.HH = h+d}
       return rule;
     },
@@ -2820,14 +2832,20 @@
     MML.annotation.Augment({toHTML: function (span) {return this.HTMLcreateSpan(span)}});
     
     MML.math.Augment({
-      toHTML: function (span,node) {
+      toHTML: function (span,node,phase) {
+        var stack, box, html, math;
+        //
+        //  Phase I lays out the math, but doesn't measure the final math yet
+        //  (that is done for a chunk at a time, to avoid reflows)
+        //
+        if (!phase || phase === HTMLCSS.PHASE.I) {
           var nobr = HTMLCSS.addElement(span,"nobr",{isMathJax: true});
           span = this.HTMLcreateSpan(nobr);
           var alttext = this.Get("alttext");
           if (alttext && !span.getAttribute("aria-label")) span.setAttribute("aria-label",alttext);
           if (!span.getAttribute("role")) span.setAttribute("role","math");
 //        span.setAttribute("tabindex",0);  // causes focus outline, so disable for now
-	var stack = HTMLCSS.createStack(span), box = HTMLCSS.createBox(stack), math;
+	  stack = HTMLCSS.createStack(span); box = HTMLCSS.createBox(stack);
           // Move font-size from outer span to stack to avoid line separation 
           // problem in strict HTML mode
           stack.style.fontSize = nobr.parentNode.style.fontSize; nobr.parentNode.style.fontSize = "";
@@ -2840,9 +2858,24 @@
             MML.mbase.prototype.displayIndent = HUB.config.displayIndent;
             if (String(HUB.config.displayIndent).match(/^0($|[a-z%])/i))
               MML.mbase.prototype.displayIndent = "0";
-          var html = this.data[0].toHTML(box); html.bbox.exactW = false; // force remeasure just to be sure
+            html = this.data[0].toHTML(box); html.bbox.exactW = true; // force remeasure just to be sure
-	  math = HTMLCSS.Measured(html,box);
 	  }
+        } else {
+          span = span.firstChild.firstChild;
+          if (this.href) span = span.firstChild;
+          stack = span.firstChild;
+          if (stack.style.position !== "relative") stack = stack.nextSibling;
+          box = stack.firstChild;
+          html = box.firstChild;
+        }
+        //
+        //  Phase II measures the math (this is done for each one in the chunk at once)
+        //
+        math = ((!phase || phase === HTMLCSS.PHASE.II) ? HTMLCSS.Measured(html,box) : html);
+        //
+        //  Phase III finishes the layout using the measured math
+        //
+        if (!phase || phase === HTMLCSS.PHASE.III) {
           HTMLCSS.placeBox(box,0,0);
           //
           //  Get width right if minimum font size is set:
@@ -2907,6 +2940,7 @@
               }
             }
           }
+        }
 	return span;
       },
       HTMLspanElement: MML.mbase.prototype.HTMLspanElement
@@ -2988,6 +3022,7 @@
           msiePlaceBoxBug: (isIE8 && !quirks),
           msieClipRectBug: !isIE8,
           msieNegativeSpaceBug: quirks,
+          msieRuleBug: (mode < 7),           // rules need to be measured
           cloneNodeBug: (isIE8 && browser.version === "8.0"),
           msieItalicWidthBug: true,          // can't measure boxes ending in italics correctly
           initialSkipBug: (mode < 8),        // confused by initial left-margin values