1958134 - Emoji in A1111 web-ui displayed as text

Status: RESOLVED INVALID

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

Description

[Jan Alexander Steffens [:heftig]]

Attachment: system-ui-emoji.html

Last good revision: c17bda78c329a8ed6a6820618769e3e6e91fff70
First bad revision: 607af81ae4a206faf67e058bc6a1a9a37c532494
Pushlog: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=c17bda78c329a8ed6a6820618769e3e6e91fff70&tochange=607af81ae4a206faf67e058bc6a1a9a37c532494

Since bug 1955672, the buttons in AUTOMATIC1111 stable-diffusion-webui use text symbols instead of emoji.

The computed style for these buttons contains font-family: "Rubik", "ui-sans-serif", "system-ui", sans-serif.

I've noticed that the browser now treats "system-ui" (with quotes) and system-ui (without quotes) differently. The former uses a text symbol for 🗑️, the latter an emoji. I've attached a demo page for this.

Comment 1

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

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

:jfkthame, since you are the author of the regressor, bug 1955672, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Jonathan Kew [:jfkthame]]

This doesn't reproduce for me; I get an emoji-style glyph (Noto Color Emoji, to be specific) for both characters in the attached testcase.

The behavior is presumably dependent on details of the system font configuration. What fonts are being used on your system? To check, look in the Fonts panel of the Developer Tools inspector (not the computed style, which shows what the CSS is requesting but not the results of any fallback that may be happening).

FWIW, it's expected that "system-ui" and system-ui may have different results. The form "system-ui" with quote marks is a literal font family name, asking for a font family named "system-ui", which (almost certainly!) won't actually be available, so it'll then fall back to whatever the browser's default font is, whereas without quotes, the system-ui keyword is a CSS "generic" that the browser will resolve to the platform's preferred UI font, which may be different from the default content font.

Comment 3

[Jan Alexander Steffens [:heftig]]

The font for the emoji is "Noto Color Emoji". The font for the symbol is "Segoe UI Symbol", which comes from a folder containing fonts from Windows.

This is Arch Linux, with fontconfig 2.16.1. Fontconfig defines "system-ui" like this: https://gitlab.freedesktop.org/fontconfig/fontconfig/-/blob/main/conf.d/60-latin.conf?ref_type=heads#L74-87

I guess this explains where the symbol comes from, and the use of "system-ui" is a bug of the website?

Comment 4

[Jonathan Kew [:jfkthame]]

Thanks for checking; that seems to make sense of things. So I don't think there's really a bug here, then.

If the CSS just mentions system-ui as a CSS generic family, that won't override the fact that the glyph prefers emoji-style rendering, and so Firefox finds the Noto Color Emoji font.

But because the site names "system-ui" as a font family name, Firefox tries to respect that. Then fontconfig is set up such that it aliases this family name (not CSS generic) to a list of fonts that includes a symbol font that includes the emoji codepoint (but as a text-style glyph). So because it's trying to honor the specific family requested by the CSS, that's what you get.

So yes, I would say there's a site bug here. They should remove the quotes from both ui-sans-serif and system-ui so that they are handled as CSS keywords rather than family name strings.

(I also think it's a little odd that fontconfig aliases system-ui to Microsoft's Segoe UI fonts by default, given that those are proprietary fonts that wouldn't normally be expected to be available on Linux/BSD/etc.)