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.

Sign up for GitHub

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

Jump to bottom

Safari shows tofus for color U+FE0F emoji sequences in the Glyphs preview page #428

Open
anthrotype opened this issue Jul 4, 2023 · 4 comments
Open

Safari shows tofus for color U+FE0F emoji sequences in the Glyphs preview page #428

anthrotype opened this issue Jul 4, 2023 · 4 comments

Comments

@anthrotype
Copy link
Member

Using Safari 16.5 on the latest macOS Ventura 13.4, if you go to https://fonts.google.com/noto/specimen/Noto+Color+Emoji/glyphs you will notice that several Noto Color Emoji glyphs appear as "tofu" (.notdef glyph), sometimes multiple tofus for one emoji:

image

I believe @Lorp was referring to this or something related to this in #391 when he was wroting about "Safari shows decomposed characters."

That other issue was about FireFox showing color emojis from the fallback system font for black-and-white Noto Emoji sequences that contain U+FE0F "emoji" variation selector.

This issue is about Safari showing tofus for Noto Color Emoji sequences that contain U+FE0F variation selector.
@anthrotype
Copy link
Member Author

anthrotype commented Jul 4, 2023 •
edited

I made two static test html pages meant to reproduce the issue when opened in Safari on mac.

Noto_Color_Emoji_FE0F_Sequences_Test.zip

(EDIT: I had to re-upload the zip file above a second time as I made a mistake, make sure to download the latest copy)

Both use the same local copy of Noto Color Emoji (downloaded from fonts.google.com) to display only the emoji sequences containing U+FE0F.
The difference between the two pages is, the first one, called "no_tofu.html", only has "NotoColorEmoji" listed in the font-family, whereas in the second page, named "tofu.html", the font-family property contains an additional font following "NotoColorEmoji", i.e. the special webfont called "Tofu" that is also used on the Google Fonts Glyphs palette supposedly to display .notdef glyphs whenever a font doesn't support a given sequence of characters. Here is the diff between the two attached test pages:

--- /Users/clupo/Downloads/Noto_Color_Emoji_FE0F_Sequences_Test/no_tofu.html	2023-07-04 11:38:17
+++ /Users/clupo/Downloads/Noto_Color_Emoji_FE0F_Sequences_Test/tofu.html	2023-07-04 11:38:36
@@ -2,8 +2,12 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <title>NotoColorEmoji U+FE0F Sequences (No Tofu)</title>
+  <title>NotoColorEmoji U+FE0F Sequences (Tofu)</title>
   <style>
+@font-face {
+  font-family: Tofu;
+  src: url("data:font/ttf;base64,...");
+}
 @font-face {
   font-family: "NotoColorEmoji";
   src: url(NotoColorEmoji-Regular.ttf) format('truetype');
@@ -12,7 +16,7 @@
   font-size:4em;
 }
 .NotoColorEmoji emoji {
-  font-family: "NotoColorEmoji";
+  font-family: "NotoColorEmoji", Tofu;
 }
 </style>
 </head>

Now, the "no_tofu.html" page does work in Safari on mac (it displays the Noto Color Emoji sequences as expected), whereas the "tofu.html" page does not work, it only shows the tofus.

Maybe there is (or there is not?) something in that Tofu special webfont that makes Safari prefer it when it is present in the font-family fallback chain, even if it comes after the Noto Color Emoji?
Unpacking the tiny 900 bytes font to .ttx gives a huge 64 MB file where the cmap table has a format 13 subtable listing seemingly all the Unicode characters in existence all being mapped to the same .notdef glyph.

@anthrotype
Copy link
Member Author

You can open the static pages in the browser by running a local http server with python like this:

$ python3 -m http.server 8001 -d ~/Downloads/Noto_Color_Emoji_FE0F_Sequences_Test

then loading the two page as

http://localhost:8001/tofu.html

http://localhost:8001/no_tofu.html

@anthrotype
Copy link
Member Author

I wasn't able to find any workable workaround (apart from removing U+FE0F from Tofu.ttf or removing the font entirely from font-family which don't seem to me like good options) so in the end I just filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=258877

@idontveapc
Copy link

idontveapc commented Jul 10, 2023 •
edited

i've this similar thing happening but with windows’ segoe emojis, instead showing tofu it fallbacks!

the reason is variation selector-16 unicode for me.

@anthrotype anthrotype mentioned this issue Nov 6, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@anthrotype @idontveapc