Unicode Variation Selectors

When did font-variant-emoji become a thing?

Extra

While I knew that Unicode has Variation Selectors (VS), I had no idea that CSS has a font-variant-emoji property. So it was time to connect the dots.

A variation selector is a Unicode code point that, when placed immediately after another character, signals a specific presentation preference to the renderer. Variation selectors produce no visible output of their own — they are invisible modifiers.

Of particular importance are the last two, VS15 and VS16, because they act as the emoji/text presentation toggle. It’s worth noting that not all emojis come in both forms, but if we look at those that do, appending the variation selector can make a difference.

When VS15 is appended to a symbol, it forces it to be displayed as text (black and white glyph). Contrarily, when VS16 is appended, it forces the color version to be displayed (emoji).

This leaves us with the default case, i.e. an emoji that is all by itself, without variation selector. How will it be displayed? While there should be a simple answer, in practice it’s a bit more complicated, as the article I just quoted explains.

But what I actually wanted to talk about is what CSS adds to the mix with the font-variant-emoji property. Safari does not support the property (yet), in other browsers it only has an effect on emojis without a variation selector, which makes sense.

Long story short, I created a test page[1] to see how emojis are presented, and to see what the impact of the different values of font-variant-emoji is. While the values text and emoji live up to their purpose, the values normal and unicode always resulted in the text form, independent of operating system, web browser, and emoji used.[2]

Showcase

View “Unicode meets font-variant-emoji” on CodePen.

Footnotes

  1. Fair warning, the test page ended up being unnecessarily complex, because initially I thought browsers have issues with monochromatic emojis in combination with color-scheme declarations that are not set on the :root level. But upon further investigation I realized that’s not the case. ↩︎
  2. I’m not yet sure what to make of it. But as with most of my test pages: To be continued. ↩︎