Use native Emojis on platforms which natively support Emojis
Description
Currently we're using Emoji One images spritesheet for showing Emojis on GitLab at various places. Here are pros and cons of having PNG spritesheet.
Pros
-
✅ Consistent Emoji look and feel on any browser/OS combination. -
✅ Ability to support new Emojis as they are standardised by UNICODE.
Cons
-
❎ Emoji spritesheet is over 1 MB in size. This becomes a large download if image is not cached -
❎ Spritesheet and individual emoji icon images are PNG files with regular resolutions for standard and x2 resolution for high DPI screens, this can grow download size quickly as new emojis are standardized. -
❎ If a page with several types of emoji reactions made, will involve network requests for each reaction image file.- Eg; Open browser DevTools and navigate to !7196, once page is loaded, go to Network Tab and filter image requests with path
/assets.
- Eg; Open browser DevTools and navigate to !7196, once page is loaded, go to Network Tab and filter image requests with path
-
❎ We adopted to use system fonts for GitLab to make GitLab feel more integrated with Operating System, having Emojis which doesn't match the look of system Emojis contradicts our own argument.
Proposal
We can utilize platform's Emoji support and rely on our traditional emoji mechanism only on unsupported platform, i.e. Progressive Enhancement for Emojis. This is already being done by GitHub.
Here's how GitHub issues page looks on different platforms.
Chrome on Linux (Ubuntu)
Chrome on Android
Chrome on Windows 10
State of Emoji support on different platforms
Let's look at current state of Emoji support in different Operating Systems.
macOS (formerly, OS X)
-
✅ All browsers and⚠ Chrome 41+.
Windows
-
⚠ Windows 7 added support for B&W Emojis, color Emojis supported starting✅ Windows 8. -
⚠ Chrome 53 added support for Emojis under Windows.