Safari 5.1 and math

Lost in all the Lion hubbub is Safari 5.1’s new MathML renderer. As someone who occasionally puts equations on his web site1, I’ve been looking forward to this. A few weeks ago I downloaded a build of WebKit, the experimental browser that’s sort of a Safari test bed, to get a sense of how polished Safari’s MathML support was going to be. I wasn’t especially impressed but hoped Safari itself would do a better job when it was released. It doesn’t.

You don’t need to have Lion installed to get Safari 5.1. I installed it today on both of my Macs via Software Update. The biggest improvement is supposed to be the Chrome-like separation of processes associated with separate tabs. You know how bad JavaScript on one page will bring up the spinning beachball of death and lock you out of all your other tabs? That’s supposed to be much reduced in Safari 5.1. And there’s a faster JavaScript engine, more advanced CSS options, that Reading List thing that’s supposed to be like Instapaper Jr., and so on. But my first interest is in MathML.

The easiest way to compare Safari’s MathML rendering with other ways of viewing math is to go to this page set up by Peter Luschny. He’s created three pages with the same content: one that uses images to display equations (which we won’t concern ourselves with), one that uses MathJax (which is what I use for equations in my posts), and one that uses MathML.

Here’s a screenshot of the section on Eulerian polynomials as rendered by MathJax:

Equations rendered by Safari via MathJax

Pretty darned good. Here’s a screenshot of that same section as rendered by MathML:

Equations rendered by Safari via MathML

The screenshots are slightly reduced to get them to fit comfortably in the blog. Click on the images if you want to see them full sized on Flickr.

The two main problems with the MathML rendering are shown in this screenshot:

  1. An inability to maintain a baseline. You see this in the first two equations where the closing parentheses (and the symbols after them) are set too low.
  2. Overlapping components. You see this in the third equation where the superscripts of the 2 and the 4 run over the symbols that come after them.

I’m sure Safari will improve, but this is pretty poor performance, especially when you consider that Firefox has had a good MathML renderer for at least six years. Here’s that same section in FF 3.6.13:

Equations rendered in Firefox via MathML

I think the negative signs in the second and third equations are a bit too far from what they’re negating, and I’d prefer larger summation symbols, but otherwise this is very good rendering.

Since MathJax exists, does it matter whether Safari does a good job with MathML? I think so. MathJax uses JavaScript heavily, and equation-rich pages can take a long time to render. A built-in renderer worthy of the name would speed up these pages considerably. Also, if the WebKit engine gets decent MathML support, it’ll make its way into Chrome, and then all the good browsers will be able to handle MathML natively (and IE will have it through the MathPlayer plugin).


  1. That link goes to what may be my favorite post ever. Crisp diagrams, several equations, Gnuplot graphs, a practical application, and a Wizard of Oz reference. It’s what I wanted every lecture to be like back when I was teaching. 


5 Responses to “Safari 5.1 and math”

  1. dubya says:

    What do you use to write MathML? Its awful syntax seems to be its worst feature. Will Markdown convert TeX to MathML automatically?

  2. Dr. Drang says:

    I don’t write MathML at all, mainly because of its awful syntax. If I were to put MathML in my posts, I’d use a LaTeX-to-MathML filter. Markdown knows nothing about TeX or MathML; you’d need another program to preprocess or postprocess the LaTeX to MathML.

    MathJax would be an excellent postprocessor because it can be configured to output MathML, but unfortunately it only works “on the fly” in your browser rather than as an offline filter. Its author, Davide Cervone, seems to be against converting it to an offline filter. Maybe doing so is much harder than I think.

    iTex would be another filter possibility. It’s command language isn’t exactly LaTeX, but they’re identical for most purposes.

  3. Pebe says:

    The MathML rendering of newer Firefox versions is about the same?

  4. Dr. Drang says:

    You could follow the link in a more recent FF build and see for yourself. I don’t keep copy of Firefox up to date because I almost never use it.

  5. Elie says:

    Its a shame that state of Math on the internet. The moment I discovered TeX I ditched all forms of word-processors. I’ve never really had any use to put math equations on a website before, and I am more of a deal with it once it comes up person, but I imagine I would just use LaTeXIT and upload a PNG but that is the most inefficent way of doing it as I’d rather decrease the load on the server and something like MathML or MathJax seem to do that.