Emojis with mixed skin tone variants not rendering correctly

[joeattardi]

The latest emoji updates support handshake emojis with mixed skin tone variants. This is not rendering/working correctly currently.

When selecting the handshake, all the "half handshake" variants appear in the popup:

If one is selected, it renders two emojis side by side in the emitted result:

This is similar to the couple emojis ("with heart", "kissing", etc.):

This one overflows in the preview area:

Apple has a nice interface for these types of emojis:

You can select the generic yellow one in the bottom left, or to construct a mixed one, the top row shows the left hand variants and the bottom row shows the right. You can click in each row to set the skin tone of each side, then click the final emoji in the bottom right.

Tasks

• [ ] Find a way to identify such mixed variant emojis
• [ ] Provide the alternative variant popup for these
• [ ] If variant popup not used, make sure the weird double rendering issue shown above does not happen --> use the generic yellow one.

[joeattardi]

Some more details:

The variants exposed by the emoji data appear to be the two "halves":

Once the correct variant is chosen, the two glyphs need to be superimposed on top of each other.

[joeattardi]

Twemoji seems to handle this already:

[joeattardi]

The mixed tone handshake is part of Emoji 14, this looks to be a rendering error for the OS not supporting it yet. It renders the emoji character sequence the only way it knows how.

Looking at the emojibase data, it looks like each variant also has a version field, so we can filter out unsupported variants to prevent the rendering issues.

[joeattardi]

Update: Even with Emoji 14 support, these are still not rendering correctly in some browsers. They look ok in Safari:

But render incorrectly in Chrome:

Chrome bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1310282&q=emoji&can=2

[joeattardi]

Emoji variants with a version are filtered out when they don't match the current version. As for rendering issues, there's not much else that can be done if it's a browser bug other than provide a note in the documentation.

Closing this for now.