Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

February 12, 2023

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):

    V 1×V 2=∣i j k ∂X∂u ∂Y∂u 0 ∂X∂v ∂Y∂v 0 ∣ \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}

    |f(z)−f(a)1−f(a)¯f(z)|≤|z−a1−a¯z| \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

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

    P 1(Y) → P 1(X) ↓ ⇓∼ ↓ T′ → T \begin{matrix} P_1(Y) &\to& P_1(X) \\ \downarrow &\Downarrow\mathrlap{\sim}& \downarrow \\ T' &\to& T \end{matrix}

    p 3(x)=(12)(x−12)(x−34)(x−1)(14−12)(14−34)(14−1)+(12)(x−12)(x−34)(x−1)(14−12)(14−34)(14−1)+(12)(x−12)(x−34)(x−1)(14−12)(14−34)(14−1)+(12)(x−12)(x−34)(x−1)(14−12)(14−34)(14−1) 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 (iD+m)ψ=0 \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.

Posted by distler at 11:02 PM | Permalink | Post a Comment