MathML
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.
When Not to use MathML
Not every mathematical expression needs MathML. Many equations in one typographic line (include subscripts and superscripts) can be expressed in plain text alone. See below for examples of non-MathML expressions. Information on Math Symbols and Unicode is available from the Penn State Computing with Accents site.
f(x) = (x³ + 2x² +15x - 9) × e³
HTML Code:
f(x) = (x³ + 2x² +15x - 9) × e³(∀x)(∃y)(Fxy ⊃ Fyx)
HTML Code:
(∀x)(∃y)(Fxy ⊃ Fyx)
By avoiding MathML, the code is smaller and cross browser dependent. Compare the one line of code for the second expression for the MathML versions below:
MathML for (∀x)(∃y)(Fxy ⊃ Fyx)
<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<semantics>
<mrow>
<mrow><mo>(</mo>
<mrow>
<mo>∀</mo><mi>x</mi>
</mrow>
<mo>)</mo></mrow><mrow><mo>(</mo>
<mrow>
<mo>∃</mo><mi>y</mi>
</mrow>
<mo>)</mo></mrow><mrow><mo>(</mo>
<mrow>
<mi>F</mi><mi>x</mi><mi>y</mi><mo>⊃</mo><mi>G</mi><mi>y</mi><mi>x</mi>
</mrow>
<mo>)</mo></mrow>
</mrow>
</semantics>
</math>
Math ML Support on Browsers
As of 2009, browsers supported one of two flavors of MathML
- Firefox, 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.
| Firefox /Native MathML |
|---|
<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'> |
| Internet Explorer (m namespace) |
|---|
<m:math display='block'> |
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
With MathType 6 for the Mac
Create and Export Math ML
Although you can hand-code MathML, it is better to export it from a equation editor. For this example, I will use MathType 6 for Mac OS X. MathType is Mac/Windows and is available for a 30-day trial
- Open Math Type 6 and use the template tools to build an equation.
- Go to the Preferences » Translators... menu.
- In the Translators window, check the option Translation to Other Language.
- Select MathML 2.0 (m namespace) from the Translator menu. Click OK to close window.
Note: For Firefox, select Math ML 2.0 (namespace attr). - Copy the equation you have built.
- Open a text (.txt) file and use the paste command. The MathML code will be pasted into the text file.
Note: For Internet Explorer, each tag should be begin with <m: (e.g. <m:math>...</m:math>, <m:mrow>...</m:mrow> )
Embed within an HTML file.
- Create a blank HTML file.
- The <html> tag must link the the MathML name space. The code is:
<html xmlns:m="http://www.w3.org/1998/Math/MathML"> - The MathPlayer Object code must be included in the <head> area (see below).
- 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
With Math Magic for the Mac
Create and Export Math ML
Although you can hand-code MathML, it is better to export it from a equation editor. For this example, I will use Math Magic 5 for Mac OS X. MathType is Mac/Windows and is available for a limited trial.
- Open Math Magic and use the template tools to build an equation and save the file.
- Go to the File » Export menu and select the MathML option. The file will be exported as a Web page with an .xml extension. This can be opened in Firefox but will generate an error in Internet Explorer.
Embed within an XHTML file.
In Firefox, the MathML must be embedded in a proper XHTML format
- Create a blank XHTML file (or XML file if you prefer).
- 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"> - 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>
- 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 should be installed. MIT has one, but Stix expected to be standard...soon.
Leave a comment