MathML Programmierung

MathML Programmierung

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse der Informatik und von HTML werden vorausgesetzt.




Entwicklungs-Umgebung


Alle angeführten Programme kann man kostenfrei aus dem Internet laden. Darüber hinaus gibt es kommerzielle Programme, die hier jedoch nicht vorgestellt werden.



In allen gängigen Linux-Desktop-Distributionen ist LibreOffice enthalten und installiert, oder zumindest mit Mausklick installierbar.

In neu installierten Windows-Systemen ist normalerweise kein vollwertiges Büro-Paket installiert.
Die Installation von LibreOffice ist in jedem Fall sehr empfehlenswert. Man kann die Programme unabhängig von MS-Office installieren und alternativ oder zusätzlich verwenden.
OpenOffice ist derzeit nur eingeschränkt verwendbar, weil die Entwicklung stagniert und weil es die von MS-Office verwendeten Datei-Formate nicht mehr unterstützt.



Auf Linux sind alle gängigen und meist bereits installierten Text-Editoren brauchbar, z.B. gedit, kate, kwrite

Auf Windows wird das professionelle und kostenfreie Programm Notepad++ empfohlen. Der meist installierte Text-Editor notepad.exe bietet nur wenige Optionen und wird nicht empfohlen.

Konfiguration: Das Editor-Programm sollte ohne besondere Anweisungen einfachen Text (text/plain) in → UTF-8 und mit Linux-Zeilenumbruch erzeugen.


Wenn man Webseiten (mit MathML-Formeln) im Internet anbietet, dann hat man keinen Einfluss auf Betriebssystem, Browser und installierte Schriften der AnwenderInnen und nur selten die Möglichkeit, Schriften auf den Server des Web-Providers zu laden.
In diesem Fall sollte man die Webseiten zum Test auf einen Webserver laden und mindestens mit den aktuell meist-verwendeten Browser-Programmen ansehen.
Tipp: Sowohl (verschiedene) Webserver als auch verschiedene User-Betriebssysteme und Browser installiert man am besten auf → Virtuellen Computern.


Alternativ kann man eine Formel in einem beliebigen Dokument anzeigen und davon ein Bildschirm-Foto (Screenshot) erzeugen.

Zur Nach-Bearbeitung einer Pixel-Grafik verwendet man ein Grafik-Programm, z.B. → GIMP. Damit kann man auch alle gängigen Grafik-Formate umwandeln.

Manche Programme bieten die Option, eine Formel als → SVG Objekt-Grafik zu exportieren. Das ist normalerweise nicht sinnvoll und erzeugt unnötig viel SVG-Quelltext.



Tipps für einen einfachen Start:

Studieren sie einige möglichst einfache Beispiele, z.B. des Kapitels ↓ Einfache Elemente. Wenn sie immer noch MathML programmieren wollen, dann nehmen sie sich Zeit, um eine bequeme Entwicklungs-Umgebung herzustellen. Man kann nur dann programmieren, wenn das benötigte Werkzeug vorhanden ist und ohne Aufwand verlässlich funktioniert.

Beginnen sie damit, ganz einfache Beispiele zu programmieren. Alternative: Laden sie den MathML-Quelltext fertiger Beispiele und experimentieren sie mit kleinen (!) Änderungen.

Zerlegen sie komplexe Aufgaben in kleine Teile und programmieren sie zuerst diese. Setzen sie die Teile erst dann zusammen, wenn alle einzeln getestet wurden.

Im Internet findet man zahlreiche Beispiele, allerdings sehr unterschiedlicher Qualität. Verwenden sie nur solche Elemente, deren Bedeutung sie verstehen.

Die Formatierung von Formeln ist relativ schwierig. Verlassen sie sich anfangs auf die automatische Formatierung, auch wenn das Ergebnis nicht ganz zufriedenstellend ist.

Einbettung von MathML (pur) Formeln in Webseiten


Im ↓ nächsten Kapitel wird als 3.Methode die Einbettung von MathML+MathJax vorgestellt:
Langsam, jedoch für alle gängigen Browser verwendbar.


HTML-Quelltext des Beispiels:


HTML-Quelltext zur Einbettung (in dieser Webseite enthalten):
<iframe src="sqrt2.xml"></iframe>

MathML-Quelltext (in einer eigenen Datei sqrt2.xml):

Einbettung von MathML + MathJax Formeln in Webseiten


Im ↑  vorigen Kapitel werden 2 Methoden der Einbettung von 'reinem' MathML-Code vorgestellt:
HTML-5 + Inline-MathML
Einbettung von MathML direkt in den HTML-Quelltext.
Eigenständige MathML-Dokumente in HTML-InnenRahmen.


Quelltext des Beispiels:


MathJax bietet umfangreiche Möglichkeiten der Konfiguration, die gut dokumentiert und mit Beispielen illustriert sind.

Man kann die MathJax-Bibliothek herunterladen und am eigenen PC oder Server verwenden. In diesem Web wird MathJax stets vom Original-MathJax-Server geladen, weil damit die laufende Aktualisierung entfällt.

Bei der Entwicklung treten umso mehr Probleme auf, je mehr Details man selbst gestalten möchte.
Wenn die Formatierung wichtig ist, dann muss man leider getrennte Versionen für reines MathML und MathJax programmieren.
In diesem Web wird nach Möglichkeit nur Standard MathML-Code verwendet und auf spezielle MathJax-Optionen verzichtet.

Zeichensatz und Sonderzeichen


Beispiel:
Die erste Zeile jedes XML-Dokuments (und jeder MathML-Datei) lautet immer
<?xml version="1.0" encoding="utf-8"?>
In jeder HTML-5 Datei sollte diese Zeile enthalten sein (insbesondere wenn MathML-Code eingebettet wird):
<meta charset="UTF-8" />



In Formeln braucht man oft Sonderzeichen aus unterschiedlichen → Unicode-Bereichen. Man sollte daher Listen oder Verweis-Tabellen der ersten 65000 Unicode-Zeichen rasch zur Verfügung halten.

Beispiele: → Symbole und Operatoren, → Alle Unicode-Bereiche



Beispiel:
Das Summen-Zeichen Σ (Unicode U+2211) in den 3 möglichen Arten der Codierung als ↓ Operator: Mit Name, hexadezimal oder dezimal
<mo>&Sum;</mo>
<mo>&#x2211;</mo>
<mo>&#8721:</mo>

Details zum Thema → Umlaute und Sonderzeichen

Einfache MathML-Elemente


In diesem Kapitel werden 3 einfache MathML-Elemente vorgestellt, die in fast jeder Formel vorkommen und leicht zu programmieren sind.
Zur besseren Unterscheidung werden die von den MathML-Elementen umschlossenen  Daten  violett dargestellt.



Beispiele:
<mi>x</mi> <mi>sin</mi> <mi>&pi;<mi>



Beispiele:
<mn>1</mn> <mn>123.456</mn>



Beispiele:
<mo>=</mo> <mo>+</mo> <mo>-</mo> <mo>&middot;</mo>
<mo>&lt;</mo> <mo>&gt;</mo> <mo>&le;</mo> <mo>&ge;</mo>
Zur Multiplikation verwendet man das Zeichen &middot;
Die Division wird als ↓ Bruchzahl gesetzt.


Quelltext:
<math>
<mi>&pi;</mi>
<mo>=</mo>
<mn>3.141592</mn>
</math>


MathML-Quelltext:
<math>
<mi>sin</mi>
<mo>(</mo>
<mi>&pi;</mi>
<mo>)</mo>
<mo>=</mo>
<mn>0</mn>
</math>
HTML-Quelltext:
<div>
sin(&pi;) = 0
</div>


Die Formatierung des Quelltextes dient nur der besseren Lesbarkeit durch Menschen.
Die Beispiele dieser Seite sind besonders aufwändig formatiert, um mit Einrückungen die Verschachtelung der MathML-Elemente deutlich zu machen.

Math-Elemente mit 2 Child-Elementen


Das ist ein wesentlicher Unterschied zu HTML, der anfangs leicht zu Missverständnissen führen kann.


Quelltext:
<math>
<mi>a</mi>
<mo>=</mo>
<mfrac>
<mi>&pi;</mi>
<mn>2</mn>
</mfrac>
</math>

Quelltext:
<math>
<mfrac>
<mn>1</mn>
<mi>b</mi>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<mi>a</mi><mo>+</mo><mn>3</mn>
</mrow>
<mi>c</mi>
</mfrac>
</math>


Methoden in der Reihenfolge des Beispiels:
HTML-Quelltext 3/4
HTML mit → Unicode-Sonderzeichen &#xBE;
MathML mit <mfrac>
MathML mit <mfrac bevelled="true">
HTML-Quelltext 0.75


Quelltext:
<math>
<mi>x</mi>
<mo>=</mo>
<msup>
<mn>2</mn>
<mn>8</mn>
</msup>
</math>


Quelltext:
<math>
<msub>
<mn>z</mn>
<mn>0</mn>
</msub>
<mo>&ne;</mo>
<msub>
<mn>z</mn>
<mn>1</mn>
</msub>
</math>

Math-Elemente mit 3 Child-Elementen


In diesem Kapitel werden einige MathML-Elemente vorgestellt, die eine fixe Anzahl von 3 darin enthaltenen (eingeschlossenen) Child-(Unter)-Elementen verlangen.


Quelltext:
<math>
<msub>
<mi>s</mi>
<mrow>
<mi>k</mi><mo>+</mo><mn>1</mn>
</mrow>
</msub>
<mo>=</mo>
<msubsup>
<mi>s</mi>
<mi>k</mi>
<mn>2</mn>
</msubsup>
</math>


Quelltext:
<math>
<mi>y</mi>
<mo>=</mo>
<munderover>
<mo>&Sum;</mo>
<mrow>
<mi>k</mi><mo>=</mo><mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msub>
<mi>a</mi><mn>k</mn>
</msub>
<mo>&middot;</mo>
<msup>
<mi>x</mi><mi>k</mi>
</msup>
</math>


Quelltext (nur das <munderover>-Element):
<munderover>
<mo>&int;</mo>
<mn>0</mn>
<mi>x</mi>
</munderover>
Mit diesem ↗ Link wird der komplette Quelltext des Originals angezeigt.

Für Summen und Integrale braucht man oft das Sonderzeichen &infin; (unendlich)

Elemente mit beliebig vielen Child-Elementen


Auch MathML bietet einige Elemente, in die man beliebig viele Child-Elemente einschließen kann.


Quelltext:
<math>
<msup>
<mi>x</mi>
<mrow>
<mn>3</mn>
<mo>-</mo>
<mn>1</mn>
</mrow>
</msup>

<mo>=</mo>

<mfrac>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mrow>
<mi>x</mi>
<mo>&middot;</mo>
<mi>x</mi>
</mrow>
</mfrac>
</math>


Quelltext:
<math>
<mi>d</mi>
<mo>=</mo>
<msqrt>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</math>

Quelltext:
<math>
<mi>d</mi>
<mo>=</mo>
<mroot>
<mrow>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
<mn>2</mn>
</mroot>
</math>

Klammern


Quelltext:
<math>
<mi>x</mi>
<mo>=</mo>
<mo>(</mo>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
<mo>)</mo>
<mo>&middot;</mo>
<mn>3</mn>
</math>


Quelltext:
<math>
<mi>x</mi>
<mo>=</mo>
<mfenced open="{" close="}" separators="">
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
</mfenced>
<mo>&middot;</mo>
<mn>3</mn>
</math>



Quelltext:
<mo>&lt;</mo>
...
<mo>&gt;</mo>


Quelltext:
<math>
<mi>x</mi>
<mo>=</mo>
<mi>sin</mi>
<mo>&ApplyFunction;</mo>
<mfenced open="(" close=")" separators="">
<mi>&pi;</mi>
</mfenced>
</math>

Formatierung



MathJax verwendet ohne weitere Maßnahmen eine eigene Schrift und fordert diese vom MathJax-Server an. Der Download dieser großen Datei erfordert relativ viel (Warte)-Zeit, garantiert aber eine vom Betriebssystem und der Browser-Konfiguration unabhängige Darstellung.
Man kann MathJax alternativ zur Verwendung der jeweiligen Standard-Schrift konfigurieren.



<math display="block">
...
</math>

Darüber hinaus wurden nur selten zusätzliche Anweisungen zur Formatierung verwendet.



<mstyle displaystyle="true">
...
</mstyle>



<mo style="font-size:1.5em;">&Sum;</mo>
Zur Angabe der Schriftgröße verwendet man am besten relative Maße (% oder em), keine absoluten Maße (px, pt).
Ohne Angabe wird immer mit 100% oder 1.0em formatiert.



<mspace width="5px" />