Display fallback emoji images with native aspect ratio

What does this MR do and why?

On certain platforms, e.g. Ubuntu, emoji are rendered with <img> tags instead of the emoji characters from the user's font.

The emoji are natively square (64px x 64px). By displaying them 20px x 16px we squash the images vertically.

Because the line height we use is 16px we cannot display the emoji at 20px x 20px as this will force any line containing an emoji to display too high. So scale to 16px x 16px.

Screenshots or screen recordings

Steps to reproduce

The emoji only render as images if the emoji are unavailable in the font, or if the emoji are detected as being black and white. On most platforms therefore emoji are rendered from the font. On some default Linux configurations (e.g. Ubuntu Linux 20.04 with Chrome) the font emoji are monochromatic by default and so these <img> tags are rendered by default.

You can reproduce the basic issue here by viewing a custom emoji, e.g. , that is not part of the font emoji set.

To recreate the scenario where all emoji render as images you can force the behaviour locally by modifying isEmojiUnicodeSupported() to always return false.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.