In TYPO3 Formeln mit LaTex richtig schön darstellen

Wer wissenschaftliche Arbeiten darstellen will, kommt an Formeln nicht vorbei. Hier zeigen wir, wie man die ganze Welt der griechischen Buchstaben, der mathematischen Brüche und der chemischen Reaktionen auf seiner Website zum Leben erweckt.

Formeln – oh Gott, bleib mir weg!

Das denken vermutlich viele, die Mathe schon in der Schule gehasst haben – also die meisten von uns. Aber trotzdem: Schon bei dem allgegenwärtigen Kohlendioxid (CO2) fangen die Formeln ja an.

Genau betrachtet, ist CO2 eine (sehr einfache) chemische Formel, und schon die tiefergestellte "2" macht oft Probleme. In manchen Texten sieht man "CO2" und schon weiß nur der Eingeweihte, was wirklich gemeint ist.

Werden die chemischen Formeln länger, wird es schnell komplizierter:  Bei Methan $(CH_4)$ reichen tiefergestellte Zahlen; beim dreifach geladenen Aluminium-Ion $(\ce{Al^{3+}})$ braucht man hochgestellte Zeichen und beim zweifach gelandenen Anion des Chroms $(\ce{Cr2O^{2-}7})$ schon beides gleichzeitig.

Dasselbe gilt bei physikalischen Formeln, wenn man z.B. das häufigste Uran-Isotop genau bezeichnen möchte: $^{238}_{92}U $. Auch hier braucht man hoch- und tiefgestellte Zahlen, nur diesmal vor den Textzeichen.

Noch schlimmer wird es bei mathematischen Formeln. Jeder kennt Summen $(a+b)$, Quadrate $(x^2)$ und quadratische Gleichungen $(ax^2+bx+c=0)$. Doch wie bringt man deren Lösung $({\displaystyle x_{1,2}={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}})$ auf lesbare Weise auf seine Website?

LaTex und MathJax eilen zur Hilfe

Um solche typografische Zauberei auf seine Website umzusetzen, kann man zum Glück auf mächtige Werkzeuge zurück greifen.

  • Das erste davon ist LaTex, ein Textverarbeitungsprogram, mit dem ganze Bücher und Doktorarbeiten erstellen kann, aber auch unter anderem die oben dargestellten Formeln.
  • Das zweite ist MathJax, eine Java-Script-Bibliothek, die mit der LaTex-Notation umgehen kann und Formeln und alle möglichen Sonderzeichen auf den Bildschirm zaubert.

Kleiner Exkurs: Wie man Formeln schreibt

LaTex ist ein Text-Editor, der in der wissenschaftlichen Welt ausgesprochen weit verbreitet ist. Sein Grundprinzip ist, dass jede Eingabe mit einer normalen Tastatur zur bewältigen sein muss.

Aus dem Universum der Möglichkeiten soll hier nur die Darstellung von Formeln gezeigt werden.

Ein Quadrat schreibt man im Editor so: {b^{2}-4ac} und erhält ${b^{2}-4ac}$.

Darum herum setzt man dann eine Wurzel: {\sqrt {b^{2}-4ac}} und erhält ${\sqrt {b^{2}-4ac}}$.

Vor die Wurzel ergänzt man ein plus-minus-Zeichen \pm {\sqrt {b^{2}-4ac}}, was dann so aussieht: $\pm {\sqrt {b^{2}-4ac}}$.

Umhüllt man das ganze mit einem Bruchstrich {\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}, so hat man die rechte Seite der obigen Gleichung geschafft: ${\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}$

Ganz einfach.

Nun ja... für Wissenschaftler, Nerds oder Programmierer mag das naheliegend sein. Allen anderen gleitet es vielleicht nicht so aalglatt aus dem Ärmel.

Aber egal: Es funktioniert!

MathJax in TYPO3 integrieren

Um die Formeln im Frontend in die richtigen Zeichen umwandeln zu lassen, muss man zunächst das Paket "MathJax" laden. Wir laden solche Fremdquellen nach Möglichkeit vom eigenen Server, um Probleme mit der DSGVO zu vermeiden.

Also laden wir MathJax als npm-Modul und extrahieren von dort den Unterordner node_modules/mathjax/es5 in unsere eigene Anwendung. In der TYPO3-Installation binden wir dann das File tex-chtml.js aus dem gerade geladenen Paket ein. Es ist dafür zuständig, die LaTex-Notation in html umzuwandeln.

Als letztes kann man noch eigene Konfigurationen im Javascript setzen:

window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  chtml: {
    scale: 1,
    minScale: 0.8
  }
};

In Zeile 3 legt man fest, mit welchen Steuerzeichen inline-Formeln erkannt werden sollen. Wir nehmen alles was, zwischen zwei Dollar-Zeichen steht \$FORMEL\$ oder was zwischen Backslash-Klammern steht \\(FORMEL\\)

Mit den Größenangaben in Zeile 6 und 7 kann man herumspielen, bis die Größe der Formeln zur Schrift passt.

Ist alles richtig zusammengebaut, passiert das Erstaunliche: Für den Bruchteil einer Sekunde wird zunächst der originale Formel-Text geladen, dann verwandelt das Javascript von MathJax die wenigen Zeichen in ein ganzes Labyrinth von html-Bausteinen, die sich erstaunlicherweise zu einer komplexen Formel zusammenfinden. Man kann nur ahnen, wie viele Arbeits-Jahre in diesem Prozess stecken!

TYPO3 macht glücklich

Mit diesen Tricks macht TYPO3 Wissenschaftler richtig glücklich. Denn auch wenn man keine Formeln mag, so muss man doch zugeben, dass sie mit Hilfe von LaTex und MathJax viel lesbarer aussehen.

Brauchen Sie Hilfe beim Umsetzen von Formeln? Wir unterstützen Sie gerne - und sind nur einen Telefonanruf entfernt.