XSLT stylesheets for MathML

What is MathML?

It is a headache putting math formula into the webpage. To tackle this, people use MS Equation Editor, or Latex to generate the image, just like what the Wikimedia guys are doing. But that is too difficult! What about directly typing the formula among the paragraphs, and let the browser to render them for us? Yes, we can - using MathML.

Why use XSL stylesheets?

Why? It is just because not all browsers support MathML. Currently, only Firefox have native support in MathML (but presentation type only!). Other popular browsers like Internet Explorer, Opera, or Google Chome, had not yet implemented anything to help render math formula. That's why XSL stylesheets are needed.

How to use the XSL stylesheets?

  1. Create the page using XHTML with MathML

    You should learn how the create XHTML webpages and insert the MathML codes into the main document:

    <?xml version="1.0"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Webpage</title>
      </head>
      <body>
        <h1>Formula 1</h1>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
          <mi>x</mi><mo>+</mo><mn>3</mn>
        </math>
        ...
      </body>
    </html>
    

    Save it as mypage.xml.

    (In fact, I made a 'clone' of the MathML Editor from ASCIIMathML so that you can create them at ease.)

  2. Add a stylesheet processing instruction

    Download these files and copy them into the same directory of the main document: mathml.xsl, mathmlc2p.xsl and pmathmlcss.xsl.

    Then add a stylesheet processing instruction to the begginning of the XHTML file. Just like this:

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/xsl" href="mathml.xsl"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    ...
    

    And that's all! Now you can show math formula in web browsers.

How it is made?

Well, I didn't make it from scratch by myself. I just copy scripts and stylesheets that are currently available on the web and assemble them all together:

XSL for MathML by W3C
The very original idea of putting math formula on the web.
jQuery
A robust Javascript library that helps me write less, do more.
MathMLc2p
Help Firefox to render Content MathML

Which browsers does it support?

Currently the stylesheets supports MathML2.0, and is tested in Firefox, Internet Explorer and Google Chrome, but it should support most other modern browsers equipped with XSLT, JavaScript, and CSS. Here is the test result:

Web Browser native support XSL for MathML
Content Presentation Content Presentation
Internet Explorer 6+ no no no yes (interactive)
Firefox 3.0 no yes (non-interactive) yes yes (non-interactive)
Google Chrome 1+ no no no yes (interactive)
Opera 9.5+ no yes (non-interactive) no yes (interactive)

I would like to see the demo!

Here you are:

psmall.xml
Small Presentation MathML example file.
csmall.xml
Small Content MathML example file.

Last modified: 16 July 2009