Skip to content

Instantly share code, notes, and snippets.

@DeeDeeG

DeeDeeG/Color-Font-Support_Ubuntu-Bionic_Browsers.md

Last active January 10, 2018 13:59
Show Gist options
  • Save DeeDeeG/73766eb6edfcee8715ab774be17f5da8 to your computer and use it in GitHub Desktop.
Save DeeDeeG/73766eb6edfcee8715ab774be17f5da8 to your computer and use it in GitHub Desktop.
Download ZIP
Shows browser support for the various formats of color fonts. (Most of these formats are of popular interest for emojis only at the moment. All could be used for other kinds of fonts, though.)
Raw
Color-Font-Support_Ubuntu-Bionic_Browsers.md

Chrome:

Version: 62.0.3202.94 (Official Build) (64-bit) User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

chrome_screenshot

Firefox:

Version: 57.0 Build ID: 20171112125346 User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0

firefox_screenshot

Gnome Web (Epiphany):

Version: epiphany-browser 3.26.1-1ubuntu4 amd64 User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/605.1 (KHTML, like Gecko) Version/11.0 Safari/605.1 Ubuntu/18.04 (3.26.1-1ubuntu4) Epiphany/3.26.1

epiphany_screenshot

Opera:

Version: 49.0.2725.39 User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 OPR/49.0.2725.39

opera_screenshot

@DeeDeeG
Copy link
Author

DeeDeeG commented Nov 24, 2017 •
edited
Loading

@Jolg42 you wondered about Ubuntu's color font support in 18.04.

Support is probably going to improve as Ubuntu updates their software packages and as individual app developers improve their support for color fonts.

In these screenshots...
Segoe UI Emoji is Microsoft's COLR/CPAL,
Apple Color Emoji is Apple's SBIX,
Noto Color Emoji is Google's CBLC/CBDT,
and Twemoji is the Mozilla/Adobe proposed SVG in OpenType.

If a given font is completely unsupported, it will fall back to Symbola (symbola-dog).

You may notice some glyphs render in black and white despite coming from color fonts. In the case of Twemoji, this is a baked-in black/white outline glyph, and the browser is not technically rendering any SVG content if the Twemoji glyph appears black and white.

Segoe UI Emoji manages to render in every browser I tried, but in black and white everywhere but Firefox. I can't be sure if the font has baked-in black/white outline glyphs to fall back on, or if the browsers are actually somehow flattening and decolorizing the color stacked glyph. That's beyond my level of understanding here.

Also please note, whoever reads this: These results are only relevant to Ubuntu Linux 18.04, not other Linux distributions, and not Windows or macOS or BSD etc. Furthermore, this is not the final product of Ubuntu 18.04, but instead is derived from the daily image, which is strictly for development and evaluation/testing purposes. There are still four or five good months of development left on Ubuntu 18.04, so this is not by any means representative of that final product, just a snapshot of where support is right now several months ahead of release.

Edit:

See also browser support for color fonts in macOS El Capitan and Windows 10

@DeeDeeG
Copy link
Author

DeeDeeG commented Nov 24, 2017 •
edited
Loading

Errors from "developer tools" consoles (As of November 24 2017):

Chrome and Opera won't use a font in @font-face if it is larger than 30MB, which Apple Color Emoji is (It's about 70MB.)

chrome web console screenshot

Firefox won't try to render Apple Color Emoji or Noto Color Emoji in @font-face, because neither passes its font sanitizer.
Noto:
firefox console noto

Apple:
firefox console apple 1
firefox console apple 2

See also dev tools errors unique to Windows here: Comment.
For dev tools errors unique to macOS, see here: Comment.

@DeeDeeG
Copy link
Author

DeeDeeG commented Nov 25, 2017

Outside of browsers, the Ubuntu desktop is gaining support mainly for CBLC/CBDT (Google's format and Noto Color Emoji) as well as SBIX (Apple's format and Apple Color Emoji), whereas color SVG and COLR/CPAL font support seems non-existent other than falling back to black and white. Can't recall if Microsoft's Segoe UI Emoji has black/white outline glyphs baked in or not, but I know this copy of Twemoji Color Font does.

Here's some screenshots:

Noto Color Emoji (CBLC/CBDT):

cblc-cbdt outside of browsers

Apple Color Emoji (SBIX):

sbix outside of browsers
(Note: My copy of Apple Color Emoji is a bit out of date, so it doesn't cover all the newer emoji. That's not a Ubuntu problem, that's just my font being out of date.)

Segoe UI Emoji (COLR/CPAL) (fallback black/white presentation):

colr-cpal outside of browsers

Twemoji (SVG in OpenType) (fallback traditional outline glyphs shown only):

svg-in-opentype outside of browsers

(Thank you to Emojipedia.org and various Twitter users for creating strings of emoji I could copy-paste...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment