I use emoji quite a lot on this site, which means I'm already aware of some of the more unusual browser/OS quirks. Don't ever use flag emoji (except pirate 🏴☠️) because Microsoft refuses to weigh in politically on the fact that Taiwan is a legitimate, autonomous country (there, see, is it really that hard?), avoid anything that isn't at least 2-3 releases old, and use an emoji font set for the very oldest glyphs, like 😊, if you really don't want them to appear as 2D, black and white equivalents.
Nolan digs a little deeper, providing some useful insight into extra quirks (Chrome on Linux doesn't deal with emoji well at all; "emoji" actually includes a lot of graphical representations of non-emoticon glyphs, like numbers and punctuation, so don't set emoji fonts for text blocks; etc.) and some pointers on how to improve cross-browser support.
At a time when web browsers have gained a staggering array of new capabilities – including Bluetooth, USB, and access to the filesystem – it’s still a struggle to render a smiley face. It feels a bit odd to argue in 2022 that “the web should have emoji support,” and yet here I stand, cap in hand, making my case
On the emoji characters you don't think about:
As it turns out, characters like the asterisk (*), octothorpe (#), trademark (™), and even the numbers 0-9 are technically emoji.
On how to deal with emoji:
Well, first you need a way to detect broken emoji. This is actually much harder than it sounds, and basically boils down to rendering the emoji to a <canvas>, testing that it has an actual color, and also testing that it doesn’t render as two separate characters.
On Mozilla's hidden Firefox trick:
Interestingly, this problem is actually solvable in Firefox, since they ship their own “Mozilla Twemoji” font
And Nolan's own emoji font set:
.emoji-fonts {
font-family: "Twemoji Mozilla",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
"EmojiOne Color",
"Android Emoji",
sans-serif;
}
