icon-Mathe Mathe Tutorial: MathML Beispiele

MathML

Die Mathematical Markup Language (MathML) ist ein Dokumentenformat zur Darstellung mathematischer Formeln und komplexer Ausdrücke. Der Standard MathML 2.0 wird durch eine Spezifikation des World Wide Web Consortium (W3C) von 2001 festgelegt. Seit Oktober 2010 genießt MathML 3.0 den Status einer W3C-Empfehlung. Wie in allen XML-Sprachen (z. B. XHTML) werden in MathML die Inhalte eines Dokumentes in einer logischen Struktur unabhängig von ihrer graphischen Gestaltung abgelegt.

mehr bei Wikipedia neue_Seite

MathML Offizielle Spezifikation

Diese Spezifikation definiert die Mathematical Markup Language, oder MathML. MathML ist eine XML-Anwendung zur Beschreibung mathematischer Notation und erfasst sowohl ihre Struktur als auch den Inhalt. Das Ziel ist es, dass MathML mathematische Formeln darstellbar, empfangbar und verarbeitbar im World Wide Web macht, analog wie HTML diese Funktionalität für Text realisiert.

mehr bei W3C neue_Seite

MathJax

MathJax ist eine Open Source JavaScript Display Engine die MathML in allen Browsern verfügbar macht.

mehr bei MathJax.org neue_Seite

Operatoren

Symbol Entity Hex Beschreibung
− − Subtraktion
× × × Multiplikation
÷ ÷ ÷ Division
≠ ≠ Ungleich
≈ ≈ Ungefähr gleich
< &lt; &#x003C; Kleiner
&le; &#x2264; Kleiner oder gleich
> &gt; &#x003E; Größer
&ge; &#x2265; Größer oder gleich
± &plusmn; &#x00B1; Plus or minus
&prop; &#x221D; Proportional
&sum; &#x2211; Summe
&prod; &#x220F; Produkt

Differential / Integral

Symbol Entity Hex Beschreibung
&prime; &#x2032; Erste Ableitung
&Prime; &#x2033; Zweite Ableitung
&tprime; &#x2034; Dritte Ableitung
&qprime; &#x2057; Vierte Ableitung
&part; &#x2202; Partielle Ableitung
Δ &Delta; &#x0394; Inkrement
&Del; &#x2207; Gradient
&int; &#x222B; Integral
&Int; &#x222C; Doppel Integral
&tint; &#x222D; Dreifach Integral
&qint; &#x2A0C; Vierfach Integral
&conint; &#x222E; Linien­integral
&cwconint; &#x2232; Linien­integral Uhrzeiger­sinn
&awconint; &#x2233; Linien­integral gegen Uhrzeiger­sinn
&Conint; &#x222F; Oberflächen­integral
&Cconint; &#x2230; Volumen­integral
&infin; &#x221E; Unendlich

Punkte

Symbol Entity Hex Beschreibung
&hellip; &#x2026; Horizontale Punkte
&vellip; &#x22EE; Vertikale Punkte
&ctdot; &#x22EF; Horizontale Punkte mittig
&utdot; &#x22F0; Diagonale Punkt nach rechts oben
&dtdot; &#x22F1; Diagonale Punkte nach rechts unten

Geometrie

Symbol Entity Hex Beschreibung
° &deg; &#x00B0; Grad
&ang; &#x2220; Winkel
&angmsd; &#x2221; Gemessener Winkel
&angrt; &#x221F; Rechter Winkel
&vangrt; &#x299C; Rechter Winkel mit Quadrat
&lrtri; &#x22BF; Dreieck
&cir; &#x25CB; Kreis
&xutri; &#x25B3; Dreieck
&squ; &#x25A1; Quadrat
&fltns; &#x25B1; Parallelogramm
&spar; &#x2225; Parallel
&npar; &#x2226; Nicht parallel
&perp; &#x22A5; Orthogonal
&cong; &#x2245; Kongruent
&rarr; &#x2192; Strahl
&harr; &#x2194; Linie
- (n/a) &#x002D; Linien­segment

Mengen

Symbol Entity Hex Beschreibung
&empty; &#x2205; Leere Menge
&isin; &#x2208; Element von
&notin; &#x2209; Nicht Element von
&sube; &#x2286; Untermenge
&nsube; &#x2288; Keine Untermenge
&sub; &#x2282; Strikte Untermenge
&nsub; &#x2284; Keine strikte Untermenge
&supe; &#x2287; Obermenge
&nsupe; &#x2289; Keine Obermenge
&sup; &#x2283; Strikte Obermenge
&nsup; &#x2285; Keine strikte Obermenge
&cap; &#x2229; Schnittmenge
&cup; &#x222A; Vereinigung
&ssetmn; &#x2216; Komplementär

Logik

Symbol Entity Hex Beschreibung
¬ &not; &#x00AC; Negation
&and; &#x2227; UND
&or; &#x2228; ODER
&veebar; &#x22BB; Exklusiv ODER
&forall; &#x2200; Für Alle
&exist; &#x2203; Existiert
&rArr; &#x21D2; Impliziert
&hArr; &#x21D4; Äquivalent
&EmptySmallSquare; &#x25FB; Notwendig
&loz; &#x25CA; Möglich
&vdash; &#x22A2; Prüfbar
&vDash; &#x22A8; Hat zur Folge
&there4; &#x2234; Daher

Vektoren

Symbol Entity Hex Beschreibung
&sdot; &#x22C5; Skalar-Produkt
&Cross; &#x2A2F; Kreuz-Produkt
&Vert; &#x2016; Norm
&lang; &#x27E8; Linke Klammer
&rang; &#x27E9; Rechte Klammer
&compfn; &#x2218; Inneres Produkt
&rarr; &#x2192; Allgemine Abbildung
&mapsto; &#x21A6; Abbildung
ı &imath; &#x0131; i ohne Punkt
ȷ &jmath; &#x0237; j ohne Punkt

Griechische Buchstaben

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 Beispiele

MathML Beispiel: 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

Eine Formel in MathML wird in die <math> </math> Tags eingeschlossen. Nach dem öffnenden <math> beginnt die Formel. In diesem Beispiel mit dem Operator ∫ geschrieben als <mo>&int;</mo>. Jeder Operator wird in <mo></mo> gekapselt. Z.B. <mo>=</mo>, <mo>+</mo>, usw.

Die Elemente im Einzelnen:

<mn>5</mn> Zahlen in der Formel werden mit <mn> gekennzeichnet. Das n steht für Number.

<mi>x</mi> Variablen und Konstanten in der Formel werden mit <mi> gekennzeichnet. Das i steht für Item.

<mo>+</mo> Operatoren in der Formel werden mit <mo> gekennzeichnet. Das o steht für Operator.

<mfenced separators=''> Einleitung eines geklammerten Ausdrucks und </mfenced> Abschluß der Klammerung.

MathML Beispiel: Integral mit Integrationsgrenzen


<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> Erwartet drei Parameter. Als erstes den Operator <mo>&int;</mo> dann die untere Grenze <mi>a</mi> gefolgt von der oberen Grenze <mi>b</mi>.

MathML Beispiel: Summe


<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> Erwartet drei Parameter. Als erstes den Operator <mo>&Sum;</mo> dann die untere Grenze. Da die untere Grenze aus mehreren Elementen besteht werden die Elemente mit <mrow> gruppiert. Die Positionierung am Symbol wird mit display='block' oder display='inline' gesteuert.

MathML Beispiel: Klammern


<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> Die zu verwendenden Klammern werden mit open="|" und close=">"> angegeben. Ohne Angabe werden runde Klammern() verwendet. Die Angabe separators='' gibt an, wie die Elemente getrennt werden. Wird nichts angegeben, dann wird mit Komma getrennt. Soll kein Trennsymbol verwendet werden, dann muß separators='' gesetzt werden.

MathML Beispiel: Brüche


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

<mfrac> Der Bruch wird mit <mfrac> eingeleitet und mit </mfrac> abgeschlossen. <mfrac> erwrtet zwei Parameter. Der erste gibt den Zähler der zweite den Nenner des Bruches an.


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

<mfrac> Bestehen Zähler oder Nenner aus mehreren Elementen, so werden diese mit <mrow> zusammengefasst.

MathML Beispiel: Indizes und Exponenten


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

<msup> Exponenten bzw. Hochstellung wird mit <msup> erreicht. Der erste Parameter gibt die Basis der zweite den Exponenten an.


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

<msub> Indizes bzw. Tiefstellung wird mit <msub> erreicht. Der erste Parameter gibt die Basis der zweite den Exponenten an.


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

<msubsup> Hoch- und Tiefstellung wird mit <msubsup> bzw. <msupsub> erreicht. Der zweite und dritte Parameter geben Index und Exponent an.

MathML Beispiel: Wurzel


<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> Eine Qudratwurzel wird mit <msqrt> eingeleitet und mit </msqrt> abgeschlossen.


<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> Mit <mroot> kann eine allgemeine Wurzel angegeben werden. <mroot> erwrtet zwei Parameter. Der erste gibt die Diskriminante an der zweite den Grad der Wurzel.

MathML Beispiel: Tabelle


<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> Eine Tabelle wird mit <mtable> eingeleitet und mit </mtable> abgeschlossen.

<mtr> Jede Zeile einer Tabelle wird mit <mtr> eingeleitet und mit </mtr> abgeschlossen.

<mtd> Jedes Element einer Zeile wird mit <mtd> eingeleitet und mit </mtd> abgeschlossen.

Folgende Angaben für die Tabellenformatierung werden von den gängigen Browsern und MathJax unterstützt.

Attribute Beschreibung
width Die Breite der Tabelle. Wert in px, pt, em, etc.
side Ausrichtung der Label. Erlaubt sind left, right, leftoverlap, oder rightoverlap.
frame Die Art des Rahmens. Erlaubt sind none, solid, oder dashed.
framespacing Der Abstand zwischen den Zeilen. Zwei Werte für horizontalen und vertikalen Abstand.
rowalign Die vertikale Ausrichtung gegenüber den anderen Zielen. Erlaubt sind top, bottom, center, baseline, oder axis.
rowlines Die Art des Randes zwischen den Zeilen. Erlaubt sind none, solid, oder dashed.
rowspacing Zwischenraum zwischen den Zeilen. Wert gibt die Länge an.
columnalign Die horizontale Ausrichtung von jeder Zelle in Bezug auf andere Zellen in der gleichen Spalte. Erlaubt sind left, right, oder center.
columnlines Art des Randes zwischen den Spalten. Erlaubt sind none, solid, oder dashed.
columnspacing Abstand zwischen den Spalten. Wert gibt die Länge an.
columnwidth Die Breite der Spalte. Wert gibt die Breite an.
equalrows Gleiche Höhe für alle Zeilen. Erlaubt sind true oder false.
equalcolumns Gleiche Breite für alle Spalten. Erlaubt sind true oder false.

MathML Beispiel: 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

Eine Matrix aufgebaut aus <mfenced> und <mtable>.

MathML Beispiel: Determinante


<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

Eine Determinante aufgebaut aus <mfenced> und <mtable>.

MathML Beispiel: Vektor


<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> Mittels <mover> wird das Pfeilsymbol über dem Element positioniert. <mfenced> ohne weitere Angaben setzt runde Klammern und Kommas als Trennzeichen.

MathML Beispiel: Einzug


<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 Mit indentshift wird ein manueller Einzug im Beispiel um 2.6em angegeben.

linebreakstyle Mit linebreakstyle='before' wird angegeben, dass der Umbruch vor dem Operator erfolgen soll.

linebreak Mit linebreak wird ein manueller Zeilenumbruch erzwungen.

MathML Beispiel: 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 setzt den Schrifttype und erlaubt folgende Angaben:

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 setzt die Textfarbe.

mathsize setzt die Textgröße.

<mspace width='.1em' /> schafft einen entsprechenden Leerraum.

<mstyle> legt die Styleeigenschaften für alle eingeschlossenen Elemente fest.