You’re reading Ry’s MathML Tutorial

Vectors & Functions

This module covers all of the mathematical notation required for describing vector-valued functions. We’ll explore standard typesetting conventions, including: font selection, diacritics, subscripts, and relevant HTML entities. We’ll also look at a more robust method of grouping expressions.

Font Faces

Vectors are typically written using a bold face, rather than the italic face of real-valued variables or the roman face of scalar constants. MathML lets you explicitly define the element type with the mathvariant attribute:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn mathvariant='bold'>0</mn>
  <mo>&sdot;</mo>
  <mi mathvariant='bold'>v</mi>
  <mo>=</mo>
  <mn>0</mn>
</math>

Since the variables on the left side of this equation describe a vector, we used the mathvariant attribute to display them in a bold font, but the right side is real-valued, so we left it as the default roman face.

The rendered equation is shown below. Also notice the &sdot; entity, which represents the dot product operator.

0 ⋅ v = 0

The mathvariant attribute can be defined on any of the atomic MathML elements: <mi>, <mn>, or <mo>. Accepted values are listed below:

normal bold
italic bold-italic
fraktur bold-fraktur
script bold-script
sans-serif bold-sans-serif
sans-serif-italic sans-serif-bold-italic
monospace double-struck
initial tailed
looped stretched

These font faces let us display all sorts of important mathematical characters without the need for special entities. For example, we can easily describe 2-dimensional Cartesian space using double-struck:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msup>
    <mi mathvariant='double-struck'>R</mi>
    <mn>2</mn>
  </msup>
</math>

Interestingly, these values are considered logical classes, even though they’re all typographic in nature. Once again, the close relationship between mathematical notation and underlying meaning makes it hard separate presentation from semantics.

Overscripts

An alternative notation for vectors is an arrow over the variable:

Arrow over variable v

We can create this with the <mover> element, which works the same as <msup>, except the script is drawn directly over the base instead of to the right:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mover>
    <mi>v</mi>
    <mo>&rarr;</mo>
  </mover>
</math>

We used the &rarr; entity to create a rightwards arrow, but you can use any character for the overscript. For other useful overscripts like line segments and double arrows, please refer to the Geometry section of the Symbol Reference.

Dotless Letters

It’s important to remember that you can also use special entities for the base of an overscript, too. One common case is the “i‑hat” and “j‑hat” vectors. If you were to use a normal i and j as the base of an <mover> element, the circumflex accent would appear on top of the dots:

3i+2j+5k

Instead, you should use the &imath; and &jmath; entities for the base, which are the dotless‑i and dotless‑j, respectively. An ASCII caret (^) can be used for the circumflex accent, giving you the following expression:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn>3</mn>
  <mover>
    <mi>&imath;</mi>    <!-- Dotless i -->
    <mo>^</mo>
  </mover>
  <mo>+</mo>
  <mn>2</mn>
  <mover>
    <mi>&jmath;</mi>    <!-- Dotless j -->
    <mo>^</mo>
  </mover>
  <mo>+</mo>
  <mn>5</mn>
  <mover>
    <mi>k</mi>
    <mo>^</mo>
  </mover>
</math>

Subscripts

MathML subscripts work exactly like superscripts, except instead of <msup>, you use <msub>. For example, a generic three-dimensional vector can be marked up as the following.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi mathvariant='bold'>v</mi>
  <mo>=</mo>
    <mrow>
      <mo>(</mo>
      <msub>
        <mi>v</mi><mn>1</mn>
      </msub>
      <mo>,</mo>
      <msub>
        <mi>v</mi><mn>2</mn>
      </msub>
      <mo>,</mo>
      <msub>
        <mi>v</mi><mn>3</mn>
      </msub>
      <mo>)</mo>
    </mrow>
</math>

This should look something like:

v=(v1,v2,v3)

Like <msup> and <mover>, <msub> requires precisely 2 arguments, so remember to wrap sub-expressions in an <mrow>.

Super/Subscript Pairs

Of course, as soon as we have subscripted elements, we’re going to need superscript/subscript pairs. For this, MathML provides the <msubsup> element, which takes three arguments: the base, the subscript, and the superscript. For example, consider the conservation of kinetic energy equation:

Conservation of kinetic energy equation

This can be marked up with the following (right side omitted for brevity).

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mrow>
    <mfrac><mn>1</mn><mn>2</mn></mfrac>
    <msub><mi>m</mi><mn>1</mn></msub>
    <msubsup>
      <mi>u</mi>
      <mn>1</mn>
      <mn>2</mn>
    </msubsup>
  </mrow>
  <mo>+</mo>
  <mrow>
    <mfrac><mn>1</mn><mn>2</mn></mfrac>
    <msub><mi>m</mi><mn>2</mn></msub>
    <msubsup>
      <mi>u</mi>
      <mn>2</mn>
      <mn>2</mn>
    </msubsup>
  </mrow>
</math>

Arguments and Tuples

The Subscripts section demonstrated a perfectly acceptable way to define a sequence using <mo>; however, MathML also includes the <mfenced> tag as a friendlier (and more semantic) way to manage brackets:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi mathvariant='bold'>F</mi>
  <mfenced>
    <mi>x</mi>
    <mi>y</mi>
    <mi>z</mi>
  </mfenced>
</math>

This should display a vector-valued function that takes three arguments:

F(x,y,z)

Instead of manually adding parentheses and commas with <mo>, we let <mfenced> do all the work for us. As you might expect, MathML lets you customize the separator and opening/closing characters via the separators, open, and close attributes. For instance, if you’d like to mark up an ordered tuple with angled brackets, you could specify them like so:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mfenced open='&lang;' close='&rang;'>
    <mi>x</mi>
    <mi>y</mi>
    <mi>z</mi>
  </mfenced>
</math>

Since there is no angled bracket character on a keyboard, we had to use the &lang; and &rang; entities for the attribute values, but you could use any character (e.g., curly braces or square brackets).

〈x,y,z〉

The <mfenced> tag is a natural way to describe sets and intervals, and of course, it can also be used to wrap parenthetical groups. Instead of relying on nested <mrow>’s, sub-expressions can be grouped with <mfenced> by specifying an empty separator, as shown below.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msup>
    <mfenced separators=''>
      <mrow><mn>3</mn><mi>x</mi></mrow>
      <mo>&minus;</mo>
      <mrow><mn>2</mn><mi>y</mi></mrow>
    </mfenced>
    <mn>2</mn>
  </msup>
</math>

While it’s ok to put commas in an <mo> tag, you should never use arithmetic operators like or + as a value for the separator attribute.

Vector Operators and Entities

In addition to &sdot;, vector mathematics uses a variety of special symbols. A few of the most useful ones are listed below, and an extensive list can be found in the Symbol Reference.

Symbol Entity Hex Description
&sdot; &#x22C5; Dot product
&Cross; &#x2A2F; Cross product
&Vert; &#x2016; Norm (magnitude) bars
&lang; &#x27E8; Left angle bracket
&rang; &#x27E9; Right angle bracket
&compfn; &#x2218; Function composition
&rarr; &#x2192; General function mapping
&hellip; &#x2026; Horizontal ellipsis
&isin; &#x2208; Member of set
&sube; &#x2286; Subset
&sub; &#x2282; Strict subset
&supe; &#x2287; Superset
&sup; &#x2283; Strict superset

These new symbols give us most of the tools we need to talk about vectors and functions. For instance, we can now map function compositions from one space to another:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi mathvariant='bold'>F</mi>
  <mo>&compfn;</mo>
  <mi mathvariant='bold'>G</mi>
  <mo>:</mo>
  <mi>U</mi>
  <mo>&sube;</mo>
  <msup>
    <mi mathvariant='double-struck'>R</mi>
    <mn>3</mn>
  </msup>
  <mo>&rarr;</mo>
  <msup>
    <mi mathvariant='double-struck'>R</mi>
    <mn>2</mn>
  </msup>
</math>

This should look something like:

G(F()):U⊆R^3→R^2

Invisible Operators

Unfortunately, the special characters don’t stop there. On top of the standard mathematical symbols, there are also a handful of invisible entities that you need to be aware of. All of these are operators, so they should only appear in an <mo> tag.

Entity Hex Description
&ApplyFunction; &#x2061; Function application
&InvisibleTimes; &#x2062; Invisible multiplication
&InvisibleComma; &#x2063; Invisible separator
(n/a) &#x2064; Invisible addition

Even though you can’t see these symbols, they still add important information to a MathML expression. For example, consider two interpretations of the ambiguous expression x(y):

x×(y) vs. x(y)

Without an operator between x and (y), it’s not clear whether x is a variable that should be multiplied by y or a function call taking y as its argument. To explicitly specify the latter, you would use the &ApplyFunction; operator:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mi>a</mi>
  <mo>&ApplyFunction;</mo>
  <mrow>
    <mo>(</mo>
    <mi>b</mi>
    <mo>)</mo>
  </mrow>
</math>

Similarly, &InvisibleComma; resolves subscript ambiguities when referencing matrix elements (more on matrices in the Tables section):

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msub>
    <mi>a</mi>
    <mrow>
      <mn>1</mn>
      <mo>&InvisibleComma;</mo>
      <mn>2</mn>
    </mrow>
  </msub>
</math>

Finally, the invisible addition entity distinguishes a mixed number from an algebraic multiplication:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mn>4</mn>
  <mo>&#x2064;</mo>
  <mfrac>
    <mn>2</mn>
    <mn>3</mn>
  </mfrac>
  <mo>&ne;</mo>
  <mn>4</mn>
  <mo>&sdot;</mo>
  <mfrac>
    <mn>2</mn>
    <mn>3</mn>
  </mfrac>
</math>
4 and 2/3≠4⋅2/3

The extra semantic information encoded by invisible entities provides subtle visual cues to the MathML renderer. For example, putting a line break between a function name and its opening parenthesis has the potential to confuse readers. These entities also have a significant impact on spoken renditions of an expression (“Four and two thirds” vs. “Four times two over three”).

It’s good practice to include the above entities whenever applicable. But, as we’ve experienced for most of this tutorial, no serious harm will come if you forget to add one here or there.

Summary

This section presented the typographic tools necessary to mark up vectors and functions. We used mathvariant to set the font face of token elements, <mover> to embellish symbols, <msub> and <msubsup> to script vector components, <mfenced> to specify argument lists, and several HTML entities to represent both visible and invisible operators.

The vector projection formula sums up many of these new elements:

Vector projection equation
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msub>
    <mi mathvariant='italic'>proj</mi>
    <mi mathvariant='bold'>v</mi>
  </msub>
  <mo>&ApplyFunction;</mo>
  <mi mathvariant='bold'>a</mi>
  <mo>=</mo>
  <mstyle displaystyle='true'>
    <mfrac>
      <mrow>
        <mi mathvariant='bold'>a</mi>
        <mo>&sdot;</mo>
        <mi mathvariant='bold'>v</mi>
      </mrow>
      <msup>
        <mfenced open='&Vert;' close='&Vert;'>
          <mi mathvariant='bold'>v</mi>
        </mfenced>
        <mn>2</mn>
      </msup>
    </mfrac>
  </mstyle>
  <mo>&InvisibleTimes;</mo>
  <mi mathvariant='bold'>v</mi>
</math>

The next section examines a few more typographic nuances related to calculus, then we’ll be ready to move on to more complicated layout concerns.

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.