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.
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.
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.
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.
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.
It seems to me the lesson from all of this fudging and fixing is do not use fancy unicode stuff in your code. You will cause someone else headaches and for some people looking at your code it will look like garbage.
