You Are Using Emojis The Wrong Way
Tags: webdev, mobile, a11y, twitter
Published: 2021-01-27 10:55:14

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 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](https://emojipedia.org), and then **paste** it into the source code. 

This is also what I used to do.

- Source code:
```html
<h2>
  I'm a pretty header! 🎉
</h2>
```

- Output:
<h2>I'm a pretty header! 🎉</h2>

---

# 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**.

![](https://miro.medium.com/max/625/0*h37eAJKCXfdj5Wut.gif)

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:

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

Probably not what you wanted them to see...

# Why Does This Happen ?

From [phonearena](https://www.phonearena.com/news/How-do-Emoji-work-a-guide-to-Emoji-history-nature-and-usage_id88761):

> 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…

![](https://i.imgur.com/9ANIKiZ.png)

> 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](https://twemoji.twitter.com/).

![](https://miro.medium.com/max/625/0*BjQnY7Flwat1f-fP.gif)

This open source project by [Twitter](http://twitter.com/) converts Unicode emoji characters into normal [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) 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

```html
<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

```js
twemoji.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.

```html
<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…

![](https://i.imgur.com/ezL6uJr.png)

Hence, just add these 6 lines to your CSS file:
```css
.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…

![](https://i.imgur.com/9qsTzwf.png)

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.


# Conclusion

**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](https://discord.app/) 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. 😏

![](https://media.giphy.com/media/SYLxVuYVxMjAU9uZUK/giphy.gif)

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

{% user iamludal %}