The struggle of emoji on the web | Nolan Lawson

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;
}

Explore Other Notes

Older

Smarter SVG filters

An in-depth guide to SVG filters, including colour manipulation, contrast, brightness, sharpening, blur, blend modes, and distortion. Very useful when trying to work out which combination of filters […]
  • 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 &#x1f3f4;‍☠️) because Microsoft [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.