1970980 - Flag emoji do not display when font "Segoe UI Emoji" is specified in CSS font-family

Status: RESOLVED FIXED

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

Description

[Christoph Kisfeld]

Attachment: flag-emoji.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Steps to reproduce:

• Visit a website that has "Segoe UI Emoji" listed in CSS font-family, such as https://bsky.app/ or https://community.secondlife.com/forums
• Find the flag emoji in content / user posts on the site or paste flag emoji into a text or search field

Actual results:

As of Firefox 139.0, flag emojis are not being displayed as colored flags, but as their two-letter ISO codes such as BE, EU, IT, CA for the Belgian, European, Italian and Canadian flag emoji

I tested the following versions on Windows 11:
137.0.2 works ok
138.0.4 works ok
139.0 is broken
139.0.1 is broken
140.0b6 (Developer Edition) is broken

Expected results:

Flag emoji should display as colored country flags, not two-letter country code

Comment 1

[Christoph Kisfeld]

I found two reports on community forums while researching this myself, after I found the issue on Bluesky:

https://connect.mozilla.org/t5/discussions/firefox-no-longer-displays-flag-emojis-as-flags-on-windows-10/td-p/97755

https://old.reddit.com/r/firefox/comments/1l4rvp9/emoji_flags_gone/

Comment 2

[Robert Longson [:longsonr]]

Perhaps you could use https://mozilla.github.io/mozregression/ to find a more precise regression range.

Comment 3

[Christoph Kisfeld]

I tried out the mozregression tool and I found this result:

Bug 1955672 followup - Rename eFontPresentation enum to simply FontPresentation. r=layout-reviewers,emilio
No change in behavior, just a global rename of the type.
Differential Revision: https://phabricator.services.mozilla.com/D243134

I spotted one change in that diff, which is, contrary to its description, not just a rename : "<=" is changed to "==" in gfx/thebes/gfxTextRun.cpp line 3332

But I am unable to judge whether this could lead the effect I described

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 5

[Mayank Bansal]

Can you attach the contents of about:support here?

Comment 6

[Jonathan Kew [:jfkthame]]

I'm not at my Windows machine right now to check things, but I think this is expected behavior: Segoe UI Emoji does not provide ligatures for the Regional-Indicator codepoints to render them as flags, it just renders individual glyphs for each of the characters. I suspect that prior to the font-variant-emoji-related fix in bug 1955672, we were ignoring the CSS-specified font family and using a font from prefs instead. But if the site explicitly asks for Segoe UI Emoji, that's what we now use. The resulting appearance is Microsoft's decision.

(See also discussions such as https://gist.github.com/olliefr/5a84cbe15b7c8bccffc28c94c2200b9e)

Comment 7

[Christoph Kisfeld]

Attachment: about-support139.0.1.txt

Attached output of about:support. This is a new installation of Windows 11 and Firefox 139.0.1 in a VM that I used to verify the issue.

Comment 8

[Jonathan Kew [:jfkthame]]

As per comment 6, this is expected: that's simply how Segoe UI Emoji chooses to display the Unicode "Regional Indicator" characters. Other browsers will also show them as two-character codes if Segoe UI Emoji is used.

To display the Regional Indicator pairs as flags, we'd need to use the (Firefox-bundled) Twemoji Mozilla font instead, but I'm not sure it's appropriate to do that if the webpage has explicitly asked for Segoe UI Emoji.

The other thing that can affect things is whether the page also includes Segoe UI Symbol (a separate font from Segoe UI Emoji) in its font-family list. This font also includes the Regional Indicator characters, but again, it only displays them as letter pairs.

If the web page does not explicitly call for the use of Segoe UI {Emoji, Symbol} font, our font-selection heuristics will look for a font that supports color-glyph rendering for the Regional Indicators. If the page does explicitly name these fonts, however, we respect its CSS (since bug 1955672).

Maybe we should do something to special-case the Regional Indicators, given that Microsoft seems set on not providing a nicer presentation for them. Though I worry slightly that there'll be some people who really expect to see two-letter codes, and will be unhappy if we forcibly replace them with flag icons.

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1970980 - Always prefer to search for a color font for Regional Indicator codepoints, unless text presentation is *explicitly* requested. r=#layout

This makes us prefer our bundled Twemoji Mozilla font on Windows, so that emoji flags
render as users expect, unless the page explicitly asks for font-variant-emoji:text.

The test is a Windows-only in-tree reftest rather than a more general WPT test because
it is specific to the Windows font configuration, including the fact that we bundle
an additional emoji font. Behavior on other platforms and in other browsers would be
too dependent on the local configuration for it to be useful.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1955672

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/29995c0f5296
https://hg.mozilla.org/integration/autoland/rev/b700737cfc2f
Always prefer to search for a color font for Regional Indicator codepoints, unless text presentation is *explicitly* requested. r=layout-reviewers,emilio

Comment 12

[Narcis Beleuzu [:NarcisB]]

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

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:jfkthame, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox140 to wontfix.

For more information, please visit BugBot documentation.

Comment 14

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1970980 - Always prefer to search for a color font for Regional Indicator codepoints, unless text presentation is *explicitly* requested. r=#layout

This makes us prefer our bundled Twemoji Mozilla font on Windows, so that emoji flags
render as users expect, unless the page explicitly asks for font-variant-emoji:text.

The test is a Windows-only in-tree reftest rather than a more general WPT test because
it is specific to the Windows font configuration, including the fact that we bundle
an additional emoji font. Behavior on other platforms and in other browsers would be
too dependent on the local configuration for it to be useful.

Original Revision: https://phabricator.services.mozilla.com/D253079

Comment 15

[Phabricator Automation]

firefox-esr140 Uplift Approval Request

• User impact if declined: regression in display of flag emoji for Windows users on some sites
• Code covered by automated testing: yes
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: n/a
• Risk associated with taking this patch: minimal
• Explanation of risk level: just adding a special-case check for regional-indicator codepoints
• String changes made/needed: none
• Is Android affected?: no

Comment 16

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/70ab6478e11e
https://hg.mozilla.org/releases/mozilla-beta/rev/5a06d371a186