A Quick Math ML Tutorial

About MathML

MathML is an XML markup language designed to display complex mathematical expressions (e.g. fractions, square roots, matrices, bounded integrals). The theoretical advantage of MathML is that equations are represented as text instead of images. Text files are often smaller weight yet can be enlarged without compromising visual quality. Text files can also be more quickly interpreted by screen reader technology.

Math ML + HTML 5 (2011)

In March 2012, I achieved one of the holy grails of Math ML - Having one HTML 5 page render an equation in Firefox, Internet Explorer and Safari. As recently as two years ago, this was not possible. This is a huge step forward. See the HTML 5+MathML Page for yourself.

MathML Font

A user may need to install an Math ML font like Stix.

Browsers

The following browsers were included in the test (with my MathML fonts installed).

• Safari 5.1 or higher. MathML not supported natively in older versions.
• Firefox 4+. For older versions, only certain type of XHTML support MathML (see details below in the 2009 section
• Internet Explorer 9 with MathPlayer plugin. Older versions support a Microsoft variant of MathML (see details below in the 2009 section).

Header Code

The following code in the header will make MathML work in new versions of Firefox, Safari, IE. Remember also to install the Math Player plugin on IE.

MathML Export from Equation Editors

Speaking of generating MathML, I rarely do that from scratch, but use an equation editor like MathType or MathMagic, both of which import/export MathML, LaTex and other popular equation formats.

For Internet Explorer 9, it appears that it's important that the initial line contain a link back to the MathML specification. See example code.

MathType 6.7

1. Open Math Type 6 and use the template tools to build an equation.
2. Go to the Preferences → Cut and Copy Menu... menu (really, that's the preference menu you need).
3. Select the MathML or TeX option.
4. Set the next option to MathML 2.0 (no namespace). Click OK to close the window.
5. Copy the equation you have built.
6. Paste into a text or HTML source file. You should now see a series of tags beginning with <math>...</math>.
   

MathMagic 8

1. Open MathMagic 8. Go to the File → Import/Export Options... menu.
2. Click the MathML tab.
3. Set the "Export format" to MathML 2.0 - No namespace. Click OK to close the window.
4. Use the template tools to build an equation.
5. Go to the Export menu and select MathML. Save the XML file in an appropriate destination. You should now see a series of tags beginning with <math>...</math>.
6. Paste code into an HTML source file.
   

Math ML Support on Browsers (2009)

This information is kept here in case you need to support older browsers. As you can see, it wasn't pretty.

• Firefox 3, Opera, Camino support native MathML (see above) in an XML or XHTML (.xhtml) file.
  Math ML fonts should be installed (MIT has one, but Stix expected to be standard...some day).
• Internet Explorer supports a special "transformed" MathML (see below) in an HTML file .
  MathPlayer plugin must be installed and Active X enabled (IE 7).
• Safari has limited support of either "flavor" only if a MathML CSS is enabled. I would avoid Safari for now.

Unfortunately, the first two MathML flavors are not compatible. To achieve maximum support, you would need to develop two pages and use a browser sniffer and switcher script (search Google for examples). In addition, you might need a third version with images plus ALT tag.

Two MathML Flavors

The structure is the same, but the Internet Explorer version adds m: for each MathML tag.

Why Bother?

I'm documenting this in case you do want to use a switcher. However another benefit is that MathML display is cleaner than most images exported from an equation editor. One way to get a clean equation image for the Web is to export the MathML, display it on a browser then do a screen capture.

Math ML in Internet Explorer 6

Create and Export Math ML

Although you can hand-code MathML, it is better to export it from a equation editor. Make sure the export option is set to the m namescape variant. In the m namespace version of MathML. each tag should be begin with <m: (e.g. <m:math>...</m:math>, <m:mrow>...</m:mrow> )

Internet Explorer Math ML m namespace Test Page

Embed within an HTML file.

1. Create a blank HTML file.
2. The <html> tag must link the the MathML name space. The code is:
   <html xmlns:m="http://www.w3.org/1998/Math/MathML">
3. The MathPlayer Object code must be included in the <head> area (see below).
4. Cut and paste content enclosed in the <m:math> tags wherever you wish to display an equation. It will display inline unless enclosed in a P tag or other block tag.
   

<html xmlns:m="http://www.w3.org/1998/Math/MathML">

<head>
<object id=MathPlayer classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987">
</object>
<?import namespace="m" implementation="#MathPlayer" ?>
</head>
<body>
...
<m:math xmlns="http://www.w3.org/1998/Math/MathML" >
...
</m:math>

User View

MathPlayer plugin must be installed or only a row of unformatted text will be visiable. Users may be asked to allow Active X.

Firefox 3

In Firefox, the MathML must be embedded in a proper XHTML format.

Firefox 3 MathML Test (may be broken)

1. Create a blank XHTML file (or XML file if you prefer).
2. The first line is the XML declaration and the second line is a DOCTYPE declaring that the page contains XHTML & MathML
   
   <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
3. Copy and paste any content enclosed within the <math> tag. You may want to add the display="block" attribute in the initial tag for older versions of Firefox.
   <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
...
</math>
   
4. **Save file with either the .xml or the .xhtml extension. Files with the .html extension will not display files properly.
   

What User Sees

A Firefox user should install an Math ML font like Stix should be installed.