Weird font style when doing name that contains "<number>x<number>"

[Mailstorm-ctrl]

Deployment Type

Self-hosted

NetBox Version

v4.0.1

Python Version

3.10

Steps to Reproduce

1. Make a device (or anything really) and put something similar to 0x3 or 0x2 in the name.

Expected Behavior

A normal looking x in the name

Observed Behavior

A weird style of font on the x.

[bitcollector1]

I saw the same thing on my serial numbers now that you mention it, nice find.

[arthanson]

Looks like from the font-family, interpreting it as a hex code. Didn't even realize that was a thing. I'm not sure, but I think possibly the only way to change this is to change the font that is being used. clicking off the font in the browser developer panel makes it display normally.

[sleepinggenius2]

What you're encountering is font ligatures. You have font-feature-settings: "liga" 0; under the body style in the stylesheet, but it looks like that isn't working as expected. If you also add font-variant-ligatures: none;, that seems to resolve the issue. That might cause other issues in some languages though, so it might be safer to just use font-variant-ligatures: no-contextual; instead.

[DanSheps]

This piqued my interest. Should be simple to solve but I kind of want to learn more about ligatures now.

[DanSheps]

So, did a little poking:

• Not ever font contains ligatures
• Chrome (possibly any Chromium, not sure) requires both font-feature-settings: "liga" 0; and font-variant-ligatures: none;
• font-feature-settings: "liga" 0; completely disables ligatures, so setting font-variant-ligatures: none; also shouldn't be a problem
• For future reference, common-ligatures includes things like fi () ffi th

To fix this, I am going to add the font-variant-ligatures: none; to the CSS. font-feature-settings: "liga" 0; does the same thing however Chrome requires both to be present for some reason.