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

Starting With An Example

The common mistake programmers make when it comes to include emojis in their application, is to simply copy them, for instance from a website such as Emojipedia, and then paste it into the source code.

This is also what I used to do.

• Source code:

<h2>  I'm a pretty header! </h2>

• Output:

  I'm a pretty header!

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.

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:

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. Its 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 applications design

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.

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 lets dive into a concrete example. Well use the Twemoji library into our web application.

1. The HTML Code

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

2. The JavaScript Code

twemoji.parse(document.body)

Yes, thats all you need!

3. Adding A Bit Of Style

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

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

However, if we dont add any CSS styles, this is what the output looks like

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

.emoji {  display: inline-block;  width: 1em;  height: 1em;  vertical-align: -.1em;}

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

And now see the final output

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

Conclusion

Accessibility is important: your users should be able to see any content of your application. The little trick weve 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.

I hope this article was helpful for you! Will you now include Twemoji in your projects? Let me know in the comments!