Post
Ask Question

HTML5 MathML Elements

MathML in HTML5

 
In HTML5, MathML stands for Mathematical Markup Language. These are XML content widely used in scientific contexts.
 
MathML not only determines how a formula is displayed but also describes the actual calculation.
 
Every valid MathML instance must be wrapped in <math> tags.
 
In addition, you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.
 
The math element is the root of all MathML expressions.
 
It was not supported in earlier versions of HTML.
 
The styles of the mi, mo and mtext tags could be put into a CSS rather than coding the style attribute on each tag:
 
Browser Support
 
It was not supported by all the major browsers. It was only supported by Mozilla Firefox, Safari and Chrome.
 

Use of MathML

 
MathML is used to describe the presentation and the meaning of mathematical formulas using XML code. 
 
Basic MathML Elements
 

mrow

 
Use this element to group any number of subexpressions horizontally.
 

mi

 
Use this element to specify an identifier, that is, the name of a variable, a constant, a function, etc.  If this name is just one character long then the identifier is automatically rendered using an italic font, otherwise, the name is rendered using a normal, upright, font.
 

mo

 
Use this element to specify an operator (e.g. "+"), a fence (e.g. "{") or a separator (e.g. ","). 
 
The appropriate amount of space is added on the left and on the right of a mo depending on the textual contents of this element.
 
Example: if in the expression you replace <mo>+</mo> by <mo>,</mo> then this will suppress the space at the left of the mo element.
 

mn

 
Use this element to specify a numeric literal.
 
For example, PI should be specified as <mi>PI</mi> and not as <mn>PI</mn> while 3.14 should be specified as <mn>3.14</mn> and not as <mi>3.14</mi>
 
Note: It is really important to use mi, mo, and mn appropriately because otherwise, the MathML rendering engine will not be able to apply its built-in typographic rules.
 
<math xmlns= "http://www.w3.org/1998/Math/MathML" display="inline">
 
The namespace of all MathML elements is "http://www.w3.org/1998/Math/MathML". Specifying that namespace is mandatory but it will be omitted in this tutorial for brevity.
 
display="inline"
 
Note the display="inline" attribute which specifies that the math element is to be displayed inline (``like a wordin a paragraph''). The other value is display=" block" that specifies that the math element is to be displayed as a block (``like a paragraph''). This attribute influences the typographic rules applied by the MathML rendering engine.
 

mtext

 
If you just want to type in plain text then the mtext element is used.
 
<mtext>then</mtext>
 

mspace

 
For explicit space between elements, the <mspace> element is used.
 
Do not attempt to insert one or more whitespace characters in the corresponding  <class="sgmltag-element"> mtext element ( e.g. <class="literal"><mtext>if    </mtext>).
 
Doing so is useless, because leading and trailing whitespace characters are automatically removed from <class="sgmltag-element">mi, < class="sgmltag-element">mo, < class="sgmltag-element">mn, and < class="sgmltag-element">mtext by  the MathML processor. Instead, you need to insert a <class="sgmltag-element">mspace element in your MathML expression.
  • Width This is an optional attribute that specifies the overall width of a < class="sgmltag-element">mspace element.
  • Height This is an optional attribute that specifies the overall height above the baseline.
  • Depth This is an optional attribute that specifies the overall height below the baseline. The value of these attributes is a number followed by one of the following units: < class="literal">em, class="literal">ex,class="literal">px, < class="literal">in, <class="literal">cm, < class="literal">mm,< class="literal">pt, <class="literal">pc.
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>MathML Examples</title>  
  7. </head>  
  8. <body>  
  9.     <math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.     <mrow>  
  11.   <mtext>if</mtext>  
  12.   <mspace depth="0.5ex" height="0.5ex" width="1ex"/>  
  13.   <mrow>  
  14.     <mi>a</mi>  
  15.     <mo>=</mo>  
  16.     <mi>b</mi>  
  17.   </mrow>  
  18.   <mspace depth="0.5ex" height="0.5ex" width="1ex"/>  
  19.   <mtext>then</mtext>  
  20.   <mspace depth="0.5ex" height="0.5ex" width="1ex"/>  
  21.   <mrow>  
  22.     <mrow>  
  23.       <mi>x</mi>  
  24.       <mi>a</mi>  
  25.     </mrow>  
  26.     <mo>=</mo>  
  27.     <mrow>  
  28.       <mi>x</mi>  
  29.       <mi>b</mi>  
  30.     </mrow>  
  31.   </mrow>  
  32. </mrow>  
  33. </math>  
  34. </body>  
  35. </html> 
Output
 
plain.jpg
 

MathML Radicals

 

mfrac

 
To specify the Fraction, the mfrac attribute is used.
 
To change the style of the fraction we must use the attribute bevelled=" true".
 
Examplex-1/100
  1. <mfrac>  
  2.   <mrow>  
  3.     <mi>x</mi>  
  4.     <mo>-</mo>  
  5.     <mn>1</mn>  
  6.   </mrow>  
  7.   <mn>100</mn>  
  8. </mfrac> 

msqrt 

 
It is used to specify "square root."
 
Example
  1. <msqrt>  
  2.   <mi>x</mi>  
  3.   <mo>+</mo>  
  4.   <mi>y</mi>  
  5. </msqrt> 

mroot

 
Use this element to specify a radical with an arbitrary index.
 
Example
  1. <mroot>  
  2.   <mi>x</mi>  
  3.   <mn>3</mn>  
  4. </mroot> 
Note: Unlike msqrt, mroot may only have two child elements. The first child element is the base of the root.
 
The second child element is its index. If you need more than one element below the radical sign, then use an explicit mrow element.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>MathML in HTML5</title>  
  7. </head>  
  8. <body>  
  9.    
  10.     <math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">  
  11.    <mrow>  
  12.       <mi>x</mi>  
  13.       <mo>=</mo>  
  14.       <mfrac>  
  15.          <mrow>  
  16.             <mo form="prefix">−<!-- Unicode MINUS SIGN --></mo>  
  17.             <mi>b</mi>  
  18.             <mo>±<!-- Unicode PLUS-MINUS SIGN --></mo>  
  19.             <msqrt>  
  20.                <msup>  
  21.                   <mi>b</mi>  
  22.                   <mn>2</mn>  
  23.                </msup>  
  24.                <mo>−<!-- Unicode MINUS SIGN --></mo>  
  25.                <mn>4</mn>  
  26.                <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>  
  27.                <mi>a</mi>  
  28.                <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>  
  29.                <mi>c</mi>  
  30.             </msqrt>  
  31.          </mrow>  
  32.          <mrow>  
  33.             <mn>2</mn>  
  34.             <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>  
  35.             <mi>a</mi>  
  36.          </mrow>  
  37.       </mfrac>  
  38.    </mrow>  
  39. </math>  
  40.    
  41. </body>  
  42. </html> 
Output
 
squareroot.jpg
 

Subscripts and Superscripts

 

msub

 
It is used to attach a "subscript" to a base.
  1. <msub>  
  2.   <mi>x</mi>  
  3.   <mi>i</mi>  
  4. </msub>   

msup

 
It is used to attach a "superscript" to a base.
  1. <msup>  
  2.   <mi>x</mi>  
  3.   <mi>j</mi>  
  4. </msup> 

msubsup

 
It is used to attach both a subscript and a superscript to the base.
  1. <msubsup>  
  2.   <mi>x</mi>  
  3.   <mi>i</mi>  
  4.   <mi>j</mi>  
  5. </msubsup> 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>MathML in HTML5</title>  
  7. </head>  
  8. <body>  
  9.     <math>  
  10.         <mrow>  
  11.       <mrow>  
  12.         <msup>  
  13.           <mi>a</mi>  
  14.           <mn>2</mn>  
  15.         </msup>  
  16.         <mo>+</mo>  
  17.         <msup>  
  18.           <mi>b</mi>  
  19.           <mn>2</mn>  
  20.         </msup>  
  21.       </mrow>  
  22.       <mo>=</mo>  
  23.       <msup>  
  24.         <mi>c</mi>  
  25.         <mn>2</mn>  
  26.       </msup>  
  27.     </mrow>  
  28.     </math>  
  29. </body>  
  30. </html> 
Output
 
script.jpg
  

Underscripts and Overscripts

 
Underscripts and over scripts are similar to subscripts and superscripts, except that script elements are centered above and/or below the base element.
 

munder

 
It is used to attach an under script to the base.
  1. <munder>  
  2.   <mi>x</mi>  
  3.   <mo>─</mo>  
  4. </munder> 

mover

 
It is used to attach an over script to the base.
  1. <mover>  
  2.   <mi>v</mi>  
  3.   <mo>→</mo>  
  4. </mover> 

munderover

 
It is used to attach both an under script and an over script to the base.
  1. <munderover>  
  2.   <mi>x</mi>  
  3.   <mi>a</mi>  
  4.   <mi>b</mi>  
  5. </munderover>

Ubiquitous mo element

 
To encode limits and integrals we use the mo element.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>MathML in HTML5</title>  
  5. </head>  
  6. <body>  
  7.     <math>  
  8.         <mrow>  
  9.   <munderover>  
  10.     <mo>∫</mo>  
  11.     <mn>-1</mn>  
  12.     <mn>+1</mn>  
  13.   </munderover>  
  14.   <mfrac>  
  15.     <mrow>  
  16.       <mi>d</mi>  
  17.       <mi>x</mi>  
  18.     </mrow>  
  19.     <mi>x</mi>  
  20.   </mfrac>  
  21. </mrow>  
  22.     </math>  
  23. </body>  
  24. </html>   
Output
 
ubimo.jpg
 

mtable

 
Matrices are specified using the mtable element. An mtable table element contains mtr row element and an mtr element contains mtd cell elements.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>MathML Examples</title>  
  7. </head>  
  8. <body>  
  9.     <math xmlns="http://www.w3.org/1998/Math/MathML">  
  10.        <mrow>  
  11.           <mi>A</mi>  
  12.           <mo>=</mo>  
  13.           <mfenced open="[" close="]">  
  14.              <mtable>  
  15.                 <mtr>  
  16.                    <mtd><mi>x</mi></mtd>  
  17.                    <mtd><mi>y</mi></mtd>  
  18.                 </mtr>  
  19.                 <mtr>  
  20.                    <mtd><mi>z</mi></mtd>  
  21.                    <mtd><mi>w</mi></mtd>  
  22.                 </mtr>  
  23.              </mtable>  
  24.          </mfenced>  
  25.       </mrow>  
  26.    </math>  
  27. </body>  
  28. </html>   
Output
 
matrix.jpg


Similar Articles