Weird ligature + zoom font bug (Fira Code)

[Andrew15-5]

Description

Why the ligature from Fire Code only looks normal at the 150% zoom in the browser? Looks like it is being cut out or overlapped by nothingness.

100%: 100% < zoom < 150%: 150%:

reported used font settings


Discord: 100%: 150%:

reported used font settings


OP

Reproduction URL

No response

Browsers

Firefox

OS

Linux

[Andrew15-5]

It looks like it's not entirely Typst's fault (https://github.com/typst/typst/pull/3393/files):

(so it's not only #{, but also #[ and probably something else too)

pub struct TableCell {
    /// The cell's body.
    #[required]
    body: Content,
    pub body: Content,
}

Screenshot


Further findings

Here is a code:

#[required]

#[required]

Here is how it is made and how it looks for me (on the GitHub):

This means that specifying a language, i.e., syntax highlighting, does make a difference, which I didn't expect.

But then looking at this (Discord):

I now know that the hunch before only applies to that specific website and not on the concept (of syntax highlighting) in general (on all websites).

Now need to figure out what Typst and GitHub have in common and how are they different from Discord. The findings hopefully should help with that.

[Andrew15-5]

Oh, ok. Now I know why I even encountered this bug (or why it appeared). I disabled the "website's fonts" in Firefox font settings:

Enabling it back again make this bug disappear...on GitHub, but it is still present in Typst.

I also disabled a custom CSS for discord.com that applies the Fira Code font. It didn't change anything. So it's out of the equation.

[laurmaedje]

Typst uses Cascadia Mono for what it's worth.

[Andrew15-5]

Why does this matter if I set Fira Code in the project's settings? (under the Vim mode toggle)

[laurmaedje]

I doesn't, but I didn't know that you did. I missed it.

[Andrew15-5]

Fair. I didn't mention it here, but I did talk about it in the contributors thread, IIRC.

[Andrew15-5]

Wanted to add a bit. I see this weird ligature bug more and more on different websites. So now I just felt like checking if this is a Firefox problem or not. Well, it looks like it is, at least for a single example.

https://dioxuslabs.com/blog/release-050:

Firefox


Ungoogled Chromium


https://github.com/typst/typst/pull/3393/files:

Firefox

 Here the `||` looks normal, all of a sudden: 

Ungoogled Chromium

 

Firefox is installed through apt and Ungoogled Chromium through flatpak. Both see my system fonts, so they both should use the same "Fira Code" font, which means that this should be a fair/clean comparison.

I also tried "FiraCode Nerd Font*" which gave the same result. So it's not a corrupted font file.

So my guess is either this is a "Fira Code only" problem (I don't know about other ligature-enabled fonts), and/or a Firefox-only problem. (And yet on Discord the code looks perfectly fine on Firefox.) Need to ask their maintainers.