Skip to content

Commit a1da95a

Browse files
committed
ui: Remove "Noto Color Emoji", broken on iOS (and maybe Android?)
tl;dr: When this Flutter issue is resolved: flutter/flutter#134897 try adding the Noto Color Emoji font back again (COLRv1 format) and set it as a fallback font behind some higher-priority font wherever we want to show text that might contain emojis. Before we do that, we're at the mercy of the system font, which might not be updated to handle newer emojis. This seems especially true of Android devices in the wild. ----- In #245, we added a COLRv1 version of this font, probably because of a warning that made us doubt if other formats would work on iOS: https://github.com/googlefonts/noto-emoji#using-notocoloremoji > NotoColorEmoji uses the CBDT/CBLC color font format, which is > supported by Android and Chrome/Chromium OS. Windows supports it > starting with Windows 10 Anniversary Update in Chrome and Edge. On > macOS, only Chrome supports it, while on Linux it will support it > with some fontconfig tweaking, see issue #36. Currently we do not > build other color font formats. (It seems like that part of the README wasn't updated when the COLRv1 format was added, and hasn't been updated since.) And I guess there wasn't a clear iOS compatibility problem with the COLRv1 format, so we used that. But, in #245, it seems like we didn't do a good manual test that the COLRv1 version of this font could actually handle emojis in the app on iOS. That testing shows that it can't (or at least couldn't on my phone or in a simulator). When the font is in the effective list of fallbacks, it takes responsibility for rendering the emoji, before the system font gets a chance to, but then it fails to render it, and a blank space appears. We suspect this Flutter issue ("Rendering of COLRv1 fonts is broken"): flutter/flutter#134897 We don't know why that Flutter issue doesn't, or at least doesn't always, prevent emojis from successfully rendering in the font on *Android*. I followed the issue's reproduction recipe with the COLRv1 font they specified, and indeed the glyphs weren't showing up on Android (but they did on web). So apparently the specific COLRv1 font is a variable. Since we don't know what all the variables are, and we have other short-term priorities, just take the font out of the picture for now, with a plan to reinstate it once we're sure it won't cause emojis to fail to render. Discussion: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Emoji.20rendering.20issue.20.28iOS.29/near/1683965
1 parent c0a1064 commit a1da95a

File tree

4 files changed

+0
-110
lines changed

4 files changed

+0
-110
lines changed

assets/Noto_Color_Emoji/LICENSE

Lines changed: 0 additions & 92 deletions
This file was deleted.
-4.53 MB
Binary file not shown.

lib/widgets/app.dart

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,19 +80,6 @@ class ZulipApp extends StatelessWidget {
8080
@override
8181
Widget build(BuildContext context) {
8282
final theme = ThemeData(
83-
// This sets up the font fallback for normal text that
84-
// may contain an emoji, where it will use any font from the "sans-serif"
85-
// group to fetch the glyphs and fallback to "Noto Color Emoji" for emojis.
86-
//
87-
// Note that specifiying only "Noto Color Emoji" in the fallback list,
88-
// Flutter tries to use it to draw even the non emoji characters
89-
// which leads to broken text rendering.
90-
fontFamilyFallback: [
91-
// …since apparently iOS doesn't support 'sans-serif', use this instead:
92-
// https://github.com/flutter/flutter/issues/63507#issuecomment-1698504425
93-
if (Theme.of(context).platform == TargetPlatform.iOS) '.AppleSystemUIFont' else 'sans-serif',
94-
'Noto Color Emoji',
95-
],
9683
// This applies Material 3's color system to produce a palette of
9784
// appropriately matching and contrasting colors for use in a UI.
9885
// The Zulip brand color is a starting point, but doesn't end up as

pubspec.yaml

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ flutter:
109109
assets:
110110
- assets/Source_Code_Pro/LICENSE.md
111111
- assets/Source_Sans_3/LICENSE.md
112-
- assets/Noto_Color_Emoji/LICENSE
113112

114113
fonts:
115114
# Zulip's custom icons. To use or edit, see class ZulipIcons.
@@ -129,8 +128,4 @@ flutter:
129128
- asset: assets/Source_Sans_3/SourceSans3VF-Italic.otf
130129
style: italic
131130

132-
- family: Noto Color Emoji
133-
fonts:
134-
- asset: assets/Noto_Color_Emoji/Noto-COLRv1.ttf
135-
136131
# If adding a font, remember to account for its license in lib/licenses.dart.

0 commit comments

Comments
 (0)