# Browser problems displaying maths Unicode characters

**URL:** https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948
**Category:** General Usage
**Created:** [March 11, 2021, 1:02pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948 "2021-03-11T13:02:51Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 11, 2021, 1:02pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/1 "2021-03-11T13:02:51Z")

</div>

After keno uploaded a short code snippet to a [github gist](https://gist.github.com/Keno/d8faa85dd64c878e0985e25942bce450) 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-vs-firefox](https://global.discourse-cdn.com/julialang/original/3X/d/3/d349a5118ec96fd665b672ab79103d28813c7b91.png)

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.

 ![Screenshot 2021-03-11 at 12.40.05](https://global.discourse-cdn.com/julialang/original/3X/7/e/7e6596353ffcd0a35280e61419c3567564cc2c42.png)

---

<div class="post-metadata">

### Author: ![MarcMush](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/marcmush/32/18006_2.png) [@MarcMush](https://discourse.julialang.org/u/MarcMush)
#### Post date: [March 11, 2021, 1:08pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/2 "2021-03-11T13:08:06Z")

</div>

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

![image](https://global.discourse-cdn.com/julialang/original/3X/0/2/023098b20b0622cd9e707161b6d7fbf34d478e19.png)

---

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 11, 2021, 1:20pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/3 "2021-03-11T13:20:48Z")

</div>

Looks like Consolas? - only a few successful composites… 😞

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 1:29pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/4 "2021-03-11T13:29:57Z")

</div>

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.

 ![image](https://global.discourse-cdn.com/julialang/original/3X/c/b/cb4e2cfae844c501a48227602ae04a66d3627a3a.png)

---

<div class="post-metadata">

### Author: ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)
#### Post date: [March 11, 2021, 1:36pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/5 "2021-03-11T13:36:54Z")

</div>

Using Firefox 86.0 on Ubuntu 20.10, I everything but the overbars are OK, ie  
 ![Screenshot_2021-03-11_14-35-04](https://global.discourse-cdn.com/julialang/original/3X/f/4/f4c186b4932eb0538dd37a18d9b3b0e554e92478.png)  
though some extra space below the arrows would be great too.

(If you open an issue for Firefox, please link it here.)

---

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 11, 2021, 1:59pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/6 "2021-03-11T13:59:26Z")

</div>

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:

 ![Screenshot 2021-03-11 at 13.58.13](https://global.discourse-cdn.com/julialang/original/3X/a/0/a0fcb75e67907d035a787b84894399eb8f4769db.png)

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 2:09pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/7 "2021-03-11T14:09:52Z")

</div>

This is my font config:

![image](https://global.discourse-cdn.com/julialang/original/3X/a/3/a371cf2c0b58ef09e2b2d321fbbf00ed3099f39d.png)

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:

![image](https://global.discourse-cdn.com/julialang/original/3X/0/4/04d3596d15a1c35c87db805c6131e4183bc51359.png)

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

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 2:15pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/8 "2021-03-11T14:15:13Z")

</div>

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

![image](https://global.discourse-cdn.com/julialang/original/3X/4/7/4736d66d6929502eeec08d0c6b3f8a9f2a9653bc.png)

and Julia Mono:

![image](https://global.discourse-cdn.com/julialang/original/3X/9/c/9c9db3324045eada5ac8286916ef77354c6864b9.png)

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

---

<div class="post-metadata">

### Author: ![sijo](https://avatars.discourse-cdn.com/v4/letter/s/da6949/32.png) [@sijo](https://discourse.julialang.org/u/sijo)
#### Post date: [March 11, 2021, 2:16pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/9 "2021-03-11T14:16:32Z")

</div>

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`](https://mono-math.netlify.app/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`.

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 2:17pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/10 "2021-03-11T14:17:10Z")

</div>

> [@cormullion](#):
>
> 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:

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

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 2:20pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/11 "2021-03-11T14:20:09Z")

</div>

> [@sijo](#):
>
> I added an `extras.html` page to my website with this sample to compare the fonts directly (as shaped by HarfBuzz)

This is how JuliaMono on your website renders for me:

![image](https://global.discourse-cdn.com/julialang/original/3X/7/5/75af1c0af97d72f6cebaa2a13cc154a0c5512888.png)

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

---

<div class="post-metadata">

### Author: ![sijo](https://avatars.discourse-cdn.com/v4/letter/s/da6949/32.png) [@sijo](https://discourse.julialang.org/u/sijo)
#### Post date: [March 11, 2021, 2:23pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/12 "2021-03-11T14:23:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 2:31pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/13 "2021-03-11T14:31:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 11, 2021, 2:43pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/14 "2021-03-11T14:43:50Z")

</div>

> [@sijo](#):
>
> For example this shows that Liberation Mono is missing `\overleftarrow`

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

---

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 11, 2021, 2:56pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/15 "2021-03-11T14:56:13Z")

</div>

> [@mbaz](#):
>
> Note that the apostrophes are still incorrect; they should be slanted.

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

---

<div class="post-metadata">

### Author: ![baggepinnen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/baggepinnen/32/693_2.png) [@baggepinnen](https://discourse.julialang.org/u/baggepinnen)
#### Post date: [March 11, 2021, 8:05pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/16 "2021-03-11T20:05:06Z")

</div>

![Screenshot_20210311-210353](https://global.discourse-cdn.com/julialang/original/3X/4/3/437236133b6d78e506ea55c6f61f07ff5970dc34.jpeg)  
Looks great in chrome for Android 😂

---

<div class="post-metadata">

### Author: ![mbaz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbaz/32/17295_2.png) [@mbaz](https://discourse.julialang.org/u/mbaz)
#### Post date: [March 11, 2021, 11:52pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/17 "2021-03-11T23:52:50Z")

</div>

> [@sijo](#):
>
> Maybe you have an older version of JuliaMono? The website shows SVG images generated from the latest version (0.035 from 3 days ago).

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.

---

<div class="post-metadata">

### Author: ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 12, 2021, 11:48am UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/18 "2021-03-12T11:48:05Z")

</div>

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

First, [github.com/gist.github.com](http://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](https://bugzilla.mozilla.org/show_bug.cgi?id=1500531) 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](http://github.com) is usually, but not always, rendered with 100% accuracy, and will vary in appearance from OS to OS and browser to browser.

Thanks for sharing your screenshots!

---

<div class="post-metadata">

### Author: ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)
#### Post date: [March 12, 2021, 11:57am UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/19 "2021-03-12T11:57:54Z")

</div>

You can simply add e.g.

```julia
.blob-code-inner {
    font-family: JuliaMono;
}

```

as a user style for [github.com](http://github.com) if you have the font installed locally:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/b/d/bdcc67a077fc477e1f4d253d265c37d555ecda0a.png)

---

<div class="post-metadata">

### Author: ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)
#### Post date: [March 12, 2021, 3:30pm UTC](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948/20 "2021-03-12T15:30:14Z")

</div>

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.

[Next page](https://discourse.julialang.org/t/browser-problems-displaying-maths-unicode-characters/56948.md?page=2)
