Revised:

Content – MathML Structure

The `math` Element

The math element is the top-level element for MathML. All MathML expressions must start and end with this tag. Hawkes has elected to not use the display attribute for MathML elements. We feel that the purpose of display in MathML is purely presentational and should be left to CSS. Should an equation need to be centered, place it in a p element and apply class="alignCenter" to the p. In this way we are continuing to separate content and presentation.

Basic MathML Elements: `mn`, `mi`, `mo`, `mtext`

There are a number of different elements in MathML but the four most basic elements, and the most common, are mn, mi, mo, and mtext.

Preferred Characters in MathML

Each of these basic elements can contain a number of different characters. What characters are appropriate for each element should be clear based on what that element represents. Whenever possible, keyboard characters should be used in place of Unicode characters. When a character is needed that doesn't exist on the keyboard, use Unicode values to represent that character rather than a close approximation that exists on the keyboard. For instance instead of using the - character on the keyboard for the negative sign use the Unicode character − or use ⋅ instead of * for multiplication.

Specific Characters

Below is a list of specific characters that should be used.

Character	Code
$W$	<math><mi mathvariant="double-struck">W</mi></math>
Nonbreaking Space
Top curly bracket	⏞
Bottom curly bracket	⏟
Em Space
− (Negative or Minus Sign)	−
∥ (Parallel to)	∥
△ (Triangle)	△
∠ (Angle)	∠

The mn Element: mn stands for math number and is used to mark up numbers in mathematical expressions. The contents of an mn tag will always represent an unsigned number such as 1, 2, 2.3, or Roman numerals like IV. Numbers that are decimals should ALWAYS be wrapped in mn elements like so: <mn>2.34</mn> and NEVER with the decimal point wrapped in an mo tag like so: <mn>2</mn><mo>.</mo><mn>34</mn>. Not only is this poor markup practice but technologies that are able to parse the MathML markup (e.g., assistive technologies like screen readers) will parse it as the number 2, a period, and the number 34. Similarly numbers that have a comma separating the thousands, millions, etc. place should be wrapped in an mn tag like so: <mn>300,000,000</mn>. Commas in these instances should NEVER be wrapped in an mo tag like so: <mn>300</mn><mo>,</mo><mn>000</mn><mo>,</mo><mn>000</mn>. Finally if you need a space where a comma or decimal point would be in a number, simply add a space within the mn tag like so: <mn>300 000 000</mn>. Should you come across numbers that are in text as plural (such as $1$ s column) keep the text that makes the number plural outside of the MathML expression.
The mi Element: mi stands for math identifier and generally mi elements represent variables in equations. These variables can be single-letter variables (the most common) or a string of words separated by spaces, such as lower class boundary, or even arbitrary text playing the role of a 'term' (such as an ellipsis in a summed series) can be represented using an mi element.^[1] The mi element should be used to mark up variables that appear in equations, not for variables within text content by themselves. For those instances use the var HTML element. mi elements should also be used to mark up units of measurement in equations. We'll have to wait to see what this looks like until after the invisible operators section below. Lastly, the names of symbolic constants should be represented as mi elements.
The mo Element: mo stands for math operator and mo elements represent mathematical operators in equations. Operators can be the normal mathematical operators that we think of initially, such as + or −, as well as grouping operators like (, {, and [. An mo should also be used to express the sign of a number rather than including the sign within a mn element. Similarly, the percent sign, %, represents an operation (dividing by 100), and should be represented using an mo. In some cases text may be used to represent an operator and as such should be placed in a mo element. Examples of these cases are "and" and "or" in sets, "to" in ratios, and "of" in multiplication. Geometric symbols such as △ or ∠ should be placed in mo elements also.
The mtext Element: mtext is used to hold any text that is related to the equation but not an actual part of the equation. In instances where an equation with work notes will not make sense laid out in a HTML table the equation can be laid out in a mtable. Work notes can be placed in mtext elements in separate table cells.

Each of these elements have a number of attributes that can be applied to them. The attributes that change the semantic meaning of the element should not be applied unless the special case is called for. A fine example would be applying the attribute fence="false" to a mo tag containing a ( or other grouping character. In this case you are telling the renderer that this is not a grouping character. MathML has natural rules for when these attributes are applied or not. Using the three basic elements mn, mi, and mo we can build a very simple MathML expression. You can see an expression rendered below, followed by the code that created it.

$1 + 2 - x$

Simple MathML expression

<math>
    <mn>1</mn>
    <mo>+</mo>
    <mn>2</mn>
    <mo>&#x2212;</mo>
    <mi>x</mi>
</math>

In order to build more complex expression we need to understand a few more elements and some special cases of the <mo> element.

The `mrow` Element

The mrow element is an important element that allows you to group subexpressions and provides hierarchy for an equation. The mrow element is a large part of what enables a MathML expression to be broken up into discrete parts by assistive technologies. mrow tells the user agent that the contents of mrow represent an expression in the hierarchy of the equation. This can indicate a part of an equation that should be evaluated before other parts in the order of operations. Consider the following equation:

$- 2 \cdot 3 + 1$

Using mrow to group subexpressions

<math>
    <mrow>
        <mrow>
            <mo>&#x2212;</mo>
            <mn>2</mn>
        </mrow>
        <mo>&#x22C5;</mo>
        <mn>3</mn>
    </mrow>
    <mo>+</mo>
    <mn>1</mn>
</math>

In the expression above we really have three expressions. The entire expression is the first expression, and it is wrapped in an inferred mrow element. The next expression is $- 2 \cdot 3$ , which is wrapped in an mrow since it represents a part of the equation that would be evaluated separately using order of operations. The final expression is $- 2$ since the minus sign is acting as a negative and not as subtraction.

The `mrow` Element and Signed Numbers

When a $+$ or $-$ is used to denote the sign of a number, the sign and number should be wrapped in an mrow to make the relationship between the two explicit. The exception to this rule is if the sign and number appear by themselves, as in $- 2$ .

Inferred `mrow` Elements

There are a number of elements in which an mrow element is inferred and the contents of that element are treated as a single expression. When these elements are used they do not need to have mrow elements inserted inside of them. The following elements have inferred mrows: msqrt, mstyle, merror, mpadded, mphantom, menclose, mtd, and math. Note that this means that it is not improper but is unnecessary and should be avoided for an mrow to be the only child of any of these elements. See Section 3.1.3.1 of the W3C MathML 3.0 Specification for more information on inferred mrow elements.

Fence Operators and `mrow`

Fence operators are parentheses, brackets, and other grouping symbols used in mathematics. When using fence operators you should specify expressions using mrow. The content between the fence operators should be wrapped in an mrow if there is more than one element inside of the parentheses. An mrow should be wrapped around the entire expression and around the fence operators as well to designate that the fence operators and their contents are also a subexpression. In the example below we have used markup for fence operators for one element and multiple elements.

$2 \cdot (3 + 1) \cdot (1)$

Using fence operators and mrow

<math>
    <mn>2</mn>
    <mo>&#x22C5;</mo>
    <mrow><!-- starting mrow to designate the parentheses and their content as a subexpression-->
        <mo>(</mo>
        <mrow> <!-- starting mrow to designate the start of the inner content subexpression -->
            <mn>3</mn>
            <mo>+</mo>
            <mn>1</mn>
        </mrow> <!-- ending mrow to designate that the subexpression has ended -->
        <mo>)</mo>
    </mrow> <!-- ending mrow to designate that the subexpression for the parenthesis has ended -->
    <mo>&#x22C5;</mo>
    <mrow><!-- there is only one element inside fences so we only need one mrow -->
        <mo>(</mo>
        <mn>1</mn>
        <mo>)</mo>
    </mrow><!-- end the mrow telling the renderer that (1) is a distinct expression -->
</math>

Here we have used the mrow element to specify the parentheses and their contents, (3 + 1), as one expression, and then a nested mrow to specify that 3 + 1 is a subexpression of the expression (3 + 1).

Fence operators should never have their fence attribute set to false. This tells the renderer that the operator is not used for grouping, which may have undesirable effects in nonvisual renderers. The mfenced element can also be used to provide fence operators around expressions. Review the W3C documentation on mfenced before using this element to be clear on implementation and required attributes.

The markup shown above using individual parentheses to make the fenced expressions is valid, but it is simpler to use the mfenced element. For this expression, the mfenced element does not need attributes, as the default grouping symbol is parentheses. If other fence operators are needed, they are specified in the open and close attributes.

$2 \cdot (3 + 1) \cdot (1)$

Equivalent markup with mfenced

<math>
    <mn>2</mn>
    <mo>⋅</mo>
    <mfenced>
        <mrow>
            <mn>3</mn>
            <mo>+</mo>
            <mn>1</mn>
        </mrow>
    </mfenced>
    <mo>⋅</mo>
    <mfenced>
        <mn>1</mn>
    </mfenced>
</math>

When an mfenced element has two or more child elements, each child will be separated by a symbol (the default separator is a comma, but can be specified otherwise). This can greatly reduce the markup required for many common mathematical expressions, such as sets. Note that the separator symbols specified through the separators attribute do not represent infix operators, so they should not be used for mathematical operations (addition, subtraction, etc.).

$\{x| x > 2\}$

Using open, close, and separators

<math>
    <mfenced open='{' close='}' separators='|'>
        <mi>x</mi>
        <mrow>
            <mi>x</mi>
            <mo>></mo>
            <mn>2</mn>
        </mrow>
    </mfenced>
</math>

The following sections give a brief overview of some of the different ways that fenced operators are used and the considerations for creating them.

Ordered Pairs, Triples, `n`-Tuples

A very common application of fence operators is the ordered n-tuple. For these we will either be using <mo>(<mo>, <mo>,<mo>, and <mo>)<mo> or mfenced (with the default settings), as these two markups are equivalent. Also, note that there is a "point notation" that is currently used in our software that appears similarly to function notation, with the notable exception being that we do not use any invisible operator (as discussed in the Invisible Operators section), but the entire expression including the point name declaration should be considered as a complete group.

$A (2, - 3, 5)$

Ordered triple notation using <mo>s

<math>
    <mi>A</mi>
    <mrow>
        <mo>(</mo>
            <mrow>
                <mn>2</mn>
                <mo>,</mo>
                <mrow>
                    <mo>&#x2212;</mo>
                    <mn>3</mn>
                </mrow>
                <mo>,</mo>
                <mn>5</mn>
            </mrow>
        <mo>)</mo>
    </mrow>
</math>

$A (2, - 3, 5)$

Ordered triple notation using mfenced

<math>
    <mi>A</mi>
    <mfenced>
        <mn>2</mn>
        <mrow>
            <mo>&#x2212;</mo>
            <mn>3</mn>
        </mrow>
        <mn>5</mn>
    </mfenced>
</math>

Interval Notation

Another application of fence operators is interval notation. In this case we will potentially be using multiple fence operators, namely [, ], (, and ), in different combinations (other than just parentheses). Any of these characters can be entered using the keyboard or the appropriate Unicode character. If using mfenced the open and/or close attribute will have to be specified. Also, note that the infinity symbol ∞ (∞ or ∞) is written using an mi. Additionally, any symbols that represent sets, such as the double-struck capital letters or empty set symbol, should appear as an mi and use the Unicode character for the appropriate symbol (and not using the mathvariant attribute), so that we are using ℝ (ℝ or ℝ), ℤ (ℤ or ℤ), ℚ (ℚ or ℚ), ℕ (ℕ or ℕ), ℂ (ℂ or ℂ), and ∅ (∅ or ∅). One exception to this rule, as noted above, is $W$ (the double-struck W). In this case we should use <mi mathvariant="double-struck">W<mi> since the Unicode character for double-struck W does not have good support in fonts. A set operation such as union, intersection, or element of should be an mo and use the correct Unicode symbol: ∩ (∩ or ∩), ∪ (∪ or ∪), and ∈ (∈ or ∈).

$(- \infty, 3] \cap [4, 10) = \emptyset$

Interval notation using <mo>s

<math>
    <mrow>
        <mrow>
            <mo>(</mo>
                <mrow>
                    <mrow>
                        <mo>&#x2212;</mo>
                        <mi mathvariant='normal'>&#x221e;</mi>
                    </mrow>
                    <mo>,</mo>
                    <mn>3</mn>
                </mrow>
            <mo>]</mo>
        </mrow>
        <mo>&#x2229;</mo>
        <mrow>
            <mo>[</mo>
                <mrow>
                    <mn>4</mn>
                    <mo>,</mo>
                    <mn>10</mn>
                </mrow>
            <mo>)</mo>
        </mrow>
    </mrow>
    <mo>=</mo>
    <mi mathvariant='normal'>&#x2205;</mi>
</math>

$(- \infty, 3] \cap [4, 10) = \emptyset$

Interval notation using <mfenced>

<math>
    <mrow>
        <mfenced close=']'>
            <mrow>
                <mo>&#x2212;</mo>
                <mi mathvariant='normal'>&#x221e;</mi>
            </mrow>
            <mn>3</mn>
        </mfenced>
        <mo>&#x2229;</mo>
        <mfenced open='['>
            <mn>4</mn>
            <mn>10</mn>
        </mfenced>
        </mrow>
    <mo>=</mo>
    <mi mathvariant='normal'>&#x2205;</mi>
</math>

Sets and Set-Builder Notation

When writing sets, we use the curly brackets { and } as the fence operators. When using set-builder notation, we use the vertical pipe character | as a separator. Any of these characters can be entered using the keyboard or the appropriate Unicode character. When using mfenced we will need to specify the open and close attributes, as well as indicating any appropriate separators (comma, pipe, etc.) in the separators attribute. Note that this means that we need to make sure that expressions are properly grouped on each side of the separator in order to be semantically correct. Whenever an ellipsis is needed to indicate that the set continues in the same pattern, an mi will be used with the Unicode character … (… or …). As mentioned in the section on Interval Notation, symbols representing sets (all real numbers, integers, etc.) should be mi and symbols representing set operations (union, intersection, etc.) should be mo. Also, if the set specification uses words like "and" or "or" as operations these should be done as mo, but all other text should be done as mtext.

$S = {(x, y) | 1 < x < 5 and y \in ℕ}$

Set-builder notation using <mo>s

<math>
    <mi>S</mi>
    <mo>=</mo>
    <mrow>
        <mo>{</mo>
            <mrow>
                <mrow>
                    <mo>(</mo>
                        <mrow>
                            <mi>x</mi>
                            <mo>,</mo>
                            <mi>y</mi>
                        </mrow>
                    <mo>)</mo>
                </mrow>
                <mo>|</mo>
                <mrow>
                    <mrow>
                        <mn>1</mn>
                        <mo>&lt;</mo>
                        <mi>x</mi>
                        <mo>&lt;</mo>
                        <mn>5</mn>
                    </mrow>
                    <mo>and</mo>
                    <mrow>
                        <mi>y</mi>
                        <mo>&#x2208;</mo>
                        <mi mathvariant='normal'>&#x2115;</mi>
                    </mrow>
                </mrow>
            </mrow>
        <mo>}</mo>
    </mrow>
</math>

$S = \{(x, y)| 1 < x < 5 and y \in ℕ\}$

Set-builder notation using <mfenced>

<math>
    <mi>S</mi>
    <mo>=</mo>
    <mfenced open='{' close='}' separators='|'>
        <mfenced>
            <mi>x</mi>
            <mi>y</mi>
        </mfenced>
        <mrow>
            <mrow>
                <mn>1</mn>
                <mo>&lt;</mo>
                <mi>x</mi>
                <mo>&lt;</mo>
                <mn>5</mn>
            </mrow>
            <mo>and</mo>
            <mrow>
                <mi>y</mi>
                <mo>&#x2208;</mo>
                <mi mathvariant='normal'>&#x2115;</mi>
            </mrow>
        </mrow>
    </mfenced>
</math>

Invisible Operators: Function Application, Invisible Times, Invisible Separator, and Invisible Addition

To complete the toolbox for creating bunches of basic equations we will need to utilize invisible operators. These operators do not show up in the rendering process but provide important semantic information for assistive technologies. Each of these should be wrapped in mo tags.

Function Application (<mo>⁡</mo>)

The invisible function application operator should be used to provide semantic information in function notation. In the common function notation $f (x)$ we use the function application operator <mo>⁡</mo> to show semantically in the markup that f is acting on x. Below is an example of the same code with more readable formatting. Note the use of mrow to group the expression. You can see where the function application operator is in the structure of the expression in the comments.

$f (x)$

Using the function application operator (⁡)

<math>
    <mi>f</mi>
    <mo>&#x2061;</mo> <!-- Function Application -->
    <mrow>
        <mo>(</mo>
        <mi>x</mi>
        <mo>)</mo>
    </mrow>
</math>

Function application can also be used to show the relationship between two arbitrarily large subexpressions by placing the function application between them. The most common form of function application between grouped elements is trigonometric functions with exponents. An example is given below.

$\cos^{2} \frac{(θ + 2)}{x - 1}$

Using the function application operator with grouped elements

<math>
    <mstyle displaystyle="true">
        <msup>
            <mi>cos</mi>
            <mn>2</mn>
        </msup>
        <mo>&#x2061;</mo> <!-- Function Application -->
        <mfrac>
            <mfenced>
                <mrow>
                    <mi>&#x03B8;</mi>
                    <mo>+</mo>
                    <mn>2</mn>
                </mrow>
            </mfenced>
            <mrow>
                <mi>x</mi>
                <mo>&#x2212;</mo>
                <mn>1</mn>
            </mrow>
        </mfrac>
    </mstyle>
</math>

Invisible Times (<mo>⁢</mo>)

This operator should be used when there is implicit multiplication, such as 2(3+1). In general we know the expression 2(3+1) means 2 times the quantity of 3 + 1, but in MathML we should make this explicit for assistive technology. The following is encoded in MathML and rendered by MathJax. You can see where the invisible times operator is in the structure of the expression in the comments.

$2 (3 + 1)$

Using the invisible times operator (⁢)

<math>
    <mn>2</mn>
    <mo>&#x2062;</mo> <!-- Invisible Times -->
    <mrow>
        <mo>(</mo>
        <mrow>
            <mn>3</mn>
            <mo>+</mo>
            <mn>1</mn>
        </mrow>
        <mo>)</mo>
    </mrow>
</math>

Invisible Separator (<mo>⁣</mo>)

The invisible separator is used where there is an implicit separation between two numbers or characters, such as indices in subscripts in summations. The use of an invisible separator is demonstrated in the expression below (this expression uses the msub tag for the subscript). You can see where the invisible separator is in the structure of the expression in the comments.

$A_{i, j} + B_{i, j}$

Using the invisible separator (⁣)

<math>
    <msub>
        <mi>A</mi>
        <mrow>
            <mi>i</mi>
            <mo>&#x2063;</mo> <!-- Invisible Separator -->
            <mi>j</mi>
        </mrow>
    </msub>
    <mo>+</mo>
    <msub>
        <mi>B</mi>
        <mrow>
            <mi>i</mi>
            <mo>&#x2063;</mo> <!-- Invisible Separator -->
            <mi>j</mi>
        </mrow>
    </msub>
</math>

Invisible Addition (<mo>⁤</mo>)

The invisible addition operator is used any time there is implicit addition, such as in mixed numbers. For vertical (stacked) addition expressions that have three or more addends, put in the invisible addition operator before the addends that are not first or last in the stack. The invisible addition operator is used in the expression below (this expression uses the mfrac tag for the fraction). You can see where the invisible addition operator is used in the structure of the expression in the comments.

$1 \frac{1}{2}$

Using the invisible addition operator (⁤)

<math>
    <mn>1</mn>
    <mo>&#x2064;</mo> <!-- Invisible Addition -->
    <mstyle displaystyle="true">
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </mstyle>
</math>

Common Functions

We need to be able to identify the sets of characters for which we will need to use the invisible function application (⁡), so that we are consistent in its use. The common function names include, but are not limited to, the list below.

Angle Measures: The "m" is an mi and is applied to the complete representation of the angle. Note that an explanation of how to write the actual measure of an angle is given below in the section about pseudo-scripts.

$m ∠ A B C$
Angle measures
```
<math>
    <mi>m</mi>
    <mo>&#x2061;</mo>
    <mrow>
        <mo>&#x2220;</mo>
        <mrow>
            <mi>A</mi>
            <mi>B</mi>
            <mi>C</mi>
        </mrow>
    </mrow>
</math>
```
Trigonometric Functions: The function name "sin", "cos", "tan", "csc", "sec", or "cot" appears in an mi and is applied to the argument value. Note that for inverse or other exponents, we will use the function name as the base and the rules explained in the section about superscripts for the superscript.

$\cos θ$
Trigonometric functions
```
<math>
    <mi>cos</mi>
    <mo>&#x2061;</mo>
    <mi>&#x3b8;</mi>
</math>
```
Logarithms: The function name "log" or "ln" appears in an mi and is applied to the argument. Note that for the base of the logarithm, we will use the function name as the baseline text and the rules explained for subscripts for the base of the logarithm.

$\ln (3.75)$
Logarithms
```
<math>
    <mi>ln</mi>
    <mo>&#x2061;</mo>
    <mrow>
        <mo>(</mo>
            <mn>3.75</mn>
        <mo>)</mo>
    </mrow>
</math>
```
Number Functions: This includes functions like the greatest common factor (or divisor) represented as "gcf", "GCF", "gcd", or "GCD" and the least common multiple (or denominator) represented as "lcm", "LCM", "lcd", or "LCD". Often these are written without arguments, in which case the invisible operator is not needed, but occasionally we provide an argument, which means that we need the function application.

$\gcd (18, 42) = 6$
Number functions
```
<math>
    <mrow>
        <mi>gcd</mi>
        <mo>&#x2061;</mo>
        <mfenced>
            <mn>18</mn>
            <mn>42</mn>
        </mfenced>
    </mrow>
    <mo>=</mo>
    <mn>6</mn>
</math>
```

Units in MathML

When marking up units in math expressions, wrap the unit in an mi element with class="MathML-Unit" and place an invisible times operator between the magnitude and the unit of measurement. This creates a semantically correct MathML expression of units. Note that the class provides information to MathML Cloud and screen readers about what the markup means, so it is important that it is used appropriately. When the full name of a unit appears within text, such as $300,000,000$ meters, leave the name in plain text. When a space is needed between the magnitude and the units, use the rspace attribute on the mo containing the invisible operator, with the value thickmathspace. This entire expression will be considered one group, so to see how to apply mrow to values with units used in the context of a larger expression, see the section on units in larger expressions. Note that there are exceptions to this rule where a space is not used, listed in their own section. See the example below.

$24 mm$

Units in MathML

<math>
    <mn>24</mn>
    <mo rspace="thickmathspace">&#x2062;</mo>
    <mi class="MathML-Unit">mm</mi>
</math>

$24 {mm}^{2}$

Units with superscripts in MathML

<math>
    <mn>24</mn>
    <mo rspace="thickmathspace">&#x2062;</mo>
    <msup>
        <mi class="MathML-Unit">mm</mi>
        <mn>2</mn>
    </msup>
</math>

$24 \frac{kg \cdot m}{s^{2}}$

Complex units in MathML

<math>
    <mn>24</mn>
    <mo rspace="thickmathspace">&#x2062;</mo>
    <mstyle displaystyle="true">
        <mfrac>
            <mrow>
                <mi class="MathML-Unit">kg</mi>
                <mo>&#x22C5;</mo>
                <mi mathvariant="normal" class="MathML-Unit">m</mi>
            </mrow>
            <msup>
                <mi mathvariant="normal" class="MathML-Unit">s</mi>
                <mn>2</mn>
            </msup>
        </mfrac>
    </mstyle>
</math>

Special Unit Symbols

There are some complex units that have their own Unicode characters, so rather than trying to represent them by combining other characters, we will use the Unicode characters. Note that we have to use mathvariant="normal" with these characters so that the renderer will not italicize the letters.

Degrees Celsius: ℃ (℃)
Degrees Fahrenheit: ℉ (℉)

$0 ℃ = 32 ℉$

Temperature

<math>
    <mrow>
        <mn>0</mn>
        <mo rspace="thickmathspace">&#x2062;</mo>
        <mi mathvariant="normal" class="MathML-Unit">&#x2103;</mi>
    </mrow>
    <mo>=</mo>
    <mrow>
        <mn>32</mn>
        <mo rspace="thickmathspace">&#x2062;</mo>
        <mi mathvariant="normal" class="MathML-Unit">&#x2109;</mi>
    </mrow>
</math>

Exceptions

There are a few units that are exceptions to the rules above (in different ways).

Units that use a pseudo-script (degrees, minutes, seconds on angles). See the section on pseudo-scripts for an explanation of how to write these expressions.

Monetary units are written without the rspace attribute. Most of the currency symbols appear before the value, but for some (like the cent sign) they will still appear after the value without the space. Also, we will have to use mathvariant="normal", so that the renderer will not italicize these symbols.

$$ 5.25 = 525 ¢ = € 4.76$

Currency

<math>
    <mrow>
        <mi class="MathML-Unit" mathvariant="normal">$</mi>
        <mo>&#x2062;</mo>
        <mn>5.25</mn>
    </mrow>
    <mo>=</mo>
    <mrow>
        <mn>525</mn>
        <mo>&#x2062;</mo>
        <mi class="MathML-Unit" mathvariant="normal">&#xa2;</mi>
    </mrow>
    <mo>=</mo>
    <mrow>
        <mi class="MathML-Unit" mathvariant="normal">&#x20ac;</mi>
        <mo>&#x2062;</mo>
        <mn>4.76</mn>
    </mrow>
</math>

When text is used to modify a value that is not a traditional unit (i.e., it is not a measurement) in the context of a larger expression, we use mtext with an mspace, rather than the normal unit markup. Note that if the value just appears in a line of text, then the text should not be placed in the math expression.

$\frac{12 pennies}{5 dimes}$

Ratio with unit-like values

<math>
    <mstyle displaystyle='true'>
        <mfrac>
            <mrow>
                <mn>12</mn>
                <mspace width='thickmathspace'/>
                <mtext>pennies</mtext>
            </mrow>
            <mrow>
                <mn>5</mn>
                <mspace width='thickmathspace'/>
                <mtext>dimes</mtext>
            </mrow>
        </mfrac>
    </mstyle>
</math>

Fractions (`mfrac`)

The mfrac tag specifies the beginning of a fraction and the ending tag where the fraction ends. For simple fractions that are one number over another like $\frac{1}{2}$ we do not need to add any mrow tags. For more complex fractions where we have a whole expression over another both the numerator and denominator will need to be wrapped in mrow tags unless they consist of only one argument. See below for an example of fraction coding.

$\frac{x + y + 1}{2 x + 3 y}$

Using mfrac

<math>
    <mstyle displaystyle="true">
        <mfrac>
            <mrow>
                <mi>x</mi>
                <mo>+</mo>
                <mi>y</mi>
                <mo>+</mo>
                <mn>1</mn>
            </mrow>
            <mrow>
                <mrow>
                    <mn>2</mn>
                    <mo>&#x2062;</mo>
                    <mi>x</mi>
                </mrow>
                <mo>+</mo>
                <mrow>
                    <mn>3</mn>
                    <mo>&#x2062;</mo>
                    <mi>y</mi>
                </mrow>
            </mrow>
        </mfrac>
    </mstyle>
</math>

Fractions will have to be wrapped in an mstyle element that has the attribute displaystyle="true". Fractions that are inside of other fractions will have to be treated in the same manner. Having fractions within a fraction is perfectly acceptable. See below for examples of cases where displaystyle="true" should be used.

$\frac{1}{2}$

Before displaystyle="true"

<math>
    <mfrac>
        <mn>1</mn>
        <mn>2</mn>
    </mfrac>
</math>

$\frac{1}{2}$

After displaystyle="true"

<math>
    <mstyle displaystyle="true">
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </mstyle>
</math>

$\frac{\frac{x + 1}{25} + \frac{y - 3}{4}}{\sqrt{\frac{1}{n} + \frac{1}{n + 1}}}$

Before displaystyle="true" with fractions inside of fractions

<math>
    <mfrac>
        <mrow>
            <mfrac>
                <mrow>
                    <mi>x</mi>
                    <mo>+</mo>
                    <mn>1</mn>
                </mrow>
                <mn>25</mn>
            </mfrac>
            <mo>+</mo>
            <mfrac>
                <mrow>
                    <mi>y</mi>
                    <mo>&#x2212;</mo>
                    <mn>3</mn>
                </mrow>
                <mn>4</mn>
            </mfrac>
        </mrow>
        <msqrt>
            <mfrac>
                <mn>1</mn>
                <mi>n</mi>
            </mfrac>
            <mo>+</mo>
            <mfrac>
                <mn>1</mn>
                <mrow>
                    <mi>n</mi>
                    <mo>+</mo>
                    <mn>1</mn>
                </mrow>
            </mfrac>
        </msqrt>
    </mfrac>
</math>

$\frac{\frac{x + 1}{25} + \frac{y - 3}{4}}{\sqrt{\frac{1}{n} + \frac{1}{n + 1}}}$

After displaystyle="true" with fractions inside of fractions

<math>
    <mstyle displaystyle="true">                    
        <mfrac>
            <mstyle displaystyle="true"> <!-- We can wrap both fractions in the numerator with the mstyle and have the same effect as wrapping them individually.-->
                <mfrac>
                    <mrow>
                        <mi>x</mi>
                        <mo>+</mo>
                        <mn>1</mn>
                    </mrow>
                    <mn>25</mn>
                </mfrac>
                <mo>+</mo>
                <mfrac>
                    <mrow>
                        <mi>y</mi>
                        <mo>&#x2212;</mo>
                        <mn>3</mn>
                    </mrow>
                    <mn>4</mn>
                </mfrac>
            </mstyle>
            <mstyle displaystyle="true"> <!-- Similarly we can wrap both fractions in the denominator with the mstyle.-->
                <msqrt>
                    <mfrac>
                        <mn>1</mn>
                        <mi>n</mi>
                    </mfrac>
                    <mo>+</mo>
                    <mfrac>
                        <mn>1</mn>
                        <mrow>
                            <mi>n</mi>
                            <mo>+</mo>
                            <mn>1</mn>
                        </mrow>
                    </mfrac>
                </msqrt>
            </mstyle>
        </mfrac>
    </mstyle>
</math>

Superscripts, Subscripts, Multiple Scripts (`msup`, `msub`, `msubsup`, and `mmultiscripts`)

Creating an expression with a superscript or subscript is very similar to creating a fraction. The msup and msub elements accept two arguments: the base and the superscript or subscript, which of course can be entire expressions wrapped with mrow tags. See the examples below.

$x^{2}$

Using msup

<math>
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
</math>

$x_{2}$

Using msub

<math>
    <msub>
        <mi>x</mi>
        <mn>2</mn>
    </msub>
</math>

Creating an expression with both a superscript and a subscript can also be done easily using the msubsup element. This element accepts three arguments: the base, the subscript, and then the superscript. See the example below.

$x_{i, j}^{2}$

Using msubsup

<math>
    <msubsup>
        <mi>x</mi>
        <mrow>
            <mi>i</mi>
            <mo>&#x2063;</mo>
            <mi>j</mi>
        </mrow>
        <mn>2</mn>
    </msubsup>
</math>

Lastly, you can create an expression using mmultiscripts that can have a subscript and superscript as well a presubscript and presuperscript. The mmultiscripts element utilizes two other child elements that are specific to this element: none and mprescripts. The mmultiscripts element accepts three arguments: the base, subscript, and superscript. mmultiscripts then requires the mprescripts element, which is an empty tag, and then two more arguments, which are the presubscript and presuperscript. Check the two examples below for how these are used.

${}_{3}^{4}x_{1}^{2}$

Using mmultiscripts

<math>
    <mmultiscripts>
        <mi>x</mi>
        <mn>1</mn> <!-- postsubscript -->
        <mn>2</mn> <!-- postsuperscript -->
        <mprescripts></mprescripts>
        <mn>3</mn> <!-- presubscript -->
        <mn>4</mn> <!-- presuperscript -->
    </mmultiscripts>
</math>

${}_{presubscript but no presuperscript ↑}x_{y + 1}^{2}$

Using the none element inside of mmultiscripts

<math>
    <mmultiscripts>
        <mi>x</mi>
        <mrow>
            <mi>y</mi>
            <mo>+</mo>
            <mn>1</mn>
        </mrow>
        <mn>2</mn>
        <mprescripts></mprescripts>
        <mrow>
            <mtext>presubscript but no presuperscript</mtext>
            <mo>&#x2191;</mo>
        </mrow>
        <none></none> <!-- We use none to tell the renderer that there is supposed to be no value in this position (presuperscript) -->
    </mmultiscripts>
</math>

Pseudo-Scripts

There are characters that have a natural script aspect to them, and instead of only using the character codes for them, we also use msup, in accordance with the W3C MathML guidelines, to help indicate the full group to which the character is being applied. The characters that should be treated this way are listed below. Note that the context of how the character is being used also determines which token element we will use to represent it; that is, if the symbol represents a unit we use mi with class="MathML-Unit" and if it represents an operator we use mo.

Degree sign: ° (°)
Prime: ′ (′) — Note that this is different from the apostrophe (') and will be used for indicating a derivative and minutes in angle measures.
Double-prime: ″ (″) — Note that this is different from the quotation mark (") and will be used for indicating the second derivative and seconds in angle measures.

$55^{°} 23^{'} 41^{″}$

Use of msup for pseudo-scripts

<math>
    <msup><mn>55</mn><mi class="MathML-Unit">&#x00B0;</mi></msup>
    <msup><mn>23</mn><mi class="MathML-Unit" mathvariant="normal">&#x2032;</mi></msup>
    <msup><mn>41</mn><mi class="MathML-Unit" mathvariant="normal">&#x2033;</mi></msup>
</math>

${(f g)}^{'} = f g^{'} + f^{'} g$

Use of msup for pseudo-scripts

<math>
    <msup>
        <mrow>
            <mo>(</mo>
                <mrow>
                    <mi>f</mi><mo>&#x2062;</mo><mi>g</mi>
                </mrow>
            <mo>)</mo>
        </mrow>
        <mo>&#x2032;</mo>
    </msup>
    <mo>=</mo>
    <mrow>
        <mrow>
            <mi>f</mi>
            <mo>&#x2062;</mo>
            <msup>
                <mi>g</mi>
                <mo>&#x2032;</mo>
            </msup>
        </mrow>
        <mo>+</mo>
        <mrow>
            <msup>
                <mi>f</mi>
                <mo>&#x2032;</mo>
            </msup>
            <mo>&#x2062;</mo>
            <mi>g</mi>
        </mrow>
    </mrow>
</math>

Over and Under Scripts (`munder`, `mover`, and `munderover`)

When we need to write text above or below a mathematical expression, we use mover, munder, or munderover. There are some important attributes on each of these that we may use. First, accent and accentunder determine how the over or under script will appear relative to the baseline text. If the script is an accent, then it is closer to the baseline text and will be the same font size; otherwise it is considered a limit and will appear in a smaller font size and will be a little further away. In general, we will use the default display of script, but it is important to know that we may need to specify this attribute if we want to alter the font size or location of the over and under scripts. Additionally, we may need to use the align attribute, which determines how the over or under script is aligned relative to the baseline text. It is important to note that when using munderover, the under script appears before the over script in the markup and they will be read in that order, so make sure this is considered when marking up an equation.

$\underset{first number}{n} + \underset{second number}{n + 1} = \underset{sum}{34}$

Using munder

<math>
    <mrow>
        <munder accentunder='true'>
            <mi>n</mi>
            <mtext>first number</mtext>
        </munder>
        <mo>+</mo>
        <munder accentunder='true'>
            <mrow>
                <mi>n</mi>
                <mo>+</mo>
                <mn>1</mn>
            </mrow>
            <mtext>second number</mtext>
        </munder>
    </mrow>
    <mo>=</mo>
    <munder accentunder='true'>
        <mn>34</mn>
        <mtext>sum</mtext>
    </munder>
</math>

$\int_{0}^{2} (2 x + 3) d x$

Using munderover

<math>
    <mstyle displaystyle='true'>
        <munderover>
            <mo>&#x222b;</mo>
            <mn>0</mn>
            <mn>2</mn>
        </munderover>
        <mrow>
            <mfenced>
                <mrow>
                    <mrow>
                        <mn>2</mn>
                        <mo>&#x2062;</mo>
                        <mi>x</mi>
                    </mrow>
                    <mo>+</mo>
                    <mn>3</mn>
                </mrow>
            </mfenced>
            <mo>&#x2062;</mo>
            <mrow>
                <mo mathvariant='italic' rspace='0'>d</mo>
                <mi>x</mi>
            </mrow>
        </mrow>
    </mstyle>
</math>

There are often cases where we want to use an arrow or grouping bracket to call out the over or under script. In these cases, we will use a nested mover or munder, where the appropriate text appears in each level. Note that with the grouping symbols, we need to note whether it is supposed to be grouping the scripted text or the baseline text for determining the heirarchy of the mover and munder. For symbols that are commonly used, there are sometimes alternate renderings of them, so we want to make sure we are using the correct Unicode for each one. For the arrows, we have ← (←), ↑ (↑), → (→), and ↓ (↓). For the brackets, we want to use ⏞ (⏞), ⏟ (⏟), ⎴ (&#23b4;), ⎵ (⎵) (note that we do not want to use the presentation form of any of the brackets, as these symbols are not recognized by all screen readers).

$\overset{\underset{⏟}{Dividend}}{18} \div \overset{\underset{⏟}{Divisor}}{3} = \overset{\underset{⏟}{Quotient}}{6}$

Nested over script

<math>
    <mrow>
        <mover>
            <mn>18</mn>
            <munder>
                <mtext>Dividend</mtext>
                <mo>&#x23df;</mo>
            </munder>
        </mover>
        <mo>&#xf7;</mo>
        <mover>
            <mn>3</mn>
            <munder>
                <mtext>Divisor</mtext>
                <mo>&#x23df;</mo>
            </munder>
        </mover>
    </mrow>
    <mo>=</mo>
    <mover>
        <mn>6</mn>
        <munder>
            <mtext>Quotient</mtext>
            <mo>&#x23df;</mo>
        </munder>
    </mover>
</math>

Exceptions

There are a few situations in which our layout may appear to be using an over or under script, in which we are actually using a Unicode character that has the scripting already built into it. Those are as follows.

Questioned Equal To: ≟ (≟ or ≟) — There is currently a display issue with MathJax not rendering this symbol at the same width as the regular equals symbol, so there may be some alignment issues initially when using this symbol in multiline equations.

Radicals (`msqrt` and `mroot`)

When expressions appear under a radical, use the msqrt element for square roots and use mroot for radicals with other indices. msqrt accepts one argument, and mroot accepts two, the expression under the radical sign and then the index. Check the examples below.

$\sqrt{2 + 1}$

Using msqrt

<math>
    <msqrt> <!-- square root element -->
        <mn>2</mn>
        <mo>+</mo>
        <mn>1</mn>
    </msqrt>
</math>

$\sqrt[4]{2 + 1}$

Using mroot

<math>
    <mroot> <!-- root element -->
        <mrow>
            <mn>2</mn>
            <mo>+</mo>
            <mn>1</mn>
        </mrow>
        <mn>4</mn>
    </mroot>
</math>

Matrices, Multiline Equations, and `mphantom`

A matrix is represented in MathML by the mtable element and its child elements mtr and mtd. These elements behave in the same way that HTML table elements behave. A 2-by-2 matrix is created like so:

$(\begin{matrix} 1 & 0 \\ 0 & 1 \end{matrix})$

Using mtable to create a matrix

<math>
    <mo>(</mo>
    <mtable>
        <mtr>
            <mtd><mn>1</mn></mtd>
            <mtd><mn>0</mn></mtd>
        </mtr>
        <mtr>
            <mtd><mn>0</mn></mtd>
            <mtd><mn>1</mn></mtd>
        </mtr>
    </mtable>
    <mo>)</mo>
</math>

The mtable element and its children can also be used to create multiline equations. When creating multiline equations where there are actions being performed on both sides, the goal will be to minimize the number of columns and the number of empty cells, so in general we will use two columns with the columnalign attribute set to right left. The left column is for the left side of the equation, and the right column is for the "=" and the right side of the equation. Note that we can specify the columnspacing to be thickmathspace if we think the columns look too far apart.

Check out the code below. Note that we have an implied mrow for the left side when there is more than one element in that cell, so we only use an mrow in the left side when there is a subexpression that requires it. On the right-hand side, we want to wrap the expression after the "=" with an mrow whenever there is more than one element making up the expression to the right of the equal sign.

$\begin{aligned} x - 3 & = 7 \\ x - 3 + 3 & = 7 + 3 \\ x & = 10 \end{aligned}$

Using mtable for multiline equations

<math>
    <mtable columnalign="right left" columnspacing="thickmathspace">
        <mtr>
            <mtd>
                <mi>x</mi>
                <mo>&#x2212;</mo>
                <mn>3</mn>
            </mtd>
            <mtd>
                <mo>=</mo>
                <mn>7</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mi>x</mi>
                <mo>&#x2212;</mo>
                <mn>3</mn>
                <mo>+</mo>
                <mn>3</mn>
            </mtd>
            <mtd>
                <mo>=</mo>
                <mrow>
                    <mn>7</mn>
                    <mo>+</mo>
                    <mn>3</mn>
                </mrow>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mi>x</mi>
            </mtd>
            <mtd>
                <mo>=</mo>
                <mn>10</mn>
            </mtd>
        </mtr>
    </mtable>
</math>

To create a multiline equation where each subsequent line begins with an equal sign, a new element called mphantom is needed. The mphantom element tells the renderer to not render the contents but preserve the spacing of those contents as if they were rendered. In this way multiline equations can be created in one table cell and be rendered more efficiently by auditory and visual rendering agents. Notice that within a table, we have to apply the mstyle for the display of fractions within each cell as if it were a separate math expression (using mtable resets the script level, so having the mstyle on the outside has no effect). Use of mphantom should be kept to a minimum; check the W3C warning on fine-tuning equation presentation in the MathML 3.0 specification^[2]. Check out the equations below to see mphantom in action. Also note the use of mrow to wrap subexpressions, such as any expression that forms one side of an equation (if the mrow contains more than one child element, and these child elements are not already wrapped in an inferred mrow), so it is clear in the MathML structure that everything on one side of "=" is grouped together as a complete expression.

$\begin{array}{l} z = \frac{\hat{p} - p}{\sqrt{\frac{p (1 - p)}{n}}} \\ = \frac{0.09 - 0.10}{\sqrt{\frac{0.10 (1 - 0.10)}{700}}} \\ \approx \frac{- 0.01}{0.011339} \approx - 0.88 \end{array}$

Using mtable and mphantom for multiline equations

<math>
    <mtable columnalign='left'>
        <mtr>
            <mtd>
                <mi>z</mi>
                <mo>=</mo>
                <mstyle displaystyle="true">
                    <mfrac>
                        <mrow>
                            <mover accent='true'>
                                <mi>p</mi>
                                <mo>&#x005E;</mo>
                            </mover>
                            <mo>&#x2212;</mo>
                            <mi>p</mi>
                        </mrow>
                        <msqrt>
                            <mstyle displaystyle="true">
                                <mfrac>
                                    <mrow>
                                        <mi>p</mi>
                                        <mo>&#x2062;</mo>
                                        <mfenced>
                                            <mrow>
                                                <mn>1</mn>
                                                <mo>&#x2212;</mo>
                                                <mi>p</mi>
                                            </mrow>
                                        </mfenced>
                                    </mrow>
                                    <mi>n</mi>
                                </mfrac>
                            </mstyle>
                        </msqrt>
                    </mfrac>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mphantom>
                    <mi>z</mi>
                </mphantom>
                <!-- Here we use mphantomed characters to preserve space so that
                each line of the equation is presented in one mtd instead of three-->
                <mo>=</mo>
                <mstyle displaystyle="true">
                    <mfrac>
                        <mrow>
                            <mn>0.09</mn>
                            <mo>&#x2212;</mo>
                            <mn>0.10</mn>
                        </mrow>
                        <msqrt>
                            <mstyle displaystyle="true">
                                <mfrac>
                                    <mrow>
                                        <mn>0.10</mn>
                                        <mo>&#x2062;</mo>
                                        <mfenced>
                                            <mrow>
                                                <mn>1</mn>
                                                <mo>&#x2212;</mo>
                                                <mn>0.10</mn>
                                            </mrow>
                                        </mfenced>
                                    </mrow>
                                    <mn>700</mn>
                                </mfrac>
                            </mstyle>
                        </msqrt>
                    </mfrac>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mphantom>
                    <mi>z</mi>
                </mphantom>
                <mo>&#x2248;</mo>
                <mstyle displaystyle="true">
                    <mfrac>
                        <mrow>
                            <mo>&#x2212;</mo>
                            <mn>0.01</mn>
                        </mrow>
                        <mn>0.011339</mn>
                    </mfrac>
                </mstyle>
                <mo>&#x2248;</mo>
                <mrow>
                    <mo>&#x2212;</mo>
                    <mn>0.88</mn>
                </mrow>
            </mtd>
        </mtr>
    </mtable>
</math>

$\begin{array}{l} a x^{2} + b x + c = a (x^{2} + \frac{b}{a} x) + c \\ = a (x^{2} + 2 (\frac{b}{2 a}) x + {(\frac{b}{2 a})}^{2}) + c - a {(\frac{b}{2 a})}^{2} \\ = a {(x + \frac{b}{2 a})}^{2} - \frac{b^{2} - 4 a c}{4 a} \end{array}$

Using mtable and mphantom for multiline equations

<math>
    <mtable columnalign="left">
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mrow>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <msup>
                                <mi>x</mi>
                                <mn>2</mn>
                            </msup>
                        </mrow>
                        <mo>+</mo>
                        <mrow>
                            <mi>b</mi>
                            <mo>&#x2062;</mo>
                            <mi>x</mi>
                        </mrow>
                        <mo>+</mo>
                        <mi>c</mi>
                    </mrow>
                    <mo>=</mo>
                    <mrow>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <mrow>
                                <mo>(</mo>
                                <mrow>
                                    <msup>
                                        <mi>x</mi>
                                        <mn>2</mn>
                                    </msup>
                                    <mo>+</mo>
                                    <mrow>
                                        <mfrac>
                                            <mi>b</mi>
                                            <mi>a</mi>
                                        </mfrac>
                                        <mo>&#x2062;</mo>
                                        <mi>x</mi>
                                    </mrow>
                                </mrow>
                                <mo>)</mo>
                            </mrow>
                        </mrow>
                        <mo>+</mo>
                        <mi>c</mi>
                    </mrow>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mphantom>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <msup>
                                <mi>x</mi>
                                <mn>2</mn>
                            </msup>
                        </mrow>
                        <mo>+</mo>
                        <mrow>
                            <mi>b</mi>
                            <mo>&#x2062;</mo>
                            <mi>x</mi>
                        </mrow>
                        <mo>+</mo>
                        <mi>c</mi>
                    </mphantom>
                    <mo>=</mo>
                    <mrow>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <mrow>
                                <mo>(</mo>
                                <mrow>
                                    <msup>
                                        <mi>x</mi>
                                        <mn>2</mn>
                                    </msup>
                                    <mo>+</mo>
                                    <mrow>
                                        <mn>2</mn>
                                        <mo>&#x2062;</mo>
                                        <mrow>
                                            <mo>(</mo>
                                            <mfrac>
                                                <mi>b</mi>
                                                <mrow>
                                                    <mn>2</mn>
                                                    <mo>&#x2062;</mo>
                                                    <mi>a</mi>
                                                </mrow>
                                            </mfrac>
                                            <mo>)</mo>
                                        </mrow>
                                        <mo>&#x2062;</mo>
                                        <mi>x</mi>
                                    </mrow>
                                    <mo>+</mo>
                                    <msup>
                                        <mrow>
                                            <mo>(</mo>
                                            <mfrac>
                                                <mi>b</mi>
                                                <mrow>
                                                    <mn>2</mn>
                                                    <mo>&#x2062;</mo>
                                                    <mi>a</mi>
                                                </mrow>
                                            </mfrac>
                                            <mo>)</mo>
                                        </mrow>
                                        <mn>2</mn>
                                    </msup>
                                </mrow>
                                <mo>)</mo>
                            </mrow>
                        </mrow>
                        <mo>+</mo>
                        <mi>c</mi>
                        <mo>&#x2212;</mo>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <msup>
                                <mrow>
                                    <mo>(</mo>
                                    <mfrac>
                                        <mi>b</mi>
                                        <mrow>
                                            <mn>2</mn>
                                            <mo>&#x2062;</mo>
                                            <mi>a</mi>
                                        </mrow>
                                    </mfrac>
                                    <mo>)</mo>
                                </mrow>
                                <mn>2</mn>
                            </msup>
                        </mrow>
                    </mrow>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mphantom>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <msup>
                                <mi>x</mi>
                                <mn>2</mn>
                            </msup>
                        </mrow>
                        <mo>+</mo>
                        <mrow>
                            <mi>b</mi>
                            <mo>&#x2062;</mo>
                            <mi>x</mi>
                        </mrow>
                        <mo>+</mo>
                        <mi>c</mi>
                    </mphantom>
                    <mo>=</mo>
                    <mrow>
                        <mrow>
                            <mi>a</mi>
                            <mo>&#x2062;</mo>
                            <msup>
                                <mrow>
                                    <mo>(</mo>
                                    <mrow>
                                        <mi>x</mi>
                                        <mo>+</mo>
                                        <mfrac>
                                            <mi>b</mi>
                                            <mrow>
                                                <mn>2</mn>
                                                <mo>&#x2062;</mo>
                                                <mi>a</mi>
                                            </mrow>
                                        </mfrac>
                                    </mrow>
                                    <mo>)</mo>
                                </mrow>
                                <mn>2</mn>
                            </msup>
                        </mrow>
                        <mo>&#x2212;</mo>
                        <mfrac>
                            <mrow>
                                <msup>
                                    <mi>b</mi>
                                    <mn>2</mn>
                                </msup>
                                <mo>&#x2212;</mo>
                                <mrow>
                                    <mn>4</mn>
                                    <mo>&#x2062;</mo>
                                    <mi>a</mi>
                                    <mo>&#x2062;</mo>
                                    <mi>c</mi>
                                </mrow>
                            </mrow>
                            <mrow>
                                <mn>4</mn>
                                <mo>&#x2062;</mo>
                                <mi>a</mi>
                            </mrow>
                        </mfrac>
                    </mrow>
                </mstyle>
            </mtd>
        </mtr>
    </mtable>
</math>

Units in Larger Expressions

In the context of a larger equation, units will still be marked up as discussed above. The important note is that we want to use an mrow on the whole expression (the value, the operator, the unit) to indicate to the user exactly what value the unit is modifying.

$\begin{array}{l} P = l w \\ = 6 in. \cdot 3 in. \\ = 18 {in.}^{2} \end{array}$

<math>
    <mtable columnalign="left">
        <mtr>
            <mtd>
                <mi>P</mi>
                <mo>=</mo>
                <mrow>
                    <mi>l</mi>
                    <mo>&#x2062;</mo>
                    <mi>w</mi>
                </mrow>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mphantom>
                    <mi>P</mi>
                </mphantom>
                <mo>=</mo>
                <mrow>
                    <mrow>
                        <mn>6</mn>
                        <mo rspace="thickmathspace">&#x2062;</mo>
                        <mi class="MathML-Unit">in.</mi>
                    </mrow>
                    <mo>&#x0b7;</mo>
                    <mrow>
                        <mn>3</mn>
                        <mo rspace="thickmathspace">&#x2062;</mo>
                        <mi class="MathML-Unit">in.</mi>
                    </mrow>
                </mrow>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mphantom>
                    <mi>P</mi>
                </mphantom>
                <mo>=</mo>
                <mrow>
                    <mn>18</mn>
                    <mo rspace="thickmathspace">&#x2062;</mo>
                    <msup>
                        <mi class="MathML-Unit">in.</mi>
                        <mn>2</mn>
                   </msup>
                </mrow>
            </mtd>
        </mtr>
    </mtable>
</math>

It is also important to consider the correct context of each unit within the greater expression. For example, if you are using a fractional unit, then the value it is modifying should not appear in the numerator or denominator of the fraction; however, if you are dividing two values with units, then the values and their units should appear in the numerator and denominator.

$\begin{array}{l} r = \frac{D}{t} \\ = \frac{10 ft}{5 s} \\ = 2 \frac{ft}{s} \end{array}$

<math>
    <mtable columnalign="left">
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mi>r</mi>
                    <mo>=</mo>
                    <mfrac>
                        <mi>D</mi>
                        <mi>t</mi>
                    </mfrac>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mphantom>
                        <mi>r</mi>
                    </mphantom>
                    <mo>=</mo>
                    <mfrac>
                        <mrow>
                            <mn>10</mn>
                            <mo rspace="thickmathspace">&#x2062;</mo>
                            <mi class="MathML-Unit">ft</mi>
                        </mrow>
                        <mrow>
                            <mn>5</mn>
                            <mo rspace="thickmathspace">&#x2062;</mo>
                            <mi class="MathML-Unit" mathvariant="normal">s</mi>
                        </mrow>
                    </mfrac>
                </mstyle>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mstyle displaystyle="true">
                    <mphantom>
                        <mi>r</mi>
                    </mphantom>
                    <mo>=</mo>
                    <mrow>
                        <mn>2</mn>
                        <mo rspace="thickmathspace">&#x2062;</mo>
                        <mfrac>
                            <mi class="MathML-Unit">ft</mi>
                            <mi class="MathML-Unit" mathvariant="normal">s</mi>
                        </mfrac>
                    </mrow>
                </mstyle>
            </mtd>
        </mtr>
    </mtable>
</math>

Equations with Work Notes

There are four different scenarios for applying work notes in equations that may be encountered:

In-line equations followed by work notes
Multiline equations in HTML tables with work notes
Multiline equations in mtable elements with work notes
SVG images with work notes

The following subsections will provide best practices for dealing with in-line work notes, and work notes in multiline equations in HTML tables and multiline equations in mtable elements.

In-Line Equations and Work Notes

For an in-line equation that has work notes added after the equation, the markup for work notes is very simple. Use an em space ( ) to provide space between the equation and the work notes and then wrap the text of the work notes in small tags. Check out the example below:

$5.23 \div 100 = \frac{5.23}{100} = 0.0523$ Move decimal point $2$ places to the left.

In-line work notes

<p>
    <math>
        <mrow>
            <mn>5.23</mn>
            <mo>&#x00F7;</mo>
            <mn>100</mn>
        </mrow>
        <mo>=</mo>
        <mfrac>
            <mn>5.23</mn>
            <mn>100</mn>
        </mfrac>
        <mo>=</mo>
        <mn>0.0523</mn>
    </math>&#x2003;<small>Move decimal point <math><mn>2</mn></math> places to the left.</small>
</p>

Multiline Equations with Work Notes

Often multiline equations will have work notes to the right explaining what is happening in each step of the process. The DAISY MathML structure guidelines suggest using an HTML table to lay out the equation^[3], with the equation in one or two columns and work notes in the last columns. You should try and keep as much of each line of the equation as possible in one MathML expression. Below we have deviated from the MathML in DAISY Structure Guidelines by using the mphantom method demonstrated above to align the equations. This will provide a better reading experience for users with assistive technology. Work notes should be marked up with th elements since they represent a heading that describes the action in the step. The text should also be wrapped in a small element which will let the user know that the text is important but ancillary and also provide the styling. See an example taken from the MathML in DAISY Structure Guidelines below. The class math will have to be applied to the table to remove table row borders and the class alignLeft is used in this case to align the work notes and equations.

$32 + 28 = 32 + (20 + 8)$	← Rewrite $28$ as $20 + 8$ .
$= 32 + (8 + 20)$	← Use the Commutative Property of Addition.
$= (32 + 8) + 20$	← Use the Associative Property of Addition.
$= 40 + 20$	← Add inside the parentheses first.
$= 60$	← Simplify.

Using a table to associate work notes with lines of a multiline equation

<table class="math alignLeft">
    <tr>
        <td>
            <math>
                <mrow>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mn>28</mn>
                </mrow>
                <mo>=</mo>
                <mrow>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mrow>
                        <mo>(</mo>
                        <mrow>
                            <mn>20</mn>
                            <mo>+</mo>
                            <mn>8</mn>
                        </mrow>
                        <mo>)</mo>
                    </mrow>
                </mrow>
            </math>
        </td>
        <th scope="row">
            <small>
                &#x2190; <!--left arrow-->
                Rewrite
                <math>
                    <mn>28</mn>
                </math> as
                <math>
                    <mn>20</mn>
                    <mo>+</mo>
                    <mn>8</mn>
                </math>.
            </small>
        </th>
    </tr>
    <tr>
        <td>
            <math>
                <mphantom>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mn>28</mn>
                </mphantom>
                <mo>=</mo>
                <mrow>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mrow>
                        <mo>(</mo>
                        <mrow>
                            <mn>8</mn>
                            <mo>+</mo>
                            <mn>20</mn>
                        </mrow>
                        <mo>)</mo>
                    </mrow>
                </mrow>
            </math>
        </td>
        <th scope="row">
            <small>
                &#x2190; <!--left arrow-->
                Use the Commutative Property of Addition.
            </small>
        </th>
    </tr>
    <tr>
        <td>
            <math>
                <mphantom>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mn>28</mn>
                </mphantom>
                <mo>=</mo>
                <mrow>
                    <mrow>
                        <mo>(</mo>
                        <mrow>
                            <mn>32</mn>
                            <mo>+</mo>
                            <mn>8</mn>
                        </mrow>
                        <mo>)</mo>
                    </mrow>
                    <mo>+</mo>
                    <mn>20</mn>
                </mrow>
            </math>
        </td>
        <th scope="row">
            <small>
                &#x2190; <!--left arrow-->
                Use the Associative Property of Addition.
            </small>
        </th>
    </tr>
    <tr>
        <td>
            <math>
                <mphantom>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mn>28</mn>
                </mphantom>
                <mo>=</mo>
                <mrow>
                    <mn>40</mn>
                    <mo>+</mo>
                    <mn>20</mn>
                </mrow>
            </math>
        </td>
        <th scope="row">
            <small>
                &#x2190; <!--left arrow-->
                Add inside the parentheses first.
            </small>
        </th>
    </tr>
    <tr>
        <td>
            <math>
                <mphantom>
                    <mn>32</mn>
                    <mo>+</mo>
                    <mn>28</mn>
                </mphantom>
                <mo>=</mo>
                <mn>60</mn>
            </math>
        </td>
        <th scope="row">
            <small>
                &#x2190; <!--left arrow-->
                Simplify.
            </small>
        </th>
    </tr>
</table>

In instances where the left side of the equation is not consistent throughout the process we can use individual table cells for the left and right sides of the equation. We should mark up the work notes as the last column on the right and use th elements with scope="row" so that they will be associated with the processes going on in that row. Just as with multiline equations that do not have work notes, the goal is to minimize the number of columns and the number of empty cells. Use classes to style the table as needed.

$2 z$	$> 14$	Write the inequality.
$\frac{2 z}{2}$	$> \frac{14}{2}$	Divide both sides by $2$ .
$z$	$> 7$

Using a table to associate work notes with lines of a multiline equation

<table class="math">
    <tr class="alignLeft">
        <td class="alignRight">
            <math>
                <mn>2</mn>
                <mo>&#x2062;</mo>
                <mi>z</mi>
            </math>
        </td>
        <td>
            <math>
                <mo>&#x003E;</mo>
                <mn>14</mn>
            </math>
        </td>
        <th scope="row"><small>Write the inequality.</small></th>
    </tr>
    <tr class="alignLeft">
        <td class="alignRight">
            <math>
                <mstyle displaystyle="true">
                    <mfrac>
                        <mrow>
                            <mn>2</mn>
                            <mo>&#x2062;</mo>
                            <mi>z</mi>
                        </mrow>
                        <mn>2</mn>
                    </mfrac>
                </mstyle>
            </math>
        </td>
        <td>
            <math>
                <mo>&#x003E;</mo>
                <mstyle displaystyle="true">
                    <mfrac>
                        <mn>14</mn>
                        <mn>2</mn>
                    </mfrac>
                </mstyle>
            </math>
        </td>
        <th scope="row"><small>Divide both sides by
            <math>
                <mn>2</mn>
            </math>.</small>
        </th>
    </tr>
    <tr class="alignLeft">
        <td class="alignRight">
            <math>
                <mi>z</mi>
            </math>
        </td>
        <td>
            <math>
                <mo>&#x003E;</mo>
                <mn>7</mn>
            </math>
        </td>
        <td></td>
    </tr>
</table>

Equations in `mtable` Elements with Work Notes

While these instances should be avoided, there is sometimes no choice but to use an mtable to mark up an equation with work notes. In general these cases will be when there are work notes applied to long division or stacked expressions. In these instances the mtd containing the work notes should have class="workNotes" applied as shown below:

$\begin{array}{r} 0.333 & The 3 will repeat without end. \\ 3 1.000 \\ \underline{- 9} \\ 10 \\ \underline{- 9} \\ 10 \\ \underline{- 9} \\ 10 & Continuing to divide will give a remainder of 1 each time. \end{array}$

mtable work notes

<math>
    <mtable columnalign="right">
        <mtr>
            <mtd>
                <mn>0.333</mn>
            </mtd>
            <mtd columnalign="left" class="workNotes">
                <mtext>The&#x00A0;</mtext>
                <mn>3</mn>
                <mtext>&#x00A0;will repeat without end.</mtext>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>3</mn>
                <menclose notation="longdiv">
                    <mn>1.000</mn>
                </menclose>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo>&#x2212;</mo>
                        <mn>9</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mn>00</mn>
                </mphantom>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <mphantom>
                    <mn>1.</mn>
                </mphantom>
                <mn>10</mn>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo>&#x2212;</mo>
                        <mn>9</mn>
                        <mphantom>
                            <mn>0</mn>
                        </mphantom>
                    </mrow>
                    <mo>_</mo>
                </munder>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>10</mn>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo>&#x2212;</mo>
                        <mn>9</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
            </mtd>
            <mtd></mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>10</mn>
            </mtd>
            <mtd columnalign="left" class="workNotes">
                <mtext>Continuing to divide will give a remainder of&#x00A0;</mtext>
                <mn>1</mn>
                <mtext>&#x00A0;each time.</mtext>
            </mtd>
        </mtr>
    </mtable>
</math>

Mathematical Diagrams and Illustrations

The MathML markup does a good job of handling a variety of mathematical needs, but sometimes it falls short because the desired display is too complex. Examples of these are mathematical diagrams with notation identifying parts of an equation that can not be effectively recreated in MathML. In these cases an in-line SVG image should be created. Try to represent as much of the equation in MathML as possible and create only the absolutely necessary parts in SVG. Take a look at the following example.

$= 6 \cdot 3 + 6 \cdot 5 = 18 + 30 = 48$

Using an SVG image to represent part of an equation

<p class="alignBottom">
            <svg class="inline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="40px" viewBox="0 0 60 40" xml:space="preserve">
                <defs>
                    <marker id="arrowheadEnd" orient="auto" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="7.5" markerHeight="7.5">
                        <path d="M0,0 L10,5 L0,10z"></path>
                    </marker>
                </defs>
                <g transform="matrix( 1 0 0 1 2.5 20)">
                    <title>6 times (3 + 5)</title>
                    <desc>The equation
                        <!--https://mathmlcloud.org/equation/55c4ed3c9e28dbb8d64d4a84-->
                        <math xmlns="http://www.w3.org/1998/Math/MathML" id="55c4ed3c9e28dbb8d64d4a84" alttext="6 times left-parenthesis 3 plus 5 right-parenthesis">
                            <mn>6</mn>
                            <mo>⁢</mo>
                            <mfenced>
                                <mrow>
                                    <mn>3</mn>
                                    <mo>+</mo>
                                    <mn>5</mn>
                                </mrow>
                            </mfenced>
                        </math>. The 6 has curved arrows above it that end at 3 and 5 showing that it is being distributed to both of the terms, 3 and 5, on the inside of the parentheses.</desc>
                    <g>
                        <g>
                            <path d="M4 0 c0,0 12,-25 16,-3" marker-end="url(#arrowheadEnd)"></path>
                            <path d="M16 -12 c0,0 12,-10 24,9" marker-end="url(#arrowheadEnd)"></path>
                        </g>
                        <g class="outlinedText">
                            <g>
                                <path d="M14.995,20.374v0.481c-1.469-0.97-2.613-2.393-3.432-4.269c-0.819-1.876-1.229-3.929-1.229-6.159
                    c0-2.32,0.431-4.432,1.292-6.338C12.488,2.184,13.61,0.821,14.995,0v0.47c-0.692,0.507-1.261,1.201-1.706,2.081
                    c-0.444,0.88-0.776,1.997-0.996,3.351c-0.22,1.354-0.329,2.766-0.329,4.235c0,1.664,0.101,3.167,0.304,4.509
                    c0.203,1.343,0.512,2.456,0.929,3.34S14.213,19.666,14.995,20.374z"></path>
                            </g>
                            <g>
                                <path d="M49.518,0.47V0c1.469,0.962,2.613,2.381,3.432,4.257c0.819,1.876,1.229,3.929,1.229,6.16
                    c0,2.319-0.431,4.435-1.291,6.344c-0.861,1.909-1.984,3.274-3.369,4.095v-0.481c0.698-0.507,1.27-1.2,1.714-2.081
                    c0.444-0.88,0.775-1.995,0.992-3.345c0.217-1.351,0.325-2.764,0.325-4.241c0-1.655-0.101-3.156-0.3-4.503
                    c-0.2-1.346-0.51-2.461-0.929-3.345C50.9,1.975,50.3,1.179,49.518,0.47z"></path>
                            </g>
                            <g>
                                <path d="M7.089,2.813v0.316c-0.751,0.074-1.365,0.224-1.84,0.448c-0.476,0.225-0.945,0.568-1.409,1.03
                    C3.375,5.068,2.991,5.583,2.686,6.149S2.127,7.39,1.922,8.17c0.82-0.563,1.643-0.846,2.468-0.846c0.792,0,1.478,0.319,2.058,0.957
                    c0.581,0.638,0.871,1.458,0.871,2.461c0,0.969-0.293,1.852-0.879,2.648c-0.706,0.969-1.64,1.453-2.801,1.453
                    c-0.792,0-1.463-0.262-2.016-0.786C0.541,13.038,0,11.717,0,10.093c0-1.037,0.208-2.022,0.624-2.957
                    c0.416-0.934,1.009-1.763,1.781-2.487c0.771-0.723,1.51-1.21,2.216-1.461c0.706-0.25,1.364-0.376,1.973-0.376H7.089z M1.776,8.794
                    c-0.102,0.769-0.153,1.39-0.153,1.862c0,0.547,0.101,1.142,0.303,1.782c0.202,0.641,0.502,1.149,0.901,1.525
                    c0.291,0.268,0.643,0.401,1.059,0.401c0.495,0,0.938-0.233,1.328-0.701c0.39-0.467,0.585-1.133,0.585-1.999
                    c0-0.974-0.194-1.817-0.581-2.529S4.282,8.067,3.57,8.067c-0.217,0-0.449,0.046-0.696,0.137C2.626,8.295,2.26,8.492,1.776,8.794z"></path>
                                <path d="M17.173,5.256c0.33-0.78,0.748-1.383,1.251-1.807s1.131-0.637,1.883-0.637c0.928,0,1.64,0.302,2.135,0.906
                    c0.376,0.45,0.564,0.931,0.564,1.444c0,0.843-0.53,1.715-1.589,2.615c0.712,0.279,1.25,0.678,1.614,1.196s0.547,1.128,0.547,1.828
                    c0,1.003-0.319,1.872-0.957,2.606c-0.832,0.957-2.036,1.436-3.613,1.436c-0.78,0-1.311-0.097-1.593-0.291
                    c-0.282-0.193-0.423-0.401-0.423-0.623c0-0.165,0.067-0.311,0.201-0.436c0.134-0.126,0.294-0.188,0.482-0.188
                    c0.142,0,0.288,0.022,0.436,0.068c0.097,0.028,0.316,0.133,0.658,0.312c0.342,0.18,0.578,0.287,0.709,0.32
                    c0.21,0.063,0.436,0.095,0.675,0.095c0.581,0,1.086-0.226,1.516-0.675c0.43-0.45,0.645-0.983,0.645-1.599
                    c0-0.449-0.1-0.889-0.299-1.315c-0.148-0.319-0.311-0.562-0.487-0.727c-0.245-0.228-0.581-0.434-1.008-0.62
                    c-0.427-0.185-0.863-0.278-1.307-0.278h-0.273V8.632c0.45-0.057,0.901-0.219,1.354-0.487c0.453-0.268,0.782-0.59,0.986-0.966
                    c0.205-0.376,0.308-0.789,0.308-1.239c0-0.586-0.184-1.061-0.551-1.423c-0.367-0.361-0.824-0.542-1.371-0.542
                    c-0.883,0-1.62,0.473-2.212,1.418L17.173,5.256z"></path>
                                <path d="M47.316,3.052L46.65,4.504h-3.484L42.405,6.06c1.509,0.222,2.705,0.783,3.587,1.684
                    c0.758,0.774,1.137,1.686,1.137,2.734c0,0.609-0.124,1.174-0.372,1.691c-0.248,0.519-0.56,0.96-0.936,1.325
                    c-0.375,0.364-0.794,0.657-1.255,0.88c-0.655,0.313-1.327,0.47-2.016,0.47c-0.695,0-1.2-0.118-1.517-0.354
                    c-0.315-0.236-0.474-0.497-0.474-0.782c0-0.159,0.065-0.3,0.196-0.423c0.131-0.122,0.296-0.184,0.495-0.184
                    c0.148,0,0.278,0.022,0.389,0.068c0.111,0.046,0.301,0.162,0.568,0.351c0.427,0.296,0.859,0.444,1.298,0.444
                    c0.667,0,1.252-0.252,1.756-0.757c0.504-0.504,0.756-1.117,0.756-1.841c0-0.701-0.226-1.354-0.675-1.961
                    c-0.45-0.606-1.071-1.075-1.862-1.406c-0.62-0.256-1.466-0.404-2.536-0.444l2.221-4.503H47.316z"></path>
                            </g>
                            <g>
                                <path d="M31.734,5.667h0.837v4.084h4.057v0.829h-4.057v4.059h-0.837V10.58H27.66V9.751h4.074V5.667z"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <!--https://mathmlcloud.org/equation/55c4ed3c9e28dbb8d64d4a85-->
            <math xmlns="http://www.w3.org/1998/Math/MathML" id="55c4ed3c9e28dbb8d64d4a85" alttext="equals 6 dot 3 plus 6 dot 5 equals 18 plus 30 equals 48">
                <mo>=</mo>
                <mrow>
                    <mrow>
                        <mn>6</mn>
                        <mo>⋅</mo>
                        <mn>3</mn>
                    </mrow>
                    <mo>+</mo>
                    <mrow>
                        <mn>6</mn>
                        <mo>⋅</mo>
                        <mn>5</mn>
                    </mrow>
                </mrow>
                <mo>=</mo>
                <mrow>
                    <mn>18</mn>
                    <mo>+</mo>
                    <mn>30</mn>
                </mrow>
                <mo>=</mo>
                <mn>48</mn>
           </math>
        </p>

Utilizing this method, we can provide access to more complex diagrams and illustrations similar to that described in the MathML in DAISY Structure Guidelines.^[4]

Stacked Expressions

Stacked expressions are where addition, subtraction, or multiplication are performed vertically. These should be done in an mtable with each row representing a line in that equation. Use the underline key ( shift + -) on your keyboard rather than the Unicode character ¯ for the actual underline character. An explicit operator (plus sign, multiplication sign, or subtraction sign) should always be included in stacked expressions. The <mo> for the operator should have the attribute form="infix" in order to indicate that it is acting as an operator between two quantities (as opposed to a prefix operator, such as a negative sign). For stacked addition expressions that have three or more addends, put in the invisible addition operator (<mo form="infix">⁤</mo>) before the addends that are not first or last in the stack. See the example below.

$\begin{array}{r} 24 \\ 15 \\ \underline{+ 126} \\ 165 \end{array}$

Stacked addition

<math>
    <mtable columnalign="right">
        <mtr>
            <mtd>
                <mn>24</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mo form="infix">&#x2064;</mo>
                <mn>15</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder accentunder="true">
                    <mrow>
                        <mo form="infix">+</mo>
                        <mn>126</mn>
                    </mrow>
                    <mo stretchy="true">_</mo>
                </munder>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>165</mn>
            </mtd>
        </mtr>
    </mtable>
</math>

For stacked expressions that have carried numbers, strikethroughs, or borrowed numbers, mpadded should be used. This is an unfortunate use of "tweaking" to get the display right but should provide the best visual and audio experience. Ideally we would use mstack and mcarries, but that markup is not widely supported. The following is an example of how mpadded should be used in stacked expressions when extra space is needed around digits to make room for borrowed or carried numbers or strikethroughs.

In this markup all mpadded elements should have a width="1.5em". The standard value for the lspace attribute on mpadded is 0.5em. This lspace value should be used on numbers that do not have other markup, and numbers with carries signified by mover. Numbers with a strikethrough should have lspace="0.25em". Numbers with a borrow should have a lspace="0.05em". Numbers with both a borrow and a strikethrough should have lspace="0em".

$\begin{array}{r} \overset{7}{8} \overset{9}{{}^{1}0} \overset{9}{{}^{1}0} {}^{1}0 \\ \underline{- 657} \\ 7343 \end{array}$

Stacked subtraction with borrowing

<math>
    <mtable columnalign='right'>
        <mtr>
            <mtd>
                <mpadded width='1.5em' lspace='0.25em'>
                    <mover>
                        <menclose notation="updiagonalstrike">
                            <mn>8</mn>
                        </menclose>
                        <mn>7</mn>
                    </mover>
                </mpadded>
                <mpadded width='1.5em' lspace='0em'>
                    <mover>
                        <menclose notation="updiagonalstrike">
                            <mmultiscripts>
                                <mn>0</mn>
                                <none></none>
                                <none></none>
                                <mprescripts></mprescripts>
                                <none></none>
                                <mn>1</mn>
                            </mmultiscripts>
                        </menclose>
                        <mn>9</mn>
                    </mover>
                </mpadded>
                <mpadded width='1.5em' lspace='0em'>
                    <mover>
                        <menclose notation="updiagonalstrike">
                            <mmultiscripts>
                                <mn>0</mn>
                                <none></none>
                                <none></none>
                                <mprescripts></mprescripts>
                                <none></none>
                                <mn>1</mn>
                            </mmultiscripts>
                        </menclose>
                        <mn>9</mn>
                    </mover>
                </mpadded>
                <mpadded width='1.5em' lspace='0.05em'>
                    <mmultiscripts>
                        <mn>0</mn>
                        <none></none>
                        <none></none>
                        <mprescripts></mprescripts>
                        <none></none>
                        <mn>1</mn>
                    </mmultiscripts>
                </mpadded>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder accentunder="true">
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mrow>
                            <mpadded width='1.5em' lspace="0.5em">
                                <mphantom>
                                    <mn>0</mn>
                                </mphantom>
                            </mpadded>
                            <mpadded width='1.5em' lspace="0.5em">
                                <mn>6</mn>
                            </mpadded>
                            <mpadded width='1.5em' lspace="0.5em">
                                <mn>5</mn>
                            </mpadded>
                            <mpadded width='1.5em' lspace="0.5em">
                                <mn>7</mn>
                            </mpadded>
                        </mrow>
                    </mrow>
                    <mo stretchy="true">_</mo>
                </munder>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mpadded width='1.5em' lspace="0.5em">
                    <mn>7</mn>
                </mpadded>
                <mpadded width='1.5em' lspace="0.5em">
                    <mn>3</mn>
                </mpadded>
                <mpadded width='1.5em' lspace="0.5em">
                    <mn>4</mn>
                </mpadded>
                <mpadded width='1.5em' lspace="0.5em">
                    <mn>3</mn>
                </mpadded>
            </mtd>
        </mtr>
    </mtable>
</math>

Long Division

For long division, we apply some concepts used in stacked expressions. To display the long division brace, we use the element menclose with the attribute notation="longdiv". To align the rows properly, we will have to set an alignment template based on the number of digits in the dividend and quotient, and set the right margin on each line using mphantom with the digits (or other characters) that would appear to the right of the current line in the alignment template. To simulate the space for the decimal point in the work, place a space inside of an mn rather than dividing that line into two separate numbers. Also, we should explicitly represent the operation in each line, rather than having it be implied.

$\begin{array}{r} 19.826 \\ 23456 \\ \underline{- 23} \\ 226 \\ \underline{- 207} \\ 19 0 \\ \underline{- 18 4} \\ 60 \\ \underline{- 46} \\ 140 \\ \underline{- 138} \\ 2 \end{array}$

Long division with decimals

<math>
    <mtable columnalign="right" rowspacing="0pt">
        <mtr>
            <mtd>
                <mn>19.826</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>23</mn>
                <menclose notation="longdiv">
                    <mn>456</mn>
                    <mphantom>
                        <mn>.000</mn>
                    </mphantom>
                </menclose>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mn>23</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mn>0.000</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>226</mn>
                <mphantom>
                    <mn>.000</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mn>207</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mn>.000</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>19 0</mn>
                <mphantom>
                    <mn>00</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mn>18 4</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mn>00</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>60</mn>
                <mphantom>
                    <mn>0</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mn>46</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mn>0</mn>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>140</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mn>138</mn>
                    </mrow>
                    <mo>_</mo>
                </munder>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>2</mn>
            </mtd>
        </mtr>
    </mtable>
</math>

If any extra math is written to the right of the quotient (or any row)—for example, an ellipsis, or a representation of the remainder, or an equality for rounding—that will be added to the alignment template.

$\begin{array}{r} 19.826 \approx 19.8 \\ 23 456.000 \end{array}$

Long division with extra math in quotient

<math>
    <mtable columnalign="right" rowspacing="0pt">
        <mtr>
            <mtd>
                <mn>19.826</mn>
                <mo>&#x2248;</mo>
                <mn>19.8</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>23</mn>
                <menclose notation="longdiv">
                    <mn>456.000</mn>
                </menclose>
                <mphantom>
                    <mo>&#x2248;</mo>
                    <mn>19.8</mn>
                </mphantom>
            </mtd>
        </mtr>
    </mtable>
</math>

Work notes in an mtable are written using mtext and placed in a separate column. Note that for the cells containing the work notes, class="workNotes" is applied so that we can style these as work notes, and the attribute columnalign="left" is used.

$\begin{array}{r} 19.826 \approx 19.8 & The digits will continue repeating. \\ 23 456.000 & Fill in zeros as needed. \end{array}$

Long division with work notes

<math>
    <mtable columnalign="right" rowspacing="0pt">
        <mtr>
            <mtd>
                <mn>19.826</mn>
                <mo>&#x2248;</mo>
                <mn>19.8</mn>
            </mtd>
            <mtd columnalign="left" class="workNotes">
                <mtext>The digits will continue repeating.</mtext>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mn>23</mn>
                <menclose notation="longdiv">
                    <mn>456.000</mn>
                </menclose>
                <mphantom>
                    <mo>&#x2248;</mo>
                    <mn>19.8</mn>
                </mphantom>
            </mtd>
            <mtd columnalign="left" class="workNotes">
                <mtext>Fill in zeros as needed.</mtext>
            </mtd>
        </mtr>
    </mtable>
</math>

To perform long division with polynomials, the process is similar. Two major differences are the use of parentheses in subsequent lines of work and that the alignment template has to be based on the terms in the expression. Because the terms will not align when we use a closing parenthesis in an mphantom at the end of the dividend, this will be done with an mspace, but all other lines can use the closing parenthesis for the alignment.

$\begin{array}{r} 2 x + 16 \\ x + 3 2 x^{2} + 22 x + 17 \\ \underline{- (2 x^{2} + 6 x)} \\ 16 x + 17 \\ \underline{- (16 x + 48)} \\ - 31 \end{array}$

Long division with polynomials

<math>
    <mtable columnalign="right" rowspacing="0pt">
        <mtr>
            <mtd>
                <mphantom>
                    <mo>(</mo>
                    <mn>0</mn>
                </mphantom>
                <mrow>
                    <mn>2</mn>
                    <mo>&#x2062;</mo>
                    <mi>x</mi>
                </mrow>
                <mphantom>
                    <mo>)</mo>
                </mphantom>
                <mo>+</mo>
                <mn>16</mn>
                <mphantom>
                    <mo>)</mo>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mrow>
                    <mi>x</mi>
                    <mo>+</mo>
                    <mn>3</mn>
                </mrow>
                <menclose notation="longdiv">
                    <mphantom>
                        <mo>(</mo>
                    </mphantom>
                    <mrow>
                        <mn>2</mn>
                        <mo>&#x2062;</mo>
                        <msup>
                            <mi>x</mi>
                            <mn>2</mn>
                        </msup>
                    </mrow>
                    <mo>+</mo>
                    <mphantom>
                        <mo>(</mo>
                    </mphantom>
                    <mrow>
                        <mn>22</mn>
                        <mo>&#x2062;</mo>
                        <mi>x</mi>
                    </mrow>
                    <mphantom>
                        <mo>)</mo>
                    </mphantom>
                    <mo>+</mo>
                    <mn>17</mn>
                    <mspace width="thickmathspace"></mspace>
                </menclose>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mrow>
                            <mo>(</mo>
                            <mrow>
                                <mrow>
                                    <mn>2</mn>
                                    <mo>&#x2062;</mo>
                                    <msup>
                                        <mi>x</mi>
                                        <mn>2</mn>
                                    </msup>
                                </mrow>
                                <mo>+</mo>
                                <mphantom>
                                    <mo>(</mo>
                                    <mn>0</mn>
                                </mphantom>
                                <mrow>
                                    <mn>6</mn>
                                    <mo>&#x2062;</mo>
                                    <mi>x</mi>
                                </mrow>
                            </mrow>
                            <mo>)</mo>
                        </mrow>
                    </mrow>
                    <mo>_</mo>
                </munder>
                <mphantom>
                    <mo>+</mo>
                    <mn>00</mn>
                    <mo>)</mo>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mrow>
                    <mn>16</mn>
                    <mo>&#x2062;</mo>
                    <mi>x</mi>
                </mrow>
                <mphantom>
                    <mo>)</mo>
                </mphantom>
                <mo>+</mo>
                <mn>17</mn>
                <mphantom>
                    <mo>)</mo>
                </mphantom>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <munder>
                    <mrow>
                        <mo form="infix">&#x2212;</mo>
                        <mrow>
                            <mo>(</mo>
                            <mrow>
                                <mrow>
                                    <mn>16</mn>
                                    <mo>&#x2062;</mo>
                                    <mi>x</mi>
                                </mrow>
                                <mphantom>
                                    <mo>)</mo>
                                </mphantom>
                                <mo>+</mo>
                                <mn>48</mn>
                            </mrow>
                            <mo>)</mo>
                        </mrow>
                    </mrow>
                    <mo>_</mo>
                </munder>
            </mtd>
        </mtr>
        <mtr>
            <mtd>
                <mrow>
                    <mo>&#x2212;</mo>
                    <mn>31</mn>
                </mrow>
                <mphantom>
                    <mo>)</mo>
                </mphantom>
            </mtd>
        </mtr>
    </mtable>
</math>

(Under Development) Synthetic Division

Synthetic division will also be done using an mtable. The divisor will be displayed using menclose, and we will combine two of the notation attributes to create the enclosure, which is done by separating them with a space (note that notation="madruwb" renders the same in MathJax, but this notation represents a factorial in Arabic, so it will not be used for synthetic division because that would be semantically incorrect). Also note that rowspan is not currently supported by MathJax, so we have to use empty cells below the divisor.

$\begin{array}{r} - 5 & 4 & 10 & 0 & 11 \\ ↓ & - 20 & 50 & - 250 \\ 4 & - 10 & 50 & - 239 \end{array}$

Synthetic division

<math>
    <mtable columnalign="right" rowlines="none solid">
        <mtr>
            <mtd>
                <menclose notation="right bottom">
                    <mo>&#x2212;</mo><mn>5</mn>
                </menclose>
            </mtd>
            <mtd>
                <mn>4</mn>
            </mtd>
            <mtd>
                <mn>10</mn>
            </mtd>
            <mtd>
                <mn>0</mn>
            </mtd>
            <mtd>
                <mn>11</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd></mtd>
            <mtd>
                <mo>&#x2193;</mo>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo><mn>20</mn>
            </mtd>
            <mtd>
                <mn>50</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo><mn>250</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd></mtd>
            <mtd>
                <mn>4</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo><mn>10</mn>
            </mtd>
            <mtd>
                <mn>50</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo><mn>239</mn>
            </mtd>
        </mtr>
    </mtable>
</math>

If we need to add work notes for any of the lines, we will add another cell in the table, making sure to apply the columnalign attribute to the new column and adding in the class="workNotes" for the text.

$\begin{array}{r} The coefficient is 0 for any missing term. & - 5 & 4 & 10 & 0 & 11 \\ ↓ & - 20 & 50 & - 250 \\ 4 & - 10 & 50 & - 239 \end{array}$

Synthetic division with work notes

<math>
    <mtable columnalign="right" side="right" rowlines="none solid">
        <mlabeledtr>
            <mtd columnalign="left" class="workNotes">
                <mtext>The coefficient is&#x00A0;</mtext>
                <mn>0</mn>
                <mtext>&#x00A0;for any missing term.</mtext>
            </mtd>
            <mtd>
                <menclose notation="right bottom">
                    <mo>&#x2212;</mo>
                    <mn>5</mn>
                </menclose>
            </mtd>
            <mtd>
                <mn>4</mn>
            </mtd>
            <mtd>
                <mn>10</mn>
            </mtd>
            <mtd>
                <mn>0</mn>
            </mtd>
            <mtd>
                <mn>11</mn>
            </mtd>
        </mlabeledtr>
        <mtr>
            <mtd></mtd>
            <mtd>
                <mo>&#x2193;</mo>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo>
                <mn>20</mn>
            </mtd>
            <mtd>
                <mn>50</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo>
                <mn>250</mn>
            </mtd>
        </mtr>
        <mtr>
            <mtd></mtd>
            <mtd>
                <mn>4</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo>
                <mn>10</mn>
            </mtd>
            <mtd>
                <mn>50</mn>
            </mtd>
            <mtd>
                <mo>&#x2212;</mo>
                <mn>239</mn>
            </mtd>
        </mtr>
    </mtable>
</math>

Fill in the Blank

When there is a blank that is intended to be "filled in" by the student, we will use an menclose with the attributes notation="bottom" and class="MathML-Blank". To make the space to be filled in, we will most often use mphantom with a number of digits as a placeholder.

$2 + 3 =$

Fill in the blank

<math>
    <mrow>
        <mn>2</mn>
        <mo>+</mo>
        <mn>3</mn>
    </mrow>
    <mo>=</mo>
    <menclose notation='bottom' class='MathML-Blank'>
        <mphantom>
            <mn>000000</mn>
        </mphantom>
    </menclose>
</math>

Hopefully you now have the tools to create correctly formatted MathML markup. Remember, if you have questions be sure to consult this guide, the W3C MathML 3.0 Specification, or a coworker with more experience.

References

1. MathML 3.0 Specification, <mi> http://www.w3.org/TR/MathML/chapter3.html#presm.mi

2. MathML 3.0 Specification, Warning about fine-tuning presentation, http://www.w3.org/TR/MathML/chapter3.html#presm.warnfinetuning

3. MathML in DAISY Structure Guide, Line Breaks http://www.daisy.org/z3986/structure/SG-DAISY3/part2-math.html#L712

4. MathML in DAISY Structure Guide, Diagrams and Illustrations http://www.daisy.org/z3986/structure/SG-DAISY3/part2-math.html#L965

Content – MathML Structure

The math Element

Basic MathML Elements: mn, mi, mo, mtext

Preferred Characters in MathML

Specific Characters

The mrow Element

The mrow Element and Signed Numbers

Inferred mrow Elements

Fence Operators and mrow

Ordered Pairs, Triples, n-Tuples

Interval Notation

Sets and Set-Builder Notation

Invisible Operators: Function Application, Invisible Times, Invisible Separator, and Invisible Addition

Common Functions

Units in MathML

Special Unit Symbols

Exceptions

Fractions (mfrac)

Superscripts, Subscripts, Multiple Scripts (msup, msub, msubsup, and mmultiscripts)

Pseudo-Scripts

Over and Under Scripts (munder, mover, and munderover)

Exceptions

Radicals (msqrt and mroot)

Matrices, Multiline Equations, and mphantom

Units in Larger Expressions

Equations with Work Notes

In-Line Equations and Work Notes

Multiline Equations with Work Notes

Equations in mtable Elements with Work Notes

Mathematical Diagrams and Illustrations

Stacked Expressions

Long Division

(Under Development) Synthetic Division

Fill in the Blank

References

The `math` Element

Basic MathML Elements: `mn`, `mi`, `mo`, `mtext`

The `mrow` Element

The `mrow` Element and Signed Numbers

Inferred `mrow` Elements

Fence Operators and `mrow`

Ordered Pairs, Triples, `n`-Tuples

Fractions (`mfrac`)

Superscripts, Subscripts, Multiple Scripts (`msup`, `msub`, `msubsup`, and `mmultiscripts`)

Over and Under Scripts (`munder`, `mover`, and `munderover`)

Radicals (`msqrt` and `mroot`)

Matrices, Multiline Equations, and `mphantom`

Equations in `mtable` Elements with Work Notes