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.
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.