BlogsGitLabUnicode Emoji Rendering

Unicode Emoji Rendering

Unicode Emoji Rendering

1
posts
2018

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 for users.

2018

Our journey in switching to native Unicode emoji

5/30/2018

This post details the technical challenges and solutions involved in migrating from image-based emoji to native Unicode emoji. Key contributions include: developing a method to test Unicode emoji support by rendering to a canvas and inspecting pixels, creating a custom npm package (`emoji-unicode-version`) to map emojis to their Unicode versions by scraping Emojipedia, implementing a local cache (`localStorage`) for emoji support maps, addressing Internet Explorer-specific canvas rendering issues with font stacks, standardizing on a 16px font size for canvas rendering due to mobile Safari limitations, and implementing fallback mechanisms using CSS sprites and `<gl-emoji>` web components with `document.registerElement()` for compatibility. It also highlights the complexities of ZWJ sequences and skin tone modifiers.