Adventures in MathML Land

A long time ago I decided that in order to make the Math-Ventures part of my homesite more attractive, I'd like to convert all the mathematical formulae that had been written using ASCII Art (%-)) into MathML - an XML grammar for writing mathematics. Knowing that MathML was extremely verbose, I decided to try converting to HTML+MathML from LaTeX using TeX4ht. However, when viewed using Firefox (which has a built-in MathML support), the test page rendered all the formulae as plain text, which made me believe it was a bug in TeX4ht.

I left it at that for a long time, but a few days ago decided to give it another try. Again displaying it did not render it nicely. However, copy and pasting the notation into the MathML Tester on the Mozilla homepage, yielded perfect results. After a little thought, my woman (OK - programmer) intuition told me that maybe Mozilla displayed it badly due to the fact the file ended in the .html extension and as thus was treated with the content-type of text/html.

Changing the extension to .xhtml (with a content type of application/xhtml+xml), solved the problem and the formulae were redisplayed. So I finished converting the page from its ASCII-art mess into TeX and rendered it into XHTML+MathML. I needed to change the DOCTYPE to XHTML+MathML which involved some Latemp voodoo. (As it turned out, I didn't do it properly the first time, and as a result the page did not validate).

I also had to install and configure the MathML fonts, or otherwise got weird artifacts and missing symbols in the formulas.

Then I discovered that when served as .xhtml, the Google AdSense ads don't get displayed. I found a workaround here, and after a lot of experimenting got it to work. Then I needed to modify the <object> tag CSS to the following:

.ads_side, .ads_top_wide
{
    overflow: hidden;
}
.ads_side
{
    width:120px;
    height:600px;
}
.ads_top_wide
{
    width:500px;
    height:70px;
}

Otherwise, I got annoying scrollbars and clipped content at all the same reason. Many thanks to someone I talked with on the IRC who helped a lot.

So then the Google Ads worked. Afterwards, I decided to convert a diagram to SVG to make it l33ter. I had to write a Perl script and experiment a bit with affine transformations. The SVG works in Opera and Firefox 1.5.0.x, but doesn't work in Konqueror from some reason. The MathML works only in Firefox, because Opera and Konqueror don't support it. Here's the final result.

The way I see it, when more and more sites like mine will integrate cutting-edge technologies, then more people will have them on their browsers, and web designers will have an easier life. Similarly my Music Recommendations Page now uses display: table and display: table-cell which works well in Firefox, Konqueror and Opera but is broken in MSIE 6. This will provide further motivation for people to stop using MSIE.

Together, we can make the revolution happen! Well, in any case, cheers.