Webkit renders equations oblique

[klmr]

Rendering on Webkit (Chrome [12.0.742.122] and Safari on OS X 10.6 / 10.7) looks broken: the whole equation is rendered oblique, in addition to other styling being applied:

Notice that digits math operators (such as cos) and normal-sized parentheses are oblique too, and that letters are oblique and italic.

This is reproducible across different computers. Opera renders the equation as expected on the same computers.

[dpvc]

There have been three reports similar to this, and the common thread seems to be OS X 10.7 (Lion). The STIX fonts are shipped with Lion, and MathJax is configured (by default) to use these in preference to web-based fonts when they are found on the local system, and that is what MathJax is doing in this case. (Opera, however, can't access large blocks of the STIX fonts, and so they are disabled for Opera, which is why that works for you.)

I don't have access to Lion to test this out, but it appears that there may be a bug either in the font system for Lion, or in the copies of the STIX fonts that are come with Lion. If you would be willing to help diagnose the problem, I'll make up a test file that you can run to see if we can figure it out.

In the meantime, you could use FontBook to disable the STIX fonts, and that will force MathJax to use its web-based fonts instead. Or you could install the MathJax fonts as local fonts, and it will take those in preference to STIX.

Davide

[dpvc]

PS, your message indicates that this is true for OS 10.6 as well as 10.7, but I have only heard of it in 10.7. Can you confirm that it is also in 10.6? If so, what version of Safari (I assume it is the same version of Chrome you list above).

Thanks.

Davide

[klmr]

I remember having had the problem before last weak, which would mean 10.6. However, I wouldn’t swear to this.

Be that as it may, I am able to verify that the issue is indeed with the STIX fonts: disabling them in the Font Book removes the rendering problems.

[dpvc]

Thanks for the additional info.

Davide

[chearon]

I don't think the problem is with Lion's STIX fonts. I just waded deep into MathJax's generated DOM and it found that English alphabet characters a,b,c... are being given an italic font style. I removed each font-style declaration and the render looked correct to me.

Maybe other versions of STIX look better italicized, but the version in Lion shouldn't be made italic by default. I can't exactly tell all my users to disable STIX in FontBook. Has there been any progress on this issue?

[klmr]

crh0872, I think that it’s correct to apply italics to Roman letters. In fact, this is how the default rendering of variables in TeX looks like. The problem here is that all other symbols are also rendered obliquely. This is patently wrong, and most likely due to the STIX fonts, not the DOM generated by MathJax – or did you find that every symbol was explicitly italicised there? That would constitute a bona fide bug, but not the italicisation of Roman letters (this is by design, and certainly desired).

[chearon]

Hmm, I see. The STIX fonts seem correct though, I just looked at them in FontBook. I guess this is indeed a bug in Lion as suggested. That makes the current work-around to use TeX, which works for me:

  MathJax.Hub.Config({
    'HTML-CSS': {
      availableFonts: [],
      webFont: 'TeX'
    }
  });

Edit: and to answer you question, I did not find every symbol was italicized, just the Roman letters, so I was wrong thinking that it was MathJax's fault.

[dpvc]

You may want to see my response to issue #178 (it is linked just above your first comment). I suggest something similar to your configuration above.

MathJax is correctly marking single-letter <mi> elements as italic. The issue appears to be that WebKit properly selects the italicized font, but doesn't seem to realize that it is already in itialics, and so applies an italicization algorithm to the (already italic) letters, over-italicizing them. In the screen shot at the top of this page there are also some other symbols that are in italics even though they are not marked in italics by MathJax (the small parentheses and exclamation point for example). I'm not sure why those are italic, nor why other characters are correctly shown.

[chearon]

Well, here: http://www.stixfonts.org/allGlyphs.html in Chrome/WebKit on OS X Lion the STIXGeneralItalic font and the STIXGeneral font are identical when rendered without any CSS. When I apply italics in Web Inspector, they get the same look as the image above. I don't know much about font rendering - I thought that using an italics algorithm was a fallback for if an italic version is not available. If that's true then when I add font-style: italic, it should switch to STIXGeneralItalic (which looks right to me) instead of applying the algorithm like you said.

[chearon]

Oh, apparently the problem was with STIX: https://bugs.webkit.org/show_bug.cgi?id=67604 . I think I like the TeX fonts better anyway.

[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

[fred-wang]

I probably can not test this as our testing machine is a Mac Leopard. This is a browser/font bug, do we really want to add a unit test for this issue? For the moment, I label this "Do not write test". It could probably be possible to compare the width of a token element like cos with the one of the same element with italic style forced.

In any case, it would be helpful if people who experimented this bug can confirm that the latest candidate version
http://devel.mathjax.org/mathjax/dpvc/v2.0-candidate/MathJax.js
fixes the issue.