rendering problems in Safari 5.1.1

[ghazel]

On OS X Lion in Safari 5.1.1, there are several serious rendering issues. The sqrt line and parenthesis are mis-placed in the examples:

http://s4.postimage.org/utsmgtvo/Screen_Shot_2011_10_16_at_6_33_36_PM.png

[dpvc]

OS X 10.7 (Lion) ships with the STIX fonts installed, and MathJax will use those in preference to its web-based fonts. Unfortunately, there appears to be an incompatibility with the STIX fonts and recent versions of WebKit that causes the fonts to be rendered over italicized (it looks like they have had an italic algorithm applied to them even though they are already italic). It is not actually the parenthesis that is misplaced, it is the preceding f that is over italicized.

One solution is to use FontBook to disable the STIX fonts (if you aren't using them in other contexts). Or you could download and install the MathJax web fonts (since local copies of them will be used in preference to local STIX fonts). Alternatively, if you are the author of the web page using MathJax, you can change your configuration to remove the STIX fonts from the availableFonts array in the HTML-CSS block of your configuration. E.g.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "HTML-CSS": {
      availableFonts: ["TeX"]
    }
  });
</script>

Davide

[dpvc]

This is a duplicate of issue #152

[ghazel]

Ok, thank you!

[dpvc]

OK, I've finally had the chance to come up with a work-around to the STIX font problem on OS X Lion. It turns out that WebKit seems to be replacing font-family:STIXGeneral with the equivalent of font-family:STIXGeneral; font-style:italic whenever the italic font includes the corresponding character, and replacing font-family:STIXGeneral; font-style:italic by an extra italic version of STIXGeneral (algorithmically generated). All of this is unrelated to MathJax, as it occurs in a page with just text and CSS to change the fonts. (It also adversely affects the native MathML in WebKit.)

Fortunately, it is still possible to access the STIXGeneral font via font-family:STIXGeneral-Regular and the italic version by font-family:STIXGeneral-Italic (without the font-style:italic). It is also possible to tell MathJax to set up its references that way. To do so, include the following before loading MathJax.js

<script type="text/x-mathjax-config">
MathJax.Hub.Register.LoadHook("[MathJax]/jax/output/HTML-CSS/fonts/STIX/fontdata.js", function () {
  var HTMLCSS = MathJax.OutputJax["HTML-CSS"];

  MathJax.Hub.Browser.Select({
    Safari: function (browser) {
      browser.STIXfontBug = browser.versionAtLeast("5.1") && browser.isMac;
    },
    Chrome: function (browser) {
      var match = navigator.appVersion.match(/AppleWebKit\/(\d+)/);
      if (match && parseInt(match[1]) > 534) {browser.STIXfontBug = true}
    }
  });
  if (MathJax.Hub.Browser.STIXfontBug) {
    HTMLCSS.FONTDATA.FONTS["STIXGeneral"].family = "STIXGeneral-Regular";
    HTMLCSS.FONTDATA.FONTS["STIXGeneral-italic"].family = "STIXGeneral-Italic";
    delete HTMLCSS.FONTDATA.FONTS["STIXGeneral-italic"].style;
    HTMLCSS.FONTDATA.FONTS["STIXNonUnicode"].family = "STIXNonUnicode-Regular";
    HTMLCSS.FONTDATA.FONTS["STIXNonUnicode-italic"].family = "STIXNonUnicode-Italic";
    delete HTMLCSS.FONTDATA.FONTS["STIXNonUnicode-italic"].style;
  }
});
</script>

This will be included in MathJax v2.0. This should allow the STIX fonts to be used correctly with MathJax, without having your users disable STIX, or disabling STIX fonts for non-WebKit browsers.

Hope that helps.

Davide

[dpvc]

It turns out that the STIX NonUnicode fonts also need to be adjusted similarly to STIXGeneral (I have tested all the other fonts, and they seem to be OK. This seems only to affect the ones that have italic versions). I have edited my code snippet above to include the additional fonts.