Getting MathML to render properly in Chrome, Chromium and Brave

The other day I posted about adding mathematical typesetting to this blog using markdown2, LaTeX and MathML. One problem that remained at the end of that was that it looked a bit rubbish; in particular, the brackets surrounding matrices were just one line high, albeit centred, like this:

...rather than stretched to the height of the matrix, like this example from KaTex:

After posting that, I discovered that the problem only existed in Chromium-based browsers. I saw it in Chromium, Chrome and Brave on Android and Linux, but in Firefox on Linux, and on Safari on an iPhone, it rendered perfectly well.

Guided by the answers to this inexplicably-quiet Stack Overflow question, I discovered that the prolem is the math fonts available on Chromium-based browsers. Mathematical notation, understandably, needs specialised fonts. Firefox and Safari either have these pre-installed, or do something clever to adapt the fonts you are using (I suspect the former, but Firefox developer tools told me that it was using my default body text font for <math> elements). Chromium-based browsers do not, so you need to provide one in your CSS.

Using Frédéric Wang's MathML font test page, I decided I wanted to use the STIX font. It was a bit tricky to find a downloadable OTF file (you specifically need the "math" variant of the font -- in the same way as you might find -italic and -bold files to download, you can find -math ones) but I eventually found a link on this MDN page.

I put the .otf file in my font assets directory, then added the appropriate stuff to my CSS -- a font face definition:

@font-face {
    font-family: 'STIX-Two-Math';
    src: url('/fonts/STIXTwoMath-Regular.otf') format('opentype');
}

...and a clause saying it should be used for <math> tags:

math {
    font-family: STIX-Two-Math;
    font-size: larger;
}

The larger font size is because by default it was rendering about one third of the height of my body text -- not completely happy about that, as it feels like an ad-hoc hack, but it will do for now.

Anyway, mathemetical stuff now renders pretty well! Here's the matrix from above, using my new styling:

I hope that's useful for anyone else hitting the same problem.

[Update: because RSS readers don't load the CSS, the bad rendering still shows up in NewsBlur's Android app, which I imagine must be using Chrome under the hood for its rendering. Other RSS readers are probably the same :-(]

Adding mathematical typesetting to the blog

I've spent a little time over the weekend adding the ability to post stuff in mathematical notation on this blog. For example:

It should render OK in any browser released after early 2023; I suspect that many RSS readers won't be able to handle it right now, but that will hopefully change over time. [Update: my own favourite, NewsBlur, handles it perfectly!]

Here's why I wanted to do that, and how I did it.

[ Read more ]