New Look, XHTML 1.1 and MathML

You might have noticed the new look of this weblog. It all started due to Asif and Jacques Distler. Asif just started using

LaTeX

formulae on his weblog and Jacques has been doing so for quite a while. Asif is using a WordPress plugin to convert

LaTeX

equations into images while Jacques converts them (or rather itex) to MathML. I am trying to follow Jacques.

The first step needed was to make my pages valid XHTML 1.1. Previously, my site was valid XHTML 1 Transitional. This required changes in my templates. The old MT 2.6 templates I was using were up to no good. Therefore, I took the new MT 3.o default templates and modified them to my own tastes. Even then, I needed to make some changes in the templates and my entries to make them all pass XHTML 1.1 validity tests.

Right now, all the weblog pages other than the individual entry archives are valid XHTML 1.1. The individual entry pages need some more work because the comment forms need to be changed and the comments themselves are very invalid and require a lot of work. I’ll be slowly fixing that over the next few days or months.

Following Jacques’s advice, I also had to serve my pages as application/xhtml+xml instead of text/html. Actually, this needs to be done only for those browsers which can handle MathML, the rest can be fed text/html. Right now, I am only serving my blog home page as application/xhtml+xml using the Accept header. But later on, I’ll move to Jacques’s scheme.

One of the problems with serving application/xhtml+xml is that the browser does not show anything if the code is not valid. Therefore, it is extremely important to validate all your pages. This could cause problems with comments since commenters can’t be trusted to use only valid XHTML 1.1. I might later try Jacques’s idea of forcing comment previews and validation. But for now, I’ll have to fix them manually myself.

I have tested the new templates in Firefox 1.0 and Internet Explorer 6.0 on my Windows XP machine. The pages looked OK in both. If you find any problems viewing any of the blog pages or the layout doesn’t seem right, please let me know.

I have installed the itex2MML plugin for Movable Type to create MathML content.

And now for some math tests. If you are using a Mozilla browser (use Firefox please, it’s a much better browser), you’ll need to install Math fonts. If you are using Internet Explorer (why?), you can install the MathPlayer plugin.

As I am lazy, I am using the LaTeX (or

LaTeX

) code from a few tests by Jacques and Asif.

First, an integral expression from Asif.

(1)

∫ 0 ∞sin 2 xx −3 /2 e xdx

And here is a passage to test arrays.

Establishing driving point impedances works on the principle of simple R-L-C networks, where

Z L=L.didt

,

Z C=1 /C∫idt

. Driving point impedances and admittances (in terms of effort and flow) are given as:

(2)

e(s)=Z(s)~f(s),and f(s)=Y(s)~e(s)

In the case when we have a 2-port and we have effort of one port and flow of other as inputs and vice versa, then the transfer function of this hybrid formulation can be written as:

(3)

(e 1 (s) f 2 (s))=(h 11 (s) h 12 (s) h 21 (s) h 22 (s))(e 2 (s) f 1 (s))

or

(4)

(f 1 (s) e 2 (s))=(g 11 (s) g 12 (s) g 21 (s) g 22 (s))(f 2 (s) e 1 (s))

Now let us test inline and display equations in a blockquote from a post by Jacques.

This is a test of the new itex2MML+parbreaks filter. Here is an inline equation:

2 sin(x)cos(x)=sin(2 x)

.

And here is a display equation

(5)

∫ 0 ∞e −x 2 dx=π2

And here is some more prose.

Please note that these equations will be properly rendered only on the main page right now and not work on any of the archives (monthly, category and individual entry). I’ll fix that in time though.

Also, unlike Jacques and Asif, I am not allowing Math in the comments, at least until I figure out and implement forced preview and validation.

Finally, I probably have broken my RSS/Atom feeds and accessibilty. I’ll look into that next.

By Zack

Dad, gadget guy, bookworm, political animal, global nomad, cyclist, hiker, tennis player, photographer

23 comments

  1. The moment I saw your post, I felt so inclined to use MathML myself as well as it rendered so beautifully in Firefox even without the installation of these fonts that a popup reminds you to install (by the way, you may wish to remove this popup notice when your page loads, its annoying) but a little test on IE spoiled the whole joy. No rendering at all, till, ofcourse when I install the plugin. So I think I would stick to gif images till some time.
    The mere thought of (making and) serving valid XHTML makes me feel tired :), its a hectic thing and above all nobody is complaining 😛

  2. It looks great in Firefox and Mozilla, but when I loaded your main page in Opera 7.54 it broke pretty badly. It displays everything on the page through “First, an integral expression from Asif”. Following that is an error message “XML parsing failed: undefined entity (Line: 115, Character: 80)” and the rest of the page displays the source code. I have Opera set to identify as Opera instead of spoofing the user-agent.

  3. “in Opera 7.54 it broke pretty badly”

    Opera 7.54 is one of those User Agents that ACCEPT application/xhtml+xml, but are not MathML-aware.

    The reason why it chokes is that the page contains named entities beyond the 5 “safe” ones defined in the XML spec (<, >, &, ' and "). Zack has two choices:

    1. Ignore the ACCEPT headers and only send application/xhtml+xml to MathML-aware browsers. (This is what I do.)
    2. Use a plugin to convert all named entities (including such things as  ) to numeric character references.

    “by the way, you may wish to remove this popup notice when your page loads, its annoying”

    The popup is generated by Mozilla/Firefox, not by Zack’s page. It reminds you (the first time you visit a MathML page after launching the browser) to install the fonts needed to display “stretchy” mathematical characters.

  8. Asif: The popup is a Firefox thing and not mine. Making your page valid XHTML 1.1 is work, but can be done with a day or two of dedication. It is a good idea regardless of MathML. I don’t like the idea of serving gif images for either Math or Urdu. Maybe this way I can annoy Ejaz Asi more. 😉

    Al-Muhajabah: Thanks. I’ll have to fix that using Jacques’s suggestion.

    Jacques: Thanks for visiting and for all your blog posts on the topic which helped me a lot.

    Do you think it is possible to serve gif images of LaTeX-rendered math to browsers which don’t do MathML? Could this be done automagically by writing a plugin or hacking MT code?

    Leila: Complete gibberish? I think you are using MSIE 6? Is that correct? If so, the math should render as “gibberish” but the rest should be ok.

    Shey: Thanks.

    Titus: While that is true, I don’t like serving images.

  9. There’s no obvious nice way to fallback to a GIF image.

    There’s a mechanism in (X)HTML to fallback to alternative content. It’s called the <object> element.

    Consider

    &lt;object type="application/mathml+xml" data="equation.xml"&gt;<br />
&nbsp;&nbsp;&lt;img src="equation.gif" alt="my equation" /&gt;<br />
&lt;/object&gt;

    If the browser understand MathML, it will render it and ignore the image. If the browser doesn’t understand MathML, it will display the image instead.

    But now, each and every stinkin’ equation is two separate files that you have to manage.

    Now that MathPlayer 2 is out, the barrier to getting MathML-capability is very low. IE users don’t even need to switch browsers; installing the plugin is a couple of mouse-clicks. Serving GIF images for equations used to be the only way to go. But I think that era is coming to an end. The up-front efforts are greater, but the long-run benefits of inline MathML are considerable.

  10. That seriously didn’t work as intended. (The preview looked nothing like the final posted comment.) Try this:

    <object type="application/mathml+xml" data="equation.xml">
<img src="equation.gif" alt="my equation" />
</object>

  11. Jacques: I was thinking if your itex2MML plugin and a LaTeX-to-gif plugin were combined, that might do it. But two separate files for each equation might get out of hand soon.

    MathPlayer for IE doesn’t render MathML as beautifully as Firefox does. Plus it doesn’t render display equations on a separate line.

    Your mod_rewrite method does not work for php files. My main index is a php file, so I wrote a small if ... else section to send the correct header.

    I haven’t yet switched all the pages to application/xhtml+xml because my Typekey commenting breaks due to document.write. I need to find a solution to that.

  12. MathPlayer for IE doesn’t render MathML as beautifully as Firefox does. Plus it doesn’t render display equations on a separate line.

    I think that can probably be fixed with a little CSS:

    math[mode=display]{display:block}

    Having said that, I’m not sure that IE supports CSS attribute selectors, so this might just work in every browser except the one you are trying to fix.

    I have written to the guys at DesignScience, asking them about MathPlayer’s (lack of) implementation of mode='display'. We’ll see what they say.

    I haven’t yet switched all the pages to application/xhtml+xml because my Typekey commenting breaks due to document.write. I need to find a solution to that.

    I don’t use TypeKey, so I can’t comment on that, but there’s a lotta grotty Javascript (the comment cookie code, for instance) which needs to be fixed for application/xhtml+xml.

  13. Jacques: MSIE doesn’t support CSS attribute selectors or language selectors. But your update of itex2MML has fixed the error.

    There is an awful lot of Javascript that doesn’t work with application/xhtml+xml.

    And a note to myself: Here are the things that still need to be fixed/added:

    1. Comment Preview Template has major issues. Fixed
    2. The calendar gets cut off on the right in MSIE 6.0. Fixed for small font sizes
    3. Google ads don’t work in Firefox. Try this solution. Works
    4. Typekey commenting doesn’t work in Firefox. Try PHP-Typekey. Worked on individual entry pages, but mt-comment.cgi gave problems, so Typekey removed.
    5. Add comment validation. Validation is installed, now I have to make some template changes on the comment preview and individual entry pages.
    6. Install OpenPGPComment . Done
    7. Force comment previews and validation using MTHash or MT-Approval.

  15. Things left to do:

    1. Add comment validation. Mostly done. Need to make template changes.
    2. Serve cgi pages correctly. Done
    3. Make changes to other parts of website. Done
    4. Add explanations about viewing and commenting in Urdu and Math on main page as well as individual entry archive.
    5. Force comment preview and validation.
    6. Convert monthly and category archives to dynamic. Abandoned as regular plugins won’t work.
    7. Paginate category archives. Abandoned due to above reason.

  16. Front-end and Back-end Changes

    There have been a lot of changes here recently, most of them on the back-end. Most of this work was related to having a bilingual (English and Urdu) blog along with MathML equations. This required valid XHTML 1.1 and serving…

  17. Oh God, I looked at the MathML code and it’s so ugly. Completely insane. I blame the XML fanboy crowd.

    BTW, I use latex. It’s not perfect, but the raw code is at least a bit readable.

  18. some dude: Yeah MathML code is ugly. That’s why I don’t write it directly. Instead I write LaTeX code which gets converted to MathML.

  19. ٹیسٹ

    Just adding a paragraph here because the alpha created havoc on my main index.

    Here is a greek character alpha: α

  20. Math ML is really good. Rice univ has a lot of tech material in connexions working with MathML.

    “kopete” (KDE) is probably the only IM which allows exchange of TeX math expressions.

Comments are closed.