You’re reading Ry’s MathML Tutorial

Introduction

MathML is an XML language for describing mathematical expressions. It can be embedded directly into HTML documents, which makes it possible to share complex mathematical concepts using nothing more than a text editor and a web browser.

An equation rendered with MathML

Since it’s based on XML, MathML is more verbose than its LaTeX counterpart. It does, however, have a much more approachable learning curve if you’re already familiar with HTML. In addition, MathML’s predictable structure makes it ideal for machine processing.

The MathML specification defines two separate languages for representing expressions: Presentation Markup and Content Markup. As the name suggests, Presentation Markup describes expressions in terms of their visual appearance, whereas Content Markup describes the underlying mathematical meaning of an expression. This tutorial focuses solely on Presentation Markup.

Browser Support

As of this writing, Firefox, Opera, and Safari provide native MathML support, while Internet Explorer and Chrome do not. Fortunately, the MathJax library brings MathML to all modern browsers using some JavaScript magic.

Font Support

To display special symbols in MathML, you can use HTML entities like × and ∞ (see the Symbol Reference module for a concise list). However, many of these characters are not supported by common fonts. The open source STIX Fonts were created to solve this problem by providing a comprehensive set of symbols for scientific and technical publications.

MathJax includes the STIX Fonts as part of its library, so if you use the template below, no extra work is required. If you want to display mathematical symbols in a browser without MathJax, you’ll need to download the STIX Fonts, convert them to a webfont kit, and embed them through a CSS @font-face rule.

Setting Up

This tutorial is designed to be a hands-on introduction to MathML, which means it’s full of real-world examples for you to experiment with. To get started, create a new text file called hello-mathml.html, open it with your favorite text editor, and add the following code.

<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Ry's MathML Tutorial</title>
  <style>
    body {
      font-size: 2em;
    }
  </style>
  <script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>
</head>
<body>
  <!-- Equations will go here -->
</body>
</html>

This empty HTML5 page will serve as our template for the rest of the tutorial. Code snippets from the upcoming sections can be pasted into the <body> element, and you should be able to open the page with your browser to view the rendered mathematical notation.

Also notice the <script> element that includes the MathJax library (no download required). If you’re using a browser with MathML support, feel free to remove it—but, remember that this will make your content inaccessible to IE and Chrome.

Mailing List

Sign up for my low-volume mailing list to find out when new content is released. Next up is a comprehensive Swift tutorial planned for late January.

You’ll only receive emails when new tutorials are released, and your contact information will never be shared with third parties. Click here to unsubscribe.