MathML Text Containers
Now that you get a better idea of MathML, we move focus on text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas.
|Prerequisites:||Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML) and some CSS notions on text styling (read fundamental text and font styling and web fonts).|
|Objective:||To get familiar with MathML elements used for writing text and be aware of special behaviors.|
Mathematical formulas involve many special characters, for example greek letters (e.g. Δ), fraktur letters (e.g. 𝔄), double-struck letter (e.g. ℂ), binary operators (e.g. ≠), arrows (e.g. ⇒), integral symbols (e.g. ∮), summation symbols (e.g. ∑), logical symbols (e.g. ∀), fences (e.g. ⌊) and many more. Wikipedia's article Mathematical operators and symbols in Unicode provides a good overview of the characters used.
Since most of these characters are not part of Basic Latin Unicode block, it is recommended to specify your document's character encoding and to serve it with appropriate web fonts. Here is a basic template to use UTF-8 encoding and the Latin Modern Math font:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My page with math characters</title> <link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" /> </head> <body> <p style="font-family: Latin Modern Math">∀A∊𝔰𝔩(n,𝔽),TrA=0</p> </body> </html>
We noticed in the getting started with MathML article that the text in MathML formulas are wrapped in specific container elements such as the
<mo>. More generally, every text in MathML formulas must be included inside such container elements, called token elements. In addition, MathML provides multiple token elements in order to distinguish different meanings of the text content:
<mi>element, which represents an "identifier" which could be a symbolic name or arbitrary text. Examples:
<mi>cos</mi>(function name) and
<mn>element represents a "numeric literal" or other data that should be rendered as a numeric literal. Examples:
<mn>0.123</mn>(decimal number) or
<mo>element represents an operator or anything that should be rendered as an operator. For example
<mo>∑</mo>(summation symbol) or
<mtext>element is used to represent arbitrary text. For example short words in formulas such as
Below is a more complex example, which says that the absolute value of a real number is equal to that number if and only if it is nonnegative. Spot the different token elements and what they are used for. Each time you click the corresponding text, it is highlighted and a confirmation message is displayed.
Finally, read the MathML source to verify whether that corresponds to your expectation:
<math display="block"> <mrow> <mrow> <mo>|</mo> <mi>x</mi> <mo>|</mo> </mrow> <mo>=</mo> <mi>x</mi> </mrow> <mtext> iff </mtext> <mrow> <mi>x</mi> <mo>≥</mo> <mn>0</mn> </mrow> </math>
Note: It is sometimes difficult to decide the token element to use for a given text content. In practice, choosing the wrong element should not cause major issues because all token elements are generally rendered the same by browser implementations (for visual display and for assistive technologies). However, the
<mo> elements have special distinguishing features that one should be aware of. They are explained in the following sections.
One typographic convention in mathematics is to use italic letters for variables. In order to help with that,
<mi> elements with a single character may be automatically rendered as italic. This is the case for all the letters from the latin and greek alphabets. Compare the rendering of the two
<mi> elements in the following formula:
<math> <mi>sin</mi> <mi>x</mi> </math>
Note: This table from MathML Core provide the exhaustive list of characters that are subject to italicization, together with the corresponding italic characters.
It is sometimes needed to revert this default italic transformation. For that purpose, just attach a
mathvariant="normal" attribute on the
<mi> element. Compare the rendering of the uppercase gamma letters in the following formula:
<math> <mi>Γ</mi> <mi mathvariant="normal">Γ</mi> </math>
MathML contains an operator dictionary that defines default properties of
<mo> elements depending on their content and the position within its container (prefix, infix or postfix). Let's consider a concrete example:
<table> <tr> <td>Prefix plus</td> <td> <math> <mo>+</mo> <mi>i</mi> </math> </td> </tr> <tr> <td>Infix plus</td> <td> <math> <mi>j</mi> <mo>+</mo> <mi>i</mi> </math> </td> </tr> <tr> <td>Prefix sum</td> <td> <math> <mo>∑</mo> <mi>i</mi> </math> </td> </tr> </table>
This example should render similarly to the screenshot below. Observe the spacing between the
<mi>i</mi> elements and its preceding
<mo>: no spacing for the prefix plus, some spacing for the infix plus and some smaller spacing for the prefix summation symbol.
Operators have many other properties that we will see in more details later. For now, remember to use an
<mo> container for characters in the operator dictionary and to properly group subexpressions with
<mrow> elements in order to help MathML renderers.
Now that you are a bit familiar with special features of
<mo>, let's rewrite the
<p> element in the example at the top of the page with some actual MathML. Compare the visual rendering in your browser and explain the differences with the text-only version.
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My page with math characters</title> <link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" /> </head> <body> <p style="font-family: Latin Modern Math">∀A∊𝔰𝔩(n,𝔽),TrA=0</p> <p> <math> <mo>∀</mo> <mrow> <mi>A</mi> <mo>∊</mo> <mrow> <mi>𝔰𝔩</mi> <mrow> <mo>(</mo> <mi>n</mi> <mo>,</mo> <mi>𝔽</mi> <mo>)</mo> </mrow> </mrow> </mrow> <mo>,</mo> <mrow> <mrow> <mi>Tr</mi> <mi>A</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </p> <input id="showSolution" type="button" value="Show solution" /> <div id="solution"></div> </body> </html>
Note: An obvious difference is that the source code became much more verbose with MathML. Recall that this tutorial is about learning the language but in practice MathML content is generally not written manually. See the Authoring MathML page for more information.
The operator dictionary defines a default stretchy property as well as corresponding stretch axis for some operators. For example, an operator can stretch vertically by default to cover the maximum height of non-stretchy siblings within its
<mrow> container. By tweaking a bit the previous exercise, one can make operators stretch vertically. Can you find them?
As usual, you are invited to read the source code when you are done:
<math display="block"> <mrow> <mrow> <mo>|</mo> <mfrac> <mn>1</mn> <mi>x</mi> </mfrac> <mo>|</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mo>|</mo> <mi>x</mi> <mo>|</mo> </mrow> </mfrac> <mo>=</mo> <mfrac> <mn>1</mn> <mi>x</mi> </mfrac> </mrow> <mtext> iff </mtext> <mrow> <mi>x</mi> <mo>≥</mo> <mn>0</mn> </mrow> </math>
In this article, we have learnt about a few token elements that are used as text containers as well as their different semantics, namely
<mtext> (generic text). We have seen special Unicode characters that are commonly found in math formulas and given an overview of some observable behaviors of the
<mo> elements. In the next article, we will see how to rely on token elements to build much complex expressions such as fractions and roots.