Emoji issue when rendering on webkit - Issue with how HTML is rendered

Contribute UX
6

From the CSS side this is easily implemented:

img.emoji {
  width: auto; /* replacing width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

(See DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub for explanation.)

The harder work is on the “custom emoji” part and emoji rendering:

  • custom emoji needs an extra attribute for each emoji: aspect-ratio (or as an alternative height and width).
  • emoji rendering must use the new attribute aspect-ratio for custom emoji to vary the width accordingly – height stays at 20px.

Fast and easy approach for custom emoji:
For custom emoji img-tags set height="20" only and don’t set width at all – thereby ditching the benefit of setting aspect-ratio/width and height.
CSS: img.emoji { width: auto; }

2 Likes