DEV Community

Rijul Rajesh
Rijul Rajesh

Posted on

From Simple to Complex: How ZWJs Build the Emojis We Use Every Day

#emojis #dev #zwjs

Emojis are everywhere today. From casual chats to professional apps, we use them to express emotions, objects, professions, and even complex ideas. But have you ever wondered how emojis like a female doctor with dark skin or a family of three are actually represented behind the scenes? The answer lies in something called ZWJ, which stands for Zero Width Joiner.

What is a ZWJ

A Zero Width Joiner is a special Unicode character that is invisible when displayed. Its main job is to join two or more characters together to form a single, complex glyph. In other words, it lets multiple emojis combine into one visual unit. Without ZWJs, many of the diverse emojis we use today would either not exist or would appear as separate characters.

For example, consider the emoji of a family. Instead of having a single code point for every possible family combination, Unicode uses multiple basic emojis like 👨, 👩, 👧 and joins them using ZWJs to create a single family emoji.

Perfect. Let’s update the examples to show both the components and the final combined emoji so it is crystal clear for readers. Here’s the revised article section:

How ZWJs Combine Emojis

Emojis can be combined in several ways using ZWJs. Some common scenarios include:

1 Gender Variations
Many occupations or roles come in male and female variants. The base emoji is combined with a gender emoji using a ZWJ. Examples:

  • 👨 + ZWJ + ⚕️ → 👨‍⚕️ (male doctor)
  • 👩 + ZWJ + ⚕️ → 👩‍⚕️ (female doctor)
  • 👨 + ZWJ + 🍳 → 👨‍🍳 (male chef)
  • 👩 + ZWJ + 🍳 → 👩‍🍳 (female chef)
  • 👨 + ZWJ + 🚀 → 👨‍🚀 (male astronaut)
  • 👩 + ZWJ + 🚀 → 👩‍🚀 (female astronaut)

2 Skin Tone Modifiers
Unicode supports skin tone modifiers. The modifier is applied directly to the base emoji. Examples:

  • 👨 + 🏻 → 👨🏻 (light skin tone man)
  • 👩 + 🏾 → 👩🏾 (medium-dark skin tone woman)
  • 👨 + 🏽 + ZWJ + ⚕️ → 👨🏽‍⚕️ (medium skin tone male doctor)
  • 👩 + 🏿 + ZWJ + 🎨 → 👩🏿‍🎨 (dark skin tone female artist)

3 Complex Combinations
Emojis can combine gender, profession, and skin tone all at once. Examples:

  • 👩 + 🏽 + ZWJ + 💻 → 👩🏽‍💻 (female technologist with medium skin tone)
  • 👨 + 🏿 + ZWJ + 🚒 → 👨🏿‍🚒 (male firefighter with dark skin tone)
  • 👩 + 🏼 + ZWJ + 🎓 → 👩🏼‍🎓 (female student with medium-light skin tone)
  • 👨 + 🏾 + ZWJ + ⚖️ → 👨🏾‍⚖️ (male judge with medium-dark skin tone)

4 Families and Groups
Family emojis or people holding hands use multiple people emojis joined with ZWJs. Examples:

  • 👨 + ZWJ + 👩 + ZWJ + 👧 → 👨‍👩‍👧 (man, woman, and girl)
  • 👩 + ZWJ + 👩 + ZWJ + 👦 → 👩‍👩‍👦 (two women and a boy)
  • 👨 + ZWJ + 👨 + ZWJ + 👧 + ZWJ + 👦 → 👨‍👨‍👧‍👦 (two men, a girl, and a boy)

These examples show how versatile ZWJs are in creating rich, inclusive emoji combinations without bloating the Unicode standard.

Why ZWJs Matter

ZWJs are important because they make emojis extensible. Rather than creating a new Unicode code point for every possible combination, Unicode can combine existing characters to represent complex ideas. This keeps the Unicode set manageable while allowing creativity and inclusivity.

Another advantage is consistency across platforms. When an app or website correctly interprets ZWJ sequences, users can see the intended emoji regardless of device. Without ZWJs, emojis might appear broken or separated into multiple symbols, confusing the meaning.

Testing and Playing With ZWJ Sequences

Developers can experiment with ZWJ sequences using Unicode code points. For instance, if you want a man mechanic with light skin tone, you could combine:

👨 + 🏽 + ⚒️
Enter fullscreen mode Exit fullscreen mode

Or for a woman artist with dark skin tone:

👩 + 🏿 + 🎨
Enter fullscreen mode Exit fullscreen mode

Or even a family with mixed skin tones:

👩🏾 + ZWJ + 👩🏻 + ZWJ + 👦🏽
Enter fullscreen mode Exit fullscreen mode

When rendered correctly, the ZWJ ensures these separate symbols appear as a single, unified emoji.

Conclusion

Zero Width Joiners are the unsung heroes of the emoji world. They allow for endless combinations of gender, skin tone, profession, and family configurations without bloating the Unicode standard. Understanding how ZWJs work can help developers, designers, and curious users appreciate the complexity behind the simple emojis we use every day.

Emojis are not just fun characters. They are a subtle example of how coding and design come together to represent human diversity and expression in digital form.

If you’ve ever struggled with repetitive tasks, obscure commands, or debugging headaches, this platform is here to make your life easier. It’s free, open-source, and built with developers in mind.

👉 Explore the tools: FreeDevTools

👉 Star the repo: freedevtools

Top comments (0)