Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web-Font TeX/Main/Italic fails to load in QTWebKit #302

Closed
mitya57 opened this issue Aug 28, 2012 · 62 comments
Closed

Web-Font TeX/Main/Italic fails to load in QTWebKit #302

mitya57 opened this issue Aug 28, 2012 · 62 comments

Comments

@mitya57
Copy link
Contributor

mitya57 commented Aug 28, 2012

Hi!

I'm trying to add MathJax support to my text editor (ReText), which uses Qt version of WebKit engine. When the page has \imath symbol, it prints:

Loading Web-Font TeX/Main/Italic

(this takes a few seconds) and then prints

Web-Fonts not available -- using image fonts instead

and I get an ugly PNG image as a result.

I can't reproduce this problem with Gtk-based WebKit browsers and Firefox.

P.S: example of page I try to load:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<p><mathjax>$$
\imath
$$</mathjax></p>
</body>
</html>
@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

We have seen this problem with QtWebKit before. See this user forum post for example. As I mention in that thread, the font-detection code is one of the touchiest bits of MathJax, and the WebKit handling is particularly delicate, and it doesn't seem to work properly for QtWebKit.

My suggestion in that discussion was to try SVG output if that is acceptable to you, as it avoids the font issues entirely. That might work better for you.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

SVG output may be acceptable for me, but it's definitely not acceptable for all ReText users :)

I've noticed a strange thing: if I use the version from CDN, second try succeeds; if I use a local copy (from v2.0-latest Git branch), it never succeeds.

Is that possible to fall back to the font used for the rest of the characters? Or fall back to SVG, that's still better than PNG.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

(Citing your post in the linked thread)

I'll probably have to get a copy of the Qt SDK and try it out myself in order to debug it, but that isn't going to happen for a while.

If you are looking for easy-installable QtWebKit-based browsers for testing, take a look at Arora and QtWeb, both are open-source and have Mac OS X builds available (I've used neither of them, though).

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

Thanks for the links to the other browsers. Both of these work fine for me, both on your example and on my own. So I'm wondering what the difference is with your editor. Do you get to specify the default font? If so, can you change it to something else and see if that helps?

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

I set default font to 'Sans'. Not setting it at all or setting to a different value (using embedded CSS, I didn't try QWebSettings) doesn't help.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

Here's a minimal Python script (PyQt needed) that demonstrates the issue. I can provide a C++ version if you prefer.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

About SVG: I wasn't suggesting using SVG for the saved output, only for the preview display (which I thought was where the problem was, since that is the viewer using QtWebKit, right?).

The italic font is the first font MathJax is looking for, and I suspect the same problem will occur for any of the other MathJax fonts. So there is no other font to fall back on. MathJax can't use the page font because MathJax needs to know a lot about the font in order to use it (like the bounding boxes of all the characters), and anyway, most fonts don't include the math characters that it needs. So it has to use its own fonts, and since it is not able to access them, it falls back to images.

Although MathJax doesn't provide a means of falling back to SVG from HTML-CSS, I suppose you could listen for the signal that HTML-CSS produces when it falls back and force a switch yourself. But I think the processing would still be done with images first, and then the switch would occur, so it would not be very efficient.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

Thanks for the code. I will give it a try. As for the font, I don't think CSS change will help; it is the default font for the browser instance that needs to be changed. I don't know how to do that, but your QWebSettings sounds like the right place.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

The italic font is the first font MathJax is looking for, and I suspect the same problem will occur for any of the other MathJax fonts. So there is no other font to fall back on.

I get this error only with special characters like \imath or characters using \mathbf, \mathit etc.

Other things (for example Jα(x) formula from mathjax.org front page) work fine.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

The formula from mathjax.org should definitely have cause the italic font to load (it has to use the characters from that font to display the equation). Can you send a screen shot of the output of the Jα(x) formula? Also, could you add

<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function () {alert(MathJax.Message.Log())});
</script>

to the page just before the script that loads MathJax.js and let me know what the alert produces? Thanks.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

OK, I misread the font name: I see it is Main/italic not Math/italic, which is what is used for the other letters. Ignore my request for a screen shot.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

The alert produces:

Loading [MathJax]/config/TeX-AMS-MML_HTMLorMML.js
Loading [MathJax]/jax/output/HTML-CSS/jax.js
Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js
Loading Web-Font TeX/Main/Italic
Can't load web font TeX/Main/Italic
Web-Fonts not available -- using image fonts instead
Loading [MathJax]/jax/output/HTML-CSS/imageFonts.js
Loading [MathJax]/fonts/HTML-CSS/TeX/png/imagedata.js

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

MathJax "pre-requests" the most used fonts (Math/Italic, Main/Regular, Size1/Regular). These are probably already loaded and ready by the time MathJax gets around to using them. But the other fonts (Main/Bold, Main/Italic) etc. are requested when needed, and so they will not be ready when needed, meaning MathJax will have to wait for them, and detect their presence when they arrive. That is apparently where the problem lies.

One solution might be to preload more of the fonts. Since you are running locally, that should not be much of a performance issue. To do that, try adding

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    preloadWebFonts: ["MathJax_Main-italic","MathJax_Main-bold","MathJax_AMS",
             "MathJax_Size2","MathJax_Size3","MathJax_Size4","MathJax_Caligraphic"]
  }
});
</script>

and see if that helps. We can add more to the list if it does.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

No, that doesn't help…

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

I tried to play with QWebSettings, but had no success:

  • QWebSettings.setFontFamily doesn't work for me;
  • QWebSettings.setUserStyleSheetUrl sets the CSS url, so is equal to embedding CSS.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

Thanks for trying the QWebSettings (and for the documentation link). Can you tell me the setFontFamily that you tried?

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

In terms of the preload fonts, just to be sure, you put that script before the one that loads MathJax.js, right?

Here's something else to try (sort of the reverse). Try adding

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    Augment: {
      PreloadWebFonts: function () {alert("Preload prevented")}
    }
  }
});
</script>

before the script that loads MathJax.js. This should prevent any preloading of fonts. Try this with an equation like the one from mathjax.org, and see if that now causes failures (since the fonts aren't preloaded).

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

I put it after, but putting it before doesn't help either. Inserting the preload-preventing code, I get the "Preload prevented" message (as expected) and the math is not rendered at all: http://ubuntuone.com/0GzZt3YhlZFnBoYljK56xE.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 28, 2012

Can you tell me the setFontFamily that you tried?

Just retried again. The font is changed but MathJax still fails to load TeX/Main/Italic.

QWebSettings.globalSettings().setFontFamily(QWebSettings.StandardFont, 'Liberation Sans')

I tried "Liberation Sans", "Cantarell" (GNOME's default font) and a few others.

@dpvc
Copy link
Member

dpvc commented Aug 28, 2012

Can you also try setting the serif and sans-serif fonts? I seem to recall WebKit-based browsers using those as the default for web fonts before they arrive.

As for the failure, can you put

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {noErrors: {disabled: true}}
});
</script>

before loading MathJax.js, to show TeX error that is being suppressed. It looks from the TeX code that a bunch of characters have been lost. Like the \f from \frac, and \a from \alpha. I'm wondering if some backslash quoting is needed. I suspect the problem is the missing \r from \right, which means there is nothing matching the \left. This seems to be a TeX input problem rather than a output rendering problem.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 30, 2012

(Sorry for the delay).

I'm wondering if some backslash quoting is needed.

Sure, it was needed. I fixed that, and now the Jα(x) formula is rendered correctly, even if fonts preloading is disabled.

Can you also try setting the serif and sans-serif fonts? I seem to recall WebKit-based browsers using those as the default for web fonts before they arrive.

Done, doesn't help unfortunately...

@dpvc
Copy link
Member

dpvc commented Aug 30, 2012

Are you using a full installation of MathJax, or have you trimmed it down? Do you have access to any DOM debugging tools, and if so, can you tell if the MathJax_Main-Italic font is actually being loaded (e.g., does it appear in the resources list)?

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 30, 2012

In the test app, I'm just using the version from cdn.mathjax.org, so it's full. I don't know how to access the Web Inspector in QtWebKit app, but I can insert some alert()-ing JS code if you give me it :)

@dpvc
Copy link
Member

dpvc commented Aug 30, 2012

Unfortunately, you can't get the information from javascript (otherwise it would be a LOT easier to tell when a font has arrived).

At this point I'm kind of out of suggestions. I guess I'll have to try out the minimal python script that you provided myself and see what I can come up with. But I suspect I'm not going to be able to get to that for a while.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 30, 2012

I've installed QupZilla browser (which has web inspector), and I'm able to reproduce this bug there. With which configuration should I test the font loading? With \imath or with the Jα(x) formula? Should I add any x-mathjax-config stuff?

@dpvc
Copy link
Member

dpvc commented Aug 30, 2012

With \imath.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 30, 2012

Here's the list of loaded fonts from Resources:

  1. MathJax_Calligraphic-Regular.otf
  2. MathJax_Main-Bold.otf
  3. MathJax_Main-Italic.otf
  4. MathJax_Main-Regular.otf
  5. MathJax_Math-Italic.otf
  6. MathJax_Size1-Regular.otf
  7. MathJax_Size2-Regular.otf
  8. MathJax_Size3-Regular.otf
  9. MathJax_Size4-Regular.otf

@dpvc
Copy link
Member

dpvc commented Aug 30, 2012

OK, so it appears to be a detection problem (which we suspected anyway). Do you have any timing information about how long the files have taken to get to you?

Here is something to try. It disables the detection and just waits 200 milliseconds and says the font is there. This might let you get the math OK, but you might need to adjust the 200 to suit your needs.

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Startup",function () {
  var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
  HTMLCSS.Font.checkWebFont = function (check,font,callback) {
    if (check.time(callback)) return;
    if (check.total === 0) {
      HTMLCSS.Font.testFont(font);
      setTimeout(check,200);
    } else {callback(check.STATUS.OK)}
  }
});
</script>

Not a permanent solution, but it could tell us if the fonts are able to be rendered properly.

@dpvc
Copy link
Member

dpvc commented Aug 30, 2012

OOPS, I forgot to change the delay, but have edited the comment above to include it, so use that rather than the emailed one.

@mitya57
Copy link
Contributor Author

mitya57 commented Aug 30, 2012

It works! Surprisingly, even the script from initial version of your comment works (without "200"). However, the letter doesn't look the same as in Chromium — it seems that it's not italic:

screenshot

Is that correct?

@dpvc
Copy link
Member

dpvc commented Sep 9, 2012

No. I've had to slow down a bit because I started teaching the fall term last week. Things will move at a slower rate for a while, I'm afraid. The first priority is getting out a bug-fix release in the next few weeks.

@mitya57
Copy link
Contributor Author

mitya57 commented Oct 7, 2012

Installing STIX fonts locally fixes this issue, however it causes a regression in font appearance in Chrome/-ium:

Application Screenshot
Chrome with STIX fonts Chrome with STIX fonts
ReText with STIX fonts ReText with STIX fonts
Chrome without STIX fonts Chrome without STIX fonts

Note the appearance of "x", "n" and "χ" characters. Is that a known issue? Also, is there a way to force using web fonts, even when the STIX ones are installed?

@dpvc
Copy link
Member

dpvc commented Oct 11, 2012

I think I remember that Fred Wang spotted some issues with accessing the STIX fonts from Linux. That might be the issue here. But note that is is again an italic versus upright issue, so perhaps there is an issue with some italic fonts in Linux? What flavor of Linux are you using?

is there a way to force using web fonts, even when the STIX ones are installed?

Yes, you could set availableFonts to [] in the HTML-CSS section of your configuration. This lists the local fonts that MathJax should try to look for.

@mitya57
Copy link
Contributor Author

mitya57 commented Oct 11, 2012

What flavor of Linux are you using?

I can reproduce this issue on Debian and Ubuntu, with fonts-stix 1.1.0. This bug occurs only with Chrome for me, not with Firefox, ReText or Epiphany (which uses Gtk+ WebKit).

FWIW, when I open the wrongly displayed characters in the Web Inspector, it displays this:

element.style {
   font-family: STIXGeneral-Italic;
}

@dpvc
Copy link
Member

dpvc commented Oct 12, 2012

Interesting. Can you use the inspector to change that to

element.style {
    font-family: STIXGeneral;
    font-style: italic;
}

and see if that looks right?

Also, can you type

MathJax.Hub.Browser.STIXfontBug

into the console and see if it is true rather than undefined?

@dpvc
Copy link
Member

dpvc commented Oct 12, 2012

Also, if you open the MathJax About dialog, does it list you properly as using Chrome?

@mitya57
Copy link
Contributor Author

mitya57 commented Oct 12, 2012

Interesting. Can you use the inspector to change that to <...> and see if that looks right?

That helps. Also, changing the font for characters like ∀ and ∈ from STIXGeneral-Regular to STIXGeneral makes them look better.

MathJax.Hub.Browser.STIXfontBug

It is true.

Also, if you open the MathJax About dialog, does it list you properly as using Chrome?

Yes, it lists me as using Chrome.

@dpvc
Copy link
Member

dpvc commented Oct 12, 2012

OK, thanks, that helps. I found the bug. The changes to the font name were to overcome a bug with STIX fonts in Mac OS X Lion (10.7), and it looks like I forgot to restrict to just Mac OS for the changes when Chrome is in use (ARGH!) so the change was also made for you in Linux. It is an easy fix, and I will put that into the v2.1 branch.

For now, you can add

<script type="text/x-mathjax-config">
MathJax.Hub.Register.LoadHook("[MathJax]/jax/output/HTML-CSS/fonts/STIX/fontdata.js",function () {
  var FONTS = MathJax.OutputJax["HTML-CSS"].FONTDATA.FONTS;
  var BROWSER = MathJax.Hub.Browser;
  if (BROWSER.STIXfontBug && !BROWSER.isMac) {
    delete BROWSER.STIXfontBug;
    FONTS["STIXGeneral"].family = "STIXGeneral";
    FONTS["STIXGeneral-italic"].family = "STIXGeneral";
    FONTS["STIXGeneral-italic"].style = "italic";
    FONTS["STIXNonUnicode"].family = "STIXNonUnicode";
    FONTS["STIXNonUnicode-italic"].family = "STIXNonUnicode";
    FONTS["STIXNonUnicode-italic"].style = "italic";
  }
});
</script>

to your document somewhere before the script that loads MathJax.js itseld. This will undo the changes that were made for OS X Lion when you are not actually on OS X. (I haven't actually tested the code, so let me know if something goes wrong).

@dpvc
Copy link
Member

dpvc commented Oct 12, 2012

Note: this should fix the STIX font issue, but does not help the web font problem. I still don't know what is going on there.

@pkra
Copy link
Contributor

pkra commented Oct 20, 2012

@mitya57 this should be fixed in 2.1-beta now. Could you give it a try?

@dpvc
Copy link
Member

dpvc commented Oct 20, 2012

Peter means the STIX font issue should be fixed, not the original web-font problem.

@pkra
Copy link
Contributor

pkra commented Oct 20, 2012

Ah, sorry! My fault -- this thread has been around a bit ;)

@mitya57
Copy link
Contributor Author

mitya57 commented Oct 21, 2012

@mitya57 this should be fixed in 2.1-beta now. Could you give it a try?

Yes, it's fixed now (the STIX font issue). Thanks!

@mitya57
Copy link
Contributor Author

mitya57 commented Dec 21, 2012

Some new investigations:

  • Copying MathJax opentype fonts to /usr/share/fonts directory (so that fontconfig sees them) makes this bug disappear;
  • Replacing MathJax_Main-Italic.otf file with MathJax_Math-Italic.otf also makes this bug disappear (though the result looks ugly, as expected).

@fred-wang
Copy link
Contributor

Copying MathJax opentype fonts to /usr/share/fonts directory (so that fontconfig sees them) makes this bug disappear;

@pkra @dpvc : BTW, I asked @mitya57 to modify the way MathJax is packaged in Debian so that the open type fonts are in a separate package and are installed as "local fonts". That may help for Firefox's native MathML and also speed up MathJax's rendering on Debian-based Linux distributions.

@benweet
Copy link

benweet commented Aug 15, 2014

I was struggling all this afternoon trying to have wkhtmltopdf working with MathJax on Amazon EC2 (CentOS or Ubuntu): STIX local font not detected, TeX font not loading ("Can't load web font TeX/Main/Regular"), rendering image font after a while...

The workaround posted by @dpvc on Aug 30, 2012 did fix the TeX font loading issue, thx! (not the STIX detection though)

Note: the problem appears on latest version of wkhtmltopdf 0.12.x, it used to work fine with previous version 0.11 (using MathJax 2.4).

@pkra pkra added this to the Next Release milestone Aug 20, 2014
@pkra
Copy link
Contributor

pkra commented Aug 20, 2014

I'm wondering if we should take another look at the qtwebkit problem.

@dpvc
Copy link
Member

dpvc commented Aug 21, 2014

STIX local font not detected

@benweet, there are several different packagings of the STIX fonts, and MathJax can only use one of them. If you have STIXGeneral.otf, STIXSizeOneSym.otf, and a total of about 28 different STIX fonts, then you have the right set. If you have five fonts (STIX in regular, italic, bold, and bold-italic, plus a STIX math font), then you have the version MathJax can't use, and it will not be detected by MathJax. I suspect that may be the issue for you.

@benweet
Copy link

benweet commented Aug 21, 2014

@dpvc I was using this package on Ubuntu:
http://mirrors.kernel.org/ubuntu/pool/universe/f/fonts-stix/

It contains the font you describe and worked fine with MathJax using wkhtmltopdf 0.11.

@dpvc
Copy link
Member

dpvc commented Aug 21, 2014

OK, looks like font detection continues to be an issue in wkhtmltopdf. Thanks for the additional information.

@pkra pkra changed the title Web-Font TeX/Main/Italic fails to load Web-Font TeX/Main/Italic fails to load in QTWebKit Aug 22, 2014
@pkra
Copy link
Contributor

pkra commented Aug 22, 2014

I've renamed the issue to include QTWebKit since both @mitya57 and @benweet point to QT WebKit specific issues.

@dpvc
Copy link
Member

dpvc commented Aug 22, 2014

The fix for the Main-Italic web font not being detected (and causing a delay) is already made as the fix for #845, so the only remaining issue should be the detection of local STIX fonts.

@dpvc
Copy link
Member

dpvc commented Aug 22, 2014

I'm going to move this out of this milestone since the QtWebKit part is all that is left.

@dpvc dpvc removed this from the Next Release milestone Aug 22, 2014
@pkra
Copy link
Contributor

pkra commented Oct 30, 2015

Closing this as abandoned.

@pkra pkra closed this as completed Oct 30, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants