Content:
Like them or loathe them, emojis are now commonplace. Aside from use in chat messaging, they’re increasingly used across society as a way of conveying emotions in text.
Web pages are no different, and it’s entirely possible to add emojis to your website.
This article will explain how emojis work, and how you can add them to your site.
Character Encoding
Before diving in any further, it’s important to understand the meaning of ‘character encoding’.
A character is any letter/symbol/etc that can be displayed using a font. Each character has a specific code, which differs across encoding types. UTF-8 and Windows-1252 are the most common encoding types, though you may be familiar with others, such as ASCII.
To display a character on screen, the system checks the current font that is selected, and finds the correct graphic to render for the given character code. This allows fonts to be changed dynamically, and is also the reason why characters look different depending on the font you have selected.
Emoji Character Encoding
So, how does this relate to emojis? Well, like any character, each emoji has a character encoding that refers to it. It’s processed the same way as any other character, with a representation of the emoji being returned.
As before, these will differ by font. Ever wondered why the emoji sent on your phone looks different on the recipients phone? It’s the character code, not the graphic itself, that is sent. Each phone then uses its own graphic to display it.
It’s also why a smiley emoji on Facebook, for example, looks different to the smiley Emoji used on Twitter. Each site has their own symbol set, which they send when a page is loaded so their site-specific graphic can be shown.
A list of emoji character codes can be found here.
Missing Encodings
One last thing to mention here, is how a system deals with missing characters. They’ll often be replaced with a blank box, like the one below.
□You may have came across these before. For western viewers, you’ll often see these when accessing sites using a language with non-English characters.
You’ll need to be mindful of this when adding emojis to your content. New emojis are added on a regular basis, but support for these newer character codes is often lagging on older systems. This is particularly true of mobile devices, which often see support for only a couple of years.
Encoding in HTML
There are a couple of steps you need to take to add an emoji character to a web page.
The first is to ensure your page has a character encoding defined. To do this, add a <meta> tag in the document <head>.
<meta charset="UTF-8">If you’re unsure, UTF-8 is probably the encoding you’ll want to use. The vast majority of websites use UFT-8 encoding.
Next, find the emoji you want to add on the emoji character list. Make a note of the code (sometimes known as the code point) for the selected emoji.
U+1F600To add this to an HTML document, it needs to be HTML encoded. HTML encoding wraps a character code inside &# and ;.
For unicode character codes, the U+ prefix, plus all characters up to the first non-zero character, are replaced with x.
U+1F600 -> 😀
U+0024 -> $That’s pretty much all there is to it, at least if you’re writing HTML from scratch.
If you’re using a framework, such as WordPress, you might find the HTML encoded string is instead printed in plain text. This occurs when the framework you’re using HTML encodes certain non-alphabet characters.
This usually arises due to the & character in the string being replaced with & (a special HTML encoded string for this character). Check the text in your browser inspector – if you see &, this is the problem.
If this is the case, check the documentation for your framework, to find how to bypass automatic HTML encoding.