Als Naturwissenschaftler habe ich täglich mit mathematischen Formeln zu tun. Aber wie kann man Formeln am besten auf der eigenen Website darstellen bzw. hinschreiben?

Um eine mathematische Formel auf einer Website darzustellen, braucht man als Ausgangspunkt immer eine Art von Markup. LaTeX eignet sich dafür perfekt. Für die Umsetzung im Web eignen sich MathJax (JavaScript), MathML (direkt in HTML5), und aus LaTeX (o.ä.) erzeugte Grafiken.

Wie das alles im Detail funktioniert, was von welchen Browsern unterstützt wird oder nicht, und was für Ihre Situation vermutlich am besten passt, dass finden Sie in den folgenden Abschnitten dieses Artikels.

Hier erfahren Sie mehr zu folgenden Themen:

Übersichtstabelle für die Umsetzung Mathematischer Formeln auf Websites

Die beste Art, einen schnellen und guten Überblick über die Situation zu bekommen, ist in diesem Fall eine Tabelle. Ich habe für Sie meine Sichtweise und Kriterien hier komprimiert zusammengefasst. Je nach Ihrer Situation können Sie daraus bereits ablesen, was vermutlich die beste Lösung für Sie ist. Lesen Sie dann weiter unten die Details zu allen Kriterien und Systemen, um mehr Informationen und konkrete Anleitungen zu Verwendung zu bekommen.

KriteriumMathMLMathJaxGrafik
Korrekte Darstellung im Internet-BrowserFehlt nativ in Chrome und anderenAlleAlle
Identische Darstellung in verschiedenen BrowsernNeinJaJa
Herkunft des CodesSpezieller Editor
Direkte Eingabe
LaTeX-Übersetzung
LaTeX
MathML-Editor
LaTeX
MS Formel-Editor
LibreOffice Formel
...
Gute Kontrolle beim Schreiben der Formel Je nach Herkunft des CodesAuf dem LaTeX-LevelJe nach Herkunft des Codes
Authentisches Aussehen des ResultatsJa, bei korrekter Darstellung im BrowserJaJe nach Herkunft der Grafik
Benötigte Software bzw. VorbereitungenTheoretisch keine für HTML5
Editor zum Formel-Schreiben
Vor-Laden der MathJax-JavaScript Bibliothek auf der WebsiteSoftware zum Erzeugen der Formel mit Grafik-Export-Funktion
WorkflowLaTeX bzw. Editor >
MathML Code >
HTML5 Website
LaTeX bzw. Editor >
Website
LaTeX bzw. Editor >
exportierte Grafik >
Website
Textfarbe in der Formel ändernÜber CSS für einzelne MathML-TagsÜber Farbkommandos für Formelteile oder -elementeBei der Grafik-Erstellung
Hintergrundfarbe in der Formel ändernJa, durch Hintergrundfarbe auf der Website (CSS)Ja, durch Hintergrundfarbe auf der Website (CSS)Ja, bei Transparenz-Unterstützung des Grafikformats
Animation der Formel oder ihrer TeileIm Rahmen von CSS und JavaScript für Formel bzw. Teile/TagsIm Rahmen von CSS und JavaScript für Formel bzw. Teile/TagsWie bei Bildern möglich. Teile nur bei Teilbildern animierbar

Warum ist es eigentlich nicht so einfach, mathematische Formeln auf Websites zu Schreiben oder Darzustellen?

Mathematische Formeln auf Websites schreiben: So geht’s

Jeder, der schon einmal eine mathematische Formel gesehen oder aufgeschrieben hat (und das sind wir eigentlich alle), weiß, dass man dabei auf verschiedene Dinge achten muss:

  • Die mathematischen Zeichen und Operatoren korrekt zu schreiben, also z.B. ein Plus + oder Minus -. Dafür gibt es natürlich etwas ungewöhnlichere weil speziellere Beispiele wie z.B. das Symbol für unendlich: ∞
  • Man muss außerdem die Struktur der Formel richtig aufs Papier bringen. Bei einer Gleichung darf z.B. das Gleichheitszeichen = nicht fehlen.
  • Man muss auf hoch- oder tief-gestellten Text achten: Hochgestellte Zahlen oder buchstaben sind meist Exponenten, wie z.B. die 2 beim Quadrieren eines Ausdrucks. Tiefgestellte Zahlen sind Indizes oder Teil des Namens einer Variablen.
  • Man muss teilweise die Ausdrücke übereinander schreiben, sodass der Ausdruck eigentlich mehrzeilig ist. Ein Beispiel dafür ist ein Bruch, wo zwischen dem Ausdruck im Zähler und dem im Nenner auch noch ein waagrechter Strich dargestellt werden muss. Ein anderes Beispiel ist ein Vektor, wo man keine waagrechte Striche schreibt, aber runde Klammern links und rechts um den gesamten Ausdruck (also über mehrere Zeilen) anbringen muss.

Sie sehen bereits, dass es hier nicht nur darum geht, welche mathematischen Ausdrücke dargestellt werden müssen. Es geht hier ganz besonders um die Beziehungen der Ausdrücke zueinander und wo sie in Bezug auf einen anderen Ausdruck stehen müssen.

Diese vielen Möglichkeiten führen zu einer Komplexität, die man beim Schreiben von normalem Text nicht hat. Normalerweise begegnen uns beim Schreiben höchstens hoch- oder tief-gestellter Text, aber nicht wirklich mehr. Bei mathematischen Formeln muss man also zweierlei beachten:

  • Man muss ein geeignetes Werkzeug zum Schreiben zur Verfügung haben
  • Es sollten beim Schreiben keine Fehler passieren.

Der zweite Punkt gilt zwar immer, aber das kann bei komplexen Formeln tatsächlich recht schnell unübersichtlich werden. So, jetzt will ich aber nicht weiter um den heißen Brei herum reden, sondern etwas Konkreteres präsentieren.

Mathematische Formeln auf Websites: ein praktisches Beispiel

In mathematischen Formeln kann man viele verschiedene Elemente finden. Auf der Suche nach einem Beispiel, das zumindest die gebräuchlichsten davon enthält, aber auch nicht zu komplex oder unübersichtlich wird, bin ich auf folgendes gestoßen, das ich hier für den Moment als Grafik eingebunden habe:

Ein vierdimensionales Integral als Beispiel für mathematische Formeln auf Websites als Bild

Nur der Vollständigkeit halber: Dabei handelt es sich um ein vierdimensionales Integral, das in hypersphärische Koordinaten umgeschrieben wird. Das spielt hier aber eigentlich überhaupt keine Rolle, vergessen Sie es also am besten gleich wieder. Was hier wichtig ist: Diese Formel enthält folgende typischen Elemente:

  • Ein (eigentlich mehrere) Symbol, das die normale Zeilenhöhe überragt, nämlich ein Integralzeichen
  • Das die Zeile überragende Symbol hat auch noch text am oberen und unteren Ende (die Zeichen ober- und unterhalb des geschwungenen Symbols sind die Integralgrenzen)
  • Einen Bruch
  • Hochgestellte Zahlen im Exponenten
  • Einen Wurzelausdruck
  • Griechische Buchstaben
  • Andere Sonderzeichen (hier konkret einen Pfeil nach rechts)

Falls Sie das auf einem Smartphone lesen und die Details nicht gut genug erkennen können, drehen Sie Ihr Gerät für einen Moment ins Querformat. Und falls Sie neugierig sind, wie ich das Bild erstellt habe, das kommt noch weiter unten im Detail, (siehe LaTeXiT auf dem Mac).

Diese Formel wird uns jedenfalls durch diesen Artikel begleiten. Ich zeige Ihnen unter anderem, wie die Formel auf die verschiedenen hier diskutierten Arten dargestellt aussieht. Noch dazu zeige ich Ihnen den Quellcode für die Formel in LaTeX und MathML.

Kriterien für das Arbeiten mit mathematischen Formeln und die Darstellung mathematischer Formeln auf Websites

Jeder Website-Betreiber, der mathematische Formeln auf der eigenen Website braucht, hat eine Vorstellung davon, wie die Formeln aussehen sollen und was die Besucher der Website damit tun sollen. Außerdem schreibt er die Formeln entweder selbst, oder andere schreiben die Formeln auf, damit diese auf der Website angezeigt werden sollen. Dann sollten die Formeln auf möglichst einfache Art ihren Weg auf die Website finden.

Daraus ergeben sich mehrere Kriterien für das Arbeiten mit Formeln auf Websites. Manche dieser Kriterien mögen nicht für uns alle gleich wichtig sein, ich möchte sie hier jedoch trotzdem möglichst alle zur Sprache bringen.

Das Aufschreiben der mathematischen Formel sollte möglichst einfach und übersichtlich sein

Das ist eine Forderung, die schwierig zu erfüllen ist. Denn mathematische Formeln können bereits von vornherein kompliziert und unübersichtlich sein. Trotzdem sollte es einfach genug möglich sein, dass jemand, der eine Formel im Kopf oder auf dem Papier neben sich hat, diese auch in eine elektronische Form übersetzen kann.

Dieses Problem ist daher ein eher grundsätzliches und besteht unabhängig davon, ob es sich um Formeln auf Websites handelt oder um Formeln anderswo (z.B. in wissenschaftlichen Publikationen). Daher verschiebe ich die Diskussion des Grundproblems (wie schreibt man überhaupt eine Formel auf dem Computer am besten) auf einen der bald folgenden Abschnitte.

Dort zeige ich Ihnen die Grundzüge von LaTeX und beschränke mich an dieser Stelle darauf, dass das Schreiben der Formel für den Gebrauch auf Websites nicht komplizierter sein sollte als LaTeX oder die Verwendung eines Formel-Editors.

Das Arbeiten mit mathematischen Formeln auf Websites sollte möglichst unkompliziert sein

Dieser Punkt hört sich trivial an, ist es aber nicht. Wie ich gerade erwähnt habe, und wie wir noch an den Code-Beispielen weiter unten sehen werden, ist das Aufschreiben mathematischer Formeln bereits kompliziert genug. Daher sollte die Sache nicht noch komplizierter werden, nur weil die Formeln auf einer Website angezeigt werden sollen.

Zum Arbeiten mit Formeln (also dem Workflow) gehören vor allem Aspekte wie:

  • Wie viele Fenster muss ich auf meinem Computer gleichzeitig öffnen, um eine Formel zu erstellen und sie dann auf meine Website zu bringen?
  • Was ist, wenn ich einen Fehler gemacht habe? Wie kompliziert ist es, diesen zu korrigieren? Wo (in welchem Programm/Fenster) muss ich das tun? Wie viele Schritte muss ich dann erneut durchlaufen, um die falsche Version der Formel auf der Website durch die korrigierte Version zu ersetzen?
  • Was kann ich an der Darstellung einer Formel noch ändern, wenn sie erst einmal auf der Website ist? Die Farbe des Textes oder von Teilen des Textes? Die Hintergrundfarbe?
  • Wie viele Dateien gehören zu einer Formel? Wie kann/muss/soll ich diese organisieren?

Sie merken bereits: Hier kann man sich das Leben auch unnötig schwer machen.

Jedenfalls sollte es aber zumindest die Formel irgendwo als Quelltext geben (dass das nicht so sein muss, wenn man z.B. LaTeXiT und Grafiken verwendet, das zeige ich weiter unten). Nur wenn der Quelltext der Formel irgendwo leicht auffindbar gespeichert ist, dann lassen sich Korrekturen oder Änderungen auch einfach durchführen.

Das Ergebnis (die Formel) sollte in allen Internet-Browsern korrekt dargestellt werden

Dieser Punkt ist nicht unwichtig, weil man sich eigentlich erwarten könnte, dass alle Internet-Browser die verschiedenen Web-Standards auch korrekt umsetzen. Oder zumindest nimmt man unbewusst an, dass Browser jene Dinge, die Webmaster auf ihren Websites verwenden, auch darstellen können.

Dem ist aber nicht immer so. Ich werde also im Folgenden immer wieder darauf eingehen, wie es mit der Browser-Unterstützung für z.B. MathML steht. Nehmen wir uns dieses Kriterium aber besonders zu Herzen. Es wäre schließlich schade, wenn man sich sehr viel Mühe bei der Erstellung einiger mathematischer Formeln für die eigene Website gemacht hat, und dann können sie nur 20% der Besucher richtig lesen.

Das Ergebnis (die Formel) sollte in verschiedenen Internet-Browsern gleich (gut) aussehen

Dieser Punkt ist bereits etwas subtiler als der vorhergehende. Wenn ich persönlich schon der Meinung bin, dass mathematische Formeln in allen Browsern korrekt aussehen sollten, dann bin ich auch zumindest ein bisschen der Meinung, dass mathematische Formeln auch in verschiedenen Browsern gleich, und zwar gleich gut, aussehen sollten.

Ich sehe absolut ein, dass schöner Formelsatz kein Zufall ist, sondern das Ergebnis klarer Zielsetzung und harter Arbeit. Wenn also eine dieser Ressourcen bei der Entwicklung eines Internet-Browsers fehlt, dann gibt es zwangsläufig Unterschiede zwischen den Browsern beim Ergebnis.

Naja, vielleicht gibt es doch Lösungen, die für alle gleich gut funktionieren – wir werden das weiter unten sehen. Zunächst möchte ich mich jedoch dem Web-Standards widmen und die Frage stellen, wie aus einer Formel, die ich persönlich z.B. in LaTeX schreibe, denn nun eine schöne und korrekte Darstellung auf einer Website werden kann.

Mathematische Formeln in HTML

Mathematische Formeln in HMTL einzubinden erfordert also ein Konzept, dass ein HTML einen ansprechenden Formelsatz zustande bringt. Da es in Markup-Sprachen wie z.B. HTML ja in erster Linie um die Struktur geht, sollte es kein Problem sein, die Struktur der mathematischen Formel von z.B. LaTeX in HTML zu übersetzen.

Die Darstellung ist dabei dann allerdings nicht so einfach, sondern erfordert einiges an Arbeit. Was zuvor jedoch noch nötig ist, ist der Übergang von HTML zu einer XML-basierten Markup-Sprache. Dass nämlich HTML die XML-Standards nicht erfüllt, das habe ich bereits in meinem Artikel Was Sie über Markup wissen müssen: Die 21 wichtigsten Fakten beschrieben.

Letztlich hat sich für die Formel-Darstellung im WWW eine eigene Markup-Sprache entwickelt, nämlich MathML, die dem XML-Standard genügt und in HTML5 bereits enthalten ist. Trotzdem kann man leider nicht einfach sagen: Ok, dann nehmen wir halt MathML. Warum nicht, das beschreibe ich gleich. Zuvor noch ein paar Anmerkungen zu mathematischen Formeln an sich und wie man diese am besten schreibt.

Wie schreibt man eigentlich mathematische Formeln am besten abseits von Websites und HTML?

Wie ich bereits erwähnt habe, sollte das Schreiben von mathematischen Formeln möglichst einfach sein. Das ist es aber nicht immer, und vor allem nicht von vornherein. Daher braucht man am Anfang ein Werkzeug, mit dem man mathematische Formeln präzise aufschreiben und strukturieren kann.

Ich persönlich feile auch noch gerne an der Darstellung einer Formel herum (wie Sie gleich im Beispiel-Code sehen werden), aber das sollte idealerweise gar nicht nötig sein. Im besten Fall schreibt man einfach die Struktur der mathematischen Formel oder Gleichung auf, und den Rest erledigt die Software zu vollster Zufriedenheit.

Hier möchte ich daher kurz auf LaTeX eingehen, das diesem Ideal am nächsten kommt. Bei LaTeX handelt es sich insgesamt um ein Textverarbeitungssystem. Die Dokumente werden in einem Quelltext-Editor geschrieben und dann in eine Vorschau bzw. das fertige pdf-Dokument übersetzt. Da dieses System aus dem wissenschaftlichen Bereich kommt, produziert es (abgesehen von noch anderen Vorteilen) einen überragenden Formelsatz.

Formeln in LaTeX zu schreiben ist meiner Meinung nach nicht wirklich schwieriger als sie zu verstehen. Die Befehle sind zugleich kompakt gehalten und mächtig. Für komplexere mathematische Themen gibt es zusätzliche Packages (in WordPress würde man zu so etwas Plugin sagen). Daher hat man hier das perfekte Werkzeug um effizient und effektiv an Formeln zu arbeiten.

Ein Beispiel gefällig? In LaTeX sieht der Quellcode unserer Beispielformel von oben folgendermaßen aus:

\begin{equation}
  \int_{-\infty}^\infty \!\! d^4q \rightarrow 
  \int_0^\infty \!\! d(q^2) \frac{q^2}{2}
  \int_{-1}^1 \!\! dz \sqrt{1-z^2}
  \int_{-1}^1\!\! dy 
  \int_0^{2 \pi} \!\! d\phi
\end{equation}

Das meiste davon ist eigentlich fast selbsterklärend, wenn man das Bild der Formel vor Augen hat. Eine kleine Anmerkung haben sich die Befehle \! verdient. Dabei handelt es sich um kleine negative Abstände in mathematischen Formeln. Wie gesagt feile ich manchmal auch an LaTeX Formeln herum, um etwa zu erreichen, dass die Zeichen etwas kompakter zusammengezogen werden.

Formeleditoren als Alternative zu LaTeX beim Erstellen mathematischer Formeln

Eine Alternative zu LaTeX sind Formeleditoren, mit denen sich Formeln auf Knopfdruck aus verschiedenen Teilen zusammensetzen lassen. Dabei muss man aber aufpassen, die Strukturen von der übergeordnetsten (äußersten) zur innersten zu erstellen. Dabei sind Fehler nicht immer effizient zu korrigieren. Noch dazu lässt das Endresultat, also die fertige Formel, manchmal zu wünschen übrig.

Die bekanntesten Beispiele für Formeleditoren sind der in MS Word enthaltene Editor für Formeln und dessen Pendant Formel in Libre Office. Die Ergebnisformel kann man dabei entweder direkt in ein Dokument einbinden, oder als separate Datei exportieren. Die Formate dafür sind meist .pdf und/oder andere Grafik-Formate, sowie MathML Code.

Während MathML darauf abzielt, Code zu erzeugen, den man auf der Website einbindet und der dann vom Internet-Browser gerendert wird, ist der Export in eine Grafik eine direktere Methode. Denn alle Internet-Browser können schon seit Beginn der Internet-Zeitrechnung Bilder darstellen. Beide Möglichkeiten (also Code oder Bilder für Formeln zu erzeugen) werden also von beiden Alternativen (LaTeX oder Formeleditoren) bereitgestellt.

Eine kleine Anmerkung noch an dieser Stelle: Es gibt auch bereits recht bedienungsfreundliche Formeleditoren für LaTeX. Wer also sozusagen das Beste beider Welten möchte, kann das ebenfalls haben. Ein Beispiel hierfür ist z.B. Lyx, das auf allen gängigen Betriebssystemen läuft.

Wer Zugang zu kommerzieller mathematischer Software wie z.B. Mathematica hat, der kann sich den LaTeX-Code einer Formel oder eines Ergebnisses auch direkt aus dem Programm exportieren lassen.

LaTeX2HTML und andere Konversionsprogramme

Jetzt aber wieder zurück zu LaTeX und Websites. Bereits vor (sehr) vielen Jahren, als noch keine Rede von HTML5, MathML und dergleichen war, gab es Konversionsprogramme, mit denen wir unsere LaTeX-Dateien in Websites umgewandelt haben.

Was dabei allerdings gemacht wird, ist, dass der normale Text in HTML umgewandelt wird, während die Formeln in Grafiken umgewandelt werden. Diese Grafiken werden dann automatisch an den richtigen Stellen im HTML als Bilder eingesetzt. Das sieht (und sah auch damals bereits) eigentlich recht brauchbar aus.

Interessant dabei war, dass auch Querverweise im LaTeX-Dokument korrekt in Hyperlinks für die Website übersetzt wurden. Das ist auch dann interessant, wenn man weiß, dass sich LaTeX und HTML in ihrer Eigenschaft als Markup-Sprachen gar nicht so unähnlich sind.

Trotzdem braucht es gerade auf modernen Websites etwas mehr Flexibilität. Was ich unter einer modernen Website verstehe, habe ich in meinem Artikel 21 unverzichtbare Funktionen einer modernen Website im Detail beschrieben. Der Trend geht jedenfalls dahin, Content-Management-Systeme wie z.B. WordPress zu nutzen, und Inhalte Stück für Stück einzubinden. Ich möchte im Folgenden also einen möglichst guten Workflow dafür finden und beschreiben.

MathML als Auszeichnungssprache für mathematische Formeln auf Websites

MathML wurde als Auszeichnungs- oder Markup-Sprache für die Darstellung von mathematischen Formeln auf Websites entwickelt. Der Begriff Markup-Sprache ist in diesem Artikel bereit öfter aufgetaucht. Eine Markup-Sprache ist im Prinzip eine Möglichkeit, die Struktur eines Dokuments bereits beim Schreiben durch Befehle oder sogenannte Tags festzulegen.

Für mathematische Ausdrücke gibt es die Markup-Sprache MathML (Mathematical Markup Language). Diese Sprache enthält also Tags für alle Strukturen, die man in mathematischen Formeln so brauchen könnte (und auch tatsächlich braucht).

Sie können z.B. einfach durch <mroot> einen Wurzelausdruck starten und ihn dann durch den entsprechenden End-Tag </mroot> wieder schließen. MathML ist eine Form der Markup-Sprache XML, die eine sehr allgemeine Struktur in Dokumenten erlaubt. Wenn Sie mehr über Markup und Markup-Sprachen wissen möchten, dann lesen Sie einfach meinen Artikel Was Sie über Markup wissen müssen: Die 21 wichtigsten Fakten, gleich hie auf WebsiteBerater.com.

Somit ist MathML also ein idealer Kandidat für das Einbinden von mathematischen Formeln auf Websites. Trotzdem hat es sich noch nicht endgültig durchgesetzt.

Fehlende Browserunterstützung als Problem für MathML

MathML ist die empfohlene Methode des WWW-Consortiums für die Darstellung von mathematischen Formeln und Ausdrücken auf Websites. Damit sollte zwar alles geklärt sein, das ist es aber nicht. Denn es kommt auch darauf an, dass dieser Standard von allen gängigen Internet-Browsern unterstützt wird, um erfolgreich zu sein. Das ist derzeit nicht der Fall.

Insbesondere das Fehlen der nativen MathML-Unterstützung in Chrome ist ein Problem, da dessen Marktanteil von gut über 50% nicht ignoriert werden kann. Wenn Sie wissen wollen, wie es aktuell um die MathML-Unterstützung in Firefox, Safari, Opera, Chrome, IE und Edge steht, dann empfehle ich dafür die Wikipediaseite zum aktuellsten Stand.

Hier habe ich, zum Test für Sie und den Browser, den Sie gerade jetzt verwenden, die Beispiel-Formel von oben in MathML eingebunden. Anhand des Vergleichs zum obigen original in der Grafik können Sie erkennen, wie gut oder nicht gut Ihr Browser mit MathML umgeht. Da es aber etwas mühsam ist, für den Vergleich hinaufzuscrollen, habe ich das Bild der Formel zum direkten Vergleich unter dem MathML-Code nochmals eingefügt.

∫-∞∞d4q→∫0∞d(q2)q22∫-11dz1-z2∫-11dy∫02πdφ

Ein vierdimensionales Integral als Beispiel für mathematische Formeln auf Websites als Bild

Die Beispielformel, nochmals als Bild eingebunden

Auch wenn also manche Browser MathML nicht direkt unterstützen, kann man trotzdem MathJax zur Formeldarstellung in allen Browsern verwenden. Deshalb ist MathJax für einige der großen Verlage im Wissenschaftsbereich das Werkzeug der Wahl für diesen Zweck geworden. Gleich kommt noch mehr dazu.

Was MathML betrifft, lohnt sich trotzdem die Frage, was man damit tun und lassen kann bzw. anfangen soll.

Kann man MathML Code gut direkt schreiben und lesen?

Kurz gesagt, eher nicht. Aber lassen Sie mich mehr ins Detail gehen.

Abgesehen von der fehlenden Unterstützung durch Internet-Browser könnte man noch als Problem oder Nachteil von MathML bezeichnen, dass der nicht in eine Formel übersetzte MathML Code recht unübersichtlich aussieht. Unsere Beispielformel von oben sieht in MathML z.b. so aus:

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable class="m-equation" displaystyle="true" style="display: block; margin-top: 1.0em; margin-bottom: 2.0em">
  <mtr>
    <mtd>
      <mspace width="6.0em" />
    </mtd>
    <mtd columnalign="left">
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mrow>
            <mo>-</mo>
            <mo>&#x0221E;</mo>
          </mrow>
          <mo>&#x0221E;</mo>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <msup>
        <mi>d</mi>
        <mn>4</mn>
      </msup>
      <mi>q</mi>
      <mo>&#x02192;</mo>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>0</mn>
          <mo>&#x0221E;</mo>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mi>d</mi>
      <mrow>
        <mo form="prefix">(</mo>
        <msup>
          <mi>q</mi>
          <mn>2</mn>
        </msup>
        <mo form="postfix">)</mo>
      </mrow>
      <mfrac linethickness="1">
        <mrow>
          <msup>
            <mi>q</mi>
            <mn>2</mn>
          </msup>
        </mrow>
        <mn>2</mn>
      </mfrac>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>-1</mn>
          <mn>1</mn>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>z</mi>
      <msqrt>
        <mrow>
          <mn>1</mn>
          <mo>-</mo>
          <msup>
            <mi>z</mi>
            <mn>2</mn>
          </msup>
        </mrow>
      </msqrt>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>-1</mn>
          <mn>1</mn>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>y</mi>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>0</mn>
          <mrow>
            <mn>2</mn>
            <mi>&#x003C0;</mi>
          </mrow>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>&#x003D5;</mi>
    </mtd>
    <mtd columnalign="right" style="width: 100%">
      <mtext id="">(1)</mtext>
      <mspace width="6.0em" />
    </mtd>
  </mtr>
</mtable>
</math>

Hier hat man wenigstens durch die Formatierung im Dokument mit neuen Zeilen und Einrückungen eine ungefähre Idee, was man sich da ansieht. Entfernt man aber noch dazu die Leerzeichen und Einrückungen, dann ist es um die Übersichtlichkeit erst recht schlecht bestellt. Ich erspare uns dieses Desaster hier – wer es gerne sehen will, der kann sich ja das Code-Beispiel kopieren und nach Herzenslust bearbeiten.

Apropos Codebeispiel: Die auf dieser Seite eingebundenen Code-Beispiele sind doch super praktisch und sehen fast noch besser aus, oder? Wollen Sie wissen, wie ich das gemacht habe? Dann lesen Sie als nächstes gleich meine beiden Artikel So geht’s: Code-Beispiele auf der WordPress-Website und, zum WordPress-Plugin meiner Wahl, Das Enlighter WordPress-Plugin: Installation, Einstellungen, Vorteile.

Trotzdem muss Unleserlichkeit des Quellcodes kein Nachteil sein. Wir schreiben ja auch Websites nicht mehr direkt in HTML (obwohl ich mich noch an diese Zeiten erinnern kann). Es gibt also Editoren, die MathML Code generieren und die vergleichsweise einfach zu bedienen sind.

Beispiel-Code für MathML, aus LaTeX erzeugt

Nimmt man also den LaTeX Code für unsere Beispielformel und transformiert ihn in MathML, dann erhält man den MathML Code, wie er im Code-Fenster von gerade eben dargestellt ist. Dabei sind aus unter 10 Zeilen LaTeX Code über hundert Zeilen MathML geworden. Ich sollte auch dazu sagen, dass ich den LaTeX code bereits etwas strukturiert habe, damit es besser aussieht. Ich persönlich hätte vermutlich nicht so viele Zeilenumbrüche eingefügt.

Diesen Code habe ich übrigens zum Testen aus meinem LaTeX-Formelcode automatisch mit dem online-Konversions-Tool von mathtowebonline.com erzeugt. Dieses Tool ist zwar schon etwas älter, es existiert aber auch als MathToWeb zum Download. Es ist Java-basiert und kann daher recht einfach auf den gängigen Betriebssystemen installiert werden. Für genaue Informationen zum Download, der Installation und der Benutzung dieses Tools, besuchen Sie einfach die Website mathtoweb.com.

Aber auch das lokale LaTeX-Werkzeug oder der lokale Formeleditor Ihrer Wahl kann vermutlich bereits den LaTeX- oder Formel-Quellcode direkt als MathML exportieren. Bei mir ist das LaTeXiT, das auf dem Mac mit TeXShop daherkommt. Dabei handelt es sich im Prinzip um einen Generator, der aus LaTeX-Formel-Code ein Bild macht und das auch exportieren kann, unter anderem eben in MathML.

Editoren für das Schreiben von MathML

Um Code in MathML zu bekommen, haben Sie also folgende Möglichkeiten:

  • Direkt MathML schreiben, in einem einfachen Texteditor
  • Die Formel in LaTeX schreiben und dann zu MathML konvertieren bzw. exportieren
  • Einen Editor benutzen, um eine Formel direkt in MathML zu erzeugen

Für das direkte Schreiben von MathML reicht also jeder beliebige Texteditor. Gespeichert werden MathML-Dateien üblicherweise mit der Endung .mml, das übergeordnete Format ist XML.

Um die Formel in LaTeX zu schreiben, braucht man „nur“ LaTeX auf dem Computer. Das „nur“ steht deshalb unter Anführungszeichen, weil LaTeX ein ziemlich umfangreiches System ist und man es nicht in 10 Sekunden heruntergeladen und installiert hat. Bitte sehen Sie auf den Download-Seiten von latex-project.org nach, welche Installationsmethode für Ihr Betriebssystem am besten passt, und haben Sie ein klein Wenig Geduld – es wird sich lohnen.

Um eine Formel aus LaTeX nach MathML zu konvertieren, verwenden Sie entweder direkt einen Teil Ihrer LaTeX-Installation oder das oben bereits erwähnte Online-Werkzeug von mathtowebonline.com. Auf dem Mac ist LaTeXiT die eindeutig einfachste Möglichkeit. Auf Windows lohnt es sich, MiKTeX zu installieren und dann mit Hilfe der tex4ht-Package eine Formel in MathML zu exportieren.

Bei den direkten MathML-Editoren kann man zunächst auf die üblichen Textverarbeitungs-Programme zurückgreifen. Bei der MS-Office-Suite auf Windows hat man den Formeleditor in Office zur Verfügung. Dieser verwendet bereits im Hintergrund Markup, um die Formel in Word richtig darzustellen.

Die einfachste Art, eine Formel aus Word in MathML zu exportieren, ist, die Formel in die Zwischenablage zu kopieren und dann in ein Text-Dokument einzufügen. Um dabei wirklich MathML Code zu erhalten, muss man lediglich vorher in den Einstellungen zu den Gleichungen beim Punkt Beim Kopieren einer Gleichung die folgende Einstellung machen: MathML als Text in die Zwischenablage kopieren.

Bei OpenOffice oder LibreOffice gibt es ebenfalls eine Komponente, die Formelsätze erzeugt. Inzwischen ist aufgrund der aktuellen Instandhaltung LibreOffice zu empfehlen. Dort öffnet man ein neues Dokument (und zwar eine neue Formel) und erstellt den Inhalt im Editor. Danach geht man im Dateimenü auf Speichern unter und wählt als Format MathML aus.

Es gibt auch noch andere Editoren von denen einige kostenlos sind, wie z.B. MathCast. Andere werden kommerziell angeboten (z.B. MathType auf Windows), aber der Einsatz kostenpflichtiger MathML-Editoren lohnt sich angesichts der kostenlosen und leistungsstarken Alternativen aus meiner Sicht eigentlich nicht.

Mathematische Formeln mit HTML5

Diese ganze Diskussion von MathML ist deshalb interessant, weil MathML ein Teil der aktuellen modernsten Version von HTML ist. Während MathML in HTML 4 und XHTML nicht von vornherein enthalten war, ist in HTML5 MathML bereits ohne weiteres verwendbar.

Sie können also MathML ganz einfach in Ihr HTML5-Dokument hineinkopieren, so wie ich das hier etwas weiter oben bereits mit der Beispiel-Gleichung getan habe. Da das allerdings auf der Browserseite vielleicht nicht unterstützt wird, haben sich auch Alternativen bzw. Umsetzungen herausgebildet, die nicht nur direkt im HTML basiert sind. So auch das Thema des folgenden Abschnittes: MathJax auf der Basis von JavaScript.

LaTeX-Formeln direkt in HTML

Die JavaScript-Bibliothek MathJax kann mathematische Formeln aus Quellcode in LaTeX (oder MathML) direkt auf der Website darstellen. Die Formeln werden also einfach am besten in LaTeX geschrieben und Plattform- und Browser-unabhängig für den Besucher korrekt dargestellt, aktiviertes JavaScript vorausgesetzt.

Was hier als sehr spezielle Frage begonnen hat, nämlich, wie man am besten LaTeX-Formeln direkt auf der Website einfach so schreiben kann, und sich um die Darstellung keine Sorgen machen muss, das ist durch einen guten Ansatz gelöst worden. Deshalb im Folgenden noch etwas mehr Informationen zu MathJax:

MathJax für mathematische Formeln: JavaScript hilft

MathJax ist eine JavaScript-Bibliothek, die mathematische Formeln auf Websites darstellen kann, und zwar aus LaTeX und MathML Quell-Code. Dabei liefert es im Prinzip unabhängig vom verwendeten Internet-Browser die gleiche qualitativ hochwertige Darstellung einer mathematischen Formel.

MathJax wird ständig aktuell gehalten und als Open-Source JavaScript-Plattform für die Darstellung mathematischer Formeln und Gleichungen auf Websites betrieben. Diese Initiative wird sehr breit unterstützt, unter anderem von namhaften Wissenschaftsverlagen und anderen Publishern.

Die erklärten Ziele von MathJax im Detail sind:

  • Die Kompatibilität mit allen gängigen Internet-Browsern
  • Qualitativ hochwertige Darstellung der mathematischen Formeln in allen Browsern gleichermaßen
  • Kein zusätzlicher Aufwand bei der Einrichtung auf der Benutzer-Seite, d.h. der Besucher der Website, auf der die Formel angezeigt wird, muss dafür keine extra Software installieren oder installiert haben.
  • LaTeX, MathML und andere Arten von Markup sollen direkt im HTML Quellcode der Website unterstützt und verstanden werden.
  • Zugang über ein API (eine Benutzerschnittstelle für Entwickler) und dadurch auch Erweiterbarkeit
  • Unterstützung für Text-zu-Sprache-Software als Zugangserleichterung
  • Suchfunktion, die mathematische Begriffe und Zusammenhänge versteht und berücksichtigt

Das klingt vielversprechend und ist es auch. Durch die inzwischen breite Unterstützung von JavaScript in modernen Internet-Browsern liegt die Vorarbeit, um MathJax auf der eigenen Website einsetzen zu können, ausschließlich beim Website-Betreiber bzw. Autor.

MathJax auf der eigenen Website für die Darstellung mathematischer Formeln benutzen

Was muss man also tun, um MathJax auf der eigenen Website zu aktivieren? Hier die Kurzversion: Man muss die benötigte JavaScript-Bibliothek auf jenen Seiten laden (lassen), auf denen eine Formel dargestellt werden soll. Wenn das geschehen ist, dann braucht man nur den LaTeX bzw. MathML Code auf der Seite zu platzieren. Dieser wird beim Rendern dann in HTML und CSS-Befehle umgewandelt.

Die JavaScript-Bibliotheken für MathJax kann man recht bequem von einem Content-Delivery Network einbinden lassen, sodass man

  • lokal keine eigene Installation bzw. Version von MathJax hosten muss und
  • auf jeweils aktuelle Dateien zugreifen kann, ohne diese vorher selbst herunterladen zu müssen.

Wenn das erst einmal geschehen ist, dann kann man MathJax testen, also tun wir das hier jetzt auch. Ich binde hier wieder unsere Beispielformel zweimal ein. Zunächst die Ausgabe von MathJax, darunter das Bild zum direkten Vergleich.

\[\int_{-\infty}^\infty \!\! d^4q\rightarrow \int_0^\infty \!\! d(q^2) \frac{q^2}{2}\int_{-1}^1 \!\!
dz \sqrt{1-z^2}\int_{-1}^1\!\! dy \int_0^{2 \pi} \!\! d\phi\]
Ein vierdimensionales Integral als Beispiel für mathematische Formeln auf Websites als Bild

Die Beispielformel nochmals zum Vergleich, diesmal mit der Ausgabe von MathJax

Wenn Sie über dem Bild den LaTeX-Code wiedererkennen, statt eine schöne Formel zu sehen, dann stellen Sie sicher, dass JavaScript in Ihrem Internet-Browser aktiviert ist und nicht geblockt wird (z.B. von einem Adblocker oder komplizierteren Script-Blockern).

So, das sieht schon ziemlich gut aus, de facto sogar besser als das Bild, weil die Schrift kein Skalierungsproblem wie die hier eingebundene jpg-Grafik hat. Hier kann die Formelwiedergabe also durchaus mit einem Vektorformat wie svg mithalten, ohne dass man sich um die Erzeugung irgendeiner Zwischendatei kümmern muss.

Details zu diesem MathJax-Beispiel

Was ich hier konkret gemacht habe, ist zweierlei: Zunächst habe ich MathJax aktiviert. Weil WebsiteBerater.com auf WordPress läuft, geht das am besten über ein Plugin. Dann habe ich den LaTeX Code direkt über einen Shortcode im Text eingebunden. Dahinter stecken hier noch recht viele Details. Daher habe ich weitere Informationen gleich hier auf WebsiteBerater.com für Sie:

In meinem Artikel Mathematische Gleichungen und Formeln in WordPress beschreibe ich, was wir hier allgemein diskutiert haben, nochmal am Spezialfall einer WordPress-Website, inklusive der nötigen Details zum MathJax-Einbinden über ein WordPress Plugin.

In meinem Artikel MathJax für Anfänger und Quereinsteiger beschreibe ich die Arbeit mit MathJax im Detail, vom Setup bis zum Einfügen des Quellcodes, z.B. in LaTeX, direkt im Text.

Und in meinem Artikel Shortcodes in WordPress, einfach erklärt finden Sie alle nötigen Informationen über die für das Einbinden nötigen Shortcodes, hier konkret die Shortcodes latex oder mathjax.

Mathematische Formeln in LaTeX für die Website aufbereiten

Aus meiner Sicht (und das ist eine durchaus professionelle) ist das Textverarbeitungssystem LaTeX unangefochten die Nummer eins beim Schreiben von mathematischen Formeln. Es ist einfach genug in der Handhabung und produziert wunderbare mathematische Formeln.

Wer LaTeX bereits auf seinem Rechner hat, der hat es also gut. In so einem Fall müssen Sie einfach nur MathJax verwenden und können Ihre LaTeX-Formeln direkt auf der Website schreiben. Dabei brauchen Sie sich übrigens nicht um die Formelumgebung zu kümmern, denn das wird beim Einbinden in die Website von MathJax erledigt (für mehr Details lesen Sie meinen Artikel zur Verwendung von MathJax).

Von LaTeXiT (Mac) und MiKTeX (Windows) war bereits weiter oben die Rede, als es um die Erzeugung bzw. den Export von MathML-Formelcode ging. An dieser Stelle habe ich die Links zu diesen Programmen nochmals eingefügt, da sie zusammen mit einer LaTeX-Installation auf dem eigenen Rechner die Grundlage dafür sind, dass man mit mathematischem Markup ganz einfach spielen und experimentieren (und es natürlich auch im Detail lernen) kann.

Mit diesen Werkzeugen steht einem produktiven Workflow auf dem Weg zu schönen mathematischen Formeln auf der eigenen Website nichts mehr im Weg.

Soll ich für das Schreiben von mathematischen Formeln wirklich LaTeX lernen oder reicht doch ein Formeleditor?

Da man sich für das effiziente Schreiben mathematischer Formeln und Inhalte für das WWW sowieso mit irgendeiner Art von Markup auseinandersetzen muss, kann das genauso gut bereits LaTeX sein. Auch wenn es einfacher erscheinen mag, das mathematische Markup (ob LaTeX, MathML oder sonst irgendwas) mit der Hilfe eines Editors mit Buttons für Formelteile zu produzieren, glaube ich nicht, dass das einfache Schreiben von LaTeX Markup in der Praxis zu schlagen ist.

Wer also öfter als zwischendurch Formeln für die Website (oder sonstwo in elektronischen Dokumenten) braucht, der tut gut daran, sich LaTeX anzueignen. Für Gelegenheitsbenutzer ist hingegen ein Formeleditor ausreichend. Das gilt vor allem dann, wenn die zu schreibenden Formeln einfach bleiben, denn dann ist auch die Eingabe im Formeleditor einfach und übersichtlich.

Mathematische Formeln als Grafiken auf Websites einbinden

Bilder in WordPress, einfach erklärt

Eine Lösung des Problems, mathematische Formeln auf Websites darzustellen, habe ich seit den ersten beiden Abschnitten dieses Artikel ignoriert, nämlich Grafiken. Ein Bild einer mathematischen Formel lässt sich genauso einbinden wie jedes andere Bild auf einer Website: problemlos.

Daher ist auch diese Methode eigentlich eine interessante Lösung für unser Problem. Allerdings hat das Einbinden als Grafik auch Nachteile, und zwar:

  • Die Grafik muss in einem Zwischenschritt zwischen Formel-Markup und Website erzeugt werden.
  • Der Markup-Code für jede einzelne Formel muss irgendwie organisiert und gespeichert werden, da auf der Website (also im Zielkontext) ja nur das Bild gespeichert ist, damit man Korrekturen oder andere Änderungen leicht ausführen kann.
  • Bei nötigen Änderungen muss man jedes Mal den Zwischenschritt der Erzeugung wiederholen.
  • Die Grafiken müssen als Bilder optimiert erstellt werden. Entweder, man verwendet skalierbare Vektor-Formate, oder man optimiert Pixel-Formate im Hinblick auf Verwendungszweck, Dateigröße und Dateiqualität.

An diesen Punkten stört mich eigentlich am meisten, dass man den Quellcode irgendwo extra organisieren muss. Denn wer z.B. einen Text mit mehreren Formeln schreibt, der hat dafür dann auch einige Code-Teile herumliegen. Dieser Zusätzliche Aufwand kann mühsam werden, wenn man dann etwas schnell und verlässlich finden will, um es zu verändern.

Allein schon deshalb ist die Grafik-Lösung für mathematische Formeln zwar gangbar, sie skaliert aber sehr schlecht, wenn man viel davon in vielen Dokumenten und Umgebungen, Kontexten, etc. produziert. Obwohl ich das also selbst nicht auf Dauer machen möchte, beschreibe ich im Folgenden trotzdem, wie es geht, denn ab und zu ist so ein Bild einer Formel ja ganz hilfreich, siehe z.B. unsere Beispiel-Formel-Grafik hier in diesem Artikel.

LaTeX Formeln mit LaTeXiT direkt in Grafik-Dateien (pdf, png, jpg) umwandeln und auf der Website einbinden (Mac)

Auf dem Mac verwendet man für die einfache Erzeugung einer Grafik aus LaTeX-Formelcode am besten das Tool LaTeXiT. Es verwendet die vorhandene LaTeX-Installation und besteht aus einem Fenster mit zwei Feldern, einem für die Formel-Eingabe und einem für die Vorschau.

Eine Formel-Grafik mit LaTeXit erzeugen

Nach der Eingabe des Quellcodes im unteren Feld klickt man auf den Button LaTeX it! und erhält die Vorschau. Diese kann auf dem Mac direkt in andere Anwendungen bei gehaltener Maustaste gezogen werden. Alternativ exportiert man die Formel über das Menü Datei und Bild exportieren … in eine Datei. Als Dateityp hat man dabei folgende Möglichkeiten:

Dateiformate, die in LaTeXiT für den Formel-Export zur Verfügung stehen

Pdf ist als Vektorformat grundsätzlich zu empfehlen. Wenn aber in einer bestimmten Umgebung oder Software nur jpg oder png unterstützt werden, dann wählt man eben eins dieser Formate aus. Die fertige Grafik kann dann als Bild auf der Website eingebunden werden. Wie das z.B. in WordPress geht, habe ich in meinem Artikel Bilder in WordPress, einfach erklärt im Detail beschrieben.

MiKTeX-Formeln mit KLatexFormula in Grafiken bzw. Bilder umwandeln und auf der Website einbinden (Windows)

Auch beim auf Windows einwandfrei funktionierenden LaTeX-Setup mit MiKTeX kann man Formeln als Grafiken ausgeben lassen. Dazu installiert man zusätzlich das kleine Programm KLatexFormula. Es funktioniert auf Windows ab XP und braucht als Untergrund eine LaTeX-Installation (auf Windows am besten MiKTeX), sowie eine Python-Installation, wenn man Benutzer-definierte Skripte verwenden will.

Das Prinzip ist das gleiche wie bei LaTeXiT auf dem Mac: Man hat ein Fenster zur Eingabe einer Formel und daraus wird eine Vorschau erzeugt:

Eine LaTeX-Formel auf Windows mit KLatexFormula in eine Grafik umwandeln

Das Resultat kann man sich über die Einstellungen im Programm auch als Datei ausgeben lassen oder per Drag-and-Drop in ein anderes Programm ziehen. Ich habe die Sache selbst auf einem alten Laptop mit Windows XP und MiKTeX ausprobiert, und es hat anstandslos funktioniert (auch der Screenshot kommt von diesem Test). Eine ausführliche Dokumentation des Programms finden Sie auf dessen Seite bei Sourceforge über den obigen Link.

Das fertige Bild kann man dann auf der eigenen Website einbinden, in WordPress kann man Bilder recht einfach auf der Website einbauen.

Die Textfarbe in mathematischen Formeln auf Websites ändern

Die Textfarbe in mathematischen Formeln auf Websites lässt sich grundsätzlich durch CSS-Befehle für das Formel-Markup ändern. Wenn die Formel als Grafik eingebunden wird, muss man die Textfarbe bereits beim Erstellen der Grafik verändern.

Möchte man nur Teile der Formel mit einer anderen Farbe darstellen, dann muss man im Markup bei der Erstellung der Formel für den entsprechenden Formelteil die gewünschte Farbe einstellen. Erwähnenswert ist hier die Handhabung in LaTeX: Verwenden Sie den Befehl \color{red} an einer bestimmten Stelle innerhalb einer Formel, um an dieser Stelle die Textfarbe auf rot zu wechseln.

Wechseln Sie die Farbe zu schwarz zurück oder zu einer anderen, um diese Wahl wieder aufzuheben. Alternativ können Sie den Farbbefehl und die zu färbenden Inhalte oder Zeichen in geschwungene Klammern einschließen, etwa so:  {\color{red} \pi}.

Die Hintergrundfarbe von mathematischen Formeln auf Websites ändern

Die Hintergrundfarbe von mathematischen Formeln auf Websites ist entweder die Farbe des Hintergrunds an der Stelle, wo das Formel-Markup steht, oder die Hintergrundfarbe in der Grafik, welche die Formel darstellt.

Den Hintergrund beim Markup (ob MathML oder LaTeX) ändert man am besten durch CSS (also Stil) Befehle für die entsprechende Stelle und deren Umgebung (z.B. ein <div>). Für eine Formel in einer Grafik muss man den Hintergrund bereits bei der Erstellung entweder transparent lassen oder in der gewünschten Farbe einstellen.

Beide Optionen sind im jeweiligen Grafikprogramm einzustellen. Wenn Sie Transparenz brauchen, dann achten Sie darauf, dass das gewählte Grafikformat diese auch im Hintergrund unterstützt (z.B. png statt jpg).

Animationen von mathematischen Formeln (oder Teilen davon) auf Websites

Animationen sieht man auf modernen Websites, die HTML5 verwenden, beinahe schon als eine Art Standard und fast täglich. Warum sollte man also nicht auch mathematische Formeln animieren wollen? Das ist grundsätzlich mit den Möglichkeiten von HTML5 und modernen JavaScript-Bibliotheken kein Problem.

Um eine Formel nur teilweise zu animieren, z.B. aus ihren Teilen animiert zusammen zu setzen, etc., sollte man allerding davon absehen, sie in grafischer Form zwischenzuspeichern. Dadurch werden die Vorbereitung und Änderungen zu späteren Zeitpunkten etwas unhandlich und kompliziert.

Mathematische Formeln auf der Website? Was ist nun die beste Lösung?

Um auf meinen Websites mathematische Formeln darzustellen, brauche ich eine Lösung die für WordPress funktioniert, weil das ganz einfach meine Präferenz ist. Wichtig ist aber auch, dass die Implementierung auch noch weitere Eigenschaften hat. Dabei sind meine Haupt-Aspekte:

  • Ich möchte, dass die Darstellung von möglichst allen Internet-Browsern unterstützt wird, aber
  • wichtiger ist mir, dass die Darstellung auch noch richtig gut aussieht.
  • Ich persönlich schreibe mathematische Formeln und Gleichungen mit LaTeX. Ideal ist also eine Lösung, bei der es keinen Zwischenschritt zwischen LaTeX und der fertigen Darstellung braucht.
  • Ich muss versuchen, den Aufwand für die Erstellung der Formeln und für Korrekturen daran möglichst gering zu halten.

Wie wir in diesem Artikel gesehen haben, gibt es mit MathML Probleme bezüglich der Browser-Unterstützung direkt im HTML. LaTeX macht tatsächlich schöne Formeln, braucht aber einen Prozessor. Da allerdings die JavaScript-Bibliothek MathJax praktisch Browser-unabhängig ist und überall ansprechende Formeln produziert, ist das die beste Lösung für mich.

Auf WordPress kann man MathJax ganz einfach über ein Plugin einbinden, und der Formel-Code wird direkt im LaTeX-Format im Text abgespeichert, sodass Korrekturen einfach und unmittelbar sind. Daher ist das für mich die ideale Wahl.

Was man bei der Arbeit mit MathJax alles beachten sollte und kann, das habe ich in meinem Artikel MathJax für Anfänger und Quereinsteiger im Detail beschrieben. Wenn sie mir also die Sache mit MathJax glauben, dann lesen Sie am besten gleich dort weiter.

Obwohl ich meine eigene Präferenz also gefunden habe, habe ich in einem anderen Artikel hier auf WebsiteBerater.com alle der hier geschilderten Möglichkeiten noch einmal für den Spezialfall einer WordPress-Website diskutiert. Sie finden diesen Artikel hier auf der Website unter dem Titel Mathematische Gleichungen und Formeln in WordPress.

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich. Lassen Sie unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Andreas Krassnigg