You’re reading Ry’s MathML Tutorial

Basic Algebra

Just as HTML uses tags to define headings and paragraphs, MathML uses them to describe the various parts of a mathematical expression. This module explores the fundamental elements of MathML: variables, operators, radicals, and fractions. By the end of this module, you should be able combine these into basic algebraic expressions.

The Quadratic Formula

While this tutorial focuses on Presentation Markup, not all of the elements we’ll encounter are purely aesthetic. For instance, the i in <mi> (discussed below) stands for identifier, which is really more semantic than presentational.

As we’ll see throughout this tutorial, typographic decisions often carry mathematical meaning. This makes it hard to draw a clear line between presentation and content.

Variables

We’ll begin by creating a single variable with MathML. Replace the <!‑‑ Equations will go here ‑‑> comment in the template file with the following code.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi>x</mi>
</math>

The <math> tag begins a new MathML expression, and it should always use the above URI for its xmlns attribute. The display attribute determines how the expression is rendered. Its value can be either block or inline, as described below.

Value Description
block Render the expression as its own “paragraph”
inline Render the expression in the same line as surrounding text

We’ll use block expressions for the majority of this tutorial, deferring inline elements to the Advanced Formatting module.

Next, the <mi> element defines a MathML identifier, which can be a function name, a constant, or a variable. In this case, we used the letter x as the identifier’s value, which your browser should render as the following.

x

Numbers

MathML uses the <mn> element to represent numeric literals, which can be either integers or real numbers (digits with a decimal point). Underneath our existing <math> element, try adding the following expression.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn>3</mn>
  <mi>x</mi>
</math>

Notice that your browser rendered the number 3 with an upright font, while it decided the x identifier should be italicized:

3x

Even though we’re working with Presentation Markup, the <mn> and <mi> elements do carry semantic meaning. This lets a MathML reader make certain assumptions about how to typeset their contents (e.g., italicizing variable names). We’ll learn how to control these stylistic assumptions in Vectors and Functions.

Operators

For now, let’s move on to the <mo> element for marking up operators. Again, the following expression should be added below the existing examples in your hello-mathml.html file.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn>3</mn>
  <mi>x</mi>
  <mo>-</mo>
  <mn>2</mn>
  <mi>y</mi>
</math>

This example uses <mo> for a minus sign, but it’s meant to denote any kind of “operator-like” entity including =, +, ×, ÷, and even parentheses and commas. Explicitly delimiting operators helps MathML viewers make important layout decisions like where to break lines.

It’s important to note that traditional typography differentiates hyphens from minus signs, which are longer. In the above HTML code, we used a hyphen, but since we put it in an <mo> element, the browser inferred that we were trying to create a minus sign.

3x-2y with a short hyphen vs with a longer minus sign

Operator Entities

To represent special symbols like minus signs, HTML offers several character entities dedicated to mathematics. A few of the most common operators are included below.

Symbol Entity Hex Description
&minus; &#x2212; Subtraction
× &times; &#x00D7; Multiplication
÷ &divide; &#x00F7; Division
&ne; &#x2260; Not equal
&asymp; &#x2248; Approximately equal
< &lt; &#x003C; Less than
&le; &#x2264; Less than or equal
> &gt; &#x003E; Greater than
&ge; &#x2265; Greater than or equal
± &plusmn; &#x00B1; Plus or minus

In general, HTML entities can be used anywhere normal characters can exist, though the ones shown above will typically be used as the content of an <mo> element:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn>3</mn>
  <mi>x</mi>
  <mo>-</mo>
  <mn>2</mn>
  <mi>y</mi>
  <mo>&ge;</mo>
  <mn>0</mn>
</math>
3x-2y≥0

Other useful symbols can be found in the Symbol Reference.

Superscripts

Superscripts are created with the <msup> tag. Inside of <msup>, you should include the base, followed by the superscript, like so:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

Like many MathML elements, <msup> acts more like a function than a normal HTML markup tag. In the above snippet, the base and the superscript can be thought of as two “arguments” passed to the <msup> “function.” Both arguments need to be a single MathML element (e.g., <mi> or <mn>).

x^2

This works fine when we’re dealing with atomic values like x and 2, but things get more complicated once we start working with compound expressions.

Grouping Sub-Expressions

e^(2x+1)

Because the exponent shown above is comprised of more than one element, we can’t pass it directly into <msup>. Instead, we need to use an <mrow> tag to group the expression, as shown below.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msup>
    <mi>e</mi>
    <mrow>
      <mn>2</mn>
      <mi>x</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
  </msup>
</math>

Of course, this works the other way around—you can wrap the superscript argument in an <mrow> to create a complex base expression, too.

(3x-2y)^2

Technically, <mrow> should be used to encode the complete mathematical structure of an expression, meaning every sub-expression should be contained in an <mrow>. For example:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msup>
    <mrow>
      <mo>(</mo>
        <mrow>
          <mrow><mn>3</mn><mi>x</mi></mrow>
          <mo>-</mo>
          <mrow><mn>2</mn><mi>y</mi></mrow>
        </mrow>
      <mo>)</mo>
    </mrow>
    <mn>2</mn>
  </msup>
</math>

Explicit <mrow> tags do help MathML renderers make layout decisions, and they provide extra semantic information that’s useful for automated interpretation. However, this level of completeness isn’t strictly necessary for most practical purposes.

Also notice that we used <mo> to encode the paretheses. While this is perfectly legal, MathML does offer a more convenient way to bracket expressions, which we’ll discuss in Vectors and Functions.

Radicals

MathML provides two elements for drawing radicals: <msqrt> and <mroot>. The former creates a square root, taking the base as its only argument, and the latter creates an indexed root, taking the base and the index as arguments (in that order).

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msqrt>
    <mn>4</mn>
  </msqrt>
  <mo>&times;</mo>
  <mroot>
    <mn>8</mn>
    <mn>3</mn>
  </mroot>
  <mo>=</mo>
  <mn>4</mn>
</math>

Your browser should render this equation as follows.

sqrt(4)*root(3,8)=4

As with <msup>, you should make sure <mroot> has exactly two child elements by wrapping complex sub-expressions in an <mrow>. This isn’t actually necessary for <msqrt>, since an <mrow> will be implied if you pass more than one argument.

Fractions

The last component we’ll look at in Basic Algebra is the <mfrac> tag for creating fractions. It takes the numerator as the first argument, followed by the denominator:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mfrac>
    <mn>1</mn>
    <mi>x</mi>
  </mfrac>
</math>

This should render as an vertical fraction:

1/x

The <mfrac> element also contains a few useful attributes that let you control its appearance:

Attribute Description
linethickness The stroke width of the fraction bar. Value should be a length measured in px, pt, em, etc.
numalign The alignment of the numerator. Can be left, right, or center.
denomalign The alignment of the denominator. Can be left, right, or center.
bevelled Whether the fraction should be displayed vertically or inline. Can be true or false.

These attributes let you manually arrange complex expressions. For example:

(1/x)/(y-2)
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mfrac linethickness='3px'>
    <mfrac bevelled='true'>
      <mn>1</mn>
      <mi>x</mi>
    </mfrac>
    <mrow>
      <mi>y</mi>
      <mo>&minus;</mo>
      <mn>2</mn>
    </mrow>
  </mfrac>
</math>

Setting linethickness to zero is also the preferred way to mark up binomial coefficients.

Again, like other MathML “functions,” sub-expressions should be placed in an <mrow> to ensure only two arguments are passed to <mfrac>.

Summary

This section introduced MathML’s three atomic elements: <mi>, <mn>, and <mo>. We also saw how these tokens can be combined into complex layouts using superscripts, radicals, and fractions. Together, these provide everything we need to mark up basic algebraic equations like the quadratic formula:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>-</mo>
      <mi>b</mi>
      <mo>&plusmn;</mo>
      <msqrt>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
        <mo>&minus;</mo>
        <mrow>
          <mn>4</mn>
          <mi>a</mi>
          <mi>c</mi>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mi>a</mi>
    </mrow>
  </mfrac>
</math>

Towards the end of this module, we saw how attribute values can affect the appearance of a MathML element. In the next module, we’ll discuss several other attributes that will give us fine-grained control over MathML’s typographic decisions.

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.