NA of Moles

The dire state of MathML support

What is the state of MathML in 2023? Can we finally use it and forget about MathJax or Katex for the time being?

Let’s try something simple: I’m going to put a Latex expression and see how Katex compares to “raw” MathML code generated by the coutless renderers you can find online:

Latex Code:

Show Latex Code
\vec x \equal 
\begin{bmatrix}

\begin{pmatrix}
1 & 2 & 3\\
a & b & c
\end{pmatrix}
&
\begin{pmatrix}
4 & 5 & 6\\
d & e & f
\end{pmatrix}
\\
\begin{pmatrix}
6 & 5 & 4\\
z & y & x
\end{pmatrix}
&
\begin{pmatrix}
3 & 2 & 1\\
r & s & t
\end{pmatrix}

\end{bmatrix}

\begin{bmatrix}
\pi \\ \pi/2 \\ \frac{\pi}{3} \\ 3\pi \\ \pdv{f}{t} \\ \alpha
\end{bmatrix}

+
\vec {z^T} \vec g
\begin{bmatrix}

\begin{pmatrix}
1 & 2 & 3\\
a & b & c
\end{pmatrix}
&
\begin{pmatrix}
4 & 5 & 6\\
d & e & f
\end{pmatrix}
\\
\begin{pmatrix}
6 & 5 & 4\\
z & y & x
\end{pmatrix}
&
\begin{pmatrix}
3 & 2 & 1\\
r & s & t
\end{pmatrix}

\end{bmatrix}

\begin{bmatrix}
\pi \\ \pi/2 \\ \frac{\pi}{3} \\ 3\pi \\ \pdv{f}{t} \\ \alpha
\end{bmatrix}

+ \sum_{i=\vec {x_0}}^{\vec {x_n}}g(\vec x_i)\Lambda_2

Katex Rendering

$$ \vec x = \begin{bmatrix}\begin{pmatrix}1 & 2 & 3\\a & b & c\end{pmatrix}&\begin{pmatrix}4 & 5 & 6\\d & e & f\end{pmatrix}\\\begin{pmatrix}6 & 5 & 4\\z & y & x\end{pmatrix}&\begin{pmatrix}3 & 2 & 1\\r & s & t\end{pmatrix}\end{bmatrix}\begin{bmatrix}\pi \\ \pi/2 \\ \frac{\pi}{3} \\ 3\pi \\ \frac{\partial f}{\partial t} \\ \alpha\end{bmatrix}+\vec {z^T} \vec g\begin{bmatrix}\begin{pmatrix}1 & 2 & 3\\a & b & c\end{pmatrix}&\begin{pmatrix}4 & 5 & 6\\d & e & f\end{pmatrix}\\\begin{pmatrix}6 & 5 & 4\\z & y & x\end{pmatrix}&\begin{pmatrix}3 & 2 & 1\\r & s & t\end{pmatrix}\end{bmatrix}\begin{bmatrix}\pi \\ \pi/2 \\ \frac{\pi}{3} \\ 3\pi \\ \frac{\partial f}{\partial t} \\ \alpha\end{bmatrix}+ \sum_{i=\vec {x_0}}^{\vec {x_n}}g(\vec x_i)\Lambda_2 $$

MathML with default font family

x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2

They should render pretty similar depending on your browser. For example on Windows 11 it works “fine” on both Chrome and Firefox while on Android I’ve encountered some errors in Chrome.

What if we wanted to change the font to have a better control and fix some of the shortcomings of default fonts?

My choice went on Asana, Firamath, GFSNeohellenicMath, Stix 2 and TEX Gyre Schola:

Font family: Asana
x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2
Font family: Firamath
x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2
Font family: FSNeohellenicMath
x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2
Font family: STIXTwo
x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2
Font family: TexGyreSchola
x → = [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + z T → g → [ ( 1 2 3 a b c ) ( 4 5 6 d e f ) ( 6 5 4 z y x ) ( 3 2 1 r s t ) ] [ π π ⁄ 2 π 3 3 π ∂ f ∂ t α ] + ∑ i = x 0 → x n → g ( x → i ) Λ 2

The parenthesys behaviour on the multiline parts is a bit heptic on Chrome, on the other hand Firefox works fine with all of them.

The problem with Firefox is that it doesn’t recognize the max-width=100% and overflow: auto hidden so it goes beyond the page layout in the MathML sections, while Katex works just fine. If you know if that’s a bug in Firefox or an error of mine please get in touch with me.

One solution might be to try to keep all the math parts as compact as possible while using one of the working fonts but that’s really limiting tbh.

For now I decided to reamain on client-side Katex with default output settings, despite the overhead of the JS library the user experience and mantainability is just better that way.

Tags: