Skip to content

googlefonts/nanoemoji

 
 

Repository files navigation

CI Build Status PyPI pyup

nanoemoji

A wee tool to build color fonts, including the proposed COLRv1. Relies heavily on Skia via picosvg, as well as resvg to rasterize SVG to PNG for the bitmap color formats.

For example, to build a COLRv1 font with a focus on handwriting do the following in a venv:

pip install -e .
nanoemoji --helpfull
nanoemoji --color_format glyf_colr_1 $(find ../noto-emoji/svg -name 'emoji_u270d*.svg')

Requires Python 3.7 or greater.

Color table support

Format Support Notes
COLRv1 Yes x-glyph reuse
COLRv0 Yes x-glyph reuse (limited), no gradients
SVG Yes x-glyph reuse
sbix Yes Only for Mac Safari due to harfbuzz/harfbuzz#2679 (comment). Only square bitmaps. Uses resvg.
CBDT Yes Only square bitmaps. Uses resvg.

Adding color tables to existing fonts

⚠️ under active development, doubtless full of bugs

Given at least one vector color table (COLR or SVG) the other vector color table and bitmap table(s) can be generated:

# Adds COLR to a font with SVG and vice versa
maximum_color my_colr_font.ttf

# Adds COLR to a font with SVG and vice versa, and generates a CBDT table
maximum_color --bitmaps my_colr_font.ttf

The intended result is a font that will Just Work in any modern browser:

Color table Target browser Notes
COLR Chrome 98+ https://developer.chrome.com/blog/colrv1-fonts/
SVG Firefox, Safari
CBDT Chrome <98 Only generated if you pass --bitmaps to maximum_color

Note that at time of writing Chrome 98+ prefers CBDT to COLR. Also CBDT is huge. So ... maybe take the resulting font and subset it per-browser if at all possible. Wouldn't it be nice if Google Fonts did that for you?

Releasing

See https://googlefonts.github.io/python#make-a-release.

QA

To help confirm valid output nanoemoji can optionally perform image diffs between browser rendering of the original SVGs and rendering from the compiled font.

Chrome must be installed in the normal location.

Usage:

# Get some svgs to play with
git clone --recursive git@github.com:googlefonts/color-fonts.git

# Now run nanoemoji, render some hands, and see how we do!
# https://rsheeter.github.io/android_fonts/emoji.html?q=u:270b
nanoemoji --gen_svg_font_diffs \
	$(find color-fonts/font-srcs/noto-emoji/svg -name 'emoji_u270b*.svg')