Musings

MathML in Chrome

Thanks to the hard work of Frédéric Wang and the folks at Igalia, the Blink engine in Chrome 109 now supports MathML Core.

It took a little bit of work to get it working correctly in Instiki and on this blog.

• The columnalign attribute is not supported, so a shim is needed to get the individual <mtd> to align correctly.
• This commit enabled the display of SVG embedded in equations and got rid of the vertical scroll bars in equations.
• Since Chrome does not support hyperlinks (either href or xlink:href attributes) on MathML elements, this slightly hacky workaround enabled hyperlinks in equations, as created by \href{url}{expression}.

There are a number of remaining issues.

• Math accents don’t stretch, when they’re supposed to. Here are a few examples of things that (currently) render incorrectly in Chrome (some of them, admittedly, are incorrect in Safari too):

  $$\mathbf{V}_{1} \times \mathbf{V}_{2} = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}$$

  $$\left\vert\frac{f(z)-f(a)}{1-\overline{f(a)}f(z)}\right\vert\le \left\vert\frac{z-a}{1-\overline{a}z}\right\vert$$

  $$\widetilde{PGL}(N)$$

  $$\begin{matrix} P_1(Y) &\to& P_1(X) \\ \downarrow &\Downarrow\mathrlap{\sim}& \downarrow \\ T' &\to& T \end{matrix}$$

  $$p_3 (x) = \left( {\frac{1}{2}} \right)\frac{{\left( {x - \frac{1}{2}} \right)\left( {x - \frac{3}{4}} \right)\left( {x - 1} \right)}}{{\left( {\frac{1}{4} - \frac{1}{2}} \right)\left( {\frac{1}{4} - \frac{3}{4}} \right)\left( {\frac{1}{4} - 1} \right)}} + \left( {\frac{1}{2}} \right)\frac{{\left( {x - \frac{1}{2}} \right)\left( {x - \frac{3}{4}} \right)\left( {x - 1} \right)}}{{\left( {\frac{1}{4} - \frac{1}{2}} \right)\left( {\frac{1}{4} - \frac{3}{4}} \right)\left( {\frac{1}{4} - 1} \right)}} + \left( {\frac{1}{2}} \right)\frac{{\left( {x - \frac{1}{2}} \right)\left( {x - \frac{3}{4}} \right)\left( {x - 1} \right)}}{{\left( {\frac{1}{4} - \frac{1}{2}} \right)\left( {\frac{1}{4} - \frac{3}{4}} \right)\left( {\frac{1}{4} - 1} \right)}} + \left( {\frac{1}{2}} \right)\frac{{\left( {x - \frac{1}{2}} \right)\left( {x - \frac{3}{4}} \right)\left( {x - 1} \right)}}{{\left( {\frac{1}{4} - \frac{1}{2}} \right)\left( {\frac{1}{4} - \frac{3}{4}} \right)\left( {\frac{1}{4} - 1} \right)}}$$

• This equation $$\boxed{(i\slash{D}+m)\psi = 0}$$ doesn’t display remotely correctly, because Chrome doesn’t implement the <menclose> element. Fixed now.

• …

But, hey, this is amazing for a first release.

Update:

I added support for \boxed{} and \slash{}, both of which use <menclose>, which is not supported by Chrome. So now the above equation should render correctly in Chrome. Thanks to Monica Kang, for help with the CSS.