Trouble with MathJax rendering - inconsistent and poor results

HolgerF

For a project idea of mine I need to render LaTeX formulas, and using MathJax (http://www.mathjax.org ) appears to be the easiest solution. I'm currently preparing my output in HTML format, add the MathJax library in <head> and display the result in a QWebView via QWebView::setHtml. Unfortunately, the results are rather poor; in particular I can't get it to perform consistently across platforms.

If you visit the MathJax homepage with any modern browser (e.g. Firefox or Safari), at the upper right there are some example formulas, and you will notice how MathJax processes them rather quickly and produces output that looks good. If instead you use the QtDemo Browser (or the example code below), MathJax will take a rather long time to process the embedded formulas, and from the status messages it displays I take it it has some trouble loading web fonts. So after a time it will fall back on a different rendering approach, which takes quite a bit of time and doesn't look anywhere near as good.
This is at least the result I'm getting on Linux and OSX Lion. On Windows I find that the results appear somewhat inconsistent; often it appears to be able to use the preferred rendering approach (although the results still look sub-par, but at least they are processed quickly), but sometimes it fails or produces different output.

It gets even more confusing if I'm not loading the MathJax homepage, but instead my own page via setHtml as mentioned above. Depending on platform and Qt version, it will either produce the same results as on the MathJax homepage - or it will do nothing at all, just displaying the LaTeX code unaltered. E.g. on Mac OSX with Qt 4.7.4 MathJax processes the input, but produces sub-par output, whereas with Qt 4.8 it does nothing at all.

To reproduce the problem you can either use the Qt Demo Browser and surf to http://www.mathjax.org or use the following simple example. I've written it for PySide, but a C++ example should be straight-forward.

@
import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtWebKit import *

html = """
<html>
<head>
<title>MathJax test</title>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>

&lt;body&gt;
    $$ \sum_{i=1}^n i = \frac{1}{2} n (n+1) $$
&lt;/body&gt;

</html>
"""

app = QApplication(sys.argv)
webview = QWebView()
#webview.setUrl('http://www.mathjax.org')
webview.setHtml(html)
webview.show()
app.exec_()
@

I'd really appreciate some input on this problem. Does QWebView have some security restrictions or otherwise that could cause these problems? WebKit in principle works fine with MathJax, so it has to be something related to the Qt integration.

amundson

I just tried your example with PyQt4*. I think the problem is that Python is treating the 's as escape sequences. When I replaced '\sum' with '\sum' and '\frac' with '\frac', I obtained the expected output.

Does that solve the problem for you?

I don't think PyQt4 vs. PySide is an issue here.

HolgerF

Hi,

didn't expect to get an answer after so many weeks, thanks for your time!
Anyway, I think your point is valid for this particular example, but it's not the problem I'm seeing. Unfortunately I couldn'test it because for some reason the example no longer works for me (MathJax doesn't load at all), but in my test application the HTML source comes from a text file and does not suffer from any escaping problems. You can even try to go to www.mathjax.org (uncomment the line in the example and comment out the setHtml call), and if the formulas in the upper right of the page are actually rendered for you quickly (i.e. not taking seconds and then falling back to image fonts), then you apparently don't have the problem described.

However, in the meantime the MathJax project released a new major version which includes a new rendering backend using SVG. And that one works fine for me. So while the original issue is still unsolved, the SVG renderer is a suitable workaround.

rschulz

To get setHtml working I need to use @webview.setHtml(html, baseUrl=QUrl("http://cdn.mathjax.org/mathjax/latest/MathJax.js")@

on Linux (Debian/testing & Ubuntu 12.04). The baseUrl is also needed for a local installation of MathJax. I don't understand why. Because with setUrl, or on Windows with setHtml, no baseUrl is needed. Odd.