CODEWITHSUNDEEP
htmliosunicodefontsemoji
Ryan
Ryan

Reputation: 24019

How can I control (across all devices and browsers) whether a character is displayed as the emoji version or text version?

Below (and this live demo here) is the HTML that produced these 2 screenshots. The first is in Chrome on Windows 10, and the second is from Chrome on iOS 12.

Win10 screenshot iOS12 screenshot

Notice that Win 10 correctly flattens and colors red all of the characters in the bottom line. But in the top line, it incorrectly does not stylize the ⚠️, even though elsewhere (also on Win 10) I see it correctly displayed in yellow, such as here.

Also notice that iOS 12 correctly stylizes all the emojis but does not flatten and color red the first 2 characters (🌄︎ 💬︎).

How can I control (across all devices and browsers) whether a character is displayed as the emoji version or text version?

This is NOT a duplicate of other questions because (as you can see from the HTML) I already know about the text variation selector ︎, and I've experimented with tons of different local fonts (such as https://emojisymbols.com) and Google Fonts. 

<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<div style='text-align: right; font-family: "Raleway"; margin: auto; display: inline-block; font-size: 22px;'>
    emojis &#127748;
    &#x1F4AC;                    
    &#x231b;        
    &#9889;
    &#9888;
    <div style="color: red;">
        using text variation selector 
        &#127748;&#xfe0e;
        &#x1F4AC;&#xfe0e;
        &#x231b;&#xfe0e;        
        &#9889;&#xfe0e;
        &#9888;&#xfe0e;
    </div>
</div>

Upvotes: 3

Views: 1708

Answers (1)

CharlotteBuff
CharlotteBuff

Reputation: 4409

The short answer is that you can’t. The text variation selector does not work generally for all characters; only those sequences explicitly defined in the standard are valid. Chrome on Windows is in fact violating the standard in your first example because there are no variation sequences for 🌄 and 💬. There is no Unicode mechanism to stop these characters from behaving like emoji; <U+1F304, U+FE0E> must display identically to U+1F304 alone.

All emoji characters that allow variation selectors are listed in the data file emoji-variation-sequences.txt, and I also curate a visual table on my website for easy access.

However, even for those characters that do support variation selectors, there is no guarantee that they will actually work. Older Android phones for example cannot display many emoji as text-style because they simply lack the fonts necessary to do so.

If you want to ensure universal text-style display, you will need to supply your own fonts to override the system defaults.

Sidenote: While your Windows example gets the variation selectors wrong, it actually does handle ⚠ correctly because that character is meant to be text-style by default unlike all the others. If you need emoji-style display, you have to append the emoji variation selector U+FE0F like so: ⚠️. This is not necessary (but possible) for ⌛ and ⚡ because they’re emoji-default.

Upvotes: 4

Related Questions