1760567 - [Bug]: Emoji don't work on Android DP2

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[Kevin Brosnan [Ex-Mozilla]]

From github: https://github.com/mozilla-mobile/fenix/issues/24350.

Steps to reproduce

1. Open a page that renders emoji using the OS font.
   • I tested with https://codepen.io/rs42/full/Rwxavvx ("FRESH" rendered using a color font from Google Fonts, Mango emoji rendered using default system font)

Expected behaviour

Text and emoji should both render, preferably using COLRv1 vector fonts, but if not then perhaps using the fallback glyphs for "Fresh" and the system bitmap font for the mango.

Actual behaviour

Firefox renders the color font using fallback monochrome glyphs (makes sense) and doesn't render the emoji at all (sad panda). Chrome renders both in color.

Firefox	Chrome
<img src="https://user-images.githubusercontent.com/6466432/159136217-4211062d-a223-461b-8845-c4cbdb2e7a31.png" width="256">	<img src="https://user-images.githubusercontent.com/6466432/159136220-750f108c-0505-480e-ab78-8bafb39aa9ed.png" width="256">

Device name

Google Pixel 5a

Android version

Android 13 DP2 (TPP2.220218.010)

Firefox release type

Firefox

Firefox version

98.2.0 (Build #2015868579), 2b529a583+ AC: 98.0.12, 9ad94b2a33 GV: 98.0.1-20220313140707 AS: 91.0.1

Device logs

N/A, no crash occurs

Additional information

This occurs because the system emoji font has moved from being a bitmap font to being a color vector font. Further details:

• https://android-developers.googleblog.com/2022/03/second-preview-android-13.html notes the use of Color vector fonts. * https://developer.chrome.com/blog/colrv1-fonts/ has additional context on the format.
• https://bugzilla.mozilla.org/show_bug.cgi?id=1740525 covers core support for COLRv1.

I think filing this bug specifically for the Android issue is right, apologies if not.

A bit of additional context: In DP2 the only emoji in the system image is COLRv1. In future builds of Android 13 we expect to add the bitmap font back as NotoColorEmojiLegacy.ttf. However, this will be marked with ignore="true" in fonts.xml and none of the system APIs will "see" it. That is, the API Firefox uses to find emoji (https://searchfox.org/mozilla-central/source/gfx/thebes/gfxFT2FontList.cpp#1402) will still return the COLRv1 font. I believe for emoji to render Firefox needs to do one of:

1. Implement support for COLRv1

   • Preferred as Android 14 is expected to only ship a COLRv1 font for emoji.

2. Write custom code to ensure the legacy CBDT font is selected when present

   • It will be the first und-Zyse font in fonts.xml, as shown below

    <family lang="und-Zsye" ignore="true">
        <font weight="400" style="normal">NotoColorEmojiLegacy.ttf</font>
    </family>
    <family lang="und-Zsye">
        <font weight="400" style="normal">NotoColorEmoji.ttf</font>
    </family>
    <family lang="und-Zsye">
        <font weight="400" style="normal">NotoColorEmojiFlags.ttf</font>
    </family>
   

Change performed by the Move to Bugzilla add-on.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Jonathan, maybe this is a similar issue to bug 1758315 and co where we're not correctly detecting the features of the installed font? COLRv1 support will fix this, but it seems there's an underlying font selection issue here...

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Rod, apologies if this is a trivial question, but do you know how can I run an emulator with the affected version of Android or so? I guess alternatively I could try to mimic the font setup in DP2 in our usual emulator, but that seems error prone... Thanks a lot.

Comment 3

[Kevin Brosnan [Ex-Mozilla]]

I'm seeing an option to download the Android API 32 (Tiramisu) images in the Android Studio virtual device manager. If you are using an standalone SDK manager then doing the update through that should show the needed images.

Comment 4

[Rod]

https://android-developers.googleblog.com/2022/03/second-preview-android-13.html, "Get started with Android 13" has pointers to how to get system or emulator images. Ping if that doesn't work and I'll dig further.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Thanks Rod! I can try to repro that way, and maybe come up with a fix (if Jonathan doesn't do it earlier of course :))

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from reporter.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Alright, I could repro on an Emulator. Will look into it tomorrow if Jonathan isn't faster. Any pointers from Jonathan would be great of course :-)

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1760567 - Explicitly look for NotoColorEmojiLegacy.ttf in Android font list. r=jfkthame

Unfortunately I couldn't verify this fix myself because the Android 13
image I got doesn't have the described fonts.xml change, nor the legacy
font in /system/fonts, but this should do.

Include the noto color fonts in the standard fonts for the legacy
codepaths too, and avoid a couple string copies and allocations while at
it.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

I couldn't verify the fix because:

$ find / -name 'NotoColor*' 2>/dev/null                                                                                                                                                                                       
/system/fonts/NotoColorEmoji.ttf
/system/fonts/NotoColorEmojiFlags.ttf

On the 13 preview I got. But that should do and I'll try to find a more recent AVD tomorrow (I used the installed Android Studio version, which is the stable one, apparently I might need to switch to the beta version, according to the docs, but it's too late for today).

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ec26012f58e2
Explicitly look for NotoColorEmojiLegacy.ttf in Android font list. r=jfkthame

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/ec26012f58e2