mathjax-rails 2.3.0 → 2.5.1

data/vendor/mathjax/unpacked/jax/output/HTML-CSS/jax.js

@@ -11,7 +11,7 @@
  *  
  *  ---------------------------------------------------------------------
  *  
- *  Copyright (c) 2009-2013 The MathJax Consortium
+ *  Copyright (c) 2009-2015 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.
@@ -26,7 +26,6 @@
  *  limitations under the License.
  */
 
-
 (function (AJAX,HUB,HTMLCSS) {
   var MML, isMobile = HUB.Browser.isMobile;
 
@@ -38,43 +37,56 @@
    
   var FONTTEST = MathJax.Object.Subclass({
     timeout:  (isMobile? 15:8)*1000,   // timeout for loading web fonts
-
-    FontInfo: {
-      STIX: {family: "STIXSizeOneSym", testString: "() {} []"},
-      TeX:  {family: "MathJax_Size1",  testString: "() {} []"},
-      "STIX-Web":  {family: "STIXWeb_Size1",  testString: "() {} []"},
-      "Asana-Math":  {family: "AsanaMath_Size1",  testString: "() {} []"},
-      "Gyre-Pagella":  {family: "GyrePagella_Size1",  testString: "() {} []"},
-      "Gyre-Termes":  {family: "GyreTermes_Size1",  testString: "() {} []"},
-      "Latin-Modern":  {family: "LatinModern_Size1",  testString: "() {} []"},
-      "Neo-Euler":  {family: "NeoEuler_Size1",  testString: "() {} []"}
-    },
     comparisonFont: ["sans-serif","monospace","script","Times","Courier","Arial","Helvetica"],
     testSize: ["40px","50px","60px","30px","20px"],
+    //
+    //  Fedora aliases STIXSizeOneSym to STIX Word, so MathJax thinks STIX is
+    //  available, but the fonts aren't actually correct.  This is to test if
+    //  STIXSizeOneSym has letters in it (so is actually STIX Word).
+    //  
+    FedoraSTIXcheck: {family:"STIXSizeOneSym", testString:"abcABC", noStyleChar:true},
 
     Init: function () {
-      this.div = MathJax.HTML.addElement(document.body,"div",{
-        id: "MathJax_Font_Test",
-        style: {position:"absolute", visibility:"hidden", top:0, left:0, width: "auto",
-                padding:0, border:0, margin:0, whiteSpace:"nowrap",
-                textAlign:"left", textIndent:0, textTransform:"none",
-                lineHeight:"normal", letterSpacing:"normal", wordSpacing:"normal",
-                fontSize:this.testSize[0], fontWeight:"normal", fontStyle:"normal",
-                fontSizeAdjust:"none"}
-      },[""]);
+      //
+      //  Wrap the Font_Test DIV in a 0x0 DIV so that it takes no room
+      //
+      this.div = MathJax.HTML.addElement(document.body,"div",{style: {
+          position:"absolute", width:0, height:0, overflow:"hidden",
+          padding:0, border:0, margin:0
+        }},[["div",{
+          id: "MathJax_Font_Test",
+          style: {position:"absolute", visibility:"hidden", top:0, left:0, width: "auto",
+                  padding:0, border:0, margin:0, whiteSpace:"nowrap",
+                  textAlign:"left", textIndent:0, textTransform:"none",
+                  lineHeight:"normal", letterSpacing:"normal", wordSpacing:"normal",
+                  fontSize:this.testSize[0], fontWeight:"normal", fontStyle:"normal",
+                  fontSizeAdjust:"none"}
+          },[""]]]
+      ).firstChild;
       this.text = this.div.firstChild;
     },
 
     findFont: function (fonts,pref) {
-      if (pref && this.testCollection(pref)) {return pref}
-      for (var i = 0, m = fonts.length; i < m; i++) {
-        if (fonts[i] === pref) continue;
-        if (this.testCollection(fonts[i])) {return fonts[i]}
+      var found = null;
+      if (pref && this.testCollection(pref)) {
+        found = pref;
+      } else {
+        for (var i = 0, m = fonts.length; i < m; i++) {
+          if (fonts[i] === pref) continue;
+          if (this.testCollection(fonts[i])) {found = fonts[i]; break}
+        }
       }
-      return null;
+      if (found === "STIX" && this.testFont(this.FedoraSTIXcheck)) {found = null}
+      return found;
     },
 
-    testCollection: function (name) {return this.testFont(this.FontInfo[name])},
+    testCollection: function (name) {
+      var font = {testString: "() {} []"};
+      font.family = {TeX:"MathJax_Size1", STIX:"STIXSizeOneSym"}[name] ||
+                     name.replace(/-(Math)?/,"")+"MathJax_Size1";
+      if (name === "STIX") {font.noStyleChar = true}
+      return this.testFont(font);
+    },
 
     testFont: function (font) {
       if (font.isWebFont && HTMLCSS.FontFaceBug) {
@@ -83,20 +95,39 @@
         this.div.style.fontWeight = (font.weight||"normal");
         this.div.style.fontStyle  = (font.style||"normal");
       }
+      //
+      //  Hack:  Fix up web font names for local access.
+      //  (The names for Windows and Mac are different, unlike in the STIX and
+      //  TeX fonts, so we have to work out a list of names here.)
+      //
+      //  This should be removed when the web fonts are fixed.  FIXME
+      //
+      var family = font.familyFixed || font.family;
+      if (!family.match(/^(STIX|MathJax)|'/)) {
+        family = family.replace(/_/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/ Jax/,"Jax")
+               + "','" + family + "','" + family + "-";
+        if (font.weight) {family += "Bold"}; if (font.style) {family += "Italic"}
+        if (!font.weight && !font.style) {family += "Regular"}
+        font.familyFixed = family = "'"+family+"'"
+      }
+
       var W = this.getComparisonWidths(font.testString,font.noStyleChar);
+      var found = null;
       if (W) {
-        this.div.style.fontFamily = "'"+font.family+"',"+this.comparisonFont[0];
+        this.div.style.fontFamily = family+","+this.comparisonFont[0];
         if (this.div.offsetWidth == W[0]) {
-          this.div.style.fontFamily = "'"+font.family+"',"+this.comparisonFont[W[2]];
-          if (this.div.offsetWidth == W[1]) {return false}
+          this.div.style.fontFamily = family+","+this.comparisonFont[W[2]];
+          if (this.div.offsetWidth == W[1]) {found = false}
         }
-        if (this.div.offsetWidth != W[3] || this.div.offsetHeight != W[4]) {
-          if (font.noStyleChar || !HTMLCSS.FONTDATA || !HTMLCSS.FONTDATA.hasStyleChar) {return true}
-          for (var i = 0, m = this.testSize.length; i < m; i++)
-            {if (this.testStyleChar(font,this.testSize[i])) {return true}}
+        if (found === null && (this.div.offsetWidth != W[3] || this.div.offsetHeight != W[4])) {
+          if (!font.noStyleChar && HTMLCSS.FONTDATA && HTMLCSS.FONTDATA.hasStyleChar) {
+            for (var i = 0, m = this.testSize.length; i < m; i++)
+              {if (this.testStyleChar(font,this.testSize[i])) {found = true; m = 0}}
+          } else {found = true}
         }
       }
-      return false;
+      if (HTMLCSS.safariTextNodeBug) {this.div.innerHTML = ""} else {this.text.nodeValue = ""}
+      return found;
     },
 
     styleChar:   "\uEFFD", // width encodes style
@@ -182,18 +213,22 @@
       var type = HTMLCSS.allowWebFonts;
       var FONT = HTMLCSS.FONTDATA.FONTS[name];
       if (HTMLCSS.msieFontCSSBug && !FONT.family.match(/-Web$/)) {FONT.family += "-Web"}
-      var dir = AJAX.fileURL(HTMLCSS.webfontDir+"/"+type);
+      var webfonts = HTMLCSS.webfontDir+"/"+type;
+      var dir = AJAX.fileURL(webfonts);
       var fullname = name.replace(/-b/,"-B").replace(/-i/,"-I").replace(/-Bold-/,"-Bold");
       if (!fullname.match(/-/)) {fullname += "-Regular"}
       if (type === "svg") {fullname += ".svg#"+fullname} else {fullname += "."+type}
+      var rev = AJAX.fileRev(webfonts+"/"+fullname.replace(/#.*/,""));
       var def = {
         "font-family": FONT.family,
-        src: "url('"+dir+"/"+fullname+"')"
+        src: "url('"+dir+"/"+fullname+rev+"')"
       };
       if (type === "otf") {
+        fullname = fullname.replace(/otf$/,"woff");
+        rev = AJAX.fileRev(webfonts+"/"+fullname);
         def.src += " format('opentype')";
         dir = AJAX.fileURL(HTMLCSS.webfontDir+"/woff");  // add woff fonts as well
-        def.src = "url('"+dir+"/"+fullname.replace(/otf$/,"woff")+"') format('woff'), "+def.src;
+        def.src = "url('"+dir+"/"+fullname+rev+"') format('woff'), "+def.src;
       } else if (type !== "eot") {def.src += " format('"+type+"')"}
       if (!(HTMLCSS.FontFaceBug && FONT.isWebFont)) {
         if (name.match(/-bold/)) {def["font-weight"] = "bold"}
@@ -204,7 +239,7 @@
   });
   
   var EVENT, TOUCH, HOVER; // filled in later
-  
+
   HTMLCSS.Augment({
     config: {
       styles: {
@@ -224,23 +259,30 @@
           "white-space":     "nowrap",
           "float":           "none",
           "direction":       "ltr",
+          "max-width": "none", "max-height": "none",
+          "min-width": 0, "min-height": 0,
           border: 0, padding: 0, margin: 0
         },
 
         ".MathJax_Display": {
           position: "relative",
-          display: "block",
+          display: "block!important",
+          "text-indent": 0,
+          "max-width": "none", "max-height": "none",
+          "min-width": 0, "min-height": 0,
           width: "100%"
         },
 
         ".MathJax img, .MathJax nobr, .MathJax a": {
-          border: 0, padding: 0, margin: 0, "max-width": "none", "max-height": "none",
+          border: 0, padding: 0, margin: 0,
+          "max-width": "none", "max-height": "none",
+          "min-width": 0, "min-height": 0,
           "vertical-align": 0, "line-height": "normal",
           "text-decoration": "none"
         },
         "img.MathJax_strut": {
-          border:"0 !important", padding:"0 !important", margin: "0 !important",
-          "vertical-align": "0 !important"
+          border:"0!important", padding:"0!important", margin:"0!important",
+          "vertical-align": "0!important"
         },
         
 	".MathJax span": {
@@ -251,12 +293,12 @@
 	},
 
         ".MathJax nobr": {
-          "white-space": "nowrap ! important"
+          "white-space": "nowrap!important"
         },
         
         ".MathJax img": {
-          display: "inline ! important",
-          "float": "none ! important"
+          display: "inline!important",
+          "float": "none!important"
         },
         
         ".MathJax *": {
@@ -274,12 +316,14 @@
         ".MathJax_Processed": {display:"none!important"},
         
         ".MathJax_ExBox": {
-          display:"block", overflow:"hidden",
-          width:"1px", height:"60ex"
+          display:"block!important", overflow:"hidden",
+          width:"1px", height:"60ex",
+          "min-height": 0, "max-height":"none"
         },
         ".MathJax .MathJax_EmBox": {
-          display:"block", overflow:"hidden",
-          width:"1px", height:"60em"
+          display:"block!important", overflow:"hidden",
+          width:"1px", height:"60em",
+          "min-height": 0, "max-height":"none"
         },
         
         ".MathJax .MathJax_HitBox": {
@@ -313,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
@@ -322,27 +364,51 @@
     maxStretchyParts: 1000,            // limit the number of parts allowed for
                                        // stretchy operators. See issue 366.
 
+    fontName: {
+      TeXLocal:       "TeX",
+      TeXWeb:         ["","TeX"],
+      TeXImage:       ["",""],
+      STIXLocal:      ["STIX","STIX-Web"],
+      STIXWeb:        "STIX-Web",
+      AsanaMathWeb:   "Asana-Math",
+      GyrePagellaWeb: "Gyre-Pagella",
+      GyreTermesWeb:  "Gyre-Termes",
+      LatinModernWeb: "Latin-Modern",
+      NeoEulerWeb:    "Neo-Euler"
+    },
+    
+    fontInUse: "generic",
+    FONTDATA: {
+      TeX_factor: 1, baselineskip: 1.2, lineH: .8, lineD: .2, ffLineH: .8,
+      FONTS: {},
+      VARIANT: {"normal": {fonts:[]}, "-generic-variant": {}, "-largeOp": {}, "-smallOp": {}},
+      RANGES: [], DELIMITERS: {}, RULECHAR: 0x2D, REMAP: {}
+    },
+
     Config: function () {
       if (!this.require) {this.require = []}
-      this.Font = FONTTEST();
-      this.SUPER(arguments).Config.call(this); var settings = this.settings;
-      if (this.adjustAvailableFonts) {this.adjustAvailableFonts(this.config.availableFonts)}
-      if (settings.scale) {this.config.scale = settings.scale}
-      if (settings.font && settings.font !== "Auto") {
-        if (settings.font === "TeXLocal") {this.config.availableFonts = ["TeX"]; this.config.preferredFont = "TeX"; this.config.webFont = "TeX"}
-        else if (settings.font === "TeXWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "TeX"}
-        else if (settings.font === "TeXimage") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = ""}
-        else if (settings.font === "STIXlocal") {this.config.availableFonts = ["STIX"]; this.config.preferredFont = "STIX"; this.config.webFont = "STIX-Web"}
-        else if (settings.font === "STIXWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "STIX-Web"}
-        else if (settings.font === "AsanaMathWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "Asana-Math"}
-        else if (settings.font === "GyrePagellaWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "Gyre-Pagella"}
-        else if (settings.font === "GyreTermesWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "Gyre-Termes"}
-        else if (settings.font === "LatinModernWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "Latin-Modern"}
-        else if (settings.font === "NeoEulerWeb") {this.config.availableFonts = []; this.config.preferredFont = ""; this.config.webFont = "Neo-Euler"}
-      }
-      var font = this.Font.findFont(this.config.availableFonts,this.config.preferredFont);
-      if (!font && this.allowWebFonts) {font = this.config.webFont; if (font) {this.webFonts = true}}
-      if (!font && this.config.imageFont) {font = this.config.imageFont; this.imgFonts = true}
+      this.Font = FONTTEST(); this.SUPER(arguments).Config.call(this);
+      var settings = this.settings, config = this.config, font = settings.font;
+      if (this.adjustAvailableFonts) {this.adjustAvailableFonts(config.availableFonts)}
+      if (settings.scale) {config.scale = settings.scale}
+      if (font && font !== "Auto" && this.fontName[font]) {
+        config.availableFonts = []; delete config.fonts;
+        if (this.fontName[font] instanceof Array) {
+          config.preferredFont = this.fontName[font][0];
+          config.webFont = this.fontName[font][1];
+        } else {
+          config.preferredFont = config.webFont = this.fontName[font];
+        }
+        if (config.preferredFont) {config.availableFonts[0] = config.preferredFont}
+      }
+      if (config.fonts) {
+        config.availableFonts = config.fonts;
+        config.preferredFont = config.webFont = config.fonts[0];
+        if (config.webFont === "STIX") {config.webFont += "-Web"}
+      }
+      font = this.Font.findFont(config.availableFonts,config.preferredFont);
+      if (!font && this.allowWebFonts) {font = config.webFont; if (font) {this.webFonts = true}}
+      if (!font && this.config.imageFont) {font = config.imageFont; this.imgFonts = true}
       if (font) {
         this.fontInUse = font; this.fontDir += "/" + font; this.webfontDir += "/" + font;
         this.require.push(this.fontDir+"/fontdata.js");
@@ -353,15 +419,6 @@
       } else {
         MESSAGE(["CantFindFontUsing","Can't find a valid font using %1",
                 "["+this.config.availableFonts.join(", ")+"]"],null,3000);
-        this.fontInUse = "generic";
-        this.FONTDATA = {
-          TeX_factor: 1, baselineskip: 1.2, lineH: .8, lineD: .2, ffLineH: .8,
-          FONTS: {},
-          VARIANT: {
-            "normal": {fonts:[]}, "-generic-variant": {fonts:[]},
-            "-largeOp": {fonts:[]}, "-smallOp": {fonts:[]}
-          }, RANGES: [], DELIMITERS: {}, RULECHAR: 0x2D, REMAP: {}
-        };
         HUB.Startup.signal.Post("HTML-CSS Jax - no valid font");
       }
       this.require.push(MathJax.OutputJax.extensionDir+"/MathEvents.js");
@@ -432,6 +489,8 @@
       //  Safari/Windows doesn't display Plane1,
       //  so disable STIX for these browsers.
       //
+      //  ### FIXME ### Do we need to disable the other web fonts for these?
+      //
       for (var i = 0, m = fonts.length; i < m; i++)
         {if (fonts[i] === "STIX") {fonts.splice(i,1); m--; i--;}}
       if (this.config.preferredFont === "STIX") {this.config.preferredFont = fonts[0]}
@@ -450,6 +509,23 @@
     //
     InitializeHTML: function () {
       this.PreloadWebFonts();
+      this.getDefaultExEm();
+      //
+      //  If the defaultEm size is zero, it might be that a web font hasn't
+      //  arrived yet, so try to wait for it, but don't wait too long.
+      //
+      if (this.defaultEm) return;
+      var ready = MathJax.Callback();
+      AJAX.timer.start(AJAX,function (check) {
+        if (check.time(ready)) {HUB.signal.Post(["HTML-CSS Jax - no default em size"]); return}
+        HTMLCSS.getDefaultExEm();
+        if (HTMLCSS.defaultEm) {ready()} else {setTimeout(check,check.delay)}
+      },this.defaultEmDelay,this.defaultEmTimeout);
+      return ready;
+    },
+    defaultEmDelay: 100,      // initial delay when checking for defaultEm
+    defaultEmTimeout: 1000,   // when to stop looking for defaultEm
+    getDefaultExEm: function () {
       //
       //  Get the default sizes (need styles in place to do this)
       //
@@ -464,7 +540,7 @@
     
     preTranslate: function (state) {
       var scripts = state.jax[this.id], i, m = scripts.length,
-          script, prev, span, div, test, jax, ex, em, scale, maxwidth, relwidth = false,
+          script, prev, span, div, test, jax, ex, em, scale, maxwidth, relwidth = false, cwidth,
           linebreak = this.config.linebreaks.automatic, width = this.config.linebreaks.width;
       if (linebreak) {
         relwidth = (width.match(/^\s*(\d+(\.\d*)?%\s*)?container\s*$/) != null);
@@ -503,18 +579,13 @@
           div = this.Element("div",{className:"MathJax_Display"});
           div.appendChild(span);
         } else if (this.msieDisappearingBug) {span.style.display = "inline-block"}
-        //
-        //  Mark math for screen readers
-        //    (screen readers don't know about role="math" yet, so use "textbox" instead)
-        //
-        div.setAttribute("role","textbox"); div.setAttribute("aria-readonly","true");
         div.className += " MathJax_Processing";
         script.parentNode.insertBefore(div,script);
         //
         //  Add the test span for determining scales and linebreak widths
         //
         script.parentNode.insertBefore(this.EmExSpan.cloneNode(true),script);
-        if (relwidth) {div.parentNode.insertBefore(this.linebreakSpan.cloneNode(true),div)}
+        div.parentNode.insertBefore(this.linebreakSpan.cloneNode(true),div)
       }
       //
       //  Determine the scaling factors for each script
@@ -526,19 +597,21 @@
         jax = script.MathJax.elementJax; if (!jax) continue;
         ex = test.firstChild.offsetHeight/60;
         em = test.lastChild.firstChild.offsetHeight/60;
-        if (relwidth) {maxwidth = div.previousSibling.firstChild.offsetWidth}
+        cwidth = div.previousSibling.firstChild.offsetWidth;
+        if (relwidth) {maxwidth = cwidth}
         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.HTMLCSS.isHidden = true;
-          ex = this.defaultEx; em = this.defaultEm;
-          if (relwidth) {maxwidth = this.defaultWidth}
+          ex = this.defaultEx; em = this.defaultEm; cwidth = this.defaultWidth;
+          if (relwidth) {maxwidth = cwidth}
         }
         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.cwidth = cwidth/this.em;
         jax.HTMLCSS.lineWidth = (linebreak ? this.length2em(width,1,maxwidth/this.em) : 1000000);
       }
       //
@@ -548,11 +621,9 @@
         script = scripts[i]; if (!script.parentNode) continue;
         test = scripts[i].previousSibling;
         jax = scripts[i].MathJax.elementJax; if (!jax) continue;
-        if (relwidth) {
-          span = test.previousSibling;
-          if (!jax.HTMLCSS.isHidden) {span = span.previousSibling}
-          span.parentNode.removeChild(span);
-        }
+        span = test.previousSibling;
+        if (!jax.HTMLCSS.isHidden) {span = span.previousSibling}
+        span.parentNode.removeChild(span);
         test.parentNode.removeChild(test);
       }
       //
@@ -563,6 +634,8 @@
       state.HTMLCSSdelay = false;
     },
 
+    PHASE: {I: 1, II: 2, III: 3},  // processing phases
+  
     Translate: function (script,state) {
       if (!script.parentNode) return;
 
@@ -579,75 +652,114 @@
       //
       var jax = script.MathJax.elementJax, math = jax.root,
           span = document.getElementById(jax.inputID+"-Frame"),
-          div = (jax.HTMLCSS.display ? span.parentNode : span);
+          div = (jax.HTMLCSS.display ? (span||{}).parentNode : span);
+      if (!div) return;
       //
       //  Set the font metrics
       //
-      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;
+      this.getMetrics(jax);
       if (this.scale !== 1) {span.style.fontSize = jax.HTMLCSS.fontSize}
       //
       //  Typeset the math
       //
       this.initImg(span);
       this.initHTML(math,span);
-      math.setTeXclass();
-      try {math.toHTML(span,div)} catch (err) {
+      this.savePreview(script);
+      try {
+        math.setTeXclass();
+        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);
         throw err;
       }
+      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
+      //  Check if we should show this chunk of equations
       //
-      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
-        //
-        state.HTMLCSSeqn += (state.i - state.HTMLCSSi); state.HTMLCSSi = state.i;
-        if (state.HTMLCSSeqn >= state.HTMLCSSlast + state.HTMLCSSchunk) {
-          this.postTranslate(state,true);
-          state.HTMLCSSchunk = Math.floor(state.HTMLCSSchunk*this.config.EqnChunkFactor);
-          state.HTMLCSSdelay = true;  // delay if there are more scripts
-        }
+      state.HTMLCSSeqn += (state.i - state.HTMLCSSi); state.HTMLCSSi = state.i;
+      if (state.HTMLCSSeqn >= state.HTMLCSSlast + state.HTMLCSSchunk) {
+        this.postTranslate(state,true);
+        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,
+    //  which confuses HTMLspanElement(), so remove the preview temporarily
+    //  and restore it after typesetting the math.
+    //
+    savePreview: function (script) {
+      var preview = script.MathJax.preview;
+      if (preview) {
+        script.MathJax.tmpPreview = document.createElement("span");
+        preview.parentNode.replaceChild(script.MathJax.tmpPreview,preview);
       }
     },
+    restorePreview: function (script) {
+      var tmpPreview = script.MathJax.tmpPreview;
+      if (tmpPreview) {
+        tmpPreview.parentNode.replaceChild(script.MathJax.preview,tmpPreview);
+        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];
-      if (!this.hideProcessedMath) return;
+      var scripts = state.jax[this.id], script, jax, i, m;
+      //
+      //  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++) {
-        var script = scripts[i];
+      for (i = state.HTMLCSSlast, m = state.HTMLCSSeqn; i < m; i++) {
+        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
           //
           script.previousSibling.className = script.previousSibling.className.split(/ /)[0];
-          var data = script.MathJax.elementJax.HTMLCSS;
           //
           //  Remove the preview, if any
           //
-          if (data.preview) {
-            data.preview.innerHTML = "";
-            script.MathJax.preview = data.preview;
-            delete data.preview;
-          }
+          if (script.MathJax.preview) {script.MathJax.preview.innerHTML = ""}
         }
       }
       if (this.forceReflow) {
@@ -690,26 +802,45 @@
       this.em = MML.mbase.prototype.em = em;
       this.outerEm = em / jax.HTMLCSS.scale;
       emex.parentNode.removeChild(emex);
+      this.scale = jax.HTMLCSS.scale;
+      this.linebreakWidth = jax.HTMLCSS.lineWidth;
+      this.cwidth = jax.HTMLCSS.cwidth;
 
+      this.zoomScale = parseInt(HUB.config.menuSettings.zscale) / 100;
       this.idPostfix = "-zoom"; jax.root.toHTML(span,span); this.idPostfix = "";
-      var width = jax.root.HTMLspanElement().bbox.width;
+      this.zoomScale = 1;
+      
+      var bbox = jax.root.HTMLspanElement().bbox, width = bbox.width;
       if (width) {
         //  Handle full-width displayed equations
-        //  FIXME: this is a hack for now
+        if (bbox.tw) {Mw = bbox.tw*em}
+        if (bbox.w*em < Mw) {Mw = bbox.w*em}
         span.style.width = Math.floor(Mw-1.5*HTMLCSS.em)+"px"; span.style.display="inline-block";
         var id = (jax.root.id||"MathJax-Span-"+jax.root.spanID)+"-zoom";
         var child = document.getElementById(id).firstChild;
         while (child && child.style.width !== width) {child = child.nextSibling}
-        if (child) {child.style.width = "100%"}
+        if (child) {
+          var cwidth = child.offsetWidth; child.style.width = "100%";
+          if (cwidth > Mw) {span.style.width = (cwidth+100)+"px"}
+        }
       }
       //
+      //  Adjust margins to prevent overlaps at the edges
+      //
+      child = span.firstChild.firstChild.style;
+      if (bbox.H != null && bbox.H > bbox.h)
+        {child.marginTop = HTMLCSS.Em(bbox.H-Math.max(bbox.h,HTMLCSS.FONTDATA.lineH))}
+      if (bbox.D != null && bbox.D > bbox.d)
+        {child.marginBottom = HTMLCSS.Em(bbox.D-Math.max(bbox.d,HTMLCSS.FONTDATA.lineD))}
+      if (bbox.lw < 0) {child.paddingLeft = HTMLCSS.Em(-bbox.lw)}
+      if (bbox.rw > bbox.w) {child.marginRight = HTMLCSS.Em(bbox.rw-bbox.w)}
+      //
       //  Get height and width of zoomed math and original math
       //
       span.style.position = "absolute";
       if (!width) {math.style.position = "absolute"}
       var zW = span.offsetWidth, zH = span.offsetHeight,
           mH = math.offsetHeight, mW = math.offsetWidth;
-      if (mW === 0) {mW = math.parentNode.offsetWidth}; // IE7 gets mW == 0?
       span.style.position = math.style.position = "";
       //
       return {Y:-EVENT.getBBox(span).h, mW:mW, mH:mH, zW:zW, zH:zH};
@@ -719,8 +850,14 @@
     initHTML: function (math,span) {},
     initFont: function (name) {
       var FONTS = HTMLCSS.FONTDATA.FONTS, AVAIL = HTMLCSS.config.availableFonts;
-      if (AVAIL && AVAIL.length && HTMLCSS.Font.testFont(FONTS[name]))
-        {FONTS[name].available = true; return null}
+      if (AVAIL && AVAIL.length && HTMLCSS.Font.testFont(FONTS[name])) {
+        FONTS[name].available = true;
+        if (FONTS[name].familyFixed) {
+          FONTS[name].family = FONTS[name].familyFixed;
+          delete FONTS[name].familyFixed;
+        }
+        return null;
+      }
       if (!this.allowWebFonts) {return null}
       FONTS[name].isWebFont = true;
       if (HTMLCSS.FontFaceBug) {
@@ -740,6 +877,7 @@
     },
     
     getHD: function (span) {
+      if (span.bbox && this.config.noReflows) {return {h:span.bbox.h, d:span.bbox.d}}
       var position = span.style.position;
       span.style.position = "absolute";
       this.HDimg.style.height = "0px";
@@ -754,21 +892,27 @@
     },
     getW: function (span) {
       var W, H, w = (span.bbox||{}).w, start = span;
+      if (span.bbox && this.config.noReflows && span.bbox.exactW !== false) {
+        if (!span.bbox.exactW) {
+          if (span.style.paddingLeft) w += this.unEm(span.style.paddingLeft)*(span.scale||1);
+          if (span.style.paddingRight) w += this.unEm(span.style.paddingRight)*(span.scale||1);
+        }
+        return w;
+      }
       if (span.bbox && span.bbox.exactW) {return w}
-      if ((span.bbox && w >= 0 && !this.initialSkipBug) || this.negativeBBoxes || !span.firstChild) {
+      if ((span.bbox && w >= 0 && !this.initialSkipBug && !this.msieItalicWidthBug) ||
+           this.negativeBBoxes || !span.firstChild) {
         W = span.offsetWidth; H = span.parentNode.offsetHeight;
       } else if (span.bbox && w < 0 && this.msieNegativeBBoxBug) {
         W = -span.offsetWidth, H = span.parentNode.offsetHeight;
       } else {
         // IE can't deal with a space at the beginning, so put something else first
-        if (this.initialSkipBug) {
-          var position = span.style.position; span.style.position = "absolute";
-          start = this.startMarker; span.insertBefore(start,span.firstChild)
-        }
+        var position = span.style.position; span.style.position = "absolute";
+        start = this.startMarker; span.insertBefore(start,span.firstChild)
         span.appendChild(this.endMarker);
         W = this.endMarker.offsetLeft - start.offsetLeft;
         span.removeChild(this.endMarker);
-        if (this.initialSkipBug) {span.removeChild(start); span.style.position = position}
+        span.removeChild(start); span.style.position = position
       }
       if (H != null) {span.parentNode.HH = H/this.em}
       return W/this.em;
@@ -795,7 +939,8 @@
       for (i = 0, m = SPANS.length; i < m; i++) {
         span = SPANS[i]; if (!span) continue;
         bbox = span.bbox; parent = this.parentNode(span);
-        if (bbox.exactW || bbox.width || bbox.w === 0 || bbox.isMultiline) {
+        if (bbox.exactW || bbox.width || bbox.w === 0 || bbox.isMultiline ||
+            (this.config.noReflows && bbox.exactW !== false)) {
           if (!parent.bbox) {parent.bbox = bbox}
           continue;
         }
@@ -867,7 +1012,7 @@
       if (length === MML.SIZE.BIG)    {return 2}
       if (length === MML.SIZE.SMALL)  {return .71}
       if (length === "infinity")      {return HTMLCSS.BIGDIMEN}
-      var factor = this.FONTDATA.TeX_factor;
+      var factor = this.FONTDATA.TeX_factor, emFactor = (HTMLCSS.zoomScale||1) / HTMLCSS.em;
       if (length.match(/mathspace$/)) {return HTMLCSS.MATHSPACE[length]*factor}
       var match = length.match(/^\s*([-+]?(?:\.\d+|\d+(?:\.\d*)?))?(pt|em|ex|mu|px|pc|in|mm|cm|%)?/);
       var m = parseFloat(match[1]||"1"), unit = match[2];
@@ -875,14 +1020,14 @@
       if (unit === "em") {return m * factor}
       if (unit === "ex") {return m * HTMLCSS.TeX.x_height * factor}
       if (unit === "%")  {return m / 100 * size}
-      if (unit === "px") {return m / HTMLCSS.em}
-      if (unit === "pt") {return m / 10 * factor}                        // 10 pt to an em
-      if (unit === "pc") {return m * 1.2 * factor}                       // 12 pt to a pc
-      if (unit === "in") {return m * this.pxPerInch / HTMLCSS.em}
-      if (unit === "cm") {return m * this.pxPerInch / HTMLCSS.em / 2.54} // 2.54 cm to an inch
-      if (unit === "mm") {return m * this.pxPerInch / HTMLCSS.em / 25.4} // 10 mm to a cm
+      if (unit === "px") {return m * emFactor}
+      if (unit === "pt") {return m / 10 * factor}                      // 10 pt to an em
+      if (unit === "pc") {return m * 1.2 * factor}                     // 12 pt to a pc
+      if (unit === "in") {return m * this.pxPerInch * emFactor}
+      if (unit === "cm") {return m * this.pxPerInch * emFactor / 2.54} // 2.54 cm to an inch
+      if (unit === "mm") {return m * this.pxPerInch * emFactor / 25.4} // 10 mm to a cm
       if (unit === "mu") {return m / 18 * factor * mu} // 18mu to an em for the scriptlevel
-      return m*factor*size;  // relative to given size (or 1em as default)
+      return m*size;  // relative to given size (or 1em as default)
     },
     thickness2em: function (length,mu) {
       var thick = HTMLCSS.TeX.rule_thickness;
@@ -936,6 +1081,7 @@
         isMathJax: true,
         style: {display:"inline-block", overflow:"hidden", height:"1px", width:this.Em(w)}
       });
+      if (w < 0) {blank.style.marginRight = blank.style.width; blank.style.width = 0}
       if (before) {span.insertBefore(blank,span.firstChild)} else {span.appendChild(blank)}
       return blank;
     },
@@ -986,7 +1132,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
       });
-      if (w > 0 && rule.offsetWidth == 0) {rule.style.width = this.Em(w)}
+      if (this.msieRuleBug && w > 0) {rule.style.width = this.Em(w)}
       if (span.isBox || span.className == "mspace") {span.bbox = rule.bbox, span.HH = h+d}
       return rule;
     },
@@ -1077,9 +1223,7 @@
         if (!this.msieClipRectBug && !bbox.noclip && !noclip) {
           var dd = 3/this.em;
           var H = (bbox.H == null ? bbox.h : bbox.H), D = (bbox.D == null ? bbox.d : bbox.D);
-          var t = HH - H - dd, b = HH + D + dd, l = bbox.lw - 3*dd, r = 1000;
-          if (this.initialSkipBug && bbox.lw < 0) {l = -3*dd}
-          if (bbox.isFixed) {r = bbox.width-l}
+          var t = HH - H - dd, b = HH + D + dd, l = -1000, r = 1000;
           span.style.clip = "rect("+this.Em(t)+" "+this.Em(r)+" "+this.Em(b)+" "+this.Em(l)+")";
         }
       }
@@ -1107,18 +1251,31 @@
           }
           span.style.width = bbox.width;
         }
+        if (bbox.tw) {BBOX.tw = bbox.tw}
       }
     },
-    alignBox: function (span,align,y) {
-      this.placeBox(span,0,y); // set y position (and left aligned)
+    alignBox: function (span,align,y,dx) {
+      if (dx == null) {dx = 0}
+      this.placeBox(span,dx,y); // set y position (and left aligned)
+      if (this.msiePlaceBoxBug) {
+        //
+        //  placeBox() adds an extra &nbsp;, so remove it here.
+        //
+        var node = span.lastChild;
+        while (node && node.nodeName !== "#text") {node = node.previousSibling}
+        if (node) {span.removeChild(node)}
+      }
       var bbox = span.bbox; if (bbox.isMultiline) return;
       var isRelative = bbox.width != null && !bbox.isFixed;
-      var r = 0, c = -bbox.w/2, l = "50%";
+      var r = 0, c = dx-bbox.w/2, l = "50%";
       if (this.initialSkipBug) {r = bbox.w-bbox.rw-.1; c += bbox.lw}
       if (this.msieMarginScaleBug) {c = (c*this.em) + "px"} else {c = this.Em(c)}
-      if (isRelative) {c = ""; l = (50 - parseFloat(bbox.width)/2) + "%"}
+      if (isRelative) {
+        c = (dx === 0 ? "" : this.Em(dx));
+        l = (50 - parseFloat(bbox.width)/2) + "%";
+      }
       HUB.Insert(span.style,({
-        right:  {left:"", right: this.Em(r)},
+        right:  {left:"", right: this.Em(r-dx)},
         center: {left:l, marginLeft: c}
       })[align]);
     },
@@ -1293,7 +1450,10 @@
           span.style.top = this.Em(-h);
         } else {
           span.style.verticalAlign = this.Em(h);
-          if (HTMLCSS.ffVerticalAlignBug) {HTMLCSS.createRule(span.parentNode,span.bbox.h,0,0)}
+	  if (HTMLCSS.ffVerticalAlignBug) {
+	    HTMLCSS.createRule(span.parentNode,span.bbox.h,0,0);
+	    delete span.parentNode.bbox;
+	  }
         }
       }
     },
@@ -1337,24 +1497,16 @@
           }
         }
         if (variant.remap && variant.remap[n]) {
-          if (variant.remap[n] instanceof Array) {
-            var remap = variant.remap[n];
-            n = remap[0]; variant = this.FONTDATA.VARIANT[remap[1]];
-          } else if (typeof(variant.remap[n]) === "string") {
-            text = variant.remap[n]+text.substr(i+1);
-            i = 0; m = text.length; n = text.charCodeAt(0);
-          } else {
-            n = variant.remap[n];
-            if (variant.remap.variant) {variant = this.FONTDATA.VARIANT[variant.remap.variant]}
-          }
-        }
-        if (this.FONTDATA.REMAP[n] && !variant.noRemap) {
+          n = variant.remap[n];
+          if (variant.remap.variant) {variant = this.FONTDATA.VARIANT[variant.remap.variant]}
+        } else if (this.FONTDATA.REMAP[n] && !variant.noRemap) {
           n = this.FONTDATA.REMAP[n];
-          if (n instanceof Array) {variant = this.FONTDATA.VARIANT[n[1]]; n = n[0]}
-          if (typeof(n) === "string") {
-            text = n+text.substr(i+1);
-            i = 0; m = text.length; n = n.charCodeAt(0);
-          }
+        }
+        if (n instanceof Array) {variant = this.FONTDATA.VARIANT[n[1]]; n = n[0]} 
+        if (typeof(n) === "string") {
+          text = n+text.substr(i+1);
+          m = text.length; i = -1;
+          continue;
         }
         font = this.lookupChar(variant,n); c = font[n];
         if (force || (!this.checkFont(font,SPAN.style) && !c[5].img)) {
@@ -1373,6 +1525,7 @@
         if (span.bbox.w + c[3]/1000 < span.bbox.lw) {span.bbox.lw = span.bbox.w + c[3]/1000}
         if (span.bbox.w + c[4]/1000 > span.bbox.rw) {span.bbox.rw = span.bbox.w + c[4]/1000}
         span.bbox.w += c[2]/1000;
+        if ((c[5]||{}).isUnknown) span.bbox.exactW = false;  // force measurement
       }
       if (newtext.length) {this.addText(SPAN,newtext)}
       if (span.scale && span.scale !== 1) {
@@ -1391,7 +1544,8 @@
 
     handleFont: function (span,font,force) {
       span.style.fontFamily = font.family;
-      if (!font.directory) {span.style.fontSize = Math.floor(100/HTMLCSS.scale+.5) + "%"}
+      if (!font.directory)
+        {span.style.fontSize = Math.floor(HTMLCSS.config.scale/HTMLCSS.scale+.5) + "%"}
       if (!(HTMLCSS.FontFaceBug && font.isWebFont)) {
         var style  = font.style  || "normal", weight = font.weight || "normal";
         if (style !== "normal"  || force) {span.style.fontStyle  = style}
@@ -1582,7 +1736,7 @@
       scriptspace:         .1,
       nulldelimiterspace:  .12,
       delimiterfactor:     901,
-      delimitershortfall:   .1,    // originally .3,
+      delimitershortfall:   .3,
 
       min_rule_thickness:  1.25     // in pixels
     },
@@ -1602,12 +1756,21 @@
 	for (var i = 0, m = this.data.length; i < m; i++)
 	  {if (this.data[i]) {this.data[i].toHTML(span)}}
 	var stretchy = this.HTMLcomputeBBox(span);
-	var h = span.bbox.h, d = span.bbox.d;
-	for (i = 0, m = stretchy.length; i < m; i++) {stretchy[i].HTMLstretchV(span,h,d)}
-	if (stretchy.length) {this.HTMLcomputeBBox(span,true)}
+	var h = span.bbox.h, d = span.bbox.d, stretched = false, bbox;
+	for (i = 0, m = stretchy.length; i < m; i++) {
+          bbox = stretchy[i].HTMLspanElement().bbox;
+          if (stretchy[i].forceStretch || bbox.h !== h || bbox.d !== d)
+            {stretchy[i].HTMLstretchV(span,h,d); stretched = true}
+        }
+	if (stretched) {this.HTMLcomputeBBox(span,true)}
         if (this.HTMLlineBreaks(span)) {span = this.HTMLmultiline(span)}
 	this.HTMLhandleSpace(span);
 	this.HTMLhandleColor(span);
+        if (this.data.length === 1 && this.data[0]) {
+          // copy skew data from accented character
+          bbox = this.data[0].HTMLspanElement().bbox;
+          if (bbox.skew) span.bbox.skew = bbox.skew;
+        }
 	return span;
       },
       HTMLlineBreaks: function () {return false},
@@ -1639,6 +1802,7 @@
 	BBOX.w += bbox.w;
 	if (child.style.paddingRight) {BBOX.w += HTMLCSS.unEm(child.style.paddingRight)*(child.scale||1)}
 	if (bbox.width) {BBOX.width = bbox.width; BBOX.minWidth = bbox.minWidth}
+        if (bbox.tw) {BBOX.tw = bbox.tw}
         if (bbox.ic) {BBOX.ic = bbox.ic} else {delete BBOX.ic}
         if (BBOX.exactW && !bbox.exactW) {delete BBOX.exactW}
       },
@@ -1706,8 +1870,30 @@
           if (this.styles.padding) {span.style.padding = ""}
 	}
 	if (this.href) {span.parentNode.bbox = span.bbox}
+        this.HTMLaddAttributes(span);
 	return span;
       },
+      HTMLaddAttributes: function(span) {
+        //
+        //  Copy RDFa, aria, and other tags from the MathML to the HTML-CSS
+        //  output spans Don't copy those in the MML.nocopyAttributes list,
+        //  the ignoreMMLattributes configuration list, or anything tha
+        //  already exists as a property of the span (e.g., no "onlick", etc.)
+        //  If a name in the ignoreMMLattributes object is set to false, then
+        //  the attribute WILL be copied.
+        //
+        if (this.attrNames) {
+          var copy = this.attrNames, skip = MML.nocopyAttributes, ignore = HUB.config.ignoreMMLattributes;
+          var defaults = (this.type === "mstyle" ? MML.math.prototype.defaults : this.defaults);
+          for (var i = 0, m = copy.length; i < m; i++) {
+            var id = copy[i];
+            if (ignore[id] == false || (!skip[id] && !ignore[id] &&
+                defaults[id] == null && typeof(span[id]) === "undefined")) {
+              span.setAttribute(id,this.attr[id])
+            }
+          }
+        }
+      },
       HTMLspanElement: function () {
 	if (!this.spanID) {return null}
 	return document.getElementById((this.id||"MathJax-Span-"+this.spanID)+HTMLCSS.idPostfix);
@@ -1818,7 +2004,8 @@
 	} else {
 	  var space = this.texSpacing();
 	  if (space !== "") {
-	    space = HTMLCSS.length2em(space,this.HTMLgetScale())/(span.scale||1);
+            this.HTMLgetScale();
+	    space = HTMLCSS.length2em(space,this.scale)/(span.scale||1)*this.mscale;
 	    if (span.style.paddingLeft) {space += HTMLCSS.unEm(span.style.paddingLeft)}
 	    span.style.paddingLeft = HTMLCSS.Em(space);
 	  }
@@ -1826,7 +2013,9 @@
       },
 
       HTMLgetScale: function () {
-	var scale = 1, values = this.getValues("mathsize","scriptlevel","fontsize");
+        if (this.scale) {return this.scale * this.mscale}
+	var scale = 1, values = this.getValues("scriptlevel","fontsize");
+        values.mathsize = (this.isToken ? this : this.Parent()).Get("mathsize");
 	if (this.style) {
 	  var span = this.HTMLspanElement();
 	  if (span.style.fontSize != "") {values.fontsize = span.style.fontSize}
@@ -1838,8 +2027,8 @@
 	  values.scriptminsize = HTMLCSS.length2em(this.Get("scriptminsize"));
 	  if (scale < values.scriptminsize) {scale = values.scriptminsize}
 	}
-	if (this.isToken) {scale *= HTMLCSS.length2em(values.mathsize)}
-	return scale;
+        this.scale = scale; this.mscale = HTMLCSS.length2em(values.mathsize);
+	return scale * this.mscale;
       },
       HTMLgetMu: function (span) {
 	var mu = 1, values = this.getValues("scriptlevel","scriptsizemultiplier");
@@ -1935,10 +2124,11 @@
         var text = this.data.join("").replace(/[\u2061-\u2064]/g,""); // remove invisibles
         if (remap) {text = remap(text,chars)}
         if (variant.fontInherit) {
-          var scale = Math.floor(100/HTMLCSS.scale+.5) + "%";
+          var scale = Math.floor(HTMLCSS.config.scale/HTMLCSS.scale+.5) + "%";
           HTMLCSS.addElement(span,"span",{style:{"font-size":scale}},[text]);
           if (variant.bold)   {span.lastChild.style.fontWeight = "bold"}
           if (variant.italic) {span.lastChild.style.fontStyle = "italic"}
+          span.bbox = null;
           var HD = HTMLCSS.getHD(span), W = HTMLCSS.getW(span);
           span.bbox = {h:HD.h, d:HD.d, w:W, lw:0, rw:W, exactW: true};
         } else {
@@ -1951,10 +2141,11 @@
         var text = this.toString().replace(/[\u2061-\u2064]/g,""); // remove invisibles
         if (remap) {text = remap(text,chars)}
         if (variant.fontInherit) {
-          var scale = Math.floor(100/HTMLCSS.scale+.5) + "%";
+          var scale = Math.floor(HTMLCSS.config.scale/HTMLCSS.scale+.5) + "%";
           HTMLCSS.addElement(span,"span",{style:{"font-size":scale}},[text]);
           if (variant.bold)   {span.lastChild.style.fontWeight = "bold"}
           if (variant.italic) {span.lastChild.style.fontStyle = "italic"}
+          delete span.bbox;
           var HD = HTMLCSS.getHD(span), W = HTMLCSS.getW(span);
           span.bbox = {h:HD.h, d:HD.d, w:W, lw:0, rw:W, exactW: true};
         } else {
@@ -1974,7 +2165,7 @@
 	if (bbox.skew && text.length !== 1) {delete bbox.skew}
         if (bbox.rw > bbox.w && text.length === 1 && !variant.noIC) {
           bbox.ic = bbox.rw - bbox.w;
-          HTMLCSS.createBlank(span,bbox.ic);
+          HTMLCSS.createBlank(span,bbox.ic/this.mscale);
           bbox.w = bbox.rw;
         }
 	this.HTMLhandleSpace(span);
@@ -2016,7 +2207,7 @@
         //
         var parent = this.CoreParent(),
             isScript = (parent && parent.isa(MML.msubsup) && this !== parent.data[parent.base]),
-            mapchars = (isScript?this.HTMLremapChars:null);
+            mapchars = (isScript?this.remapChars:null);
         if (text.length === 1 && parent && parent.isa(MML.munderover) &&
             this.CoreText(parent.data[parent.base]).length === 1) {
           var over = parent.data[parent.over], under = parent.data[parent.under];
@@ -2032,7 +2223,7 @@
         //  Typeset contents
         //
 	for (var i = 0, m = this.data.length; i < m; i++)
-          {if (this.data[i]) {this.data[i].toHTML(span,variant,this.HTMLremap,mapchars)}}
+          {if (this.data[i]) {this.data[i].toHTML(span,variant,this.remap,mapchars)}}
 	if (!span.bbox) {span.bbox = this.HTMLzeroBBox()}
 	if (text.length !== 1) {delete span.bbox.skew}
         //
@@ -2046,7 +2237,8 @@
         //  Handle large operator centering
         //
 	if (values.largeop) {
-	  var p = (span.bbox.h - span.bbox.d)/2 - HTMLCSS.TeX.axis_height*span.scale;
+          var a = HTMLCSS.TeX.axis_height * this.scale * this.mscale
+	  var p = (span.bbox.h - span.bbox.d)/2 - a;
 	  if (HTMLCSS.safariVerticalAlignBug && span.lastChild.nodeName === "IMG") {
 	    span.lastChild.style.verticalAlign =
 	      HTMLCSS.Em(HTMLCSS.unEm(span.lastChild.style.verticalAlign||0)/HTMLCSS.em-p/span.scale);
@@ -2060,7 +2252,7 @@
 	  span.bbox.h -= p; span.bbox.d += p;
 	  if (span.bbox.rw > span.bbox.w) {
 	    span.bbox.ic = span.bbox.rw-span.bbox.w;
-	    HTMLCSS.createBlank(span,span.bbox.ic);
+	    HTMLCSS.createBlank(span,span.bbox.ic/this.mscale);
 	    span.bbox.w = span.bbox.rw;
 	  }
 	}
@@ -2072,37 +2264,6 @@
         this.HTMLhandleDir(span);
 	return span;
       },
-      CoreParent: function () {
-        var parent = this;
-        while (parent && parent.isEmbellished() &&
-               parent.CoreMO() === this && !parent.isa(MML.math)) {parent = parent.Parent()}
-        return parent;
-      },
-      CoreText: function (parent) {
-        if (!parent) {return ""}
-        if (parent.isEmbellished()) {return parent.CoreMO().data.join("")}
-        while ((parent.isa(MML.mrow) || parent.isa(MML.TeXAtom) ||
-                parent.isa(MML.mstyle) || parent.isa(MML.mphantom)) &&
-                parent.data.length === 1 && parent.data[0]) {parent = parent.data[0]}
-        if (!parent.isToken) {return ""} else {return parent.data.join("")}
-      },
-      HTMLremapChars: {
-        '*':"\u2217",
-        '"':"\u2033",
-        "\u00B0":"\u2218",
-        "\u00B2":"2",
-        "\u00B3":"3",
-        "\u00B4":"\u2032",
-        "\u00B9":"1"
-      },
-      HTMLremap: function (text,map) {
-        text = text.replace(/-/g,"\u2212");
-        if (map) {
-          text = text.replace(/'/g,"\u2032").replace(/`/g,"\u2035");
-          if (text.length === 1) {text = map[text]||text}
-        }
-        return text;
-      },
       HTMLcanStretch: function (direction) {
 	if (!this.Get("stretchy")) {return false}
 	var c = this.data.join("");
@@ -2115,17 +2276,21 @@
           else if (under && this === under.CoreMO() && parent.Get("accentunder")) {c = HTMLCSS.FONTDATA.REMAPACCENTUNDER[c]||c}
         }
 	c = HTMLCSS.FONTDATA.DELIMITERS[c.charCodeAt(0)];
-	return (c && c.dir == direction.substr(0,1));
+        var stretch = (c && c.dir === direction.substr(0,1));
+        this.forceStretch = (stretch && (this.Get("minsize",true) || this.Get("maxsize",true)));
+	return stretch;
       },
       HTMLstretchV: function (box,h,d) {
 	this.HTMLremoveColor();
 	var values = this.getValues("symmetric","maxsize","minsize");
 	var span = this.HTMLspanElement(), mu = this.HTMLgetMu(span), H;
-	var axis = HTMLCSS.TeX.axis_height, scale = span.scale;
+	var scale = this.HTMLgetScale(), axis = HTMLCSS.TeX.axis_height * scale;
 	if (values.symmetric) {H = 2*Math.max(h-axis,d+axis)} else {H = h + d}
 	values.maxsize = HTMLCSS.length2em(values.maxsize,mu,span.bbox.h+span.bbox.d);
 	values.minsize = HTMLCSS.length2em(values.minsize,mu,span.bbox.h+span.bbox.d);
 	H = Math.max(values.minsize,Math.min(values.maxsize,H));
+        if (H != values.minsize)
+          {H = [Math.max(H*HTMLCSS.TeX.delimiterfactor/1000,H-HTMLCSS.TeX.delimitershortfall),H]}
 	span = this.HTMLcreateSpan(box); // clear contents and attributes
 	HTMLCSS.createDelimiter(span,this.data.join("").charCodeAt(0),H,scale);
 	if (values.symmetric) {H = (span.bbox.h + span.bbox.d)/2 + axis}
@@ -2158,8 +2323,12 @@
         span = this.HTMLhandleSize(this.HTMLcreateSpan(span)); 
         var variant = this.HTMLgetVariant();
         //  Avoid setting the font style for error text or if mtextFontInherit is set
-        if (HTMLCSS.config.mtextFontInherit || this.Parent().type === "merror")
-          {variant = {bold:variant.bold, italic:variant.italic, fontInherit: true}}
+        if (HTMLCSS.config.mtextFontInherit || this.Parent().type === "merror") {
+          var vname = this.Get("mathvariant");
+          if (vname === "monospace") {span.className += " MJX-monospace"}
+            else if (vname.match(/sans-serif/)) {span.className += " MJX-sans-serif"}
+          variant = {bold:variant.bold, italic:variant.italic, fontInherit: true};
+        }
         for (var i = 0, m = this.data.length; i < m; i++)
           {if (this.data[i]) {this.data[i].toHTML(span,variant)}}
         if (!span.bbox) {span.bbox = this.HTMLzeroBBox()}
@@ -2193,12 +2362,12 @@
       toHTML: function (span) {
 	span = this.HTMLcreateSpan(span);
 	var values = this.getValues("height","depth","width");
-        var mu = this.HTMLgetMu(span);
+        var mu = this.HTMLgetMu(span); this.HTMLgetScale();
 	values.mathbackground = this.mathbackground;
 	if (this.background && !this.mathbackground) {values.mathbackground = this.background}
-	var h = HTMLCSS.length2em(values.height,mu),
-            d = HTMLCSS.length2em(values.depth,mu),
-	    w = HTMLCSS.length2em(values.width,mu);
+	var h = HTMLCSS.length2em(values.height,mu) * this.mscale,
+            d = HTMLCSS.length2em(values.depth,mu) * this.mscale,
+	    w = HTMLCSS.length2em(values.width,mu) * this.mscale;
        HTMLCSS.createSpace(span,h,d,w,values.mathbackground,true);
        return span;
       }
@@ -2236,14 +2405,15 @@
           else {HTMLCSS.Measured(child,box)}
 	  var values = this.getValues("height","depth","width","lspace","voffset"),
               x = 0, y = 0, mu = this.HTMLgetMu(span);
+          this.HTMLgetScale();
 	  if (values.lspace)  {x = this.HTMLlength2em(box,values.lspace,mu)}
 	  if (values.voffset) {y = this.HTMLlength2em(box,values.voffset,mu)}
-	  HTMLCSS.placeBox(box,x,y);
+	  HTMLCSS.placeBox(box,x,y); x /= this.mscale; y /= this.mscale;
 	  span.bbox = {
 	    h: box.bbox.h, d: box.bbox.d, w: box.bbox.w, exactW: true,
-	    lw: Math.min(0,box.bbox.lw+x), rw: Math.max(box.bbox.w,box.bbox.rw+x),
-	    H: Math.max((box.bbox.H == null ? -HTMLCSS.BIGDIMEN : box.bbox.H),box.bbox.h+y),
-	    D: Math.max((box.bbox.D == null ? -HTMLCSS.BIGDIMEN : box.bbox.D),box.bbox.d-y)
+            lw: box.bbox.lw+x, rw: box.bbox.rw+x,
+            H: Math.max((box.bbox.H == null ? -HTMLCSS.BIGDIMEN : box.bbox.H+y),box.bbox.h+y),
+            D: Math.max((box.bbox.D == null ? -HTMLCSS.BIGDIMEN : box.bbox.D-y),box.bbox.d-y)
 	  };
 	  if (values.height !== "") {span.bbox.h = this.HTMLlength2em(box,values.height,mu,"h",0)}
 	  if (values.depth  !== "") {span.bbox.d = this.HTMLlength2em(box,values.depth,mu,"d",0)}
@@ -2263,7 +2433,7 @@
 	if (m == null) {m = -HTMLCSS.BIGDIMEN}
 	var match = String(length).match(/width|height|depth/);
 	var size = (match ? span.bbox[match[0].charAt(0)] : (d ? span.bbox[d] : 0));
-	var v = HTMLCSS.length2em(length,mu,size);
+	var v = HTMLCSS.length2em(length,mu,size/this.mscale) * this.mscale;
 	if (d && String(length).match(/^\s*[-+]/))
 	  {return Math.max(m,span.bbox[d]+v)} else {return v}
       },
@@ -2331,7 +2501,7 @@
 	  HTMLCSS.placeBox(den,num.bbox.w+bevel.bbox.w-delta,(den.bbox.d-den.bbox.h)/2+a-delta);
 	} else {
 	  var W = Math.max(num.bbox.w,den.bbox.w);
-	  var t = HTMLCSS.thickness2em(values.linethickness,scale), p,q, u,v;
+	  var t = HTMLCSS.thickness2em(values.linethickness,this.scale)*this.mscale, p,q, u,v;
 	  var mt = HTMLCSS.TeX.min_rule_thickness/this.em;
 	  if (isDisplay) {u = HTMLCSS.TeX.num1; v = HTMLCSS.TeX.denom1}
 	    else {u = (t === 0 ? HTMLCSS.TeX.num3 : HTMLCSS.TeX.num2); v = HTMLCSS.TeX.denom2}
@@ -2357,11 +2527,17 @@
       },
       HTMLcanStretch: function (direction) {return false},
       HTMLhandleSpace: function (span) {
-	if (!this.texWithDelims) {
-	  var space = (this.useMMLspacing ? 0 : HTMLCSS.length2em(this.texSpacing()||0)) + .12;
-	  span.style.paddingLeft  = HTMLCSS.Em(space);
-	  span.style.paddingRight = HTMLCSS.Em(.12);
+	if (!this.texWithDelims && !this.useMMLspacing) {
+          //
+          //  Add nulldelimiterspace around the fraction
+          //  (TeXBook pg 150 and Appendix G rule 15e)
+          //
+          var space = HTMLCSS.TeX.nulldelimiterspace * this.mscale;
+          var style = span.childNodes[HTMLCSS.msiePaddingWidthBug ? 1 : 0].style;
+          style.marginLeft = style.marginRight = HTMLCSS.Em(space);
+          span.bbox.w += 2*space; span.bbox.r += 2*space;
 	}
+        this.SUPER(arguments).HTMLhandleSpace.call(this,span);
       }
     });
 
@@ -2505,6 +2681,7 @@
 			   this.data[i].HTMLcanStretch("Horizontal"));
 	    } else {
 	      stretch[i] = this.data[i].HTMLcanStretch("Horizontal");
+              children[i].style.paddingLeft = children[i].style.paddingRight = "";
 	    }
           }
         }
@@ -2519,10 +2696,14 @@
 	if (D == null && HW != null) {W = HW} else if (W == -HTMLCSS.BIGDIMEN) {W = WW}
         for (i = WW = 0, m = this.data.length; i < m; i++) {if (this.data[i]) {
           box = boxes[i];
-          if (stretch[i]) {box.bbox = this.data[i].HTMLstretchH(box,W).bbox}
+          if (stretch[i]) {
+            box.bbox = this.data[i].HTMLstretchH(box,W).bbox;
+            if (i !== this.base)
+              {children[i].style.paddingLeft = children[i].style.paddingRight = ""}
+          }
           if (box.bbox.w > WW) {WW = box.bbox.w}
         }}
-	var t = HTMLCSS.TeX.rule_thickness, factor = HTMLCSS.FONTDATA.TeX_factor;
+	var t = HTMLCSS.TeX.rule_thickness * this.mscale, factor = HTMLCSS.FONTDATA.TeX_factor;
 	var base = boxes[this.base] || {bbox: this.HTMLzeroBBox()};
 	var x, y, z1, z2, z3, dw, k, delta = 0;
         if (base.bbox.ic) {delta = 1.3*base.bbox.ic + .05} // adjust faked IC to be more in line with expeted results
@@ -2542,7 +2723,10 @@
 	    if (i == this.over) {
 	      if (accent) {
 		k = Math.max(t * scale * factor,2.5/this.em); z3 = 0;
-		if (base.bbox.skew) {x += base.bbox.skew}
+		if (base.bbox.skew) {
+                  x += base.bbox.skew; span.bbox.skew = base.bbox.skew;
+                  if (x+box.bbox.w > WW) {span.bbox.skew += (WW-box.bbox.w-x)/2}
+                }
 	      } else {
 		z1 = HTMLCSS.TeX.big_op_spacing1 * scale * factor;
 		z2 = HTMLCSS.TeX.big_op_spacing3 * scale * factor;
@@ -2596,13 +2780,11 @@
 	if (sup) {sup.bbox.w += s; sup.bbox.rw = Math.max(sup.bbox.w,sup.bbox.rw)}
 	if (sub) {sub.bbox.w += s; sub.bbox.rw = Math.max(sub.bbox.w,sub.bbox.rw)}
 	HTMLCSS.placeBox(base,0,0);
-        var sscale;
+        var sscale = scale;
         if (sup) {
           sscale = this.data[this.sup].HTMLgetScale();
         } else if (sub) {
           sscale = this.data[this.sub].HTMLgetScale();
-        } else {
-          sscale = this.HTMLgetScale();
         }
 	var q = HTMLCSS.TeX.sup_drop * sscale, r = HTMLCSS.TeX.sub_drop * sscale;
 	var u = base.bbox.h - q, v = base.bbox.d + r, delta = 0, p;
@@ -2610,9 +2792,9 @@
           base.bbox.w -= base.bbox.ic;    // remove IC (added by mo and mi)
           delta = 1.3*base.bbox.ic + .05; // adjust faked IC to be more in line with expected results
         }
-	if (this.data[this.base] &&
+	if (this.data[this.base] && HW == null && D == null &&
 	   (this.data[this.base].type === "mi" || this.data[this.base].type === "mo")) {
-	  if (this.data[this.base].data.join("").length === 1 && base.bbox.scale === 1 &&
+	  if (this.data[this.base].data.join("").length === 1 && children[0].scale === 1 &&
 	      !this.data[this.base].Get("largeop")) {u = v = 0}
 	}
 	var min = this.getValues("subscriptshift","superscriptshift");
@@ -2654,93 +2836,149 @@
     MML.mtable.Augment({toHTML: MML.mbase.HTMLautoload});
     
     MML["annotation-xml"].Augment({toHTML: MML.mbase.HTMLautoload});
+    MML.annotation.Augment({toHTML: function (span) {return this.HTMLcreateSpan(span)}});
     
     MML.math.Augment({
-      toHTML: function (span,node) {
-	var alttext = this.Get("alttext");
-        if (alttext && alttext !== "") {node.setAttribute("aria-label",alttext)}
-	var nobr = HTMLCSS.addElement(span,"nobr",{isMathJax: true});
-	span = this.HTMLcreateSpan(nobr);
-	var stack = HTMLCSS.createStack(span), box = HTMLCSS.createBox(stack), math;
-	// 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 = "";
-	if (this.data[0] != null) {
-	  if (HTMLCSS.msieColorBug) {
-	    if (this.background) {this.data[0].background = this.background; delete this.background}
-	    if (this.mathbackground) {this.data[0].mathbackground = this.mathbackground; delete this.mathbackground}
-	  }
-	  MML.mbase.prototype.displayAlign = HUB.config.displayAlign;
-	  MML.mbase.prototype.displayIndent = HUB.config.displayIndent;
-          var html = this.data[0].toHTML(box); html.bbox.exactW = false; // force remeasure just to be sure
-	  math = HTMLCSS.Measured(html,box);
-	}
-	HTMLCSS.placeBox(box,0,0);
+      toHTML: function (span,node,phase) {
+        var stack, box, html, math;
         //
-        //  Get width right if minimum font size is set:
-        //    Round to nearest pixel (plus a small amount), and convert back to outer-em's.
-        //    Add the width to the span (outside the MathJax class, so uses outer em size,
-        //    which makes it work even when minimum font size is in effect).
+        //  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)
         //
-        span.style.width = HTMLCSS.Em((Math.round(math.bbox.w*this.em)+.25)/HTMLCSS.outerEm);
-        span.style.display = "inline-block";
-	//
-	//  Adjust bbox to match outer em-size
-	// 
-        var p = 1/HTMLCSS.em, f = HTMLCSS.em / HTMLCSS.outerEm; HTMLCSS.em /= f;
-	span.bbox.h *= f; span.bbox.d *= f; span.bbox.w *= f;
-	span.bbox.lw *= f; span.bbox.rw *= f;
-	if (math && math.bbox.width != null) {
-          span.style.minWidth = (math.bbox.minWidth || span.style.width);
-	  span.style.width = stack.style.width = math.bbox.width;
-	  box.style.width = "100%";
-	}
-	//
-	//  Add color (if any)
-	//
-	this.HTMLhandleColor(span);
-	//
-	//  Make math span be the correct height and depth
-	//
-	if (math) {HTMLCSS.createRule(span,(math.bbox.h+p)*f,(math.bbox.d+p)*f,0)}
-	//
-	//  Handle indentalign and indentshift for single-line display equations
-	//
-	if (!this.isMultiline && this.Get("display") === "block" && span.bbox.width == null) {
-	  var values = this.getValues("indentalignfirst","indentshiftfirst","indentalign","indentshift");
-	  if (values.indentalignfirst !== MML.INDENTALIGN.INDENTALIGN) {values.indentalign = values.indentalignfirst}
-	  if (values.indentalign === MML.INDENTALIGN.AUTO) {values.indentalign = this.displayAlign}
-	  node.style.textAlign = values.indentalign;
-	  if (values.indentshiftfirst !== MML.INDENTSHIFT.INDENTSHIFT) {values.indentshift = values.indentshiftfirst}
-	  if (values.indentshift === "auto") {values.indentshift = this.displayIndent}
-	  if (values.indentshift && values.indentalign !== MML.INDENTALIGN.CENTER) {
-	    span.style[{left:"marginLeft",right:"marginRight"}[values.indentalign]] =
-	      HTMLCSS.Em(HTMLCSS.length2em(values.indentshift));
+        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
+	  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 = "";
+          if (this.data[0] != null) {
+            if (HTMLCSS.msieColorBug) {
+              if (this.background) {this.data[0].background = this.background; delete this.background}
+              if (this.mathbackground) {this.data[0].mathbackground = this.mathbackground; delete this.mathbackground}
+            }
+            MML.mbase.prototype.displayAlign = HUB.config.displayAlign;
+            MML.mbase.prototype.displayIndent = HUB.config.displayIndent;
+            if (String(HUB.config.displayIndent).match(/^0($|[a-z%])/i))
+              MML.mbase.prototype.displayIndent = "0";
+            html = this.data[0].toHTML(box); html.bbox.exactW = true; // force remeasure just to be sure
 	  }
-	}
+        } 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:
+          //    Round to nearest pixel (plus a small amount), and convert back to outer-em's.
+          //    Add the width to the span (outside the MathJax class, so uses outer em size,
+          //    which makes it work even when minimum font size is in effect).
+          //
+          span.style.width = HTMLCSS.Em(Math.max(0,Math.round(math.bbox.w*this.em)+.25)/HTMLCSS.outerEm);
+          span.style.display = "inline-block";
+          //
+          //  Adjust bbox to match outer em-size
+          // 
+          var p = 1/HTMLCSS.em, f = HTMLCSS.em / HTMLCSS.outerEm; HTMLCSS.em /= f;
+          span.bbox.h *= f; span.bbox.d *= f; span.bbox.w *= f;
+          span.bbox.lw *= f; span.bbox.rw *= f;
+          if (span.bbox.H) {span.bbox.H *= f}
+          if (span.bbox.D) {span.bbox.D *= f}
+          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 = "100%";
+          }
+          //
+          //  Add color (if any)
+          //
+          var color = this.HTMLhandleColor(span);
+          //
+          //  Make math span be the correct height and depth
+          //
+          if (math) {HTMLCSS.createRule(span,(math.bbox.h+p)*f,(math.bbox.d+p)*f,0)}
+          //
+          //  Handle indentalign and indentshift for single-line display equations
+          //
+          if (!this.isMultiline && this.Get("display") === "block" && span.bbox.width == null) {
+            var values = this.getValues("indentalignfirst","indentshiftfirst","indentalign","indentshift");
+            if (values.indentalignfirst !== MML.INDENTALIGN.INDENTALIGN) {values.indentalign = values.indentalignfirst}
+            if (values.indentalign === MML.INDENTALIGN.AUTO) {values.indentalign = this.displayAlign}
+            if (values.indentshiftfirst !== MML.INDENTSHIFT.INDENTSHIFT) {values.indentshift = values.indentshiftfirst}
+            if (values.indentshift === "auto") {values.indentshift = "0"}
+            var shift = HTMLCSS.length2em(values.indentshift,1,HTMLCSS.scale*HTMLCSS.cwidth);
+            if (this.displayIndent !== "0") {
+              var indent = HTMLCSS.length2em(this.displayIndent,1,HTMLCSS.scale*HTMLCSS.cwidth);
+              shift += (values.indentalign === MML.INDENTALIGN.RIGHT ? -indent : indent);
+            }
+            node.style.textAlign = values.indentalign;
+            // ### FIXME: make percentage widths respond to changes in container
+            if (shift) {
+              shift *= HTMLCSS.em/HTMLCSS.outerEm;
+              HUB.Insert(span.style,({
+                left: {marginLeft: HTMLCSS.Em(shift)},
+                right: {marginLeft: HTMLCSS.Em(Math.max(0,span.bbox.w+shift)), marginRight: HTMLCSS.Em(-shift)},
+                center: {marginLeft: HTMLCSS.Em(shift), marginRight: HTMLCSS.Em(-shift)}
+              })[values.indentalign]);
+              //
+              //  Move the background color, of any
+              //
+              if (color) {
+                color.style.marginLeft = HTMLCSS.Em(parseFloat(color.style.marginLeft)+shift);
+                color.style.marginRight =
+                  HTMLCSS.Em(parseFloat(color.style.marginRight)-shift
+                     + (values.indentalign === "right" ? Math.min(0,span.bbox.w+shift) - span.bbox.w : 0));
+              }
+            }
+          }
+        }
 	return span;
       },
       HTMLspanElement: MML.mbase.prototype.HTMLspanElement
     });
 
     MML.TeXAtom.Augment({
-      toHTML: function (span) {
+      toHTML: function (span,HW,D) {
 	span = this.HTMLcreateSpan(span);
 	if (this.data[0] != null) {
 	  if (this.texClass === MML.TEXCLASS.VCENTER) {
 	    var stack = HTMLCSS.createStack(span);
 	    var box = HTMLCSS.createBox(stack);
-	    HTMLCSS.Measured(this.data[0].toHTML(box),box);
-	    // FIXME: should the axis height be scaled?
-	    HTMLCSS.placeBox(box,0,HTMLCSS.TeX.axis_height-(box.bbox.h+box.bbox.d)/2+box.bbox.d);
+            var child = this.data[0].toHTML(box);
+            if (D != null) {HTMLCSS.Remeasured(this.data[0].HTMLstretchV(box,HW,D),box)}
+            else if (HW != null) {HTMLCSS.Remeasured(this.data[0].HTMLstretchH(box,HW),box)}
+            else {HTMLCSS.Measured(child,box)}
+            var a = HTMLCSS.TeX.axis_height * this.HTMLgetScale();
+	    HTMLCSS.placeBox(box,0,a-(box.bbox.h+box.bbox.d)/2+box.bbox.d);
 	  } else {
-	    span.bbox = this.data[0].toHTML(span).bbox;
+	    var html = this.data[0].toHTML(span,HW,D);
+            if (D != null) {html = this.data[0].HTMLstretchV(box,HW,D)}
+            else if (HW != null) {html = this.data[0].HTMLstretchH(box,HW)}
+            span.bbox = html.bbox;
 	  }
 	}
 	this.HTMLhandleSpace(span);
 	this.HTMLhandleColor(span);
 	return span;
-      }
+      },
+      HTMLstretchH: MML.mbase.HTMLstretchH,
+      HTMLstretchV: MML.mbase.HTMLstretchV
     });
     
     //
@@ -2752,7 +2990,7 @@
     //  We also need to wait for the onload handler to run, since the loadComplete
     //  will call Config and Startup, which need to modify the body.
     //
-    MathJax.Hub.Register.StartupHook("onLoad",function () {
+    HUB.Register.StartupHook("onLoad",function () {
       setTimeout(MathJax.Callback(["loadComplete",HTMLCSS,"jax.js"]),0);
     });
   });
@@ -2791,12 +3029,14 @@
           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
           msieNegativeBBoxBug: (mode >= 8),  // negative bboxes have positive widths
           msieIE6: !isIE7,
           msieItalicWidthBug: true,
-          FontFaceBug: true,
+          FontFaceBug: (mode < 9),
           msieFontCSSBug: browser.isIE9,
           allowWebFonts: (mode >= 9 ? "woff" : "eot")
         });
@@ -2810,7 +3050,7 @@
               (HUB.config.root+"/").substr(0,root.length) === root) {webFonts = "otf"}
         }
         HTMLCSS.Augment({
-          ffVerticalAlignBug: true,
+          ffVerticalAlignBug: !browser.versionAtLeast("20.0"),  // not sure when this bug was fixed
           AccentBug: true,
           allowWebFonts: webFonts
         });
@@ -2836,6 +3076,7 @@
               }
             }
           },
+          Em: ((browser.webkit||0) >= 538 ? HTMLCSS.EmRounded : HTMLCSS.Em), // issue #931
           rfuzz: .011,
           AccentBug: true,
           AdjustSurd: true,
@@ -2844,6 +3085,7 @@
           safariVerticalAlignBug: !v3p1,
           safariTextNodeBug: !v3p0,
           forceReflow: true,
+          FontFaceBug: true,
           allowWebFonts: (v3p1 && !forceImages ? "otf" : false)
         });
         if (trueSafari) {
@@ -2869,9 +3111,10 @@
         HTMLCSS.Augment({
           Em: HTMLCSS.EmRounded,   // vertical alignment needs help (since around v20)
           cloneNodeBug: true,      // Chrome gets heights wrong with the cloned ones
-          rfuzz: .011,
+          rfuzz: -.02,
           AccentBug: true,
           AdjustSurd: true,
+          FontFaceBug: browser.versionAtLeast("32.0"), // Chrome 32 fails on bold-italic (#735)
           negativeBBoxes: true,
           safariNegativeSpaceBug: true,
           safariWebFontSerif: [""],