Working with Emoji skin tones in apps

Unicode 8.0 has added five skin tone modifier characters, that are able to change the skin color of some Emojis – so-called Emoji modifier bases.

How can you utilize this interesting feature in your apps?

Modifiers

The Modifier Emojis are on most platforms represented by a square- or ellipse-shaped patch filled with a color representing a skin tone. For those interested, the skin tones are based on the Fitzpatrick scale, which divides the range of human skin colors into six categories. The two first types are represented with the same color in Emoji, hence there are only five different categories.

A great resource on emoji information is the Emojipedia, which has a special section just for this purpose.

Description of Modifiers on Emojipedia

Combining

There is a list of Emoji characters that can be modified using the skin tone modifiers – the Emoji modifier bases. These are just simple emojis that usually depict a character or a hand gesture, where the skin color defaults to the default bright yellow color. As of Unicode 9.0 there are 86 different modifier base Emojis.

By appending a modifier character after such emoji modifier base character you will get the emoji with the requested skin color:

Using skin tone modifiers with modifier bases

In case the Emoji character isn’t a modifier base, no combination will be created and two Emojis will be displayed. This is useful because it ensures the intention of changing skin color will be preserved on systems that don’t support skin tone modification.

No modification is performed with unsupported characters

Implementing Emoji skin tone modification

The following example shows implementation of Emoji skin tone modification in C#, but it can be easily ported to any other language.

Getting the list of modifier bases

The first thing we need is to find a list of all Emoji modifier bases, so that we are able to recognize when the conversion should be performed and when it should not.

It would be very tedious to have to find all the supported modifier bases manually. Fortunately, Unicode is here to help us! In the Unicode Technical Report article about Emoji (currently version 4.0, with 5.0 proposed), we can find the emoji-data section, which contains a links to the definition files, that describe the emoji character ranges. Included is a special table of Emoji_Modifier_Base  character ranges:

List of Emoji modifier base character ranges

In the first column we have either the character code or a range of such codes. This is fairly parse-able!

This code will retrieve an array of all the modifier bases from the latest version of emoji-data.txt .

Skin tones

Now let’s prepare the enumeration that will be used for the skin tone specification:

We can create an extension method, that converts the skin color enum values to the appropriate characters.

Putting it together

We have just one thing left to do – write a method that actually changes the skin tone of a given Emoji:

Note that the _modifierBases  variable is the resulting array of the GetModifierBasesAsync method above.

Because we have written the method as an extension method, changing the skin color of a emoji is now as simple as:

Code

The source code for this article is available here on my GitHub.  In addition to the library code shown above it also includes a sample UWP app that demonstrates its usage.

Summary

We have shown how Emoji skin colors work and how they can be easily utilized when writing an app to support all skin tones. Our C# sample is quite simple and can be therefore ported into most any other programming language and framework.

One Reply to “Working with Emoji skin tones in apps”

  1. I see you don’t monetize your blog, don’t waste your traffic,
    you can earn extra bucks every month because you’ve got high quality content.

    If you want to know how to make extra $$$, search for: Mrdalekjd methods for $$$

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*