icon-komplexe-Zahl Math Tutorial: MathML Examples

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 neue_Seite

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 neue_Seite

MathJax

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

more at MathJax.org neue_Seite

Operators

Symbol Entity Hex Description
− − Subtraction
× × × Multiplication
÷ ÷ ÷ Division
≠ ≠ Unequal
≈ ≈ Similar
< &lt; &#x003C; Less
&le; &#x2264; Less or equal
> &gt; &#x003E; Greater
&ge; &#x2265; Greater or equal
± &plusmn; &#x00B1; Plus or minus
&prop; &#x221D; Proportional
&sum; &#x2211; Sum
&prod; &#x220F; Product

Differential / Integral

Symbol Entity Hex Description
&prime; &#x2032; First derivative
&Prime; &#x2033; Second derivative
&tprime; &#x2034; Third derivative
&qprime; &#x2057; Fourth derivative
&part; &#x2202; Partial derivative
Δ &Delta; &#x0394; Increment
&Del; &#x2207; Gradient
&int; &#x222B; Integral
&Int; &#x222C; Double Integral
&tint; &#x222D; Triple Integral
&qint; &#x2A0C; Quadrupel Integral
&conint; &#x222E; Line integral
&cwconint; &#x2232; Line integral clockwise
&awconint; &#x2233; Line integral counter clockwise
&Conint; &#x222F; Surface integral
&Cconint; &#x2230; Volume integral
&infin; &#x221E; Infinite

Points

Symbol Entity Hex Description
&hellip; &#x2026; Horizontal Points
&vellip; &#x22EE; Vertical Points
&ctdot; &#x22EF; Horizontal Points center
&utdot; &#x22F0; Diagonal point to the upper right
&dtdot; &#x22F1; Diagonal points to bottom right

Geometric

Symbol Entity Hex Description
° &deg; &#x00B0; Degree
&ang; &#x2220; Angle
&angmsd; &#x2221; Measured angle
&angrt; &#x221F; Right angle
&vangrt; &#x299C; Right angle with square
&lrtri; &#x22BF; Triangle
&cir; &#x25CB; Circle
&xutri; &#x25B3; Triangle
&squ; &#x25A1; Square
&fltns; &#x25B1; Parallelogramm
&spar; &#x2225; Parallel
&npar; &#x2226; Not parallel
&perp; &#x22A5; Orthogonal
&cong; &#x2245; Kongruent
&rarr; &#x2192; Strahl
&harr; &#x2194; Beam
- (n/a) &#x002D; Line segment

Set

Symbol Entity Hex Description
&empty; &#x2205; Empty set
&isin; &#x2208; Element of
&notin; &#x2209; Not Element of
&sube; &#x2286; Subset
&nsube; &#x2288; Not Subset
&sub; &#x2282; Strict subset
&nsub; &#x2284; Not strict subset
&supe; &#x2287; superset
&nsupe; &#x2289; Not superset
&sup; &#x2283; Strict superset
&nsup; &#x2285; Not strict superset
&cap; &#x2229; Intersection
&cup; &#x222A; Union
&ssetmn; &#x2216; Complementary

Logic

Symbol Entity Hex Description
¬ &not; &#x00AC; Negation
&and; &#x2227; AND
&or; &#x2228; OR
&veebar; &#x22BB; Exklusiv OR
&forall; &#x2200; For all
&exist; &#x2203; Exists
&rArr; &#x21D2; Implication
&hArr; &#x21D4; Äquivalent
&EmptySmallSquare; &#x25FB; Necessary
&loz; &#x25CA; Possible
&vdash; &#x22A2; Testable
&vDash; &#x22A8; Follows
&there4; &#x2234; From that

Vectors

Symbol Entity Hex Description
&sdot; &#x22C5; Scalar Product
&Cross; &#x2A2F; Cross Product
&Vert; &#x2016; Norm
&lang; &#x27E8; Left parenthesis
&rang; &#x27E9; Right parenthesis
&compfn; &#x2218; Inner product
&rarr; &#x2192; General mapping
&mapsto; &#x21A6; Mapping
ı &imath; &#x0131; i without dot
ȷ &jmath; &#x0237; j witout dot

Greek Letters

Buchstabe Entities Hex Codes
Α α &Alpha; &alpha; &#x0391; &#x03B1;
Β β &Beta; &beta; &#x0392; &#x03B2;
Γ γ &Gamma; &gamma; &#x0393; &#x03B3;
Δ δ &Delta; &delta; &#x0394; &#x03B4;
Ε ε &Epsilon; &epsilon; &#x0395; &#x03B5;
Ζ ζ &Zeta; &zeta; &#x0396; &#x03B6;
Η η &Eta; &eta; &#x0397; &#x03B7;
Θ θ &Theta; &theta; &#x0398; &#x03B8;
Ι ι &Iota; &iota; &#x0399; &#x03B9;
Κ κ &Kappa; &kappa; &#x039A; &#x03BA;
Λ λ &Lambda; &lambda; &#x039B; &#x03BB;
Μ μ &Mu; &mu; &#x039C; &#x03BC;
Ν ν &Nu; &nu; &#x039D; &#x03BD;
Ξ ξ &Xi; &xi; &#x039E; &#x03BE;
Ο ο &Omicron; &omicron; &#x039F; &#x03BF;
Π π &Pi; &pi; &#x03A0; &#x03C0;
Ρ ρ &Rho; &rho; &#x03A1; &#x03C1;
Σ σ &Sigma; &sigma; &#x03A3; &#x03C3;
Τ τ &Tau; &tau; &#x03A4; &#x03C4;
Υ υ &Upsilon; &upsilon; &#x03A5; &#x03C5;
Φ φ &Phi; &phi; &#x03A6; &#x03C6;
Χ χ &Chi; &chi; &#x03A7; &#x03C7;
Ψ ψ &Psi; &psi; &#x03A8; &#x03C8;
Ω ω &Omega; &omega; &#x03A9; &#x03C9;

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>
				
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>&int;</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>
				
a b 5 x + 2 sin x dx

<munderover> Assumed are three parameters. First operator <mo>&int;</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>
				
i = 1 n a i 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>
				
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>
				
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 = 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 = x 2 3

<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>
				
e x dx = e x a x dx = a x ln a

<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 = 1 0 0 0 1 0 0 0 1

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 = a 1 1 a 1 2 a 1 n a j 1 a j 2 a j n a k 1 a k 2 a k n a n 1 a n 2 a n n

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>
				
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>
				
x2 - 9 = x2 - 32 = 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 - 32 = 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.