# Browser problems displaying maths Unicode characters

After keno uploaded a short code snippet to a github gist I noticed that my browser (Safari on macOS) wasn’t rendering some of his code correctly there, particularly the glyph compositions (eg where two characters such as U+2202 (\partial, ∂) and U+20D6 (\aboveleftarrow, ⃖) are combined to make (∂⃖) as a single composite character. (Physicists particularly love these!)

Further investigation suggested that this might be either a browser problem or a font problem. I compared the two browsers I had, Safari and Firefox. Here’s a screenshot of the two side by side; the green circles show the correctly-made characters that the other browser renders incorrectly (shown in red).

Safari looks to be generally better than Firefox. It’s odd that each browser has its own apparently unique problems, even though both are using the same system font, SF Mono.

So I’m interested to find out whether other browsers on other operating systems have these or similar problems, or whether there are issues with the fonts that Github specifies (which can’t be changed, unfortunately)? If you’ve got a spare moment, could you see whether your set-up is showing the same issues as mine, or are they working better (or worse)?

For reference, here’s the file as rendered (correctly I think) in Vim on macOS.

here is what it looks like for me in Chrome (Windows)

1 Like

Looks like Consolas? - only a few successful composites…

This is Firefox on Linux. It’s interesting that it can do the overbar on alpha, but not over gamma, beta or delta. It also fails at the double overbar. I believe the apostrophes are incorrect too, they should be slanted.

2 Likes

Using Firefox 86.0 on Ubuntu 20.10, I everything but the overbars are OK, ie

though some extra space below the arrows would be great too.

1 Like

I think Linux is using Liberation Mono, so those problems look like they’re caused by the browser, judging from this sample of Liberation Mono:

This is my font config:

I changed the mono font to Liberation Mono, disallowed pages from choosing their own font, and opened the gist in “raw” mode. I get the same thing as before:

I would tend to agree that this is a firefox issue.

1 Like

This is Iosevka. It looks correct, except for legibility of ∂⃖:

and Julia Mono:

Now I think it is actually a font issue, or at least an interaction between certain fonts and the browser.

2 Likes

According the the Chrome dev tools (tested on Ubuntu), GitHub asks for the font SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;. I think on Linux this will most often be Liberation Mono, but for missing characters it will fall back on who knows which font…

I added an extras.html page to my website with this sample to compare the fonts directly (as shaped by HarfBuzz): For example this shows that Liberation Mono is missing \overleftarrow.

1 Like

Note that the apostrophes are still incorrect; they should be slanted.

1 Like

This is how JuliaMono on your website renders for me:

I wonder why it renders the leftarrow in a more legible way than github. It’s the same font!

Maybe you have an older version of JuliaMono? The website shows SVG images generated from the latest version (0.035 from 3 days ago).

That must be it. My version is 0.032, and the arrow also looks wrong in vim.

Ah, yes, the system is loading the STIXGeneral font for that character.

Yes, I think Liberation Mono and RobotoMono are fonts that use vertical marks for \prime (2032).

Looks great in chrome for Android

2 Likes

Indeed, updating to 0.035 did it. While I’m at it: Iosevka 5.0.5 is out; you are still using 4.1.1.

2 Likes

So I think there are a few things going on here.

First, github.com/gist.github.com ‘asks’ for certain fonts, and it’s not possible to override this (due to CORS restrictions?). So the code has to be set in SF Mono, Liberation Mono, Consolas, and so on. Not all these fonts have all the necessary glyphs, and so some font substitution occurs.

But this font substitution can prevent accurate positioning of glyphs. Firefox has open issues about how the browser doesn’t currently analyze the geometry of glyphs from more than one font in order for them to work together. It’s possible that Safari also has problems here when glyphs from more than one font have to be assembled; it has different problems, anyway, and I suppose Chrome has its own share of rendering issues too.

So, code viewed on github.com is usually, but not always, rendered with 100% accuracy, and will vary in appearance from OS to OS and browser to browser.

1 Like

.blob-code-inner {