Abstract
Dieser Artikel fasst die Ergebnisse einer interessanten Diskussion auf Twitter zusammen, die sich um die Darstellung mathematischer Formeln im Web drehte. Ausgangspunkt war ein anderer Artikel von Nordhessische.de, in dem Formeln aus LibreOffice als
Hintergrund
Ausgangspunkt war eine Frage zur Formeldarstellung im Artikel über das Überholen. Die dort notierten Gleichungen sind vorher in einem OpenOffice-Dokument erstellt und dann als SVG gespeichert worden. Die einzelnen Vektorgrafiken kamen dann per Copy&Paste ins HTML-Dokument. Damit geht allerdings die Semantik der Formel-Bestandteile verloren, die man mit MathML viel besser darstellen könnte – wenn diese Sprache denn besser von den Browsern unterstützt würde.
Obwohl das World Wide Web und seine Sprache HTML (und die ganzen Entwicklungen danach wie XML, MathML, SVG, …) aus dem Akademischen kommt, werden akademische Anforderungen wie z.B. Formeln stiefmütterlich oder richtige Abbildungen (figure kam erst mit HTML5) erst sehr spät behandelt. Ironie des Schicksals ist, dass in der allerersten HTML-Version HTML+ mathematische Formeln vorgesehen waren. In allen späteren HTML-Versionen fehlt diese Funktionalität wieder. In XHTML wäre MathML als XML-Dateninsel möglich gewesen, aber nun ja, XML ist in der Webentwicklung nie richtig angekommen …
LaTeX-Formeln als SVG
Im Verlauf der Twitter-Diskussion kam der Nutzer @stefanolix mit dem Vorschlag die LaTeX-Dokumentenklasse standalone zu verwenden um die Ecke. Der Ansatz ist daraus eine „kleine“ PDF zu erstellen, die nur die Formel enthält und diese PDF dann mit pdf2svg in eine SVG umzuwandeln. Da die Formelelemente als Pfade und nicht als Zeichen in SVG gespeichert werden, sind die Darstellungen unabhängig von installierten Schriftarten und können z.B. mit Inkscape in weitere Formate wie PNG oder andere Vektorgrafiken umgewandelt werden.
Ein Beispiel
Nehmen wir die Schrödinger-Gleichung als Beispiel:
Der LaTeX-Code dafür sieht wie sehr übersichtlich aus:
\documentclass{standalone}
\begin{document}
$
\hat{H} = -\frac{\hbar^2}{2m} \frac{\partial^2}{\partial x^2} + \hat{V}
$
\end{document}Die oben gezeigten Grafiken sind daraus wie folgt entstanden:
- PDF erzeugen mit pdflatex formel.tex
- SVG erzeugen mit pdf2svg formel.pdf formel.svg
- (optional) PNG erzeugen mit inkscape -e formel.png -d 300 formel.svg
Mehrzeilige Abbildungen
Mit der Option varwidth für die Dokumentenklasse standalone lassen sich auch mehrzeilige Abbildungen erstellen. Dabei ist allerdings selbst auf die Größe und ggf. notwendige Zeilenumbrüche zu achten.
\documentclass[varwidth]{standalone}
\usepackage{xcolor}
\usepackage{listings}
\lstset{language=[Latex]TeX,%
keywordstyle=\color{brown}\bfseries,%
}
\usepackage{graphicx}
\begin{document}
\vspace{.5em}
\LaTeX:
\begin{lstlisting}
$
\hat{H} = -\frac{\hbar^2}{2m}
\frac{\partial^2}{\partial x^2} + \hat{V}
$
\end{lstlisting}
{\Large $\Rightarrow$}
$
\hat{H} = -\frac{\hbar^2}{2m}
\frac{\partial^2}{\partial x^2} + \hat{V}
$ als Formel oder \includegraphics{formel.png} als Bild
\vspace{2em}
\end{document}In diesem Beispiel ist außerdem noch ein externes Bild mit includegraphics eingebettet. Das Bild wird als solches ins PDF generiert und landet auch genau so als image in der SVG – direkt eingebettet als so genannte data-URL.
