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?
-
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.)
-
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