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.

  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:

pmathml2.xml
Small Presentation MathML example file.
simple.xml
Another Small Presentation MathML example file.
stress.xml
From Opera developer Commumity: MathML stress test
torture.xml
From Opera developer Commumity: MathML torture test
csmall2.xml
Small Content MathML example file.
cmathml.xml
Larger Content MathML example file
complex1.xml
From W3C textsuite: A large table with a famous equations, some interactive.
complex2.xml
From W3C textsuite: Short complexity test
complex3.xml
From W3C textsuite: Around 300 equation tests
complex4.xml
From W3C textsuite: Test of most content elements in a single page.
mml2002-01.xml ... mml2002-16.xml
Presentation given at the 2nd International MathML Conference.

Can I look into the source code of the stylesheet?

You may download xsl.zip which contain the uncompressed source code and some examples.

Last modified: 16 July 2009