TechPrufer
Get started
GitLab
GitLab logoGitLab · Feature trail

Unicode Emoji Rendering

1 post · May 2018

What this trail covers

GitLab has evolved its emoji rendering capabilities by switching from image-based emoji to native Unicode emoji. This transition involved developing a robust system for detecting Unicode emoji support across various operating systems and browsers, implementing fallbacks to image-based emoji for unsupported environments, and addressing platform-specific rendering inconsistencies. The goal is to reduce image loading, improve performance of the emoji reaction selector, and ensure a consistent emoji experience.

All GitLab trails
  1. Our journey in switching to native Unicode emojiThis post details the technical challenges and solutions involved in migrating from image-based emoji to native Unicode emoji. It covers the implementation of a Unicode support detection mechanism using canvas rendering and localStorage caching, the creation of an npm package (`emoji-unicode-version`) to map emojis to Unicode versions, and workarounds for browser-specific rendering issues (e.g., IE11 canvas rendering, font stack issues). It also discusses emoji fallbacks using CSS sprites and the use of web components for dynamic element registration. Finally, it touches upon handling multi-character emoji like ZWJ sequences and skin tone modifiers.