MathML - Quick Guide

MathML - Overview

MathML stands for Mathematical Markup Language and is an XML based application. It is used to describe mathematical and scientific notations. It's 1 and 2 version were created and developed by The Math Working Group which is one of the oldest W3C Working Groups during 1996-2004.
MathML version 3 was created during Math Working Group's second activity period (2006-2016)and is an ISO standard.

Math on Web

MathML is XML based and have limited number of tags which can be used to mark up a mathematical equation in terms of format and its semantics. MathML intends to capture meaning of syntax as well as formatting of the equation. Considering the fact the mathematical equations are often meaningful to many applications so writing them using MathML handles formatting as well as meaning of an equation. MathML provides low-level format to describing mathematics as a basis taken for machine to machine communication.
Various applications like algebra systems, print typesetters can use MathML to encode mathematical notation for high-quality visual display, and mathematical content and scientific software, voice synthesizers can use MathML for semantics.
MathML provides two ways to represent a mathematical notation.

• Presentational Way - It uses mark up tags like mrow, mi, mo along with mathematical operators etc.
• Semantic Way - It uses mark up tags like apply, eq, power etc.

We are using MathJax library to render MathML syntax so that it can run on all major browsers. It currently supports presentational way only.

Example: Presentational Way

Syntax

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
   <mrow>
      <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo>
      <mrow>
         <mn>4</mn>
         <mo>⁢</mo>
         <mi>x</mi>
      </mrow>
      <mo>+</mo>
      <mn>4</mn>
   </mrow>
   <mo>=</mo>
   <mn>0</mn>
</mrow>
</math>

Output

x2+4x+4=0

MathML - All Elements

Following is the list of important MathML elements.

1. <maction> - Provides option to bind actions to subexpressions/expressions.
2. <math> - It is top or root level element and is used to encapsulate each instance of MathML instance. Every valid MathML expression should be wrapped in outer <math> tag. It can contain any number of child elements. One math element cannot contain another math element tag.
3. <menclose> - Renders its content inside an enclosing notation specified by the notation attribute.
4. <merror> - Used to display contents as error message.
5. <mfenced> - Provides the option to add custom opening and closing parentheses and separators to an expression.
6. <mfrac> - Used to display fractions.
7. <mglyph> - Used to display non-standard symbols where existing Unicode characters are not available.
8. <mi> - Used to specify an identifier such as name of a variable, function or a constant etc. For example, <mi>PI</mi> .
9. <mlabeledtr> - Used to represent a label in a row either on the left or on the right side using side attribute of mtable. Child elements of mlabeledtr must be mtd elements.
10. <mmultiscripts> - Provides options to create tensor-like objects.
11. <mn> - Used to specify a numerical literal like 3.14 etc. For example, <mn>3.14</mn>.
12. <mo> - Used to specify an operator like +, - etc. For example, <mo>+</mo>.
13. <mover> - Used to attach an accent or a limit over an expression.
14. <mpadded> - Used to add extra padding and to set the general adjustment of position and size of enclosed contents.
15. <mphantom> - Used to create space as it is rendered invisibly, keeping height, width, and baseline position intact.
16. <mroot> - Used to display roots with an explicit index.
17. <mrow> - Used to group any number of sub expressions in horizontal way.
18. <ms> - Used to represent a string literal meant to be interpreted by programming languages and computer algebra systems.
19. <mspace> - Used to display a blank space, where its size is set using its attributes.
20. <msqrt> - Used to display square root.
21. <mstyle> - Used to apply the style on its children.
22. <msub> - Used to attach a subscript to an expression. It uses the following syntax: <msub> base subscript </msub>.
23. <msubsup> - Used to attach both a subscript and a superscript, together, to an expression. It uses the following syntax: <msubsup> base subscript superscript </msubsup>.
24. <msup> - Used to attach a superscript to an expression. It uses the following syntax: msup base superscript </msup>.
25. <mtable> - Provides options to create tables or matrices.
26. <mtd> - To represent a cell in a table or a matrix.
27. <mtext> - Used to render text with no notational meaning, such as comments or annotations.
28. <mtr> - Represents a row in a table or a matrix.
29. <munder> - Provides option to attach an accent or a limit under an expression. It uses the following syntax: <munder> base underscript </munder>
30. <munderover> - Provides option to attach accents or limits both under and over an expression. It uses the following syntax: </munderover> base underscript overscript </munderover>
31. <semantics> - <semantics>,<annotation> and <annotation-xml> are used to add presentation and content markup and provides both, layout information and semantic meaning of mathematical expressions.

MathML - Basic Elements

There are five basic elements of a MathML expression.

• <math> element - It is top or root level element and is used to encapsulate each instance of MathML instance. Every valid MathML expression should be wrapped in outer <math> tag. It can contain any number of child elements. One math element cannot contain another math element tag.
• <mrow> element - It is used to group any number of sub expressions in horizontal way.
• <mi> element - It is used to specify an identifier such as name of a variable, function or a constant etc. For example, <mi>PI</mi> .
• <mo> element - It is used to specify an operator like +, - etc. For example, <mo>+</mo>.
• <mn> element - It is used to specify a numerical literal like 3.14 etc. For example, <mn>3.14</mn>.

Example

Let's build a simple mathematical equation a + b = 5 using MathML notation.

Step 1: Identification

Here a, b are variables. + is an operator and 5 is a number. We'll enclose them as <mi>a</mi> , <mi>b</mi>, <mo>+</mo> and <mn>+</mn>

Step 2: Build Expression, a + b.

Syntax

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>  
   <mi>a</mi>  
   <mo>+</mo>  
   <mi>b</mi>  
</mrow>  
</math>

Output

a+b

Step 3: Build Expression, a + b = 5.

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow> 
   <mrow>  
      <mi>a</mi>  
      <mo>+</mo>  
      <mi>b</mi>  
   </mrow>
   <mo>=</mo>  
   <mn>5</mn>  
</mrow>    
</math>

Output

a+b=5

MathML - Carries

The <mscarries> element can be used to create carries, borrows, and crossouts that occur in elementary math. The children of mscarries are associated with elements in the following row of the mstack. Each child of mscarries except <mscarry> or <none> is treated as being implicitly surrounded by mscarry. <none> is used when particular column don't need a carry. The mscarries element sets displaystyle to false, and increments scriptlevel by 1, so the children are typically displayed in a smaller font.

Syntax

Here is the simple syntax to use this tag −

<mscarries> expression <mscarry> <none/> </mscarry> </mscarries>

Parameters

Here is the description of all the parameters of this tag -

• expression - expression on which carry/borrow is to be applied.
• mscarry - carry tag.

Attributes

Here is the description of all the attributes of this tag -

• position - to specify the horizontal position of the rows within this group relative the position determined by the containing msgroup.
• location - to specify location of the carry or borrow relative to the character below it in the associated column. values are w, nw, n, ne, e, se, s, sw.
• crossout - to specify how the column content below each carry is crossed out; one or more values may be given and all values are drawn. Values are none, updiagonalstrike, downdiagonalstrike, verticalstrike, horizontalstrike. Default is none.
• scriptsizemultiplier - to specify the factor to change the font size by.

Example

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstack>
   <mscarries crossout='updiagonalstrike'>
      <mn>2</mn>
      <mn>12</mn>  
      <mscarry crossout='none'>
         <none/> 
      </mscarry>
   </mscarries>
   <mn>2,327</mn>
   <msrow>
      <mo>-</mo> 
      <mn> 1,156</mn> 
   </msrow>
   <msline/>
   <mn>1,171</mn>
</mstack>
</math>

Output

Unknown node type: mstack