demo · v131
Dual-presentation characters under four values
The Unicode standard lists hundreds of characters with both a text and an emoji presentation. Without font-variant-emoji you appended U+FE0E or U+FE0F per character — fine in static text, brittle when the text came from a user. Below: the same dual-presentation glyphs rendered four ways at once.
normal: browser default
text: force text presentation
emoji: force emoji presentation
unicode: honour codepoint variation selector
try any string
the css
/* Run inline glyphs as text — useful for symbol fonts */
.text-style { font-variant-emoji: text; }
/* Force emoji presentation regardless of variation selector */
.emoji-style { font-variant-emoji: emoji; }
/* Respect any U+FE0E (text) / U+FE0F (emoji) selector in the string */
.unicode-style { font-variant-emoji: unicode; }where this matters
The two motivating planning use cases were (1) symbol-heavy UI such as keyboard layout pickers, music notation, or telephone-key prefixes where emojified characters look comical; and (2) chat / forum software where the author can't sanitise every codepoint and wants a section to render glyphs as emoji uniformly, regardless of whether the user typed ☺ or ☺︎.
see also
scenario focus
Select a scenario to focus its rendered example and summary.