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.
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.
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:
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.
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 |
---|---|---|---|
− | − |
− |
Subtraction |
× | × |
× |
Multiplication |
÷ | ÷ |
÷ |
Division |
≠ | ≠ |
≠ |
Not equal |
≈ | ≈ |
≈ |
Approximately equal |
< | < |
< |
Less than |
≤ | ≤ |
≤ |
Less than or equal |
> | > |
> |
Greater than |
≥ | ≥ |
≥ |
Greater than or equal |
± | ± |
± |
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>
≥
</mo>
<mn>
0</mn>
</math>
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>
).
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
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.
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>
×
</mo>
<mroot>
<mn>
8</mn>
<mn>
3</mn>
</mroot>
<mo>
=</mo>
<mn>
4</mn>
</math>
Your browser should render this equation as follows.
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:
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:
<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>
−
</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>
±
</mo>
<msqrt>
<msup>
<mi>
b</mi>
<mn>
2</mn>
</msup>
<mo>
−
</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.