DanielScully.co.uk

Web Design

A Beginner's Guide to MathML

Using MathML


Standalone

MathML is based on XML, hence it can be used on its own as a way of storing mathematical equations for distribution or as an input into other software (such as Mathmatica).

If this is how you intend to use MathML you should first remember to include the XML decleration, specifying the version and encoding in use. Then, the root <math> tag should also specify the MathML namespace with the 'xmlns' attribute. Conventionally such files are stored with a '.mml' extension, or less often '.xml'.

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <math xmlns="http://www.w3.org/1998/Math/MathML">
  3. <msup>
  4. <mi>x</mi>
  5. <mn>2</mn>
  6. </msup>
  7. </math>
Websites

Including MathML in websites is problematic due to browser support, which I will discuss briefly at the end, but there are presently two main options:

Firstly you can create your webpage in XHTML 1.1. If you do this you must use the 'XHTML + MathML + SVG' doctype, and the <math> element must again reference it's namespace with the 'xmlns' attribute.

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC
  3. "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  4. "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <body>
  7. <math xmlns="http://www.w3.org/1998/Math/MathML">
  8. <msup>
  9. <mi>x</mi>
  10. <mn>2</mn>
  11. </msup>
  12. </math>
  13. </body>
  14. </html>

The future of web design now looks to lie in HTML 5. HTML 5 includes MathML within its specification, making it an integral part of the standard. This allows us to include the <math> element without its namespace when used with the HTML 5 doctype:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <math>
  5. <msup>
  6. <mi>x</mi>
  7. <mn>2</mn>
  8. </msup>
  9. </math>
  10. </body>
  11. </html>

If you are using XHTML 5, then the 'xmlns' is again required, but the DOCTYPE is optional.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4. <math xmlns="http://www.w3.org/1998/Math/MathML">
  5. <msup>
  6. <mi>x</mi>
  7. <mn>2</mn>
  8. </msup>
  9. </math>
  10. </body>
  11. </html>

Remember also, that any HTML document should be sent with MIME type 'text/html' and any XHTML document should be sent with 'application/xhtml+xml'.

Browsers

To date (September 2010) MathML has been pretty poorly supported in browsers, so below is an overview of current support.

You can try see how all the examples from this tutorial are rendered in your browser by visiting my MathML Borwser Test in the resources section.

Internet Explorer

All current versions of Internet Explorer (8 and below) have no support for MathML. Support can be added through the use of plugins, such as MathPlayer. Internet Explorer 9 promises to support much of HTML 5, but there has been no mention of whether this will include MathML.

Firefox

Firefox has by far the best MathML support of any major browser. It is not perfect, but most equations will be displayed correctly.

Opera

Opera is the only other major browser to provide native support. It implements MathML thorugh a "CSS profile" which essentially means that it is using its normal layout mechanisms to approximate MathML layouts. It is far from perfect and far from complete, but it's a good start.

WebKit - Safari and Chrome

The Safari and Chrome browsers are both built on the WebKit layout engine. At present there is no support in WebKit for MathML, however work has now begun on its inclusion so watch this space!

Tools

If you Google around enough you will find that there are several different tools available. One I have found to be good is http://www.mathmlcentral.com, a resource from Wolfram Research, which will validate, render, generate and plot MathML.

Conclusion

That's it! You should now have a basic knowledge of the elements in MathML and how to use them.

As I mentioned in the introduction, this is not an exhaustive tutorial and there are elements, attributes and stylings which have not been covered. If the thing you're looking for is not here that doesn't mean it's not possible in MathML. In fact it almost certainly is possible.

There are not yet many MathML tutorials available on the internet. I wrote this as a way of teaching myself as I worked through the specification because I couldn't find any useful guides. If you want to see what else is available in MathML the specification is probaly the best place to go, now that you have a grounding in it. Specifically, the chapter on presentational MathML. The Wikipedia article is also useful for staying up-to-date.

I hope this has been useful to you. I really value constructive feedback, so please use the contact link on the menu to let me know about how you found it.