1610391 - Why is Unicode color leaking out into the following character?

Status: RESOLVED WORKSFORME

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

Description

[David Spector]

Attachment: Unicode-color.png

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

Steps to reproduce:

1. I wrote a program that displays some (Unicode) characters in certain orders. The output is captured in a screenshot for Firefox 72.0.1 (64) and Chrome 79.0 (64).

Here are the same characters, inserted here:

(▶A☕☹𒄑אב)
(A▶☕☹𒄑אב)
(A☕▶☹𒄑אב)
(A☕☹▶𒄑אב)
(A☕☹𒄑▶אב)
(A☕☹𒄑א▶ב)

Note that the black triangle character is displayed in a different position in each line, and note that bugzilla may or may not display these characters correctly.

Actual results:

When black triangle to right (U+25b6) e296b6 is drawn alone or after a monochrome code point, it is displayed correctly. When it is drawn immediately following a 'colorful' emoji character, it is rendered with a blue background. This is not seen in the Chrome browser. Note: Bugzilla seems to allow only one screenshot.

Expected results:

The black triangle to right should always be black with a transparent background.

Comment 1

[David Spector]

Since I am not loading a font, I am using my default font. I have it set to Consolas 14. Perhaps this is a bug in Consolas?

However, when I change the default font to Arial and other fonts and refresh the page, I see exactly the same thing!

Comment 2

[David Spector]

Closing and reopening Firefox changes the font and the bug disappears. So it is specific to Consolas, I believe. I don't understand when Firefox changes fonts.

Comment 3

[Gingerbread Man]

(In reply to David Spector from comment #0)

Note: Bugzilla seems to allow only one screenshot.

You can click the Attach New File button above the description to upload one file at a time. Though you could've used an image editor to save the two screenshots as one file.

Comment 4

[David Spector]

Attachment: Here is a screenshot of Chrome displaying the same text.

Here is a screenshot of Chrome displaying the same text.

Comment 5

[Jonathan Kew [:jfkthame]]

The triangle character is not supported in Consolas (or in Arial), so if you're using one of those as your default font (and the page you're displaying doesn't specify any other), then font fallback will come into effect -- the browser will search installed fonts to find one that can display the character, even though it's not available in the primary font being used.

The same applies to others of the characters in your example: they're not present in fonts like Consolas, so fallback comes into play.

When doing font fallback, Firefox tries to use the same font for successive characters when possible, to minimize "ransom-note" effects. This is usually a good thing, but it can have some surprising results -- as here. What happens is that if the first character that needs fallback is the triangle, we find a symbol font (maybe Segoe UI Symbols?) that displays a black glyph. But if we've just seen a character that was only supported by the color emoji font, such as the coffee cup or frowning face, and then we get to the triangle, fallback will try using the same font as that preceding character -- in this case Segoe UI Emoji, resulting in a colored glyph.

If you add a CSS font-family rule to the document, you can explicitly control font selection more carefully; for example, something like font-family: Consolas, Segoe UI Symbol, Segoe UI Emoji, sans-serif would ensure that the (monochrome) Symbol font is used for all characters that it supports, and the (color) Emoji one is used only for symbols that weren't available in the monochrome font.

Comment 6

[David Spector]

Thank you! I experimented with the fonts, and found that including Segoe UI Emoji made all the triangles have a blue background. While fall-back is a wonderful way to gain Unicode coverage, I'm wondering if there is any way in CSS to suppress fall-back. Perhaps giving certain characters their own <span> to specify the font (ugh)? Or specifying that certain fonts should NOT be used? I would like to be able to display a triangle properly always, if it can be done.

I can see that this is not a bug in Firefox, but a feature that sometimes goes awry if it cannot be hinted.

Comment 7

[David Spector]

This may be a fixable bug after all. I experimented with Make Colorful (U+FE0F) and Make Monochrome (U+FE0E). Make Colorful does make Black Right-Pointing Triangle colorful (gives it a blue background) in all the lines (see screenshot), but Make Monochrome has no effect (some lines show the blue background, others don't). That doesn't seem right. Maybe Fallback is taking precedence over the color instruction. That could be fixed. The Make Monochrome character is exactly the "hint" I meant in my previous post. I wonder if there is a section of Firefox code that deals specifically with Unicode, and, if so, how one could find it. If I could locate the code, I might be able to suggest a fix. I've tried to use github before, but find it very confusing.

Comment 8

[Jonathan Kew [:jfkthame]]

Yes, if you're prepared to modify the text by adding the relevant variation selectors, it should be possible to do better. Currently Firefox does not fully handle this, however; see also bug 1371386. There's a patch that was started there, but hasn't reached the point of being complete and ready to land.

Comment 9

[David Spector]

Someone in that bug report said, "Gecko doesn't select emoji font for these characters with variation selector-16 because it doesn't check whether selected font is color/emoji font." So I imagine that it would not be too difficult to handle both selector-16 and selector-15 with a bit more code. Unfortunately, I do not have the time to become a real Mozilla developer, so someone else needs to implement this Firefox improvement, if it and https://bugzilla.mozilla.org/show_bug.cgi?id=1371386 are to get done.

Comment 10

[B.J. Herbison]

The characters are now displaying correctly in several places. In this bug, in a Google Docs document, on Bing, Google, and Amazon.com search results, in Wikipedia edit box and page preview, and other web pages.