mattst88's MathML tutorial chapter #1

MathML Tutorials: 1 2

MathML is a markup language designed by the W3C. Its purpose is to display mathematical formulae. Its most recent specification is version 2.0 released in October 2003.

Enough background, let's dive right in.

Just like HTML web pages begin markup with an <html> tag, MathML snippets must begin with <math>. The one required attribute is xmlns whose value must be the address of the MathML namespace.

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

As any XML format, you must close the tags in the order that they were opened. Hence, a </math> must be present at the end of the equation.

The next tag to learn is the <mi> tag. It stands for math identifier and allows the usage of identifiers (read: variables) in equations.

<mi>x</mi>

What good are identifiers if we can't show which operations to use? Good thing we don't have to answer that question. Use the <mo> tag. It's an abbreviated form of math operator and aren't we glad. We can use it to string multiple identifier and operators into a single formula.

<mi>x<mi>
<mo>+</mo>
<mi>y</mi>
<mo>=</mo>
<mi>z</mi>

Now let's add some constant numbers. The <mn> tag will do the job. The math number tag is used like this.

<mn>3</mn>
<mo>-</mo>
<mn>2</mn>
<mo>=</mo>
<mn>1</mn>

Along with the common operators (+, -, *, /) that go in an <mo> tag you can use &InvisibleTimes; (abbreviated &it;), &PlusMinus;, and a few more that you'll learn as you need them. These work the same way as + et al. Of course you can also use the Unicode character equivalents, but it can be easier to write &it; than look up invisible times. Do note that your markup will be slightly smaller when using the Unicode character since &it; is 4 bytes, but Unicode characters are only 2.

That's chapter one. Here are a few things you should know before writing your first MathML tag.

Gotchas

MathML is only supported in browsers using the Gecko rendering engine (Mozilla, Firefox, Camino, Seamonkey, et al). Internet Explorer supports MathML using external plug-ins, while Opera supports it by using a JavaScript extension.

I've only used MathML in conjunction with Gecko browsers, so I can't attest to the quality of MathML rendering in anything else.

The doctype at the top of the document should reflect that there is MathML in the page. I use the XHTML 1.1 + MathML 2.0 doctype in my pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">

Also, MathML should be sent with a mime type of application/xhtml+xml. This means adjusting your web server settings or changing the extension to .xhtml in most cases.

Finally, let's make to our first example page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>mattst88's MathML Example 1</title>
 </head>
 <body>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
   <mi>x</mi>
   <mo>+</mo>
   <mi>y</mi>
   <mo>-</mo>
   <mn>4</mn>
   <mo>=</mo>
   <mi>z</mi>
  </math>
 </body>
</html>

As you can see when rendered, this generates x + y - 4 = z. You should now be wondering why you didn't just type that in a <p> tag in the first place. Read chapter two to see why.

Top Chapter 2