Twemoji verification issues

[nadonomy]

Using this issue as a catch-all to ensure things are captured. Feel free to break out into multiple issues with better priorities.

Since we switched to use the font based Twemoji implementation on Riot Web (& plan to use it on Riot Android), some concerns and thoughts have arisen:

• Despite our best efforts (a) some browsers/OS's still fail to always to render emoji (b) we've observed at least on macOS that some browser plugins can cause Riot Web to display native OS emoji intermittently. To ensure consistency for emoji verification, should we bundle SVG's for the 64 emoji we use?
• For technical reasons, we don't plan to use Twemoji on iOS. We should validate the emoji we've picked are easily identifiable between native Apple emoji & Twemoji. From there, we should consider (a) refining the selection or (b) including Twemoji on iOS for verification only for consistency across platforms.
• We should validate we're happy with how distinct each emoji is in Twemoji— for example banana and moon have a very similar silhouette, and strawberry and apple are easily mistakable at a glance. Again, we may want to refine our selection.

[bwindels]

Some examples of how it looks in practice (on Linux):

Chromium with Noto Color Emoji

Firefox with Twemoji

Chromium without Noto Color Emoji (which is not installed universally) or Twemoji

[nadonomy]

Ah thanks @bwindels — if it's trivial would you mind posting up screenshots of the same of the emoji list in this doc please?

[bwindels]

Twemoji

Noto Color Emoji

Symbola:

[nadonomy]

For reference, same selection using native Apple Emoji:

When we look at this in more detail I'll comp these all next to each other in easier to compare artboards.