Skip to content

Commit

Permalink
ui: Remove "Noto Color Emoji", broken on iOS (and maybe Android?)
Browse files Browse the repository at this point in the history
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 zulip#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 zulip#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 zulip#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
  • Loading branch information
chrisbobbe committed Nov 21, 2023
1 parent c0a1064 commit a1da95a
Show file tree
Hide file tree
Showing 4 changed files with 0 additions and 110 deletions.
92 changes: 0 additions & 92 deletions assets/Noto_Color_Emoji/LICENSE

This file was deleted.

Binary file removed assets/Noto_Color_Emoji/Noto-COLRv1.ttf
Binary file not shown.
13 changes: 0 additions & 13 deletions lib/widgets/app.dart
Original file line number Diff line number Diff line change
Expand Up @@ -80,19 +80,6 @@ class ZulipApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ThemeData(
// This sets up the font fallback for normal text that
// may contain an emoji, where it will use any font from the "sans-serif"
// group to fetch the glyphs and fallback to "Noto Color Emoji" for emojis.
//
// Note that specifiying only "Noto Color Emoji" in the fallback list,
// Flutter tries to use it to draw even the non emoji characters
// which leads to broken text rendering.
fontFamilyFallback: [
// …since apparently iOS doesn't support 'sans-serif', use this instead:
// https://github.com/flutter/flutter/issues/63507#issuecomment-1698504425
if (Theme.of(context).platform == TargetPlatform.iOS) '.AppleSystemUIFont' else 'sans-serif',
'Noto Color Emoji',
],
// This applies Material 3's color system to produce a palette of
// appropriately matching and contrasting colors for use in a UI.
// The Zulip brand color is a starting point, but doesn't end up as
Expand Down
5 changes: 0 additions & 5 deletions pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ flutter:
assets:
- assets/Source_Code_Pro/LICENSE.md
- assets/Source_Sans_3/LICENSE.md
- assets/Noto_Color_Emoji/LICENSE

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

- family: Noto Color Emoji
fonts:
- asset: assets/Noto_Color_Emoji/Noto-COLRv1.ttf

# If adding a font, remember to account for its license in lib/licenses.dart.

0 comments on commit a1da95a

Please sign in to comment.