Safari shows tofus for color U+FE0F emoji sequences in the Glyphs preview page
anthrotype opened this issue · comments
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:
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.
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.
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
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
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.