Content – MathML Structure
The math
Element
The math
element is the toplevel 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 

$\mathbb{W}$  <math><mi mathvariant="doublestruck">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 anmn
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 inmn
elements like so:<mn>2.34</mn>
and NEVER with the decimal point wrapped in anmo
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 anmn
tag like so:<mn>300,000,000</mn>
. Commas in these instances should NEVER be wrapped in anmo
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 themn
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 generallymi
elements represent variables in equations. These variables can be singleletter variables (the most common) or a string of words separated by spaces, such as lower class boundary, oreven arbitrary text playing the role of a 'term' (such as an ellipsis in a summed series) can be represented using an
^{[1]} Themi
element.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 thevar
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 andmo
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 [. Anmo
should also be used to express the sign of a number rather than including the sign within amn
element. Similarly, the percent sign, %, represents an operation (dividing by 100), and should be represented using anmo
. In some cases text may be used to represent an operator and as such should be placed in amo
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 inmo
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 amtable
. Work notes can be placed inmtext
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+2x$
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$
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 mrow
s: 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 \left(3+1\right)\cdot \left(1\right)$
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 \left(3+1\right)\cdot \left(1\right)$
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.).
$\left\{xx>2\right\}$
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, nTuples
A very common application of fence operators is the ordered
ntuple. 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\left(2,3,5\right)$
$A\left(2,3,5\right)$
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 doublestruck 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
$\mathbb{W}$ (the doublestruck W). In this case we should use <mi mathvariant="doublestruck">W<mi>
since the Unicode character for doublestruck 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 ∈
).
$\left(\mathrm{\infty},3\right]\cap \left[4,10\right)=\mathrm{\varnothing}$
$\left(\mathrm{\infty},3\right]\cap \left[4,10\right)=\mathrm{\varnothing}$
Sets and SetBuilder Notation
When writing sets, we use the curly brackets { and } as the fence operators. When using setbuilder 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=\left\{\left(x,y\right)1<x<5andy\in \mathrm{\mathbb{N}}\right\}$
$S=\left\{\left(x,y\right)1<x<5andy\in \mathrm{\mathbb{N}}\right\}$
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\left(x\right)$ 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 ofmrow
to group the expression. You can see where the function application operator is in the structure of the expression in the comments.$f\left(x\right)$
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.
$\mathrm{cos}}^{2}\frac{\left(\theta +2\right)}{x1$

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\left(3+1\right)$

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}_{ij}+{B}_{ij}$

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\u2064{\displaystyle \frac{1}{2}}$
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 pseudoscripts.$m\angle ABC$

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.$\mathrm{cos}\theta $

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.$\mathrm{ln}\left(3.75\right)$

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.
$\mathrm{gcd}\left(18,42\right)=6$
Units in MathML
When marking up units in math expressions, wrap the unit in an mi
element with class="MathMLUnit"
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
$\mathrm{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\mathrm{mm}$
$24{\mathrm{mm}}^{2}$
$24{\displaystyle \frac{\mathrm{kg}\cdot \mathrm{m}}{{\mathrm{s}}^{2}}}$
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\mathrm{\mathbb{C}}=32\mathrm{\u2109}$
Exceptions
There are a few units that are exceptions to the rules above (in different ways).

Units that use a pseudoscript (degrees, minutes, seconds on angles). See the section on pseudoscripts 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 usemathvariant="normal"
, so that the renderer will not italicize these symbols.$\mathrm{\$}5.25=525\mathrm{\xa2}=\mathrm{\u20ac}4.76$

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 anmspace
, 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\phantom{\rule{thickmathspace}{0ex}}\text{pennies}}{5\phantom{\rule{thickmathspace}{0ex}}\text{dimes}}$
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}{2x+3y}$
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}$
$\frac{1}{2}$
$\frac{\frac{x+1}{25}+\frac{y3}{4}}{\sqrt{\frac{1}{n}+\frac{1}{n+1}}}$
$\frac{{\displaystyle \frac{x+1}{25}+\frac{y3}{4}}}{{\displaystyle \sqrt{\frac{1}{n}+\frac{1}{n+1}}}}$
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}$
${x}_{2}$
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}_{ij}^{2}$
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}$
${}_{\text{presubscript but no presuperscript}\uparrow}x_{y+1}^{2}$
PseudoScripts
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="MathMLUnit"
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. 
Doubleprime: ″ (
″
) — Note that this is different from the quotation mark (") and will be used for indicating the second derivative and seconds in angle measures.
${55}^{\xb0}{23}^{\mathrm{\prime}}{41}^{\mathrm{\u2033}}$
${\left(fg\right)}^{\prime}=f{g}^{\prime}+{f}^{\prime}g$
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{\text{first number}}{n}+\underset{\text{second number}}{n+1}=\underset{\text{sum}}{34}$
$\underset{0}{\overset{2}{\int}}\left(2x+3\right)\mathit{d}x$
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 ⏞ (⏞
), ⏟ (⏟
), ⎴ (b4;
), ⎵ (⎵
) (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).
$\stackrel{\underset{\u23df}{\text{Dividend}}}{18}\xf7\stackrel{\underset{\u23df}{\text{Divisor}}}{3}=\stackrel{\underset{\u23df}{\text{Quotient}}}{6}$
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}$
$\sqrt[4]{2+1}$
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 2by2 matrix is created like so:
$\left(\begin{array}{cc}1& 0\\ 0& 1\end{array}\right)$
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 righthand 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{array}{rl}x3& =7\\ x3+3& =7+3\\ x& =10\end{array}$
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 finetuning 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={\displaystyle \frac{\widehat{p}p}{\sqrt{{\displaystyle \frac{p\left(1p\right)}{n}}}}}\\ \phantom{z}={\displaystyle \frac{0.090.10}{\sqrt{{\displaystyle \frac{0.10\left(10.10\right)}{700}}}}}\\ \phantom{z}\approx {\displaystyle \frac{0.01}{0.011339}}\approx 0.88\end{array}$
$\begin{array}{l}{\displaystyle a{x}^{2}+bx+c=a\left({x}^{2}+\frac{b}{a}x\right)+c}\\ {\displaystyle \phantom{a{x}^{2}+bx+c}=a\left({x}^{2}+2\left(\frac{b}{2a}\right)x+{\left(\frac{b}{2a}\right)}^{2}\right)+ca{\left(\frac{b}{2a}\right)}^{2}}\\ {\displaystyle \phantom{a{x}^{2}+bx+c}=a{\left(x+\frac{b}{2a}\right)}^{2}\frac{{b}^{2}4ac}{4a}}\end{array}$
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=lw\\ \phantom{P}=6\mathrm{in.}\xb73\mathrm{in.}\\ \phantom{P}=18{\mathrm{in.}}^{2}\end{array}$
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}{\displaystyle r=\frac{D}{t}}\\ {\displaystyle \phantom{r}=\frac{10\mathrm{ft}}{5\mathrm{s}}}\\ {\displaystyle \phantom{r}=2\frac{\mathrm{ft}}{\mathrm{s}}}\end{array}$
Equations with Work Notes
There are four different scenarios for applying work notes in equations that may be encountered:

Inline 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 inline work notes, and work notes in multiline equations in HTML tables and multiline equations in mtable
elements.
InLine Equations and Work Notes
For an inline 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\xf7100=\frac{5.23}{100}=0.0523$ Move decimal point $2$ places to the left.
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+\left(20+8\right)$  ← Rewrite $28$ as $20+8$. 

$\phantom{32+28}=32+\left(8+20\right)$  ← Use the Commutative Property of Addition. 
$\phantom{32+28}=\left(32+8\right)+20$  ← Use the Associative Property of Addition. 
$\phantom{32+28}=40+20$  ← Add inside the parentheses first. 
$\phantom{32+28}=60$  ← Simplify. 
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.
$2z$  $>14$  Write the inequality. 

$\frac{2z}{2}$  $>{\displaystyle \frac{14}{2}}$  Divide both sides by $2$. 
$z$  $>7$ 
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}{rr}0.333& \text{The}3\text{will repeat without end.}\hfill \\ 3\overline{)1.000}& \\ \underset{\_}{9}\phantom{00}& \\ \phantom{1.}10& \\ \underset{\_}{9\phantom{0}}& \\ 10& \\ \underset{\_}{9}& \\ 10& \text{Continuing to divide will give a remainder of}1\text{each time.}\hfill \end{array}$
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 inline 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$
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\\ \u206415\\ \underset{\_}{+126}\\ 165\end{array}$
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}\stackrel{7}{\overline{)8}}\stackrel{9}{\overline{){}^{1}0}}\stackrel{9}{\overline{){}^{1}0}}{}^{1}0\\ \underset{\_}{\phantom{0}657}\\ 7343\end{array}$
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\\ 23\overline{)456\phantom{.000}}\\ \underset{\_}{23}\phantom{0.000}\\ 226\phantom{.000}\\ \underset{\_}{207}\phantom{.000}\\ \mathrm{19\; 0}\phantom{00}\\ \underset{\_}{\mathrm{18\; 4}}\phantom{00}\\ 60\phantom{0}\\ \underset{\_}{46}\phantom{0}\\ 140\\ \underset{\_}{138}\\ 2\end{array}$
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\overline{)456.000}\phantom{\approx 19.8}\end{array}$
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}{rr}19.826\approx 19.8& \text{The digits will continue repeating.}\hfill \\ 23\overline{)456.000}\phantom{\approx 19.8}& \text{Fill in zeros as needed.}\hfill \end{array}$
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}\phantom{(0}2x\phantom{)}+16\phantom{)}\\ x+3\overline{)\phantom{(}2{x}^{2}+\phantom{(}22x\phantom{)}+17\phantom{\rule{thickmathspace}{0ex}}}\\ \underset{\_}{\left(2{x}^{2}+\phantom{(0}6x\right)}\phantom{+00)}\\ 16x\phantom{)}+17\phantom{)}\\ \underset{\_}{\left(16x\phantom{)}+48\right)}\\ 31\phantom{)}\end{array}$
(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}{rrrrr}\overline{)5}& 4& 10& 0& 11\\ & \downarrow & 20& 50& 250\\ & 4& 10& 50& 239\end{array}$
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}{rrrrr}\text{The coefficient is}0\text{for any missing term.}\hfill & \overline{)5}& 4& 10& 0& 11& \downarrow & 20& 50& 250\\ & 4& 10& 50& 239\end{array}$
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="MathMLBlank"
. To make the space to be filled in, we will most often use mphantom
with a number of digits as a placeholder.
$2+3=\overline{)\phantom{000000}}$
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 finetuning 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/SGDAISY3/part2math.html#L712
4. MathML in DAISY Structure Guide, Diagrams and Illustrations http://www.daisy.org/z3986/structure/SGDAISY3/part2math.html#L965