Im Artikel über Matrix-Generierung habe ich zum ersten Mal MathML benutzt. Um zu einer korrekten Darstellung in WordPress zu kommen, musste ich etwas Tricksen. Was genau zu tun ist, beschreibe ich hier.
Das Layout von nerdpause ist bereits in HTML5 geschrieben (erkennbar am als erster Zeile der Ausgabe), so dass Math ML ohne weitere Probleme benutzt werden kann. Sollte das Layout noch in XHTML 1.1 verfasst sein, muss der DocType um die Angabe zu MathML erweitert werden, sie lautet dann .
Wie man MathML-Code schreibt, ist in vielen Artikeln und Blogs beschrieben, zum Beispiel hier von Danijel Gorupec, aber auch der (englische) Wikipedia-Artikel bietet für den Einstieg einige Beispiele. Der Deutsche taugt natürlich mal wieder nichts und verdient im aktuellen Zustand keinen Link.
Die wesentliche Struktur von MathML-Code ist eher langatmig. Der Formel aus dem Satz von Pythagoras,
, sieht etwa so aus:
<math>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
<mtext>, wobei </mtext>
<mi>a</mi>
<mo>,</mo>
<mi>b</mi>
<mo>,</mo>
<mi>c</mi>
<mo>∈</mo>
<mi>ℝ</mi>
</math>Dabei ist vor allem zu beachten, dass der Mathematik-Bereich von <math> umschlossen wird. Das Element math kann entweder inline oder als Block dargestellt werden, was über CSS geregelt werden kann (analog z.B. zu span oder div).
Im Standardverhalten von WordPress ist das Ergebnis jedoch grauenhaft. Es werden zahllose Leerzeilen eingefügt, ein Blick in den Code der übertragenen Seite zeigt viele zusätzliche <p> und <br>-Tags. Das ist ein bekannter Bug, der jedoch schon seit 4 Jahren nicht gefixt wird. Angeblich weil das Einflüsse auf Rückwärtskompatibilität hätte. Dass man bei Verwendung der Auto-Format-Funktion von WordPress auf MathML in der selbst geschriebenen Variante komplett verzichten muss wird dabei nicht berücksichtig.
Wie behebt man das ganze nun? Ganz einfach!
In WordPress gibt es die Funktion wpautop, die bestimmte Formatierungen automatisch durchführt. Eigentlich ganz praktisch, damit kann man Absätze erzeugen, indem man einfach leere Zeilen einfügt, ähnlich wie bei LaTeX. Die Methode fügt die Absätze noch an weiteren Stellen ein, unter anderem auch nach math-Umgebungen. Um das Verhalten zu ändern, muss man einfach die datei wp-includes/formatting.php öffnen und eine Zeile wie folgende suchen:
// Space things out a little $allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|option|form|map|area|blockquote|address|style|p|h[1-6]|hr|fieldset|noscript|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
In der Variable allblocks sind alle Bereiche definiert, die als Block dargestellt werden sollen. Man muss dort einfach den Teil |math| löschen, und die Darstellung von MathML klappt problemlos!