Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
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 referencex
: Specifies the reference is on hexadecimal0000
: 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:
Specification
The font-variant-emoji
property is defined in the CSS Fonts Module Level 4 specification, which is currently in Editor’s Draft.
Browser support
More information
- Emoji displayed as monochrome symbol? 🤔 The Unicode variation selector (Valérian Galliat)
- Emoji Presentation Sequences (Unicode)