1570452 - ::first-letter doesn't work with emojis in HTML & SVG

Status: RESOLVED INVALID

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

Description

[Alex Lakatos[:AlexLakatos]]

The ::first-letter pseudo-selector doesn't work if the first letter in a paragraph or text tag is an emoji. i.e 🥑. Tried with direct emoji insertion and with the symbol entity 🥑, neither works.

I've tested in Firefox Desktop for MacOS and Firefox for Android, could reproduce both.

Here is a test case I cooked up, increasing font-size on the first letter, so you can reproduce: https://jsfiddle.net/hzed43xu/

I've tested in Chrome as well, and ::first-letter with an emoji works for HTML. As Chrome doesn't implement ::first-letter for SVG yet, I couldn't test that.

Comment 1

[Mats Palmgren (inactive)]

The ::first-letter spec says that only "Punctuation (P*) Unicode general category [UAX44])" and typographic letter units, i.e. "Letter or Number general categories in Unicode [UAX44]", should be considered.
It appears 🥑 has General_Category: Other_Symbol and thus shouldn't be considered as a ::first-letter. So I think Gecko renders your example correctly per spec.

Alex, has your example always worked in Chrome or only in recent versions?

Comment 2

[Mats Palmgren (inactive)]

I think it's pretty clear this is a bug in Chrome, so I filed: https://bugs.chromium.org/p/chromium/issues/detail?id=990601
I'm closing this as INVALID since I think we follow the relevant specs.
(We can open a new bug if the spec is changed later for some reason...)

Comment 3

[Alex Lakatos[:AlexLakatos]]

Thank you!