font-variant-emoji | CSS-Tricks

The CSS font-variant-emoji property let us define how emoji code points should be displayed, either as an emoji or text.

<span>☎️ ☑ 😀😈 🛋</span>

font-variant-emoji: emoji;

The font-variant-emoji property is defined in the CSS Fonts Module Level 4 specification.

Syntax

font-variant-emoji: normal | text | emoji | unicode;

Initial: normal
Applies to: all elements and text
Inherited: yes
Percentages: N/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Values

font-variant-emoji: normal; /* Let's the browser decide */
font-variant-emoji: text; /* Displays it as text */
font-variant-emoji: emoji; /* Displays it as images */
font-variant-emoji: unicode; /* Displays according to the Unicode  */

normal: Allows the browser decide whether to display it as an emoji or text, which usually follows the platform’s convention.
text: Displays the emoji code point as text.
emoji: Displays the emoji code point as an emoji.
unicode: Displays the emoji according to the Unicode, either using text or emoji style.

How emojis representation work

Not every Unicode character can be represented as an emoji: a letter “A” (U+0041) can only be represented by a letter “A”, but a sun mark (U+2600) can be written as text (☀︎) or as an emoji (☀️). All code points with these two representations (text or emoji) are called emoji presentation participating code points and are listed by Unicode.

How do we choose which one should be displayed? Of course, we could look at our Unicode table of choice and copy the desired version of the symbol but:

that’s boring, and
it doesn’t ensure all browsers will follow that specific representation.

Instead, we can use Unicode Variation Selectors (VSs), little pieces of code at the end of a Unicode that tell the client how to display the symbol. There are many VSs, but we are interested in the VS15 (U+FE0E) and VS16 (U+FE0F), which tells whether the client should display the Unicode using its text or emoji representation. For example, if we have the watch Emoji Code Point (U+231A), we can write it as U231A\U+FE0E so that it uses its text representation, or as U231A\U+FE0F for the emoji representation.

However, in HTML, Unicode is written as . Breaking it down, it means:

&: Begins a special character
#: Specifies the character is a numeric reference
x: Specifies the reference is on hexadecimal
0000: The Unicode code
;: Ends the special character

For example, the watch emoji would be written as ⌚ in HTML, and if we want to attach a VS, we write it right next to it. So, ⌚︎ gives us the text representation (⌚︎) and ⌚️ the emoji one (⌚️).

Circling back to the font-variant-emoji property, the text and emoji values make the browser render code points as if U+FE0E or U+FE0F were appended to every presentation participating code point, respectively. However, if in the HTML the code point already has specified a VS, then it will ignore the property.

Basic usage

Let’s see how each font-variant-emoji property behaves with the following HTML element:

<span>☎️😊︎😈 🛋 ⌚︎ ♥️</span>

It has:

an emoji without text representation (☎️)
an emoji code point as text (😊︎)
an emoji code point as an emoji (😈)
a Unicode symbol without any VS (🛋)
a Unicode symbol with the text VS (⌚︎)
a Unicode symbol with the emoji VS (♥️)

And let’s apply each of the possible values:

font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

Results may vary from browser and platform, but in general, we’ll see that normal and unicode have the same result, text will convert what it can to text and emoji to emojis. Also, notice how Unicode symbols with VS should ignore the property: