Logo
Cover image

You Are Using Emojis The Wrong Way

Posted on 1/27/2021

webdeva11y

As a web, mobile or software developer, you’re probably including emojis in your application the wrong way. This is why.

Starting With An Example

The common way for programmers to include emojis in their application is to simply copy them, for instance from a website such as Emojipedia or a built-in application, and then paste it into the source code.

  • Source code:
1<h2>
2  I'm a pretty header! 🎉
3</h2>
  • Output:

Heading with emoji

The Problem

As you can see, including emojis that way seems to work just fine. The emoji we copy-pasted is rendered the way we wanted, yee-haw!

Now, imagine being so proud of the application or feature you just created that you want to showcase it, let's say, to your grandparents.

Grandparents

As you might have guessed, your grandparents may not have the latest smartphone or laptop on the market. It might not display emojis at all, or just the emoji you used is not supported yet by their device.

Hence, this is what they could see:

Heading with broken emoji

Probably not what you wanted them to see...

Why Does This Happen?

From phonearena:

Emoji works exactly the same way as regular text — a Unicode code point corresponds to every character in the Unicode catalog, Emoji included. When a device sends a message, it sends a series of Unicode code points. When another device receives said message, it interprets the code points and displays letters, numbers and Emojis. It’s actually a bit more complicated than that, but this is the basic principle.

As you can see, the emoji is interpreted by the device, which means that their appearance may vary from one device to another.

Thus, it may not appear the way you wanted the user to see it, and possibly alter your application’s design…

Variants of the gift emoji
The gift emoji, displayed by different devices.

The Workaround

Fortunately, whether you are a web, mobile or software developer, there is a quick and easy workaround for this problem, and that is Twemoji.

Spongebob and Patrick happy

This open source project by Twitter converts Unicode emoji characters into normal SVG images, which are icons you can enlarge as much as you like without losing any quality — also known as vector images.

This way, your emojis will be displayed in the same way on all devices that are able to display images — which means, any smartphone and PC.

Now let’s dive into a concrete example. We’ll use the Twemoji library into our web application.

1. The HTML Code

1<h1>
2  I'm a pretty header! 🎉
3</h1>
4
5<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
6<script src="app.js"></script>

2. The JavaScript Code

1twemoji.parse(document.body)

Yes, that’s all you need! 😉

3. Adding A Bit Of Style

The previous code will create a new <img> element, with the emoji class.

1<img draggable="false" class="emoji" alt="🎉" src="https://twemoji.maxcdn.com/v/13.0.1/72x72/1f389.png">

However, if we don’t add any CSS styles, this is what the output looks like…

Heading with oversized emoji

Hence, just add these 6 lines to your CSS file:

1.emoji {
2  display: inline-block;
3  width: 1em;
4  height: 1em;
5  vertical-align: -.1em;
6}

We set the width and height the same as the surrounding text, and vertically center the emoji.

And now see the final output…

Heading with emoji as image

This is how your emoji will look like on all devices using your application. Awesome! Right?

Caveats

When using this library, you have to be aware that it will create additional requests. Indeed, the output code is an <img> tag, with a source attribute to the Twemoji's MaxCDN url.

This can be problematic if you want your application to be quickly loaded through poor internet connections.

Also, the Twemojis appearance may not be to everyone's liking.

Wrapping Up

Accessibility is important: your users should be able to see any content of your application. The little trick we’ve seen in this article is in fact used in Discord applications, and also in other famous ones — even Twitter itself.

Now, you can showcase your brand-new projects to your grandparents, no matter what old device they are using. 😏

Grandma dancing

Copyright © 2022 Ludovic CHOMBEAU