## Announcing…MathML!

Posted by**Beth Dakin**on Tuesday, August 17th, 2010 at 5:52 pm

If you’ve been following check-ins for the last year or so, then you already know that some dedicated contributors have been working on a MathML implementation in WebKit. I am very pleased to announce that the implementation is now turned on by default in the WebKit build and in WebKit Nightlies! Big thanks to Alex Milowski, François Sausset, and everyone else who has worked on MathML in WebKit.

Check out Riemann’s Zeta Function, as rendered by WebKit:

Download a WebKit Nightly and check out the demo for yourself. And as always, we encourage you to get involved and file bugs.

August 17th, 2010 at 8:56 pm

This is probably known to all of you working on this, but the example render here (the png file) has a bunch of typographic problems: the equals sign is too close to the closing parentheses, the summation sign is too high vertically, the 1 under the sum should not be italicized (similarly, the infinity symbol should not be), there’s an odd amount of space between the fraction bar and the stuff below, and the summation sign itself is much too bold.

Still, nice to hope that eventually we’ll be able to put math on the web in a way that looks reasonable without resorting to images.

August 17th, 2010 at 9:39 pm

I agree with everything Jacob said. For reference, this is how LaTeX renders the same formula:

http://i.imgur.com/R0qea.png

August 18th, 2010 at 12:03 am

I’m excited about MathML in WebKit, and I look forward to it meeting and quickly exceeding the typographic quality of the typical TeX-based math expressions as seen in math paper PDFs.

I agree with spicyj that at this time, TeX appears to be better typographically compared to this initial level of WebKit’s MathML support. However, I think even TeX (perhaps not TeX itself, but how it ends up being used) leaves a lot to be desired. I think a major factor is that TeX’s typefaces and font metrics are often a jarring contrast to the typical math paper’s body text typeface. Another major factor is that in many environments, it seems TeX-based mathematical typography is not antialiased the same way the body text is, causing the TeX-based stuff to look jaggy in comparison.

August 18th, 2010 at 12:27 am

First, love this. I maintain a hack to convert LaTeX to images, but I earnestly look forward to its obsolescence.

Also likely known to the MathML crew, but the n-Category Café is a heavy real-world adopter of MathML. Here’s a post there that shakes out a number of differences between the nightly build and Firefox (I don’t know who, if anyone, is following the standard):

http://golem.ph.utexas.edu/category/2010/08/thermodynamics_and_wick_rotati.html

Some things that look different (that, again, I’m not qualified to say are or aren’t bugs):

- Blocks of math are left-aligned in WebKit; they’re centered in Firefox

- In Firefox, labels like “unitless parametrization” are in Roman text and have spaces; in WebKit, slanted and no spaces

- Also slanted in WebKit but not FF: blackboard bold R.

- There are large spaces to the left of super/subscripts, and less horizontal spacing than Firefox generally.

- One sigma symbol has its top cut off (under “Say we have a system…”)

- I don’t have full Unicode fonts, so in both browsers I get placeholders for characters like U+1D400, math bold uppercase A. I guess that isn’t a bug (it’d be rough to try to select fallbacks) but noting it for completeness.

I bet we’re going to see the MML rendering improve quickly. It can’t hurt that people can actually use it now!

August 18th, 2010 at 12:29 am

Bleh, in my heart of hearts, I know I should have filed that in Bugzilla. Will later.

August 18th, 2010 at 12:50 am

Please write up any issues in Bugzilla at http://bugs.webkit.org/.

August 18th, 2010 at 12:52 am

I might be wrong (I’m not an expert by any means!), but shouldn’t the math element have an implicit namespace of ‘http://www.w3.org/1998/Math/MathML', even if not specified?

In other words:

var element = document.createElement(‘div’);

element.innerHTML = ”;

console.log(element.firstChild.namespaceURI)

Should log ‘http://www.w3.org/1998/Math/MathML', even if not given an xmlns tag.

August 18th, 2010 at 4:00 am

A nice side by side comparison of TeX, Firefox 3.6, and the browser you are running for complex MathML:

https://eyeasme.com/Joe/MathML/MathML_browser_test.html

August 18th, 2010 at 8:08 am

I feel compelled to point out that, in the demo file, the equation labelled as “De Moivre’s Theorm” is, in fact, Euler’s formula.

August 18th, 2010 at 11:45 am

Congratulations! on getting MathML rendering up and running on all builds of WebKit.

August 18th, 2010 at 1:21 pm

Congratulations! You may be aware of the MathJax project (www.mathjax.org) that is an open source JavaScript engine that displays MathML and LaTeX in all modern browsers, including WebKit-based ones. It makes use of native MathML display in browsers where it is present. When your MathML implementation is a bit farther along, we would be happy to have it make use of it. Is there an easy way to check for the presence of WebKit MathML support from JavaScript?

August 18th, 2010 at 6:26 pm

richbradshaw: In the post about the HTML5 parser, they said they’d be tackling the fragment parser used for innerHTML next. I don’t know for sure, but I bet that’s the missing piece for automatically getting the right namespace.

(You can probably insert MathML that you parsed as XML with DOMParser — I commented with a few lines of code to do that on the HTML5 post. But that’s neither here nor there.)

Mark Rowe: Yes, I’ve realized the error of my ways and started filing bugs. More later.

August 19th, 2010 at 5:14 am

MathML in HTML5 works great! See:

https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test

The default W3C HTML validator does not work correctly (yet) with MathML in HTML5.

To validate an HTML5 document that uses MathML, use the W3C Beta HTML validator at

http://qa-dev.w3.org:8888/

August 22nd, 2010 at 12:17 am

I suppose it’s MathML 2.0SE, right?

MathML 3 is a Proposed Recommendation at W3C now

and I hope we can enjoy it soon!