MathML code examples for the useage of MathML

MathML Examples

References

MathML

The Mathematical Markup Language (MathML) is a document format for representing mathematical formulas and complex expressions. The default MathML 2.0 is defined by a specification of the World Wide Web Consortium (W3C) in 2001. Since October 2010, enjoys the status of a MathML 3.0 W3C Recommendation. As in all XML languages (eg XHTML) the contents of a document in a logical structure in MathML are stored independent of its graphic design.

more at Wikipedia

MathML Official Spezification

This specification defines the Mathematical Markup Language, or MathML. MathML is an XML application for describing mathematical notation and captures both their structure and the contents. The goal is that MathML makes mathematical formulas represented, be received and processed on the World Wide Web, the same way as HTML realized this functionality for text.

more at W3C

MathJax

MathJax is an open source JavaScript display engine that MathML makes it available in all browsers.

more at MathJax.org

Operators

Symbol	Entity	Hex	Description
−	`−`	`−`	Subtraction
×	`×`	`×`	Multiplication
÷	`÷`	`÷`	Division
≠	`≠`	`≠`	Unequal
≈	`≈`	`≈`	Similar
<	`<`	`<`	Less
≤	`≤`	`≤`	Less or equal
>	`>`	`>`	Greater
≥	`≥`	`≥`	Greater or equal
±	`±`	`±`	Plus or minus
∝	`&prop;`	`∝`	Proportional
∑	`∑`	`∑`	Sum
∏	`∏`	`∏`	Product

Differential / Integral

Symbol	Entity	Hex	Description
′	`′`	`′`	First derivative
″	`″`	`″`	Second derivative
‴	`‴`	`‴`	Third derivative
⁗	`&qprime;`	`⁗`	Fourth derivative
∂	`∂`	`∂`	Partial derivative
Δ	`Δ`	`Δ`	Increment
∇	`&Del;`	`∇`	Gradient
∫	`∫`	`∫`	Integral
∬	`&Int;`	`∬`	Double Integral
∭	`&tint;`	`∭`	Triple Integral
⨌	`&qint;`	`⨌`	Quadrupel Integral
∮	`&conint;`	`∮`	Line integral
∲	`&cwconint;`	`∲`	Line integral clockwise
∳	`&awconint;`	`∳`	Line integral counter clockwise
∯	`&Conint;`	`∯`	Surface integral
∰	`&Cconint;`	`∰`	Volume integral
∞	`∞`	`∞`	Infinite

Points

Symbol	Entity	Hex	Description
…	`…`	`…`	Horizontal Points
⋮	`&vellip;`	`⋮`	Vertical Points
⋯	`&ctdot;`	`⋯`	Horizontal Points center
⋰	`&utdot;`	`⋰`	Diagonal point to the upper right
⋱	`&dtdot;`	`⋱`	Diagonal points to bottom right

Geometric

Symbol	Entity	Hex	Description
°	`°`	`°`	Degree
∠	`&ang;`	`∠`	Angle
∡	`&angmsd;`	`∡`	Measured angle
∟	`&angrt;`	`∟`	Right angle
⦜	`&vangrt;`	`⦜`	Right angle with square
⊿	`&lrtri;`	`⊿`	Triangle
○	`&cir;`	`○`	Circle
△	`&xutri;`	`△`	Triangle
□	`&squ;`	`□`	Square
▱	`&fltns;`	`▱`	Parallelogramm
∥	`&spar;`	`∥`	Parallel
∦	`&npar;`	`∦`	Not parallel
⊥	`&perp;`	`⊥`	Orthogonal
≅	`&cong;`	`≅`	Kongruent
→	`→`	`→`	Strahl
↔	`↔`	`↔`	Beam
-	`(n/a)`	`-`	Line segment

Logic

Symbol	Entity	Hex	Description
¬	`¬`	`¬`	Negation
∧	`&and;`	`∧`	AND
∨	`&or;`	`∨`	OR
⊻	`&veebar;`	`⊻`	Exklusiv OR
∀	`∀`	`∀`	For all
∃	`∃`	`∃`	Exists
⇒	`⇒`	`⇒`	Implication
⇔	`⇔`	`⇔`	Äquivalent
◻	`&EmptySmallSquare;`	`◻`	Necessary
◊	`&loz;`	`◊`	Possible
⊢	`&vdash;`	`⊢`	Testable
⊨	`&vDash;`	`⊨`	Follows
∴	`&there4;`	`∴`	From that

Set

Symbol	Entity	Hex	Description
∅	`∅`	`∅`	Empty set
∈	`∈`	`∈`	Element of
∉	`∉`	`∉`	Not Element of
⊆	`&sube;`	`⊆`	Subset
⊈	`&nsube;`	`⊈`	Not Subset
⊂	`⊂`	`⊂`	Strict subset
⊄	`&nsub;`	`⊄`	Not strict subset
⊇	`&supe;`	`⊇`	superset
⊉	`&nsupe;`	`⊉`	Not superset
⊃	`⊃`	`⊃`	Strict superset
⊅	`&nsup;`	`⊅`	Not strict superset
∩	`∩`	`∩`	Intersection
∪	`∪`	`∪`	Union
∖	`&ssetmn;`	`∖`	Complementary

Vectors

Symbol	Entity	Hex	Description
⋅	`⋅`	`⋅`	Scalar Product
⨯	`&Cross;`	`⨯`	Cross Product
‖	`&Vert;`	`‖`	Norm
⟨	`&lang;`	`⟨`	Left parenthesis
⟩	`&rang;`	`⟩`	Right parenthesis
∘	`&compfn;`	`∘`	Inner product
→	`→`	`→`	General mapping
↦	`&mapsto;`	`↦`	Mapping
ı	`&imath;`	`ı`	i without dot
ȷ	`&jmath;`	`ȷ`	j witout dot

Greek Letters

Buchstabe		Entities		Hex Codes
Α	α	`Α`	`α`	`Α`	`α`
Β	β	`Β`	`β`	`Β`	`β`
Γ	γ	`Γ`	`γ`	`Γ`	`γ`
Δ	δ	`Δ`	`δ`	`Δ`	`δ`
Ε	ε	`Ε`	`ε`	`Ε`	`ε`
Ζ	ζ	`Ζ`	`ζ`	`Ζ`	`ζ`
Η	η	`Η`	`η`	`Η`	`η`
Θ	θ	`Θ`	`θ`	`Θ`	`θ`
Ι	ι	`Ι`	`ι`	`Ι`	`ι`
Κ	κ	`Κ`	`κ`	`Κ`	`κ`
Λ	λ	`Λ`	`λ`	`Λ`	`λ`
Μ	μ	`Μ`	`μ`	`Μ`	`μ`
Ν	ν	`Ν`	`ν`	`Ν`	`ν`
Ξ	ξ	`Ξ`	`ξ`	`Ξ`	`ξ`
Ο	ο	`Ο`	`ο`	`Ο`	`ο`
Π	π	`Π`	`π`	`Π`	`π`
Ρ	ρ	`Ρ`	`ρ`	`Ρ`	`ρ`
Σ	σ	`Σ`	`σ`	`Σ`	`σ`
Τ	τ	`Τ`	`τ`	`Τ`	`τ`
Υ	υ	`Υ`	`υ`	`Υ`	`υ`
Φ	φ	`Φ`	`φ`	`Φ`	`φ`
Χ	χ	`Χ`	`χ`	`Χ`	`χ`
Ψ	ψ	`Ψ`	`ψ`	`Ψ`	`ψ`
Ω	ω	`Ω`	`ω`	`Ω`	`ω`

MathML Examples

MathML Example: Integral


<math>
  <mo>&int;</mo>
    <mfenced separators=''>
      <mn>5</mn>
      <mi>x</mi>
      <mo>+</mo>
      <mn>2</mn>
      <mi>sin</mi>
      <mfenced separators=''>
        <mi>x</mi>
      </mfenced>
    </mfenced>
  <mi>dx</mi>
</math>

$\int (5 x + 2 \sin (x)) dx$

A formula in MathML is included in the <math> </math> tags. After the opening <math> the formula starts. In this Example with the operator ∫ written as <mo>∫</mo>. Each operator is encapsulated in <mo></mo>. For example, <mo>=</mo>, <mo>+</mo>, etc.

The elements are as follows:

<mn>5</mn> numbers in the formula are marked with <mn>. The N stands for Number.

<mi>x</mi> variables and constants in the formula are marked with <mi>. The i stands for item.

<mo>+</mo> operators in the formula are marked with <mo>. The o stands for the operator.

<mfenced separators=''> Introduction of a geparenthesisten expression and </mfenced> completion of parenthesisung.

MathML Example: Integral with limits


<math>
  <munderover>
    <mo>&int;</mo>
    <mi>a</mi>
    <mi>b</mi>
  </munderover>
  <mfenced separators=''>
    <mn>5</mn>
    <mi>x</mi>
    <mo>+</mo>
    <mn>2</mn>
    <mi>sin</mi>
    <mfenced separators=''>
      <mi>x</mi>
    </mfenced>
  </mfenced>
  <mi>dx</mi>
</math>

$\int_{a}^{b} (5 x + 2 \sin (x)) dx$

<munderover> Assumed are three parameters. First operator <mo>∫</mo> then, the lower limit <mi>a</mi> followed by the upper <mi>b</mi>.

MathML Example: Sum


<math display='block'>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
        <mi>i</mi>
        <mo>=</mo>
        <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <mfenced separators=''>
    <msub>
    <mi>a</mi>
    <mi>i</mi>
    </msub>
  </mfenced>
</math>
<math display='inline'>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
        <mi>i</mi>
        <mo>=</mo>
        <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <mfenced separators=''>
    <msub>
    <mi>a</mi>
    <mi>i</mi>
    </msub>
  </mfenced>
</math>

\sum_{i = 1}^{n} (a_{i})

\sum_{i = 1}^{n} (a_{i})

<munderover> Assumed are three parameters. The first is the operator <mo>&Sum;</mo> then the lower limit. Since the lower limit is made a plurality of elements, the elements are grouped <mrow>. The positioning of the symbol is controlled with display = 'block' or display = 'inline'.

MathML Example: Brackets


<math>
  <mfenced>
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
  </mfenced>
  <mfenced separators=''>
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
  </mfenced>
  <mfenced open="|" close=">">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
  </mfenced>
</math>

$(a, b, c) (a b c) |a, b, c>$

<mfenced> The parenthesis are to be used with open="|" and close=">">. Without specifying round parenthesis () are used. Specifying separators ='' specifies how the elements are separated. If nothing is specified, then separated with commas. If no delimiter to be used, must be set separators =''.

MathML Example: Fracture


<math>
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

$\frac{a}{b}$

<mfrac> A fraction starts with <mfrac> and is closed with </mfrac>. <mfrac> assumes two parameter. The first is the numerator and the second the denominator of the fraction.


<math>
  <mfrac>
    <mrow>
      <mi>a</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
    <mi>b</mi>
  </mfrac>
</math>

$\frac{a + 1}{b}$

<mfrac> Existence of the numerator or denominator of several elements, they are grouped with <mrow>.

MathML Example: Indices and Exponents


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

$a^{2}$

<msup> Exponent or high position is achieved with <msup>. The first parameter specifies the base and the second the exponent.


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

$a_{2}$

<msub> Indices or low position is achieved with <msub>. The first parameter specifies the base and the second the exponent.


<math>
  <msubsup>
    <mi>a</mi>
    <mi>j</mi>
    <mi>k</mi>
  </msubsup>
</math>

$a_{j}^{k}$

<msubsup> High and low position together is achived with <msubsup> or <msupsub>. The second and third parameter give index and exponent.

MathML Example: Root


<math>
  <mi>c</mi>
  <mo>=</mo>
  <msqrt>
    <msup>
      <mi>a</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mi>b</mi>
      <mn>2</mn>
    </msup>
  </msqrt>
</math>

$c = \sqrt{a^{2} + b^{2}}$

<msqrt> A square root starts with <msqrt> and is closed by </msqrt>.


<math>
  <mi>y</mi>
  <mo>=</mo>
  <mroot>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mn>3</mn>
  </mroot>
</math>

$y = \sqrt[3]{x^{2}}$

<mroot> With <mroot> is a general root defined. <mroot> assumes two parameter. The first is the discriminant of the root and the second the degree.

MathML Example: Table


<math>
  <mtable columnalign='left'>
    <mtr>
      <mtd>
        <mo>&int;</mo>
        <msup>
          <mi>e</mi>
          <mi>x</mi>
        </msup>
        <mi>dx</mi>
      </mtd>
      <mtd>
        <mo>=</mo>
      </mtd>
      <mtd>
        <msup>
          <mi>e</mi>
          <mi>x</mi>
        </msup>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mo>&int;</mo>
        <msup>
          <mi>a</mi>
          <mi>x</mi>
        </msup>
        <mi>dx</mi>
      </mtd>
      <mtd>
        <mo>=</mo>
      </mtd>
      <mtd>
        <mfrac>
          <msup>
            <mi>a</mi>
            <mi>x</mi>
          </msup>
          <mrow>
            <mi>ln</mi>
            <mi>a</mi>
          </mrow>
        </mfrac>
      </mtd>
    </mtr>
  </mtable>
</math>

$\begin{array}{l} \int e^{x} dx & = & e^{x} \\ \int a^{x} dx & = & \frac{a^{x}}{\ln a} \end{array}$

<mtable> A table starts with <mtable> and is closed by </mtable>.

<mtr> A line starts with <mtr> and is closed by </mtr>.

<mtd> A row starts with <mtd> and is closed by </mtd>.

The following information for the table formatting are supported by the major browsers and MathJax.

Attribute	Description
`width`	The table width. Values in `px`, `pt`, `em`, etc.
`side`	Placement of labels. Allowed are `left`, `right`, `leftoverlap`, or `rightoverlap`.
`frame`	The kind of frame. Allowed are `none`, `solid`, or `dashed`.
`framespacing`	The distance between the lines. Two values for horizontal and vertical spacing.
`rowalign`	The vertical orientation with respect to the other rows. Allowed are `top`, `bottom`, `center`, `baseline`, or `axis`.
`rowlines`	The type of the edge between the lines. Allowed are `none`, `solid`, or `dashed`.
`rowspacing`	The space between the lines. Value gives the length.
`columnalign`	The horizontal alignment of each cell with respect to other cells in the same column. Allowed are `left`, `right`, or `center`.
`columnlines`	Type of the edge between the columns. Allowed are `none`, `solid`, or `dashed`.
`columnspacing`	Distance between the columns. Value gives the length.
`columnwidth`	The width of the column. Value specifies the width.
`equalrows`	Same height for all rows. Allowed are `true` or `false`.
`equalcolumns`	Same width for all columns. Allowed are `true` or `false`.

MathML Example: Matrix


<math>
  <mi>E</mi>
  <mo>=</mo>
  <mfenced>
  <mtable>
    <mtr>
      <mtd>
        <mn>1</mn>
      </mtd>
      <mtd>
        <mn>0</mn>
      </mtd>
      <mtd>
        <mn>0</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mn>0</mn>
      </mtd>
      <mtd>
        <mn>1</mn>
      </mtd>
      <mtd>
        <mn>0</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mn>0</mn>
      </mtd>
      <mtd>
        <mn>0</mn>
      </mtd>
      <mtd>
        <mn>1</mn>
      </mtd>
    </mtr>
  </mtable>
</math>

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

A matrix given by <mfenced> and <mtable>.

MathML Example: Determinant


<math>
  <mi>det A</mi>
  <mo>=</mo>
  <mfenced open='|' close='|'>
  <mtable>
    <mtr>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mn>1</mn>
            <mn>1</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mn>1</mn>
            <mn>2</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd><mi>&#x2026;</mi>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mn>1</mn>
            <mi>n</mi>
          </mrow>
        </msub>
      </mtd>
    </mtr>
    <mtr>
      <mtd></mtd>
      <mtd><mi>&#x22ee;</mi>
      </mtd>
    </mtr>
    <mtr mathcolor='#00cc00'>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>j</mi>
            <mn>1</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>j</mi>
            <mn>2</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd><mi>&#x2026;</mi>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>j</mi>
            <mi>n</mi>
          </mrow>
        </msub>
      </mtd>
    </mtr>
    <mtr>
      <mtd></mtd>
      <mtd><mi>&#x22ee;</mi>
      </mtd>
    </mtr>
    <mtr mathcolor='#0000cc'>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>k</mi>
            <mn>1</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>k</mi>
            <mn>2</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd><mi>&#x2026;</mi>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>k</mi>
            <mi>n</mi>
          </mrow>
        </msub>
      </mtd>
    </mtr>
    <mtr>
      <mtd></mtd>
      <mtd><mi>&#x22ee;</mi>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>n</mi>
            <mn>1</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>n</mi>
            <mn>2</mn>
          </mrow>
        </msub>
      </mtd>
      <mtd><mi>&#x2026;</mi>
      </mtd>
      <mtd>
        <msub>
          <mi>a</mi>
          <mrow>
            <mi>n</mi>
            <mi>n</mi>
          </mrow>
        </msub>
      </mtd>
    </mtr>
  </mtable>
  </mfenced>
</math>

$det A = |\begin{matrix} a_{11} & a_{12} & \dots & a_{1 n} \\ ⋮ \\ a_{j 1} & a_{j 2} & \dots & a_{j n} \\ ⋮ \\ a_{k 1} & a_{k 2} & \dots & a_{k n} \\ ⋮ \\ a_{n 1} & a_{n 2} & \dots & a_{n n} \end{matrix}|$

A Determinant constructed by <mfenced> and <mtable>.

MathML Example: Vector


<math>
  <mover>
    <mi>v</mi>
    <mo>&rarr;</mo>
  </mover>
  <mo>=</mo>
  <mfenced>
    <msub>
      <mi>v</mi>
      <mn>1</mn>
    </msub>
    <msub>
      <mi>v</mi>
      <mn>2</mn>
    </msub>
    <msub>
      <mi>v</mi>
      <mn>3</mn>
    </msub>
  </mfenced>
</math>

$\vec{v} = (v_{1}, v_{2}, v_{3})$

<mover> With <mover> is the arrow in the top of the symbol positioned. <mfenced> without further information puts parentheses and commas as delimiters.

MathML Example: Indentation


<math>
  <mrow>
    <msup><mi>x</mi><mn>2</mn>
    </msup>
    <mo>-</mo>
    <mn>9</mn>
  </mrow>
  <mo>=</mo>
  <mrow>
    <msup><mi>x</mi><mn>2</mn>
    </msup>
    <mo>-</mo>
    <msup><mn>3</mn><mn>2</mn>
    </msup>
  </mrow>
  <mo linebreak='newline'
      linebreakstyle='before'
      indentshift='2.6em'>=</mo>
  <mrow>
    <mfenced separators=''>
      <mi>x</mi><mo>-</mo>
      <mn>3</mn>
    </mfenced>
    <mo>&InvisibleTimes;</mo>
    <mfenced separators=''>
      <mi>x</mi><mo>+</mo>
      <mn>3</mn>
    </mfenced>
  </mrow>
</math>

$x^{2} - 9 = x^{2} - 3^{2} = (x - 3) (x + 3)$

indentshift With indentshift a manual feed in the Example to 2.6em is specified.

linebreakstyle With linebreakstyle = 'before' it is stated that the break should occur before the operator.

linebreak With linebreak a manual line break is forced.

MathML Example: Style


<math mathsize='1.5em'>
  <mrow>
    <msup>
      <mi mathvariant='bold'>
      x</mi>
      <mn mathvariant='italic'>
      2</mn>
    </msup>
    <mo>-</mo>
    <mn>9</mn>
  </mrow>
  <mo>=</mo>
  <mrow>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>-</mo>
    <msup mathsize='2em'>
      <mn>3</mn><
      mn>2</mn>
    </msup>
  </mrow>
  <mo linebreak='newline'
      linebreakstyle='before'
      indentshift='0.6em'>=</mo>
      <mspace width='.1em' />
  <mrow mathcolor='#cc0000'>
    <mfenced separators=''>
      <mi>x</mi>
      <mo>-</mo>
      <mn>3</mn>
    </mfenced>
    <mo>&InvisibleTimes;</mo>
    <mfenced separators=''>
      <mstyle mathcolor='#0000cc' 
                 mathsize='.7em'>
        <mi>x</mi>
        <mo>+</mo>
        <mn>3</mn>
      </mstyle>
    </mfenced>
  </mrow>
</math>

x^{2} - 9 = x^{2} - 3^{2} = (x - 3) (x + 3)

mathvariant sets the font type and allows the following information:

`normal`	`bold`
`italic`	`bold-italic`
`fraktur`	`bold-fraktur`
`script`	`bold-script`
`sans-serif`	`bold-sans-serif`
`sans-serif-italic`	`sans-serif-bold-italic`
`monospace`	`double-struck`
`initial`	`tailed`
`looped`	`stretched`

mathcolor defines the text color.

mathsize defines the text size.

<mspace width='.1em' /> defines an empty space.

<mstyle> defines the style properties for the enclosed elements.

[TUTORIAL] ➡️ MathML