Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1️⃣ through 9️⃣ and #️⃣ aren't rendering properly in Chrome/Edge #371

Closed
tannerlyons opened this issue Apr 26, 2021 · 6 comments

Comments

@tannerlyons
Copy link

tannerlyons commented Apr 26, 2021

Describe the bug

This font contains a glyph for U+20E3. Because that character is part of the keycap emoji ligature, and ligatures don't render unless every character is in the same font, Chrome isn't able to fall back to the system emoji font to render the whole ligature.

[edit]: OK I don't actually think I know enough about fonts to assert the previous statement as the cause of this bug. This is what I believe is happening though and I hope font experts can take it from here.

The only solution we've found so far is to monkeypatch the font and delete the glyph. Any other suggestions would be appreciated.

To Reproduce
Steps to reproduce the behavior:

  1. Use Inter in chrome
  2. Try and render the emoji 1️⃣ through 9️⃣ and #️⃣

See the repro: https://codesandbox.io/s/white-pine-hiwyf?file=/index.html

Expected behavior

The use of the font in Chrome should still allow 1️⃣ through 9️⃣ and #️⃣ to render properly.

Screenshots

In code:
2021-04-26T10_55_360x32_screenshot

Rendered:
2021-04-26T10_54_212x44_screenshot

Environment

  • OS: OSX, Windows, and Ubuntu were tested.
  • App that renders the font: Chrome
  • Version of font: 3.018;git-588b23468

Additional context

  • This was a problem in 3.15 as well, but we haven't looked further back than that.
  • Firefox and other browsers seem to be fine
@tannerlyons tannerlyons changed the title 1️⃣ through 9️⃣ aren't rendering properly in Chrome 1️⃣ through 9️⃣ and #️⃣ aren't rendering properly in Chrome Apr 26, 2021
@tannerlyons tannerlyons changed the title 1️⃣ through 9️⃣ and #️⃣ aren't rendering properly in Chrome 1️⃣ through 9️⃣ and #️⃣ aren't rendering properly in Chrome/Edge May 4, 2021
@tannerlyons
Copy link
Author

This is also happening in Edge

@rsms
Copy link
Owner

rsms commented Jun 18, 2021

I'd say this is a "bug" (or rather "odd behavior") in chromium rather than a bug in Inter, since other software seems to do the right thing.

Chromium: (broken)
Screen Shot 2021-06-18 at 10 45 05

Firefox: (correct)
Screen Shot 2021-06-18 at 10 45 30

Safari: (correct)
Screen Shot 2021-06-18 at 10 45 11

(Edge is chromium so that's why it looks broken in Edge.)

My best guess is that this is an issue stemming from Harfbuzz which Chromium uses for text shaping.

However, I think the solution here is to remove glyph uni20E3 and mapping to U+20E3 as it's an old and probably unused glyph.

@rsms rsms closed this as completed in 9cbc1f3 Jun 18, 2021
@rsms
Copy link
Owner

rsms commented Jun 18, 2021

Screen Shot 2021-06-18 at 12 34 53

@rsms
Copy link
Owner

rsms commented Jun 18, 2021

Once this lands in a new release you can try it here:
https://rsms.me/inter/lab/?sample=%23%EF%B8...

@rsms
Copy link
Owner

rsms commented Jun 18, 2021

This has been released with v3.19

@tannerlyons
Copy link
Author

Woop woop! Thanks @rsms!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants