foliojs / fontkit

An advanced font engine for Node and the browser
1.44k stars 210 forks source link

COLRv1 support #298

Open simoncozens opened 1 year ago

simoncozens commented 1 year ago

This is a WIP PR for COLRv1 support. At the moment it should handle the decoding of COLRv1 tables, but this isn't plugged in to the rest of the library. To get that working, we would need to think through how we want to represent paint trees.

Also no tests yet, but they're coming.

simoncozens commented 1 year ago

As of this point, we can render (simple) COLRv1 glyphs on canvas:

const dpi = window.devicePixelRatio;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.style.width = '200px'
canvas.style.height = '200px'
canvas.getContext('2d').scale(dpi, dpi);
ctx.transform(1.0, 0, 0, -1.0, 0,120); // flip Y direction, 0 in font is baseline, 0 in canvas is top!

let glyph = font.glyphForCodePoint(0x270d);
glyph.render(ctx, 120);
Screenshot 2022-12-06 at 14 08 49

Next step... instantiating variable paints!

simoncozens commented 1 year ago

Code is done, needs tests.

simoncozens commented 1 year ago

This is ready to merge, I think. Here is an example of a Jquery polyfill using fontkit to render COLRv1 fonts on Safari, which is not currently supported natively:

Screenshot 2023-06-08 at 10 38 28
simoncozens commented 12 months ago

Ping?

Also, the last commit I just added is not technically related to COLRv1; I was going to submit it as a separate PR but it builds on the fact that the DeltaSetIndexMap is moved to variations.js instead of HVAR. This allows for some of the gnarlier tables (ItemVariationStore, DeltaSetIndexMap) to be written back to binary, for example after being edited or subsetted. If it's out of scope I'm happy to drop it.