@arraypress/covers 1.0.0 → 1.1.0

package/src/text.d.ts

@@ -0,0 +1,29 @@
+// Text: shaping, line breaking and outline drawing.
+import type { LoadedFont } from './fonts.js';
+
+/** A shaped run: glyph ids and pen positions, px. */
+export interface Shaped {
+  /** Pen positions, px. A glyph from another face (fallback, a span) carries it, its own size, a paint key and a transform. */
+  glyphs: { gid: number; x: number; y: number; cluster?: number; face?: LoadedFont; size?: number; paint?: string; t?: [number, number, number, number, number, number] }[];
+  /** Advance width, px. */
+  width: number;
+}
+
+/** Laid-out text. */
+export interface Layout {
+  lines: { text: string; run: Shaped }[];
+  size: number;
+  truncated: boolean;
+  width: number;
+}
+
+/** Shape one line at a size with letter-spacing (px between clusters). */
+export function shape(face: LoadedFont, text: string, size: number, tracking: number, hb?: unknown): Shaped;
+/** A glyph's outline as parsed commands, font units (cached on the face). */
+export function outline(face: LoadedFont, gid: number): (string | number)[];
+/** Shaped glyphs as SVG path data, px. */
+export function runPath(face: LoadedFont, run: Shaped, size: number, x: number, baseline: number): string;
+/** Break text into lines: greedy, optionally balanced, shrinking toward `minSize`, truncated past `maxLines`. */
+export function layout(o: { face: LoadedFont; hb?: unknown; text: string; size: number; minSize?: number; letterSpacing?: number; maxWidth?: number; maxLines?: number; ellipsis?: string; balance?: boolean }): Layout;
+/** Collapse spaces, trim lines and apply a case. */
+export function caseText(s: string, t: string | undefined): string;

package/src/text.js

@@ -27,7 +27,7 @@ import { num } from './svg.js';
  * A shaped run of text.
  *
  * @typedef {object} Shaped
- * @property {{ gid: number, x: number, y: number }[]} glyphs - Glyph ids and pen positions in px (y is the baseline offset).
+ * @property {{ gid: number, x: number, y: number, cluster?: number }[]} glyphs - Glyph ids and pen positions in px (y is the baseline offset), and the character each starts at.
  * @property {number} width - Advance width in px (no trailing letter-spacing).
  */
 
@@ -38,25 +38,20 @@ import { num } from './svg.js';
  * @param {string} text - One line of text.
  * @param {number} size - Font size in px.
  * @param {number} tracking - Letter-spacing in px, added between clusters (0 for none).
- * @param {typeof import('harfbuzzjs')} hb - harfbuzzjs.
+ * @param {any} [hb] - Unused (kept for the 1.0 signature).
  * @returns {Shaped} Positioned glyphs.
  */
 export function shape(face, text, size, tracking, hb) {
-  const buffer = new hb.Buffer();
-  buffer.addText(text);
-  buffer.guessSegmentProperties();
-  hb.shape(face.font, buffer);
-  const infos = buffer.getGlyphInfos();
-  const positions = buffer.getGlyphPositions();
+  const glyphsIn = face.shapeRun(text);
   const scale = size / face.upem;
   const glyphs = [];
   let pen = 0;
-  for (let i = 0; i < infos.length; i++) {
-    const p = positions[i];
-    glyphs.push({ gid: infos[i].codepoint, x: pen + p.xOffset * scale, y: -p.yOffset * scale });
+  for (let i = 0; i < glyphsIn.length; i++) {
+    const p = glyphsIn[i];
+    glyphs.push({ gid: p.gid, x: pen + p.xOffset * scale, y: -p.yOffset * scale, cluster: p.cluster });
     pen += p.xAdvance * scale;
-    const nextCluster = infos[i + 1]?.cluster;
-    if (tracking && nextCluster !== undefined && nextCluster !== infos[i].cluster) pen += tracking;
+    const nextCluster = glyphsIn[i + 1]?.cluster;
+    if (tracking && nextCluster !== undefined && nextCluster !== p.cluster) pen += tracking;
   }
   return { glyphs, width: pen };
 }
@@ -69,11 +64,11 @@ export function shape(face, text, size, tracking, hb) {
  * @param {number} gid
  * @returns {(string | number)[]} Flat list: command letter followed by its numbers.
  */
-function outline(face, gid) {
+export function outline(face, gid) {
   let cmds = face.paths.get(gid);
   if (!cmds) {
     cmds = [];
-    const d = face.font.glyphToPath(gid);
+    const d = face.glyphToPath(gid);
     for (const m of d.matchAll(/([MLQCZ])([^MLQCZ]*)/gi)) {
       cmds.push(m[1].toUpperCase());
       for (const n of m[2].split(/[\s,]+/).filter(Boolean)) cmds.push(parseFloat(n));
@@ -228,3 +223,15 @@ function breakLines(o) {
   const shaped = lines.map((text) => ({ text, run: measure(text) }));
   return { lines: shaped, size: o.size, truncated, forced, width: Math.max(0, ...shaped.map((l) => l.run.width)) };
 }
+
+/**
+ * Collapse spaces, trim each line, and apply a case.
+ *
+ * @param {string} s - The text.
+ * @param {string | undefined} t - `'uppercase'`, `'lowercase'`, anything else for none.
+ * @returns {string}
+ */
+export function caseText(s, t) {
+  const clean = s.replace(/[\t\r ]+/g, ' ').replace(/ *\n */g, '\n').trim();
+  return t === 'uppercase' ? clean.toUpperCase() : t === 'lowercase' ? clean.toLowerCase() : clean;
+}

package/src/type/auto-color.d.ts

@@ -0,0 +1,9 @@
+// Auto contrast for `color: 'auto'`.
+import type { RenderContext } from '../render/context.js';
+
+/** Backdrop luma (0–1) above which `color: 'auto'` picks the dark colour (0.72). */
+export const AUTO_THRESHOLD: number;
+/** Rec. 601 luma of a colour, 0–1. */
+export function luma(c: string): number;
+/** White or near-black (or `autoColors`) by the luma of what's drawn under `box`. */
+export function autoColor(layer: { autoColors?: [string, string]; autoThreshold?: number }, ctx: RenderContext, box: { x: number; y: number; width: number; height: number }): Promise<string>;

package/src/type/auto-color.js

@@ -0,0 +1,44 @@
+/**
+ * Auto contrast: white or near-black (or a layer's `autoColors`), by how
+ * light what's drawn underneath is.
+ *
+ * The rule is the one the site's designs use: the backdrop's luma (Rec. 601
+ * weights on the gamma-encoded channels, 0–1) above `AUTO_THRESHOLD`
+ * (0.72) takes the dark colour, anything else the light one. A pure
+ * contrast-ratio choice picks black on mid-tones (a mid pink, a sky blue)
+ * where designers set white; this matches what they set.
+ *
+ * @module type/auto-color
+ */
+
+import { toHex } from '../color.js';
+
+/** Backdrop luma (0–1) above which `color: 'auto'` picks the dark colour. */
+export const AUTO_THRESHOLD = 0.72;
+
+/**
+ * Rec. 601 luma of a colour, 0–1.
+ *
+ * @param {string} c
+ * @returns {number}
+ */
+export function luma(c) {
+  const h = toHex(c);
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+
+/**
+ * Pick the text colour against what's underneath (`autoThreshold` on the
+ * layer overrides the 0.72 cut).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {{ x: number, y: number, width: number, height: number }} box
+ * @returns {Promise<string>}
+ */
+export async function autoColor(layer, ctx, box) {
+  const [light, dark] = (layer.autoColors ?? ['#ffffff', '#0b0b0b']).map(toHex);
+  const under = await /** @type {any} */ (ctx).backdrop?.(box);
+  return luma(under ?? ctx.palette.bg) > (layer.autoThreshold ?? AUTO_THRESHOLD) ? dark : light;
+}

package/src/type/fallback.d.ts

@@ -0,0 +1,11 @@
+// Glyph fallback.
+import type { LoadedFont } from '../fonts.js';
+import type { Shaped } from '../text.js';
+import type { RenderContext } from '../render/context.js';
+
+/** The faces to fall back to: the layer's `fallback`, fonts registered with `fallback: true`, then the built-in symbols. */
+export function fallbackFaces(ctx: RenderContext, o: { fallback?: string | string[]; weight?: number; style?: string }): Promise<LoadedFont[]>;
+/** Whether a face has a glyph for a character. */
+export function covers(face: LoadedFont, ch: string): boolean;
+/** Shape a line, falling back face by face where the face lacks a glyph. */
+export function shapeText(face: LoadedFont, text: string, size: number, tracking: number, fallbacks?: LoadedFont[]): Shaped;

package/src/type/fallback.js

@@ -0,0 +1,92 @@
+/**
+ * Glyph fallback: characters the chosen font lacks are shaped in a
+ * fallback font (the layer's `fallback`, then any font registered with
+ * `fallback: true`), and failing those drawn from the built-in symbols
+ * (✺ ✦ ✶ ★ ☆ ♥ ♡ ▶ ◀ ● ◆ ■ ♪). Text the font covers shapes exactly as
+ * before (one HarfBuzz run).
+ *
+ * @module type/fallback
+ */
+
+import { shape } from '../text.js';
+import { loadFont, pickFont } from '../fonts.js';
+import { symbolFace } from './symbols.js';
+
+/**
+ * The faces to fall back to, in order.
+ *
+ * @param {import('../layers.js').RenderContext} ctx
+ * @param {{ fallback?: string | string[], weight?: number, style?: string }} o
+ * @returns {Promise<import('../fonts.js').LoadedFont[]>}
+ */
+export async function fallbackFaces(ctx, o) {
+  const names = o.fallback == null ? [] : [].concat(/** @type {any} */ (o.fallback));
+  const sources = [
+    ...names.map((n) => ctx.fonts.find((f) => f.name.toLowerCase() === String(n).toLowerCase()) ? pickFont(ctx.fonts, n, o.weight ?? 600, o.style) : undefined),
+    ...ctx.fonts.filter((f) => /** @type {any} */ (f).fallback),
+  ].filter(Boolean);
+  const faces = [];
+  for (const s of new Set(sources)) faces.push(await loadFont(/** @type {any} */ (s)));
+  faces.push(symbolFace());
+  return faces;
+}
+
+/** Characters each face lacks, by face. @type {WeakMap<object, Map<string, boolean>>} */
+const missing = new WeakMap();
+
+/**
+ * Whether a face has a glyph for a character.
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {string} ch
+ * @returns {boolean}
+ */
+export function covers(face, ch) {
+  let m = missing.get(face.paths);
+  if (!m) missing.set(face.paths, (m = new Map()));
+  let has = m.get(ch);
+  if (has === undefined) {
+    has = /\s/.test(ch) || face.shapeRun(ch).every((g) => g.gid !== 0);
+    m.set(ch, has);
+  }
+  return has;
+}
+
+/**
+ * Shape a line, falling back face by face for characters the face lacks.
+ * Glyphs from another face carry it (`glyph.face`).
+ *
+ * @param {import('../fonts.js').LoadedFont} face
+ * @param {string} text
+ * @param {number} size
+ * @param {number} tracking - px between clusters.
+ * @param {import('../fonts.js').LoadedFont[]} [fallbacks]
+ * @returns {import('../text.js').Shaped}
+ */
+export function shapeText(face, text, size, tracking, fallbacks) {
+  const run = shape(face, text, size, tracking);
+  if (!fallbacks?.length || run.glyphs.every((g) => g.gid !== 0)) return run;
+  // Segments of one face each, in order.
+  /** @type {{ face: import('../fonts.js').LoadedFont, text: string }[]} */
+  const segs = [];
+  for (const ch of Array.from(text)) {
+    const f = covers(face, ch) ? face : fallbacks.find((x) => covers(x, ch)) ?? face;
+    const last = segs[segs.length - 1];
+    if (last && last.face === f) last.text += ch;
+    else segs.push({ face: f, text: ch });
+  }
+  /** @type {import('../text.js').Shaped['glyphs']} */
+  const glyphs = [];
+  let x = 0;
+  let at = 0;
+  segs.forEach((seg, i) => {
+    const part = shape(seg.face, seg.text, size, tracking);
+    for (const g of part.glyphs) {
+      const placed = { ...g, x: g.x + x, cluster: (g.cluster ?? 0) + at };
+      glyphs.push(seg.face === face ? placed : { ...placed, face: seg.face });
+    }
+    x += part.width + (i < segs.length - 1 ? tracking : 0);
+    at += seg.text.length;
+  });
+  return { glyphs, width: x };
+}

package/src/type/glyphs.d.ts

@@ -0,0 +1,24 @@
+// Per-glyph control.
+import type { Shaped } from '../text.js';
+import type { Length, Color } from '../index.js';
+
+/** Per-glyph scale, shift, turn and colour (arrays cycle; counted across the block, spaces skipped). */
+export interface GlyphControl {
+  scale?: number | number[];
+  scaleX?: number | number[];
+  scaleY?: number | number[];
+  dx?: Length | Length[];
+  dy?: Length | Length[];
+  /** Degrees. */
+  rotate?: number | number[];
+  color?: Color | Color[];
+  /** Transforms about the glyph's middle (default) or its baseline. */
+  origin?: 'center' | 'baseline';
+  /** A scaled glyph takes its scaled width (default true). */
+  advance?: boolean;
+}
+
+/** Apply per-glyph control to a shaped line (`start`: the line's first glyph's index in the block). */
+export function controlGlyphs(run: Shaped, spec: GlyphControl | undefined, o: { start: number; size: number; capHeight: number; canvas: { width: number; height: number }; text: string }): { run: Shaped; count: number };
+/** How many glyphs a line counts (non-space characters). */
+export function glyphCount(text: string): number;

package/src/type/glyphs.js

@@ -0,0 +1,87 @@
+/**
+ * Per-glyph control: each letter its own scale, shift, turn and colour,
+ * from arrays (cycled), so bulging 70s type or a wave of letters is one
+ * text layer.
+ *
+ * `glyphs: { scale, scaleX, scaleY, dx, dy, rotate, color, origin, advance }`:
+ * numbers (or colours) per glyph, counted across the whole block and
+ * skipping spaces; `origin` is `'center'` (the default: the glyph's middle
+ * at half the cap height) or `'baseline'`; `advance` (default true) lets a
+ * scaled glyph take its scaled width, pushing its neighbours along.
+ *
+ * @module type/glyphs
+ */
+
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+
+/** @param {any} list @param {number} i @param {any} fallback @returns {any} The i-th of a cycled list (or a single value). */
+const at = (list, i, fallback) => (list == null ? fallback : Array.isArray(list) ? (list.length ? list[i % list.length] : fallback) : list);
+
+/**
+ * Apply per-glyph control to a shaped line: advances widened for scaled
+ * glyphs, and each glyph's transform (`t`, about its pen position) and
+ * paint key (`paint`, a colour).
+ *
+ * @param {import('../text.js').Shaped} run
+ * @param {any} spec - The layer's `glyphs`.
+ * @param {{ start: number, size: number, capHeight: number, canvas: { width: number, height: number }, text: string }} o - `start`: index of the line's first glyph in the block.
+ * @returns {{ run: import('../text.js').Shaped, count: number }} The run, and how many glyphs it counted.
+ */
+export function controlGlyphs(run, spec, o) {
+  if (!spec) return { run, count: 0 };
+  const glyphs = run.glyphs.map((g) => ({ ...g }));
+  const blanks = blankGlyphs(run, o.text);
+  let shift = 0;
+  let n = 0;
+  for (let i = 0; i < glyphs.length; i++) {
+    const g = glyphs[i];
+    const adv = (i + 1 < run.glyphs.length ? run.glyphs[i + 1].x : run.width) - run.glyphs[i].x;
+    g.x += shift;
+    if (blanks.has(i)) continue;
+    const k = o.start + n++;
+    const s = at(spec.scale, k, 1);
+    const sx = at(spec.scaleX, k, 1) * s;
+    const sy = at(spec.scaleY, k, 1) * s;
+    const rot = (at(spec.rotate, k, 0) * Math.PI) / 180;
+    const dx = len(at(spec.dx, k, 0), o.canvas);
+    const dy = len(at(spec.dy, k, 0), o.canvas);
+    const color = at(spec.color, k, undefined);
+    const grow = spec.advance === false ? 0 : adv * (sx - 1);
+    // About the glyph's centre (at half the cap height), or its baseline.
+    const ox = (adv * (spec.advance === false ? 1 : sx)) / 2;
+    const oy = spec.origin === 'baseline' ? 0 : -o.capHeight / 2;
+    const cos = Math.cos(rot);
+    const sin = Math.sin(rot);
+    const a = cos * sx;
+    const b = sin * sx;
+    const c = -sin * sy;
+    const d = cos * sy;
+    // Glyph-local point p maps to origin + R·S·(p − origin/scaled) + shift.
+    const px0 = adv / 2;
+    g.t = [a, b, c, d, ox - (a * px0 + c * oy) + dx, oy - (b * px0 + d * oy) + dy];
+    if (color != null) g.paint = toHex(color);
+    shift += grow;
+  }
+  return { run: { glyphs, width: run.width + shift }, count: n };
+}
+
+/**
+ * Glyph indices that are spaces (by cluster), so they don't take a slot.
+ *
+ * @param {import('../text.js').Shaped} run
+ * @param {string} text
+ * @returns {Set<number>}
+ */
+function blankGlyphs(run, text) {
+  const chars = Array.from(text);
+  const out = new Set();
+  run.glyphs.forEach((g, i) => {
+    const ch = /** @type {any} */ (g).cluster != null ? text[/** @type {any} */ (g).cluster] : chars[i];
+    if (ch != null && /\s/.test(ch)) out.add(i);
+  });
+  return out;
+}
+
+/** How many glyphs a line counts (non-space characters). @param {string} text @returns {number} */
+export const glyphCount = (text) => Array.from(text).filter((ch) => !/\s/.test(ch)).length;

package/src/type/index.d.ts

@@ -0,0 +1,5 @@
+// Poster typesetting.
+export { typeset, wantsType, TYPE_OPTIONS } from './typeset.js';
+export { faceFor, mappedPath, setLine } from './line.js';
+export { textPathD, pathSampler } from './path.js';
+export type { TextPath } from './path.js';

package/src/type/index.js

@@ -0,0 +1,10 @@
+/**
+ * Poster typesetting: what the `text` layer does with its 1.1 options, and
+ * the line-setting the poster layers (tables, barcodes) share.
+ *
+ * @module type
+ */
+
+export { typeset, wantsType, TYPE_OPTIONS } from './typeset.js';
+export { faceFor, mappedPath, setLine } from './line.js';
+export { textPathD, pathSampler } from './path.js';

package/src/type/kern.d.ts

@@ -0,0 +1,4 @@
+// Pair kerning from a TrueType font.
+
+/** A pair's X advance adjustment, font units (GPOS pair adjustment, else `kern`). */
+export function pairKerning(v: DataView, tables: Record<string, number>): (a: number, b: number) => number;

package/src/type/kern.js

@@ -0,0 +1,144 @@
+/**
+ * Pair kerning from a TrueType font: GPOS `kern` feature pair adjustments
+ * (formats 1 and 2, through extension lookups; lookups add up), else the
+ * legacy `kern` table.
+ *
+ * @module type/kern
+ */
+
+/**
+ * Pair kerning: GPOS `kern` feature pair adjustments (formats 1 and 2,
+ * through extension lookups), else the legacy `kern` table.
+ *
+ * @param {DataView} v
+ * @param {Record<string, number>} tables
+ * @returns {(a: number, b: number) => number} X advance adjustment, font units.
+ */
+export function pairKerning(v, tables) {
+  const u16 = (/** @type {number} */ o) => v.getUint16(o);
+  const i16 = (/** @type {number} */ o) => v.getInt16(o);
+  /** Pair lookups, each a list of subtables (the first that covers a pair applies; lookups add up). @type {((a: number, b: number) => number | undefined)[][]} */
+  const lookupsList = [];
+  /** @type {((a: number, b: number) => number | undefined)[]} */
+  let subtables = [];
+
+  const coverage = (/** @type {number} */ o) => {
+    const fmt = u16(o);
+    /** @type {Map<number, number>} */
+    const m = new Map();
+    if (fmt === 1) for (let i = 0, n = u16(o + 2); i < n; i++) m.set(u16(o + 4 + i * 2), i);
+    else for (let i = 0, n = u16(o + 2); i < n; i++) {
+      const r = o + 4 + i * 6;
+      for (let g = u16(r), idx = u16(r + 4); g <= u16(r + 2); g++, idx++) m.set(g, idx);
+    }
+    return m;
+  };
+  const classDef = (/** @type {number} */ o) => {
+    const fmt = u16(o);
+    /** @type {Map<number, number>} */
+    const m = new Map();
+    if (fmt === 1) { const s = u16(o + 2); for (let i = 0, n = u16(o + 4); i < n; i++) m.set(s + i, u16(o + 6 + i * 2)); }
+    else for (let i = 0, n = u16(o + 2); i < n; i++) { const r = o + 4 + i * 6; for (let g = u16(r); g <= u16(r + 2); g++) m.set(g, u16(r + 4)); }
+    return m;
+  };
+  const bits = (/** @type {number} */ f) => { let c = 0; for (let x = f; x; x >>= 1) c += x & 1; return c * 2; };
+  // XAdvance of a value record (or XPlacement, the rare alternative).
+  const xadv = (/** @type {number} */ o, /** @type {number} */ fmt) => {
+    let p = o;
+    let x = 0;
+    if (fmt & 1) { x += i16(p); p += 2; }
+    if (fmt & 2) p += 2;
+    if (fmt & 4) x += i16(p);
+    return x;
+  };
+
+  const pairPos = (/** @type {number} */ st) => {
+    const fmt = u16(st);
+    const cov = coverage(st + u16(st + 2));
+    const vf1 = u16(st + 4);
+    const vf2 = u16(st + 6);
+    const s1 = bits(vf1);
+    const s2 = bits(vf2);
+    if (fmt === 1) {
+      const sets = st + 10;
+      subtables.push((a, b) => {
+        const idx = cov.get(a);
+        if (idx === undefined) return undefined;
+        const ps = st + u16(sets + idx * 2);
+        const n = u16(ps);
+        const rec = 2 + s1 + s2;
+        let lo = 0;
+        let hi = n - 1;
+        while (lo <= hi) {
+          const mid = (lo + hi) >> 1;
+          const r = ps + 2 + mid * rec;
+          const g = u16(r);
+          if (g === b) return xadv(r + 2, vf1);
+          if (g < b) lo = mid + 1; else hi = mid - 1;
+        }
+        return undefined;
+      });
+    } else if (fmt === 2) {
+      const c1 = classDef(st + u16(st + 8));
+      const c2 = classDef(st + u16(st + 10));
+      const n2 = u16(st + 14);
+      const rec = s1 + s2;
+      subtables.push((a, b) => {
+        if (!cov.has(a)) return undefined;
+        const r = st + 16 + ((c1.get(a) ?? 0) * n2 + (c2.get(b) ?? 0)) * rec;
+        return xadv(r, vf1);
+      });
+    }
+  };
+
+  const gpos = tables.GPOS;
+  if (gpos != null) {
+    const features = gpos + u16(gpos + 6);
+    const lookups = gpos + u16(gpos + 8);
+    /** @type {Set<number>} */
+    const wanted = new Set();
+    for (let i = 0, n = u16(features); i < n; i++) {
+      const r = features + 2 + i * 6;
+      if (String.fromCharCode(v.getUint8(r), v.getUint8(r + 1), v.getUint8(r + 2), v.getUint8(r + 3)) !== 'kern') continue;
+      const f = features + u16(r + 4);
+      for (let k = 0, m = u16(f + 2); k < m; k++) wanted.add(u16(f + 4 + k * 2));
+    }
+    for (const li of [...wanted].sort((a, b) => a - b)) {
+      subtables = [];
+      lookupsList.push(subtables);
+      const l = lookups + u16(lookups + 2 + li * 2);
+      const type = u16(l);
+      for (let k = 0, m = u16(l + 4); k < m; k++) {
+        let st = l + u16(l + 6 + k * 2);
+        let t = type;
+        if (t === 9) { t = u16(st + 2); st += v.getUint32(st + 4); }
+        if (t === 2) pairPos(st);
+      }
+    }
+  }
+  if (!lookupsList.some((l) => l.length) && tables.kern != null && u16(tables.kern) === 0) {
+    subtables = [];
+    lookupsList.push(subtables);
+    const k = tables.kern;
+    const st = k + 4;
+    if (u16(st + 4) >> 8 === 0) {
+      /** @type {Map<number, number>} */
+      const pairs = new Map();
+      for (let i = 0, n = u16(st + 6); i < n; i++) {
+        const r = st + 14 + i * 6;
+        pairs.set(u16(r) * 65536 + u16(r + 2), i16(r + 4));
+      }
+      subtables.push((a, b) => pairs.get(a * 65536 + b));
+    }
+  }
+  return (a, b) => {
+    let total = 0;
+    for (const list of lookupsList) {
+      for (const s of list) {
+        const x = s(a, b);
+        if (x !== undefined) { total += x; break; }
+      }
+    }
+    return total;
+  };
+}

package/src/type/layout-ref.d.ts

@@ -0,0 +1,10 @@
+// Text layout later layers can read: {layout.<id>.<field>}.
+
+/** Fields a reference can read. */
+export const LAYOUT_FIELDS: readonly ('x' | 'y' | 'top' | 'bottom' | 'left' | 'right' | 'width' | 'height' | 'baseline' | 'size' | 'lines')[];
+/** Whether a value holds a layout reference (outside nested layers). */
+export function hasLayoutRef(v: unknown): boolean;
+/** A layer with its layout references replaced by numbers. */
+export function resolveLayoutRefs<T>(v: T, layout: Map<string, Record<string, number>>): T;
+/** Record a text block's layout for later layers. */
+export function recordLayout(ctx: { layout?: Map<string, Record<string, number>> }, id: string | undefined, box: { x: number; y: number; width: number; height: number }, more: { x: number; y: number; baseline: number; size: number; lines: number }): void;

package/src/type/layout-ref.js

@@ -0,0 +1,74 @@
+/**
+ * Text layout other layers can read: a text layer with an `id` records
+ * where its block landed, and any later layer can use `{layout.<id>.<field>}`
+ * (optionally `+ n` or `- n`) as a number: `bottom`, `top`, `left`,
+ * `right`, `width`, `height`, `x`, `y` (the first baseline), `baseline`
+ * (the last one), `size` (as fitted) and `lines`. Units are the text
+ * layer's own (a group's grid inside a group).
+ *
+ * @module type/layout-ref
+ */
+
+/** A layout reference, whole or inside a string. */
+const TOKEN = /\{layout\.([\w-]+)\.(\w+)\s*(?:([+-])\s*([\d.]+))?\}/g;
+
+/** Fields a reference can read. */
+export const LAYOUT_FIELDS = Object.freeze(['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height', 'baseline', 'size', 'lines']);
+
+/**
+ * Whether a value holds a layout reference (layers nested in it aside: they
+ * resolve when they're drawn).
+ *
+ * @param {unknown} v
+ * @returns {boolean}
+ */
+export function hasLayoutRef(v) {
+  if (typeof v === 'string') return v.includes('{layout.');
+  if (Array.isArray(v)) return v.some(hasLayoutRef);
+  if (v && typeof v === 'object' && !(v instanceof Uint8Array)) return Object.entries(v).some(([k, x]) => !NESTED.has(k) && hasLayoutRef(x));
+  return false;
+}
+
+/** Options holding nested layers. */
+const NESTED = new Set(['layers', 'mask', 'knockout', 'clip']);
+
+/**
+ * A layer with its layout references replaced by numbers.
+ *
+ * @param {any} v
+ * @param {Map<string, Record<string, number>>} layout
+ * @returns {any}
+ * @throws {TypeError} On a reference to a text layer not drawn yet, or an unknown field.
+ */
+export function resolveLayoutRefs(v, layout) {
+  if (typeof v === 'string') {
+    const one = new RegExp(`^${TOKEN.source}$`).exec(v.trim());
+    if (one) return value(one, layout);
+    return v.replace(TOKEN, (...m) => String(value(/** @type {any} */ (m), layout)));
+  }
+  if (Array.isArray(v)) return v.map((x) => resolveLayoutRefs(x, layout));
+  if (v && typeof v === 'object' && !(v instanceof Uint8Array)) return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, NESTED.has(k) ? x : resolveLayoutRefs(x, layout)]));
+  return v;
+}
+
+/** @param {string[]} m @param {Map<string, Record<string, number>>} layout @returns {number} */
+function value(m, layout) {
+  const [, id, field, sign, n] = m;
+  const box = layout.get(id);
+  if (!box) throw new TypeError(`{layout.${id}.${field}}: no text layer "${id}" drawn before this one`);
+  if (!LAYOUT_FIELDS.includes(field)) throw new TypeError(`{layout.${id}.${field}}: unknown field (${LAYOUT_FIELDS.join(', ')})`);
+  return box[field] + (sign ? (sign === '-' ? -1 : 1) * Number(n) : 0);
+}
+
+/**
+ * Record a text block's layout for later layers.
+ *
+ * @param {any} ctx
+ * @param {string | undefined} id
+ * @param {{ x: number, y: number, width: number, height: number }} box - The block, from cap height to last baseline.
+ * @param {{ x: number, y: number, baseline: number, size: number, lines: number }} more
+ */
+export function recordLayout(ctx, id, box, more) {
+  if (!id || !ctx.layout) return;
+  ctx.layout.set(id, { ...more, top: box.y, bottom: box.y + box.height, left: box.x, right: box.x + box.width, width: box.width, height: box.height });
+}

package/src/type/line.d.ts

@@ -0,0 +1,11 @@
+// Setting one line of type.
+import type { LoadedFont } from '../fonts.js';
+import type { Shaped } from '../text.js';
+import type { RenderContext } from '../render/context.js';
+
+/** A face for a family, weight, style and variable axes (`'pixel'`: the built-in 5×7 face). */
+export function faceFor(ctx: RenderContext, o: { font?: string; weight?: number; style?: string; axes?: Record<string, number> }): Promise<LoadedFont>;
+/** Glyph outlines of a run through a map from glyph px (y down, baseline 0) to canvas px. */
+export function mappedPath(face: LoadedFont, run: Shaped, size: number, map: (gx: number, gy: number, glyph: Shaped['glyphs'][number]) => [number, number], only?: (glyph: Shaped['glyphs'][number]) => boolean): string;
+/** Shape, justify (`width`) and draw one line anchored at `x` by `align`. */
+export function setLine(o: { face: LoadedFont; text: string; size: number; tracking: number; x: number; y: number; align: 'left' | 'center' | 'right'; width?: number; adjust?: 'spacingAndGlyphs' | 'spacing'; shape?: (tracking: number) => Shaped; only?: (glyph: Shaped['glyphs'][number]) => boolean }): { d: string; width: number; left: number; run: Shaped; scaleX: number };