JetBrains / JetBrainsMono

JetBrains Mono – the free and open-source typeface for developers
https://jetbrains.com/mono
SIL Open Font License 1.1
10.57k stars 299 forks source link

Rendering issue with code highlighting in gitlab/Firefox #621

Open last-partizan opened 1 year ago

last-partizan commented 1 year ago

I found #261, and i hope this is right place to report similar issue.

In gitlab code reviews symbol := is rendered without : at small font sizes (13px at my system).

Gitlab produces following html for this:

<span class="p">:</span><span class="o">=</span>

And you can observe the issue here (font needs to be installed on the system, i'm using arch linux with ttf-jetbrains-mono 2.304-1):

https://jsfiddle.net/last_partizan/p4832tsh/5/

But, after some investigation, i found out when using webfonts, and not system one, issue is not reproduced:

https://jsfiddle.net/last_partizan/p4832tsh/7/

So, i created following html file and tested it locally:

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: "JetBrains Mono File";
            src: url(JetBrainsMono-Regular.ttf);
        }

        .line {
            font-family: "JetBrains Mono File";
            font-size: 13px;
        }

        .line-s {
            font-family: "JetBrains Mono";
            font-size: 13px;
        }
    </style>
</head>

<body>

    <h1>The @font-face Rule</h1>

    <div>
        <h2>File font</h2>
        <span class="line" lang="python"> <span class="k">if</span> <span class="n">tz_name</span> <span
                class="p">:</span><span class="o">=</span> <span class="n">request</span><span class="p">.</span><span
                class="n">COOKIES</span><span class="p">.</span><span class="n">get</span><span class="p">(</span><span
                class="s">"django_timezone"</span><span class="p">):</span></span>
    </div>
    <div>
        <h2>System font</h2>
        <span class="line-s" lang="python"> <span class="k">if</span> <span class="n">tz_name</span> <span
                class="p">:</span><span class="o">=</span> <span class="n">request</span><span class="p">.</span><span
                class="n">COOKIES</span><span class="p">.</span><span class="n">get</span><span class="p">(</span><span
                class="s">"django_timezone"</span><span class="p">):</span></span>
    </div>
</body>

</html>

Font file used (matches md5 sum from downloaded release JetBrainsMono-2.304.zip):

> md5sum /tmp/JetBrainsMono-Regular.ttf
d09f65145228b709a10fa0a06d522d89  /tmp/JetBrainsMono-Regular.ttf

And it looks like this on my system:

image

image

Other information that may be relevant:

Looks like, for some reason firefox renders fonts differently when using web fonts and system fonts.

After all this investigation, i'm not so sure i should post it here, maybe firefox bug tracker is best place for this. But, #261 is resolved, so maybe this can be resolved too. Or maybe you can provide some additional feedback so i can include it in bug report to Firefox.