repository·main·Indexed 43 days ago
https://github.com/googlefonts/nanoemojiA tool for building color fonts, including support for the COLRv1 specification. It utilizes Skia (via picosvg) and resvg for vector and bitmap color table generation. It provides a CLI to build fonts from SVG files, a `maximum_color` command to add missing color tables (SVG, COLR, or CBDT) to existing fonts, and utilities for performing QA image diffs between SVGs and compiled fonts.
To verify the quality of the output, nanoemoji can perform image diffs between the original SVGs (rendered by Chrome) and the compiled font.
Requirement: Chrome must be installed in its standard location on your system.
To run a diff check on a set of SVGs:
nanoemoji --gen_svg_font_diffs $(find <path_to_svgs> -name '<pattern>.svg')nanoemoji --gen_svg_font_diffs \
$(find color-fonts/font-srcs/noto-emoji/svg -name 'emoji_u270b*.svg')To use nanoemoji, you must have Python 3.10 or greater installed. It is recommended to install it within a virtual environment (venv).
Run the following command to install the package in editable mode from the local repository:
pip install -e .The maximum_color command allows you to add missing color tables to an existing font. If you provide at least one vector color table (COLR or SVG), it can generate the other vector table and bitmap tables.
Note: This feature is under active development and may contain bugs.
To add COLR to a font that has SVG (and vice versa):
maximum_color my_colr_font.ttfTo add COLR/SVG and also generate a CBDT bitmap table:
maximum_color --bitmaps my_colr_font.ttf| Color table | Target browser | Notes |
|---|---|---|
| COLR | Chrome 98+ | |
| SVG | Firefox, Safari | |
| CBDT | Chrome <98 | Only generated if --bitmaps is passed to maximum_color. |
# 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.ttfThe nanoemoji.paint module provides a hierarchy of classes for defining COLRv1 paint properties, including solid colors, gradients, glyph-based paints, and various transformations. These classes are designed to be used when constructing or manipulating COLRv1 font data.
Key components include:
Paint: The abstract base class for all paint types.PaintSolid: A single color.PaintLinearGradient and PaintRadialGradient: Gradient fills with color stops.PaintGlyph: A paint that uses another glyph.PaintTransform family: Classes like PaintTranslate, PaintScale, PaintRotate, and PaintSkew that apply geometric transformations to a child paint.PaintComposite: Combines a source and backdrop paint using a CompositeMode (Porter-Duff modes).The ReuseCache class manages the lifecycle of reusable SVG elements (paths and gradients) during the font building process.
Key Attributes:
reuse_tolerance: A float used to determine if two shapes or gradients are similar enough to be reused.glyph_cache: A GlyphReuseCache for tracking shapes.glyph_elements: A mapping of glyph names to their corresponding etree.Element (the actual SVG nodes).gradient_ids: A mapping of GradientReuseKey to SVG gradient IDs, allowing multiple glyphs to share the same <linearGradient> or <radialGradient> definitions.SKIP_REUSE: A class-level sentinel value (ReuseResult('', Affine2D.identity())) used to explicitly instruct the builder to skip reuse for a specific glyph (e.g., for .notdef).The reorder_glyphs logic uses two primary internal abstractions to maintain table integrity when glyph IDs change:
Used for tables that define coverage (a list of glyphs). It can optionally reorder a parallel_list that is tied to the coverage entries.
coverage_attr: The attribute name on the table object containing the glyph coverage (defaults to "Coverage").parallel_list_attr: An optional attribute name for a list that must be reordered in lockstep with the coverage glyphs.Used for lists that are ordered by coverage itself but contain items that need to be sorted by a specific glyph key.
list_attr: The attribute name of the list to reorder.key: The attribute name on the items within the list that refers to a glyph name (used to look up the new glyph ID).When picosvg=True is used in make_svg_table, the library performs the following optimization steps:
DisjointSet to group glyphs that share identical shapes. Glyphs in the same group are bundled into a single SVG document.ReuseCache tracks previously encountered shapes and gradients.<use> Elements: Instead of duplicating path data, the library inserts <use> elements pointing to IDs in the <defs> section of the shared SVG document.fill or opacity that are identical across all uses of a shape are migrated from the <use> element to the target shape in <defs>.Note on .notdef: The .notdef glyph is treated specially; it is kept as the first glyph and is not grouped with other glyphs to prevent reshuffling issues.
You can use the nanoemoji CLI to build color fonts (including COLRv1) from a collection of SVG files.
To build a font using the glyf_colr_1 format (COLRv1) from a set of SVGs, use the following pattern:
nanoemoji --color_format glyf_colr_1 $(find <path_to_svgs> -name '<pattern>.svg')Example for building a font from Noto Emoji SVGs focusing on specific characters:
nanoemoji --color_format glyf_colr_1 $(find ../noto-emoji/svg -name 'emoji_u270d*.svg')The configuration file generated by write_config_for_mergeable.py follows this structure:
output_file = "COLR.ttf"
color_format = "<format>"
upem = <int>
width = 0 # from input width
ascender = <int>
descender = <int>
keep_glyph_names = true
fea_file = ""
[axis.wght]
name = "Weight"
default = 400
[master.regular]
style_name = "Regular"
[master.regular.position]
wght = 400Key fields:
output_file: The name of the resulting font file.color_format: The color format to be used.upem: Units per Em extracted from the source font.ascender: TypoAscender value from the source font.descender: TypoDescender value from the source font.keep_glyph_names: Boolean indicating whether to preserve glyph names.[axis.<name>]: Defines variable font axes (e.g., wght for weight).[master.<style>]: Defines font masters and their corresponding axis positions.nanoemoji supports several color table formats for building fonts:
| Format | Support | Notes |
|---|---|---|
| COLRv1 | Yes | Supports x-glyph reuse. |
| COLRv0 | Yes | Supports limited x-glyph reuse; no gradients. |
| SVG | Yes | Supports x-glyph reuse. |
| sbix | Yes | Only for Mac Safari. Uses square bitmaps via resvg. |
| CBDT | Yes | Only square bitmaps via resvg. |
The reorder_glyphs function updates the glyph order of a fontTools.ttLib.TTFont object and automatically synchronizes related OpenType tables (GPOS, GSUB, GDEF, and MATH) to ensure they remain consistent with the new glyph order.
Requirements:
new_glyph_order must contain the exact same set of glyphs as the original font.require_fully_loaded internally).Behavior:
font.setGlyphOrder().ReorderRules to reorder them based on the new glyph IDs.from fontTools.ttLib import TTFont
from nanoemoji.reorder_glyphs import reorder_glyphs
font = TTFont("path/to/font.ttf")
new_order = ["glyph_b", "glyph_a", "glyph_c"] # Must be same set as original
reorder_glyphs(font, new_order)
font.save("path/to/font_reordered.ttf")The transformed(transform: Affine2D, target: Paint) -> Paint function attempts to wrap a target paint in the most efficient COLRv1 transformation possible based on the provided Affine2D matrix.
It performs optimizations such as:
int16, it returns a PaintTranslate.PaintScaleUniform or PaintScaleUniformAroundCenter.PaintScale or PaintScaleAroundCenter.PaintTransform containing the full 6-element matrix.