Brief Tutorial on MathML
deutsch

Andreas de Vries (2012)

To view this page correctly, a browser being able to interprete MathML is required. Unfortunately, not all browsers to date have this ability, a recommended one is the current version of Firefox, see also the Mozilla MathML Project. You can check the MathML capabilities of your browser on the test page of W3C.

This tutorial is a brief primer on MathML. It should suffice to let display easy mathematical formulas in the Web. For further informations you may refer to the Math web site of W3C.

Contents

  1. Basic Elements
  2. Constants and Symbols
  3. Exponents and Indices
  4. Functions and Bracketing of Argument Lists
  5. Fractions
  6. Indented Formulas
  7. Root Expressions
  8. Matrices
  9. Sums and Integrals

1. Basic Elements

With MathML it is possible to insert mathematical symbols, expressions and formulas into the <body> element of an HTML documents, such that appropriate browsers can display them. For this purpose, a mathematical expression “…” has to be inserted into the element <math> with a specified namespace:

  <math xmlns="http://www.w3.org/1998/Math/MathML"></math>

(The namespace xmlns… may be omitted since HTML5, there it is sufficient to write simply <math> … </math>.) The symbols to be represented have to be inserted as text into one of the following basic elements of the <math> element:

These basic elements are therefore necessary for every expression in MathML and determine the font style of the inserted symbols. The elements <mn> and <mo> can contain several symbols, however, <mi> can contain only one-letter variables.

As a first “Hello-World” example in MathML we consider the following tedious, but structurally simple expression

   <math xmlns="http://www.w3.org/1998/Math/MathML">
     <mn>4</mn>
     <mi>x</mi>
     <mo>+</mo>
     <mn>4</mn>
     <mo>=</mo>
     <mo>(</mo>
     <mn>2</mn>
     <mo>+</mo>
     <mn>2</mn>
     <mo>)</mo>
     <mi>x</mi>
     <mo>+</mo>
     <mn>2</mn>
     <mo>&middot;</mo>
     <mn>2</mn>
   </math>

which yields the equation 4 x + 4 = (2+2) x + 2·2

Another important element in MathML is <mrow> which lets group several MathML elements to a single unit, a term. For simple examples it usually does not have a visible effect, but we will see below cases where it is necessary.

2. Constants and Symbols

In the following table you find a selection of the most common mathematical symbols and their definitions in MathML:

α <mn>&alpha;</mn> π <mn>&pi;</mn> <mn>&infin;</mn> ± <mn>&pm;</mn> <mn>&mp;</mn> <mn>&hbar;</mn>
<mo>&sum;</mo> <mo>&int;</mo> <mo>&exist;</mo> <mo>&forall;</mo> <mo>&iff;</mo> <mn>&Rightarrow;</mn>
<mo>&ne;</mo> <mo>&ap;</mo> <mo>&sim;</mo> <mo>&cong;</mo> <mo>&propto;</mo> <mo>&wedgeq;</mo>
< <mo>&lt;</mo> <mo>&leq;</mo> <mo>&ll;</mo> > <mo>&gt;</mo> <mo>&geq;</mo> <mo>&gg;</mo>
· <mo>&middot;</mo> × <mo>&times;</mo> <mo>&compfn;</mo> ÷ <mo>&div;</mo> <mo>&setminus;</mo> <mo>&oplus;</mo>
<mo>&cap;</mo> <mo>&cup;</mo> <mo>&subset;</mo> <mo>&supset;</mo> <mo>&isin;</mo> <mo>&notin;</mo>
<mo>&wedge;</mo> <mo>&vee;</mo> ¬ <mo>&not;</mo> <mo>&rightarrow;</mo> <mo>&mapsto;</mo> <mo>&angsph;</mo>
<mn>&emptyset;</mn> <mn>&naturals;</mn> <mn>&integers;</mn> <mn>&rationals;</mn> <mn>&reals;</mn> <mn>&complexes;</mn>

A complete list of all possible symbols is given at http://www.w3.org/TR/xml-entity-names/. See also https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz.

In addition, symbols and terms can be provided with various accents using the element <mover>: v + w + m ˜ + y _ + m ^ are obtained with the expressions

  <mover><mi>v</mi><mo>&rharu;</mo></mover>
  <mo>+</mo>
  <mover><mi>w</mi><mo>&rarr;</mo></mover>
  <mo>+</mo>
  <mover><mi>m</mi><mo>&tilde;</mo></mover>
  <mo>+</mo>
  <mover><mi>y</mi><mo>_</mo></mover>
  <mo>+</mo><mover><mi>m</mi><mo>^</mo></mover>

3. Exponents and Indices

Expressions can be written as superscripts or subscripts by the elements <msup> for exponents and <msub> for indices, e.g.,

   <msub>
     <mi>y</mi>
     <mn>0</mn>
   </msub>
   <mo>=</mo>
   <msup>
     <mi>x</mi>
     <mn>2</mn>
   </msup>

for y 0 = x 2 . Also more complex terms can be displayed in the exponent, they only have to be grouped by the element <mrow>: for y = x 2 k + 1 we write in MathML:

   <mi>y</mi>
   <mo>=</mo>
   <msup>
      <mi>x</mi>
      <mrow>
        <mn>2</mn>
        <mi>k</mi>
        <mo>+</mo>
        <mn>1</mn>
      </mrow>
   </msup>

4. Functions and Bracketing Argument Lists

Functions usually are displayed in italic letters, thus they should be included into <mi> tags. However, names for standard functions like sine, cosine, logarithm etc. are represented in roman letters, and so several letters enclosed by <mi> tags are not displayed in italic. For instance, the function definition f:[-1,1] , f(x) = sin x is generated by:

   <math>
      <mi>f</mi><mo>:</mo><mn>&reals;</mn><mo>&rarr;</mo><mn>[-1,1]</mn>
   </math>,
   <math>
      <mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo>
      <mo>=</mo>
      <mi>sin</mi>
      <mi>x</mi>
   </math>

Functions with several variables like fxyz = x 2 + y 2 + z 2 can be defined in MathML by the grouping element <mfenced>:

   <mi>f</mi><mfenced><mi>x</mi><mi>y</mi><mi>z</mi></mfenced>
   <mo>=</mo>
   <msup>
      <mi>x</mi>
      <mn>2</mn>
   </msup>
   <mo>+</mo>
   <msup>
      <mi>y</mi>
      <mn>2</mn>
   </msup>
   <mo>+</mo>
   <msup>
      <mi>z</mi>
      <mn>2</mn>
   </msup>

The commas between the arguments then are set automatically. In case of a single argument consequently no comma is displayed: fx = sin x .

5. Fractions

A fraction is generated by the element <mfrac>. For example, x y is generated by
   <mfrac>
      <mi>x</mi>
      <mi>y</mi>
   </mfrac>
If the numerator or the denominator consists of several terms, they have to be grouped by <mrow> to separate units: fxy = 13 x - 37 2 y + 1
   <mi>f</mi><mfenced><mi>x</mi><mi>y</mi></mfenced>
   <mo>=</mo>
   <mfrac>
      <mrow>
        <mn>13</mn>
        <mi>x</mi>
        <mo>-</mo>
        <mn>37</mn>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>y</mi>
        <mo>+</mo>
        <mn>1</mn>
      </mrow>
   </mfrac>

6. Indented Formulas

A mathematical expression may appear in the running text (“inline mode”): fxy = x y , or indented from the running text and centered (“display mode”): fxy = x y . These representation modes in MathML are determined by the attribute mode of the <math> element:

  <math xmlns="http://www.w3.org/1998/Math/MathML" mode="inline"> … </math>
or
  <math xmlns="http://www.w3.org/1998/Math/MathML" mode="display"> … </math>

In the display mode the letters and symbols in numerators and denominators are set in normal size, whereas in the inline mode they are displayed in a smaller font. If the mode attribute is not used, it is set to its default value "inline".

7. Root Expressions

In mathematical notation the root symbol usually extends over a term. In MathML the root symbol is generated by the element <msqrt>:

   <msqrt>
     <mrow>
       <mn>1</mn>
       <mo>-</mo>
       <mfrac>
         <mi>x</mi>
         <mn>2</mn>
       </mfrac>
     </mrow>
   </msqrt>

yields 1 - x 2 . The p-q formula, for example, x = - p 2 ± 1 2 p 2 - 4 q

is generated by the source code
   <math mode="display">
     <mi>x</mi>
     <mo>=</mo>
     <mo>-</mo>
     <mfrac>
       <mi>p</mi>
       <mn>2</mn>
     </mfrac>
     <mo>±</mo>
     <mfrac>
       <mn>1</mn>
       <mn>2</mn>
     </mfrac>
     <msqrt>
       <mrow>
         <msup>
           <mi>p</mi>
           <mn>2</mn>
         </msup>
         <mo>-</mo>
         <mrow>
           <mn>4</mn>
           <mi>q</mi>
         </mrow>
       </mrow>
     </msqrt>
   </math>
   .
To display roots with indices different from 2, i.e., to use other roots than the square root, MathML provides the element <mroot> which expects two subelements, first the term from which the root is to be extracted, and second the index:
   <mroot>
     <mrow>
       <mn>1</mn>
       <mo>-</mo>
       <mfrac>
         <mi>x</mi>
         <mn>2</mn>
       </mfrac>
     </mrow>
     <mn>3</mn>
   </mroot>
thus yields 1 - x 2 3 .

8. Matrices

To write matrices, we need the element <mfenced>, enclosing the table element <mtable>: σy = 0 -i i 0 is generated by the instructions

  <msub><mn>&sigma;</mn><mi>y</mi></msub>
  <mo>=</mo>
  <mfenced>
    <mtable>
      <mtr>
         <mtd><mn>0</mn></mtd>
         <mtd><mo>-</mo><mn>i</mn></mtd>
      </mtr>
      <mtr>
         <mtd><mn>i</mn></mtd>
         <mtd><mn>0</mn></mtd>
      </mtr>
    </mtable>
  </mfenced>
  .

Evidently, <mtable> has the same structure as an HTML table <table>, only with the mandatory m prefix in the element name. With the attributes open and close in <mfenced> we can display other brackets, for instance square or curly brackets:

  <mi>R</mi><mo>(</mo><mi>x</mi><mo>)</mo>
  <mo>=</mo>
  <mfenced open="[" close="]">
    <mtable>
      <mtr>
         <mtd><mi>cos</mi><mi>x</mi></mtd>
         <mtd><mo>-</mo><mi>sin</mi> <mi>x</mi></mtd>
      </mtr>
      <mtr>
         <mtd><mi>sin</mi><mi>x</mi></mtd>
         <mtd><mi>cos</mi><mi>x</mi></mtd>
      </mtr>
    </mtable>
  </mfenced>

thus yields R(x) = cosx -sinx sin x cos x .

9. Sums and Integrals

In MathML, the limits of sums, products or integrals are enabled by the element <munderover>. It expects three elements in the ordered sequence: symbol (sum &sum; or integral &int;), the lower limit, and the upper limit. For example, the formula 1 e dxx = 1 is implemented by

  <munderover>
    <mo>&int;</mo>
    <mn>1</mn>
    <mn>e</mn>
  </munderover>
  <mfrac><mrow><mo>d</mo><mi>x</mi></mrow><mi>x</mi></mfrac>
  <mo>=</mo>
  <mn>1</mn>
  .

If one of the limits is not intended to be displayed, its place has to occupied by an empty element <mn></mn>. A peculiarity concerning the limits of sums is the possibility to distinguish between the display modes inline and display. The source code

  <munderover>
    <mo>&sum;</mo>
    <mn>1</mn>
    <mn>2</mn>
  </munderover>
  <mfrac><mn>1</mn><mi>k</mi></mfrac>
  <mo>=</mo>
  <mn>1,5</mn>

gives 1 2 1k = 1,5 in the running tex, i.e., the limits are displayed beside the sum symbol. If the limits are intended to be below and above the sum symbol, that is, 1 2 1k = 1,5 , we insert the terms into an element <mstyle displaystyle="true">:

  <mstyle displaymode="true">  
    <munderover>
      <mo>&sum;</mo>
      <mn>1</mn>
      <mn>2</mn>
    </munderover>
    <mfrac><mn>1</mn><mi>k</mi></mfrac>
    <mo>=</mo>
    <mn>1,5</mn>
  </mstyle>.

In contrast, in formulas in display mode the limits are automatically arranged below and above the sum symbol, as can be observed for the equations of Euler and Riemann, ζ (s) = n=1 1 ns = p 1 1-p-s = e-iπs   Γ(1-s) 2πi C zs-1dz ez-1 (s ,  Res>1 ) . Here ζ denotes the Riemann zeta function, the set of primes, Γ die Gamma function Γ(s) = 0 ts-1 e-t dt and C an integration path in the complex plane, starting at +, then circling once around the origin in positive sense without meeting the points ±2πi, ±4πi, …, and eventually turning back to +. Cf. E.C. Titchmarsh & D.R. Heath-Brown: The Theory of the Riemann Zeta-function. Clarendon Press, Oxford 1986, Eqn. (2.4.2), as well as J. Neukirch: Algebraic Number Theory. Springer-Verlag, Berlin Heidelberg 1999, §VII.1. The source code of these identities reads:

   <math mode="display">
     <mi>&zeta;</mi> <mo>(</mo><mi>s</mi><mo>)</mo>
     <mo>=</mo>
     <munderover>
       <mo>&sum;</mo>
       <mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow>
       <mi>&infin;</mi>
     </munderover>
     <mfrac>
       <mn>1</mn>
       <msup><mi>n</mi><mi>s</mi></msup>
     </mfrac>
     <mo>=</mo>
     <munderover>
       <mo>&prod;</mo>
       <mrow><mi>p</mi><mo>&isin;</mo><mn>&primes;</mn></mrow>
       <mn></mn>
     </munderover>
     <mfrac>
       <mn>1</mn>
       <mrow><mn>1</mn><mo>-</mo><msup><mi>p</mi><mrow><mo>-</mo><mi>s</mi></mrow></msup></mrow>
     </mfrac>
     <mo>=</mo>
     <mfrac>
       <mrow>
         <msup><mn>e</mn><mrow><mo>-</mo><mn>i</mn><mn>&pi;</mn><mi>s</mi></mrow></msup>
         <mn>&nbsp;</mn>
         <mn>&Gamma;</mn><mo>(</mo><mn>1</mn><mo>-</mo><mi>s</mi><mo>)</mo>
       </mrow>
       <mrow>
         <mn>2</mn><mn>&pi;</mn><mn>i</mn>
       </mrow>
     </mfrac>
     <munderover>
       <mo>&int;</mo>
       <mi>C</mi>
       <mn></mn>
     </munderover>
     <mfrac>
       <mrow><msup><mi>z</mi><mrow><mi>s</mi><mo>-</mo><mn>1</mn></mrow></msup><mo>d</mo><mi>z</mi></mrow>
       <mrow><msup><mn>e</mn><mi>z</mi></msup><mo>-</mo><mn>1</mn></mrow>
     </mfrac>
     <mn>&emsp;</mn><mn>&emsp;</mn>
     <mo>(</mo><mi>s</mi><mo>&isin;</mo><mn>&complexes;</mn>
     <mo>,</mo><mn>&nbsp;</mn>
     <mo>Re</mo><mi>s</mi><mo>></mo><mn>1</mn>
     <mo>)</mo>
   </math>

© 2012-2016 Andreas de Vries