Intent to Ship: CSS font-variant-emoji

[Munira Tursunova]

Contact emails

moo...@google.com

Explainer

None

Specification

https://www.w3.org/TR/css-fonts-4/#font-variant-emoji-prop

Design docs

https://docs.google.com/document/d/1NyIKm0PnWUwX6j0smDwxDAPSUoiyBHPL95oH2lvjjpc/edit?usp=sharing&resourcekey=0-ubYsGJCgRSQnT9i_guM64g

Summary

Font-variant-emoji CSS property provides users an easy way to control between colored (emoji-style) and monochromatic (text-style) emoji glyphs presentations. This can be also done by adding an emoji Variation Selector, specifically U+FE0E for text and U+FE0F for emojis, after each emoji codepoint. Using font-variant-emoji CSS property allows web developers to select between emoji style (colored) emoji presentation, text style (monochromatic) emoji presentation and unicode default emoji presentation [0]. This property only affects emojis that are part of a Unicode emoji presentation sequence [1]. [0] https://www.unicode.org/reports/tr51/tr51-25.html#Emoji_Presentation [1] http://www.unicode.org/emoji/charts/emoji-variants.html

Blink component

Blink>Fonts>Emoji

Search tags

emoji, variation selectors, font-variant-emoji, variation sequences

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None, already shipped in Firefox and Safari.

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1461589)

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=246911)

Web developers: Positive

• Salesforce web developer Nolan Lawson shares the struggles of controlling emoji presentation in the article (https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/).
• Ollie Williams expressed interest in emoji presentation control in the blog (https://fullystacked.net/posts/using-emoji-on-the-web/).
• Chris Coyier, co-founder of codepen, shared the struggles with emoji presentations in the blog post (https://front-end.social/@chriscoyier/112328067179677693).
• Alibaba developer 一丝 also shared the struggles with using emojis in chrome in the blog post (https://x.com/yisibl/status/1826841566469566779).
• ByteDance has been interested in this feature for quite a while, their developer, ChangSeok Oh posted an Intent to Prototype in blink-dev group (https://groups.google.com/a/chromium.org/g/blink-dev/c/MaXgbE4vTbk/m/Q3QbI37IBQAJ).

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

No additional DevTools support is needed. Font-variant-emoji property is inspectable in DevTools same way as any other CSS property.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

No

Supported on all platforms for web fonts. Support of the feature for system fallback fonts depends on the fonts installed in the system, so some platforms may lack system fonts that cover desired emoji unicode codepoints with desired Variation Selectors. Since on Linux, installed fonts can greatly vary, it's hard to pick a unified colored and monochromatic emoji fallback font. Therefore the feature for fallback system fonts is only supported on main platforms such as Android, Windows and Mac OS.

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-fonts?label=master&label=experimental&aligned&q=font-variant-emoji https://wpt.fyi/results/css/css-fonts/variation-sequences.html?label=master&label=experimental&aligned&q=variation-sequences

Flag name on chrome://flags

FontVariantEmoji, FontVariationSequences

Finch feature name

FontVariantEmoji, FontVariationSequences

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1379029

Sample links

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji

Estimated milestones

Shipping on desktop	131
Shipping on Android	131
Shipping on WebView	131

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6566092561973248?gate=5573821569957888

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/fbd14799-408d-4405-8db3-82cdaa7678b6n%40chromium.org

This intent message was generated by Chrome Platform Status.

[Yoav Weiss (@Shopify)]

LGTM1

Thanks for catching us up! :)

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_Db8co2Y3JV7Py_gZi%2BvYdhcAfrr4%2Bjt7Jp1P2Ofy2xFg%40mail.gmail.com.

[Mike Taylor]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOmohSL8FtDrVH3UR61URpBZ%2BPwWQ_yJcjYgehaO6A_D%2BXO0Nw%40mail.gmail.com.

[Chris Harrelson]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/541f9f2a-9e5a-4aa3-b6f3-a28bba4b492d%40chromium.org.