Procrastination: New Look, XHTML 1.1 and MathML

« New Year Resolutions | Main | Brass Crescent Awards Voting »

پیر 10 جنوری 2005Monday, January 10, 2005

New Look, XHTML 1.1 and MathML

$MathML-enabled post (click for details).$

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)

\int_{0}^{∞} \frac{\sin^{2} x}{x^{- 3 / 2}} e^{x} dx

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 . \frac{di}{dt}$ , $Z_{C} = 1 / C \int i dt$ . 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)

(\begin{matrix} e_{1} (s) \\ f_{2} (s) \end{matrix}) = (\begin{matrix} h_{11} (s) & h_{12} (s) \\ h_{21} (s) & h_{22} (s) \end{matrix}) (\begin{matrix} e_{2} (s) \\ f_{1} (s) \end{matrix})

(4)

(\begin{matrix} f_{1} (s) \\ e_{2} (s) \end{matrix}) = (\begin{matrix} g_{11} (s) & g_{12} (s) \\ g_{21} (s) & g_{22} (s) \end{matrix}) (\begin{matrix} f_{2} (s) \\ e_{1} (s) \end{matrix})

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) $\int_{0}^{∞} e^{- x^{2}} dx = \frac{\sqrt{π}}{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.

Posted by Zack at January 10, 2005 12:02 AM in Internet , MathML

Trackback Pings

TrackBack URL for this entry:
http://www.zackvision.com/mt/zv-trbk.cgi/787

Listed below are links to weblogs that reference New Look, XHTML 1.1 and MathML:

» Front-end and Back-end Changes from Procrastination
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... [Read More]

Tracked on February 11, 2005 9:23 AM

Comments

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 :P

Posted by: -Asif (37 comments) at January 10, 2005 6:39 AM

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.

Posted by: Al-Muhajabah (260 comments) at January 10, 2005 11:16 AM

“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:

Ignore the ACCEPT headers and only send application/xhtml+xml to MathML-aware browsers. (This is what I do.)
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.

Posted by: Jacques Distler (10 comments) at January 10, 2005 2:54 PM

Who knew that I would one day see a blog in complete gibberish!

meh????

Posted by: Leila (20 comments) at January 10, 2005 8:20 PM

Just wanted to let you know the website works fine with Mozilla 1.6 and RedHat 8.0

Posted by: Shey'sRebellion (5 comments) at January 11, 2005 10:59 AM

I and some others use LaTeXRender, whose WordPress plugin version is by Steve Mayer. Since Internet Explorer still does not support MathML, we use LaTeXRender to render a GIF equivalent of the LaTeX code. The benefit of this is that we can can display more than just mathematics.

Posted by: Titus Barik (2 comments) at January 11, 2005 11:03 AM

Since Internet Explorer still does not support MathML…

With the MathPlayer 2.0 plugin, InternetExplorer displays MathML quite nicely. Casual visitors may not be interested in downloading a plugin, but regular readers of your site most likely will.

Posted by: Jacques Distler (10 comments) at January 11, 2005 12:44 PM

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.

Posted by: Zack (1784 comments) at January 11, 2005 3:36 PM

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.

Posted by: Jacques Distler (10 comments) at January 11, 2005 4:32 PM

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>

Posted by: Jacques Distler (10 comments) at January 11, 2005 4:37 PM

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.

Posted by: Zack (1784 comments) at January 11, 2005 9:12 PM

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.

Posted by: Jacques Distler (10 comments) at January 11, 2005 11:53 PM

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:

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

Posted by: Zack (1784 comments) at January 13, 2005 2:13 AM

OpenPGPComment has been installed and is working.

Posted by: Zack (1784 comments) at January 16, 2005 5:33 AM | PGP Sig

Things left to do:

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

Posted by: Zack (1784 comments) at January 16, 2005 2:40 PM | PGP Sig

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.

Posted by: some dude (1 comments) at June 12, 2005 4:51 PM

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.

Posted by: Zack (1784 comments) at June 12, 2005 10:26 PM | PGP Sig

ٹیسٹ

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

Here is a greek character alpha: α

Posted by: Zack (1784 comments) at October 24, 2005 1:26 PM

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.

Posted by: جیسبادی (1 comments) at October 29, 2005 1:32 PM

جیسبادی: Kopete looks interesting. IMing TeX Math expressions is fun!

Posted by: Zack (1784 comments) at November 1, 2005 12:05 AM

I fixed TypeKey on my XHTML site. Read how here: http://pt.withy.org/ptalk/archives/2006/06/typekey_xhtml_and_firefox.html

Posted by: P T Withington (1 comments) at June 6, 2006 2:20 PM

P T Withington: Thanks.

Posted by: Zack (1784 comments) at June 13, 2006 10:49 PM | PGP Sig

Procrastination

The art of keeping up with yesterday's blogging

پیر 10 جنوری 2005Monday, January 10, 2005

New Look, XHTML 1.1 and MathML

Advertisements

Trackback Pings

Comments

Post a comment