Emoji Skin Tone Modifier: Programmatic Processing Guide

It's no secret that Emoji has multiple skin colors. Especially in text and social media, they are very popular. ?? (Rising Black Fist) emojis were even named "Best Emoji of 2020" by Emojipedia's World Emoji Award.

Each skin color is a modifier, and many emojis are composed of modifiers and basic encodings that correspond to specific characters. Unfortunately, not every emoji library supports modifiers. But given its popularity, emoji skin tone modifiers are much more than the “icing on the cake” feature. Furthermore, they are also a clever way of working because they allow us to write more modular and more efficient code.

Therefore, the purpose of this article is to figure out how to process emoji modifiers programmatically. This way, if you encounter situations where skin tones are not supported, or want to create custom variants of other emojis, you know what to do!

Fitzpatrick skin tone grading method

The skin tone modifier was officially added to the emoji in 2015 as part of Unicode 8.0. They are based on the Fitzpatrick skin tone rating method, a formal classification of human skin tones. The following table shows how emoji characters match the Fitzpatrick type:

In the simplest use case, when one of these characters is attached to an emoji that supports the skin tone modifier, it changes the skin tone of the emoji.

In other words: ? ? = ??

Apply skin color modifiers using CSS

To switch between emoji skin tones using CSS, we will start with the basic emoji character (?) and then attach the skin tones using ::after pseudo selector.

In addition to using rendered emoji characters, we can also use Unicode hexadecimal code:

Use JavaScript to remove and switch skin color modifiers

What if the emoji being processed has already applied the skin tone modifier? To do this, we need to go beyond CSS. Here is an example using JavaScript:

What's going on here? First, we start with a baby emoji with Fitzpatrick type 4. It is then passed to the removeModifier function, which searches for any skin tone modifier and removes it from the string. Now that we have emojis without modifiers, we can add any modifiers we like.

While this approach works for many emojis, we have problems when introducing other modifiers. That's why we need to discuss now...

Processing ZWJ sequences

The zero-width connector (ZWJ) sequence is like the compound word of Unicode. They consist of two or more emojis connected by zero-width connector U 200D.

ZWJ sequences are most commonly used to add gender modifiers to emojis. For example, a weightlifter plus ZWJ, plus a female symbol, is equivalent to a weightlifting woman (??? ♀? = ???♀?).

When processing ZWJ sequences, you need to pay attention to the following points:

• These sequences are just suggestions. They come from the Unicode Alliance and are not guaranteed to be supported on every platform. If the platform does not support them, a fallback sequence of regular emojis will be displayed.
• If a skin tone modifier is present, it must be included after the emoji but before ZWJ.
• Some ZWJ sequences contain multiple emojis, each with a different skin tone modifier.

Given this information, we need to make the following changes to the previous code example:

• The skin tone modifier needs to be inserted after any basic emoji, not just attached to the end of the emoji.
• If there are multiple emojis in the ZWJ sequence with skin tone modifiers, you need to replace the modifier for each emoji.

limit

From this example, you can notice the limitations of consistency. The editor view displays each character in the ZWJ sequence, except for the skin tone modifier, which is immediately applied to their corresponding emojis. On the other hand, the console or result view will try to render the characters of the entire sequence.

Support for this varies from platform to platform. Some editors may try to render ZWJ sequences, and not all browsers support the same set of ZWJ sequences.

Additionally, adding skin tones to the ZWJ sequence requires knowing what is used as the basic emoji. While this is relatively simple in the case where emojis are provided by known collections, things can become more difficult if we want to be able to handle arbitrary input from the user.

Also, note that the CSS solution in this article is not compatible with ZWJ sequences.

Issues guiding development

I've sorted out some questions you might need to ask yourself when designing a system that needs to deal with emoji skin tone modifiers:

• Can I control what emojis my system will interact with?
• Does my emoji library contain information about which emojis support skin tone modifiers?
• Does my system need to add, delete, or change modifiers?
• Does my platform support ZWJ sequences? If so, which ones?
• Does my system need to support ZWJ sequences with multiple skin tone modifiers?

Hopefully with answers to these questions and the examples we see here, you will have everything you need to support emoji skin tone modifiers when needed.

The above is the detailed content of Changing Emoji Skin Tones Programmatically. For more information, please follow other related articles on the PHP Chinese website!