The Family Emoji

October 28, 2018

I was reading Impatient JS and came up on a surprising part:

> ...['πŸ‘¨β€πŸ‘©β€πŸ‘¦']
[ 'πŸ‘¨', '‍', 'πŸ‘©', '‍', 'πŸ‘¦' ]     // cool: man, woman, and boy emojis...

but when my friend Jordan tried it:

> [...'πŸ‘ͺ']
[ 'πŸ‘ͺ' ]

What… why?! Is the book wrong?

There are 2 β€œfamily” emojis…

If you already know the answer, the book is clear… When you search for the β€œfamily emoji” and end up on a page like this, you’ll see what’s going on:

two family graphemes

There’s one codepoint that’s already the family emoji. But the same result can be obtained by combining a series of codepoints:

> [...'πŸ‘ͺ'].map(c => c.codePointAt(0))
[ 128106 ]
> [...'πŸ‘¨β€πŸ‘©β€πŸ‘¦'].map(c => c.codePointAt(0))
[ 128104, 8205, 128105, 8205, 128102 ]

// or, in hex
> [...'πŸ‘ͺ'].map(c => c.codePointAt(0).toString(16))
[ '1f46a' ]
> [...'πŸ‘¨β€πŸ‘©β€πŸ‘¦'].map(c => c.codePointAt(0).toString(16))
[ '1f468', '200d', '1f469', '200d', '1f466' ]

These are the same hexadecimal values as the screenshot above. Everything is right with the world :-)

The U+200d character is the ZERO WIDTH JOINER, abbreviated to ZWJ. The joining section from the emoji Wikipedia page gives context that will feel very familiar (pun intended).

There are all kinds of families

The example above is just one of the many emoji families available:

πŸ‘¨β€πŸ‘©β€πŸ‘¦ πŸ‘¨β€πŸ‘©β€πŸ‘§ πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘©β€πŸ‘¦β€πŸ‘¦ πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘§
πŸ‘¨β€πŸ‘¨β€πŸ‘¦ πŸ‘¨β€πŸ‘¨β€πŸ‘§ πŸ‘¨β€πŸ‘¨β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘¨β€πŸ‘¦β€πŸ‘¦ πŸ‘¨β€πŸ‘¨β€πŸ‘§β€πŸ‘§
πŸ‘©β€πŸ‘©β€πŸ‘¦ πŸ‘©β€πŸ‘©β€πŸ‘§ πŸ‘©β€πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘©β€πŸ‘©β€πŸ‘¦β€πŸ‘¦ πŸ‘©β€πŸ‘©β€πŸ‘§β€πŸ‘§
πŸ‘¨β€πŸ‘¦ πŸ‘¨β€πŸ‘¦β€πŸ‘¦ πŸ‘¨β€πŸ‘§ πŸ‘¨β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘§
πŸ‘©β€πŸ‘¦ πŸ‘©β€πŸ‘¦β€πŸ‘¦ πŸ‘©β€πŸ‘§ πŸ‘©β€πŸ‘§β€πŸ‘¦ πŸ‘©β€πŸ‘§β€πŸ‘§

Additional Resources

I had heard of these things but hadn’t fully grasped them until I played with them myself. While I was trying to figure this out, I found a bunch of good resources:

Discuss on Twitter