Skip to content

3.12.0

Choose a tag to compare

View all tags
@matmen matmen released this 30 Oct 13:26
· 53 commits to master since this release
Immutable release. Only release title and notes can be modified.
v3.12.0
f916304

This release adds variable fonts to text and SVG rendering, and converts AVIFs with wide gamut color primaries (Display P3, BT.2020) to sRGB when decoding. Like every codec and renderer in ImageScript, it's plain TypeScript: no WebAssembly and no native code. There are no breaking API changes, but decoded pixels of AVIFs with other primaries than sRGB's change (see below).

await Image.renderText(robotoFlex, 32, 'Hello', { variations: { weight: 700, width: 87.5 } });
await Image.renderText(robotoFlex, 32, 'Hello', { variations: { weight: 500, GRAD: 50 } }); // custom axes by tag
await Image.renderSVG(svg, { fonts: [interVariable] });   // font-weight: 650 → Inter at wght 650
await Image.decode(p3Avif);                               // now converted from Display P3 to sRGB

Variable fonts

renderText() renders the instance TextStyle.variations asks for:

  • Axes by name: weight (1-1000), width (percent of normal), slant (degrees), italic (true/false), opticalSize (pixels); other axes by their tag, like Roboto Flex's GRAD
  • Optical size: the font size unless given, like browsers' font-optical-sizing: auto, so small text uses the font's sturdier small-size design
  • Values outside an axis's range are clamped, axes a font doesn't have are ignored, and misspelled names throw a RangeError

renderSVG() uses variable fonts like browsers do: font-weight, font-stretch and font-style set the weight, width, italic and slant axes, font-optical-sizing the optical size, and font-variation-settings overrides them. A variable font covers its whole range of weights and widths when fonts are matched, like several faces of a family.

What varies: TrueType outlines (with composite glyphs), advances, line metrics, kerning and mark positions, the glyphs fonts substitute at some axis values, and hinting. Outlines and advances are the same as fontTools' and HarfBuzz's, shaping matches HarfBuzz, and all 14 of resvg's font-variation-settings tests pass. Variable fonts with CFF2 (PostScript) outlines aren't supported yet.

AVIF color primaries

AVIFs without an ICC profile whose color information gives other primaries than sRGB's (Display P3, BT.2020, DCI-P3, ...) or a gamma 2.2, 2.8 or linear transfer are converted to sRGB when decoding, like browsers show them, relative colorimetric and within 1 of LittleCMS. applyColorProfile: false keeps the stored values. Most AVIFs (sRGB/BT.709 or unspecified primaries) stay the same.

See the changelog for the details.

Assets 3
Loading