@logomarks/core 0.1.11 → 0.2.1

package/src/letters/serif.js

@@ -0,0 +1,666 @@
+/**
+ * A high-contrast (Didone) serif capital alphabet built from geometry, so every serif letter, monogram and cartouche
+ * shares one construction, and the one-move builds (rule, split, dot, plinth, frame, inline…) that take any glyph source,
+ * a font's letter included. From the Logomarks tools (serifparts.mjs, batch 230; P and G from batch 240, the moves shared
+ * since batch 242).
+ *
+ * A face is the metrics of one cap height H: thick stems S, hairlines h (keep h at 30 or more once fitted, or the
+ * hairlines break up at 32 px), hairline serifs reaching ov past a stem, brackets of radius br where a serif meets its
+ * stroke, and beak serifs (the short vertical serifs on an E's or T's arms) beak long. Each glyph is drawn with its cap
+ * line at y 0 and its baseline at y H, its ink starting at x 0, and is { s: shape, w: ink width }:
+ * - stems: vertical stems and slanted strokes (`slant()`), with flat hairline serifs (`foot()`) and their brackets;
+ * - bowls: D, B and R bowls (`dBowl()`): a straight run off the stem then half an ellipse, thick at the side, hairline
+ *   at top and bottom (vertical stress);
+ * - curves: C, J and S from stressed rings (`ringArc()`): an ellipse less an inner one, sides thick and top and bottom
+ *   hairline, cut along rays, ending in ball terminals (`ball()`);
+ * - interlace: two shapes laid over each other, at each crossing one in front and the other cut back by the gap.
+ */
+import { U, D, I, rect, poly, ellipse, circle, move, mapPts, grown, grow, soften, bbox, GAP } from '../geometry/index.js';
+import { despeckShape } from '../parts/index.js';
+
+/**
+ * The metrics of a serif face with cap height H.
+ *
+ * @param {number} [H=360] The cap height.
+ * @param {{ S?: number, h?: number, ov?: number, br?: number, beak?: number, bw?: number }} [o] Any metric to set
+ *   instead of its default: stem S (0.22 H), hairline h (32), serif reach ov (0.085 H), bracket br (0.05 H), beak length
+ *   (0.19 H), beak width bw (1.25 h).
+ * @returns {import('./serif.js').Face} The face.
+ */
+export const face = (H = 360, o = {}) => ({ H, S: o.S ?? Math.round(H * 0.22), h: o.h ?? 32, ov: o.ov ?? Math.round(H * 0.085),
+	br: o.br ?? Math.round(H * 0.05), beak: o.beak ?? Math.round(H * 0.19), bw: o.bw ?? Math.round((o.h ?? 32) * 1.25) });
+
+/**
+ * A rectangle from its corners.
+ *
+ * @param {number} x0 Left.
+ * @param {number} y0 Top.
+ * @param {number} x1 Right.
+ * @param {number} y1 Bottom.
+ * @returns {import('../geometry/types.js').Polygon} The rectangle.
+ */
+const R = (x0, y0, x1, y1) => rect(x0, y0, x1 - x0, y1 - y0);
+
+/**
+ * A vector made unit length.
+ *
+ * @param {readonly number[]} v The vector.
+ * @returns {number[]} Its direction.
+ */
+const unit = ([x, y]) => { const l = Math.hypot(x, y) || 1; return [x / l, y / l]; };
+
+/**
+ * A bracket: the concave fillet of radius r in the corner K between two edges leaving K along the unit directions d1
+ * and d2. An acute corner gets a smaller bracket, so it never runs far up a slanted side.
+ *
+ * @param {readonly number[]} K The corner.
+ * @param {readonly number[]} d1 One edge's direction.
+ * @param {readonly number[]} d2 The other's.
+ * @param {number} r The radius (0: no bracket).
+ * @returns {import('../geometry/types.js').Shape} The fillet's ink.
+ */
+export const bracket = (K, d1, d2, r) => {
+	if (!r) return [];
+	const cos = d1[0] * d2[0] + d1[1] * d2[1], th = Math.acos(Math.max(-1, Math.min(1, cos)));
+	r *= Math.min(1, Math.tan(th / 2)); // an acute corner gets a smaller bracket, so it never runs far up a slanted side
+	const t = r / Math.tan(th / 2), c = r / Math.sin(th / 2);
+	const bis = unit([d1[0] + d2[0], d1[1] + d2[1]]), T1 = [K[0] + d1[0] * t, K[1] + d1[1] * t], T2 = [K[0] + d2[0] * t, K[1] + d2[1] * t];
+	const Cc = [K[0] + bis[0] * c, K[1] + bis[1] * c];
+	return D(poly([K, T1, Cc, T2]), circle(...Cc, r, 64));
+};
+
+/**
+ * A hairline serif slab on the foot of a stroke whose end spans [a, b] at the cap line ('top') or the baseline ('base').
+ * It reaches ov out on the left (l) and right (r) sides, bracketed against the stroke's sides, which leave the foot along
+ * the unit directions da (left side) and db (right side): straight up or down for a stem.
+ *
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} a The stroke end's left x.
+ * @param {number} b Its right x.
+ * @param {'top' | 'base'} at Which end.
+ * @param {{ l?: number, r?: number, da?: readonly number[], db?: readonly number[], brk?: number }} [o] The reach on each
+ *   side (1 full, 0 none), the sides' directions, and the bracket's scale (1).
+ * @returns {import('../geometry/types.js').Shape} The serif.
+ */
+export const foot = (m, a, b, at, { l = 1, r = 1, da, db, brk = 1 } = {}) => {
+	const top = at === 'top', y = top ? m.h : m.H - m.h, up = top ? 1 : -1;
+	da = da || [0, up]; db = db || [0, up];
+	const slab = top ? R(a - l * m.ov, 0, b + r * m.ov, m.h) : R(a - l * m.ov, m.H - m.h, b + r * m.ov, m.H);
+	// a slanted side meets the slab's face a little along from the foot's corner
+	const atFace = (x, d) => [x + d[0] * (m.h / Math.abs(d[1])), y], rr = brk * Math.min(m.br, m.ov * 0.8);
+	return U(slab, l ? bracket(atFace(a, da), [-1, 0], da, rr) : [], r ? bracket(atFace(b, db), [1, 0], db, rr) : []);
+};
+
+/**
+ * A straight stroke from y0 to y1 with flat ends: its left side runs from (xt, y0) to (xb, y1) and it is t thick across
+ * the stroke.
+ *
+ * @param {number} xt The left side's x at y0.
+ * @param {number} xb The left side's x at y1.
+ * @param {number} t The thickness, across the stroke.
+ * @param {number} y0 The top.
+ * @param {number} y1 The bottom.
+ * @returns {import('./serif.js').Slant} The stroke, its sides at any height, its width along a flat end and the unit
+ *   directions along it.
+ */
+export const slant = (xt, xb, t, y0, y1) => {
+	const dx = xb - xt, dy = y1 - y0, L = Math.hypot(dx, dy), w = (t * L) / dy;
+	const at = (y) => { const x = xt + (dx * (y - y0)) / dy; return [x, x + w]; };
+	const up = unit([-dx, -dy]);
+	return { s: poly([[xt, y0], [xt + w, y0], [xb + w, y1], [xb, y1]]), at, w, up, down: [-up[0], -up[1]] };
+};
+
+/**
+ * The right half of an ellipse.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} rx The radius across.
+ * @param {number} ry The radius down.
+ * @returns {import('../geometry/types.js').Shape} The half.
+ */
+const halfE = (cx, cy, rx, ry) => I(ellipse(cx, cy, rx, ry, 0, 360), R(cx, cy - ry - 2, cx + rx + 2, cy + ry + 2));
+
+/**
+ * A D-bowl on a stem whose left edge is x0, from y0 to y1, reaching right to xr: a straight hairline run of `flat` off
+ * the stem, then half an ellipse, its side t thick and its top and bottom hairlines. Includes the stem's height between
+ * y0 and y1.
+ *
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} x0 The stem's left edge.
+ * @param {number} y0 The bowl's top.
+ * @param {number} y1 Its bottom.
+ * @param {number} xr Its right edge.
+ * @param {number} t Its side's thickness.
+ * @param {number} flat The straight run off the stem.
+ * @returns {import('../geometry/types.js').Shape} The bowl.
+ */
+export const dBowl = (m, x0, y0, y1, xr, t, flat) => {
+	const cy = (y0 + y1) / 2, ry = (y1 - y0) / 2, cx = x0 + m.S + flat, rx = xr - cx;
+	const outer = U(R(x0, y0, cx, y1), halfE(cx, cy, rx, ry)), inner = U(R(x0 + m.S, y0 + m.h, cx + 0.5, y1 - m.h), halfE(cx, cy, rx - t, ry - m.h));
+	return D(outer, inner);
+};
+
+/**
+ * Where the ray from an ellipse's centre at angle a (degrees, y down: −90 is the top) meets it.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} rx The radius across.
+ * @param {number} ry The radius down.
+ * @param {number} a The angle.
+ * @returns {number[]} The point.
+ */
+const onE = (cx, cy, rx, ry, a) => {
+	const t = (a * Math.PI) / 180, c = Math.cos(t), n = Math.sin(t), r = 1 / Math.sqrt((c * c) / (rx * rx) + (n * n) / (ry * ry));
+	return [cx + r * c, cy + r * n];
+};
+
+/**
+ * A stressed ring: an ellipse rx × ry less an inner one t narrower each side and h shorter top and bottom, so its sides
+ * are t thick and its top and bottom hairlines (vertical stress). Kept from angle a0 to a1 (degrees, y down, a0 < a1,
+ * clockwise on screen), cut along rays from the centre.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} rx The outer radius across.
+ * @param {number} ry The outer radius down.
+ * @param {number} t The sides' thickness.
+ * @param {number} h The hairline at top and bottom.
+ * @param {number} [a0=-180] Where it starts.
+ * @param {number} [a1=180] Where it ends.
+ * @returns {import('./serif.js').RingArc} The ring, and `end(a)`: the outer and inner points of the cut at a.
+ */
+export const ringArc = (cx, cy, rx, ry, t, h, a0 = -180, a1 = 180) => {
+	const n = Math.max(8, Math.ceil((a1 - a0) / 4)), far = 2 * (rx + ry);
+	const ring = D(ellipse(cx, cy, rx, ry, 0, 360), ellipse(cx, cy, rx - t, ry - h, 0, 360));
+	const wedge = a1 - a0 >= 360 ? null : poly([[cx, cy], ...[...Array(n + 1)].map((_, i) => { const q = ((a0 + ((a1 - a0) * i) / n) * Math.PI) / 180; return [cx + far * Math.cos(q), cy + far * Math.sin(q)]; })]);
+	return { s: wedge ? I(ring, wedge) : ring, end: (a) => ({ o: onE(cx, cy, rx, ry, a), i: onE(cx, cy, rx - t, ry - h, a) }) };
+};
+
+/**
+ * A ball terminal of radius rb hung inside a curve's outer edge: tangent to it at the point o, toward the curve's
+ * centre c.
+ *
+ * @param {readonly number[]} o The point on the outer edge.
+ * @param {readonly number[]} c The curve's centre.
+ * @param {number} rb The ball's radius.
+ * @returns {import('../geometry/types.js').Polygon} The ball.
+ */
+export const ball = (o, c, rb) => { const u = unit([c[0] - o[0], c[1] - o[1]]); return circle(o[0] + u[0] * rb, o[1] + u[1] * rb, rb, 120); };
+
+/**
+ * Moves a glyph so its ink starts at x 0.
+ *
+ * @param {import('../geometry/types.js').Shape} s The ink.
+ * @returns {import('./serif.js').Glyph} The glyph and its width.
+ */
+const ink = (s) => { const [x0, , x1] = bbox(s); return { s: move(s, -x0, 0), w: x1 - x0 }; };
+
+/* ---------- the capitals ---------- */
+
+/**
+ * A vertical stem [x, x + w] from the cap line to the baseline, with serifs top and base on the sides asked for.
+ *
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} x The stem's left edge.
+ * @param {number} w Its width.
+ * @param {number[] | 0} [top] The top serif's [left, right] reach, or 0 for none.
+ * @param {number[] | 0} [base] The base serif's.
+ * @returns {import('../geometry/types.js').Shape} The stem.
+ */
+const stemV = (m, x, w, top = [1, 1], base = [1, 1]) => U(R(x, 0, x + w, m.H), top ? foot(m, x, x + w, 'top', { l: top[0], r: top[1] }) : [], base ? foot(m, x, x + w, 'base', { l: base[0], r: base[1] }) : []);
+
+/**
+ * A beak serif: a short vertical spur bw wide whose outer edge is x, hanging from the cap line ('top') or rising from
+ * the baseline ('base'), bracketed on its inner side against the arm.
+ *
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} x The spur's outer edge.
+ * @param {'top' | 'base'} at Which line.
+ * @param {number} [len] Its length (the face's beak).
+ * @returns {import('../geometry/types.js').Shape} The beak.
+ */
+const beak = (m, x, at, len = m.beak) => {
+	const top = at === 'top';
+	const s = top ? R(x - m.bw, 0, x, len) : R(x - m.bw, m.H - len, x, m.H);
+	const K = top ? [x - m.bw, m.h] : [x - m.bw, m.H - m.h];
+	return U(s, bracket(K, [-1, 0], [0, top ? 1 : -1], m.br * 0.8));
+};
+
+/**
+ * The capitals, each `(m) => { s, w }` in the face m: A B C D E G H J K L M N P R S T.
+ */
+export const SERIF_GLYPHS = {
+	A(m) {
+		const W = m.H * 0.94, xL = m.ov, xR = W - m.ov, e = m.H * 0.05, ax = W * 0.5, dy = m.H + e;
+		const lx = (y) => ax + ((xL - ax) * (y + e)) / dy, rx = (y) => ax + ((xR - ax) * (y + e)) / dy;
+		const wl = (m.h * Math.hypot(ax - xL, dy)) / dy, wr = (m.S * Math.hypot(xR - ax, dy)) / dy;
+		// the counter: the outline's left side moved in by the hairline, its right side by the stem; they meet at the inner apex
+		const yi = ((wl + wr) * dy) / (xR - xL) - e, Y = m.H + 60;
+		const outer = poly([[ax, -e], [xR, m.H], [xL, m.H]]), inner = poly([[lx(yi) + wl, yi], [rx(Y) - wr, Y], [lx(Y) + wl, Y]]);
+		const yb = m.H * 0.62, up = (x0, x1) => unit([x0 - x1, -dy]);
+		const s = U(I(U(D(outer, inner), I(outer, R(-10, yb, W + 10, yb + m.h))), R(-10, 0, W + 10, m.H)),
+			foot(m, xL, xL + wl, 'base', { da: up(ax, xL), db: up(ax, xL) }), foot(m, xR - wr, xR, 'base', { da: up(ax, xR), db: up(ax, xR) }));
+		return ink(s);
+	},
+	B(m) {
+		const x0 = m.ov, yu = m.H * 0.47 + m.h / 2;
+		const s = U(dBowl(m, x0, 0, yu, x0 + m.H * 0.54, m.S * 0.9, m.H * 0.05), dBowl(m, x0, yu - m.h, m.H, x0 + m.H * 0.62, m.S * 0.98, m.H * 0.06),
+			foot(m, x0, x0 + m.S, 'top', { r: 0 }), foot(m, x0, x0 + m.S, 'base', { r: 0 }));
+		return ink(s);
+	},
+	C(m) {
+		const W = m.H * 0.86, cx = W / 2, cy = m.H / 2, rx = W / 2, ry = m.H / 2, a0 = -38, a1 = 58;
+		const r = ringArc(cx, cy, rx, ry, m.S * 1.04, m.h, a1, 360 + a0), top = r.end(360 + a0), bot = r.end(a1);
+		// a ball hangs from the top terminal; a beak rises from the bottom one
+		const x0 = Math.min(bot.o[0], bot.i[0]) - 1, xe = Math.max(bot.o[0], bot.i[0], x0 + m.bw) + 1, bk = R(x0, m.H - m.h - m.beak * 0.62, xe, bot.o[1]);
+		return ink(U(r.s, ball(top.o, [cx, cy], m.S * 0.5), I(bk, ellipse(cx, cy, rx, ry, 0, 360)), bk));
+	},
+	D(m) {
+		const x0 = m.ov;
+		return ink(U(dBowl(m, x0, 0, m.H, x0 + m.H * 0.8, m.S * 1.04, m.H * 0.1), foot(m, x0, x0 + m.S, 'top', { r: 0 }), foot(m, x0, x0 + m.S, 'base', { r: 0 })));
+	},
+	E(m) {
+		const x0 = m.ov, W = x0 + m.H * 0.6, ym = m.H * 0.47 - m.h / 2, xm = W - m.H * 0.08, xb = W + m.H * 0.03;
+		return ink(U(stemV(m, x0, m.S, [1, 0], [1, 0]), R(x0, 0, W, m.h), R(x0, ym, xm, ym + m.h), R(x0, m.H - m.h, xb, m.H),
+			beak(m, W, 'top'), beak(m, xb, 'base', m.beak * 1.1), R(xm - m.bw, ym - m.beak * 0.32, xm, ym + m.h + m.beak * 0.32),
+			bracket([xm - m.bw, ym], [-1, 0], [0, -1], m.br * 0.6), bracket([xm - m.bw, ym + m.h], [-1, 0], [0, 1], m.br * 0.6)));
+	},
+	H(m) {
+		const a = m.ov, b = a + m.S + m.H * 0.5, yc = m.H * 0.47 - m.h / 2;
+		return ink(U(stemV(m, a, m.S), stemV(m, b, m.S), R(a + m.S - 1, yc, b + 1, yc + m.h)));
+	},
+	J(m) {
+		const jx = m.H * 0.42, rx = m.H * 0.26, ry = m.H * 0.22, cx = jx + m.S - rx, cy = m.H - ry;
+		const r = ringArc(cx, cy, rx, ry, m.S, m.h, 0, 160), e = r.end(160);
+		return ink(U(R(jx, 0, jx + m.S, cy + 1), foot(m, jx, jx + m.S, 'top'), r.s, ball(e.o, [cx, cy - ry * 0.4], m.S * 0.5)));
+	},
+	K(m) {
+		const W = m.H * 0.98, x0 = m.ov, sx = x0 + m.S;
+		const arm = slant(W - m.ov * 1.4 - m.h * 1.3, sx - m.h * 1.2, m.h, 0, m.H * 0.7), armS = I(arm.s, R(x0, -1, W + 50, m.H));
+		// the leg springs from the arm's centreline at y0 and runs to the baseline, its top cut along the arm
+		const y0 = m.H * 0.38, P = [(arm.at(y0)[0] + arm.at(y0)[1]) / 2, y0], B = [W - m.ov - m.S * 1.15, m.H], u = unit([B[0] - P[0], B[1] - P[1]]);
+		const ad = arm.up, cr = Math.abs(ad[0] * u[1] - ad[1] * u[0]), Q = [P[0] + (ad[0] * m.S) / cr, P[1] + (ad[1] * m.S) / cr], wb = m.S / u[1];
+		const leg = poly([P, Q, [B[0] + wb, m.H], B]), lu = unit([P[0] - B[0], P[1] - B[1]]);
+		return ink(U(stemV(m, x0, m.S), armS, leg, foot(m, arm.at(0)[0], arm.at(0)[1], 'top', { da: arm.down, db: arm.down, brk: 0 }),
+			foot(m, B[0], B[0] + wb, 'base', { da: lu, db: lu })));
+	},
+	L(m) {
+		const x0 = m.ov, W = x0 + m.H * 0.58;
+		return ink(U(stemV(m, x0, m.S, [1, 1], [1, 0]), R(x0, m.H - m.h, W, m.H), beak(m, W, 'base', m.beak * 1.1)));
+	},
+	M(m) {
+		const x0 = m.ov, W = m.H * 1.12, rs = W - m.ov - m.S, wd = m.S * 1.05, vx = W * 0.5 + m.S * 0.45;
+		const dl = slant(x0, vx - (wd * Math.hypot(vx - x0, m.H)) / m.H, wd, 0, m.H), dr = slant(rs - m.h * 0.4, vx - m.h * 1.1, m.h, 0, m.H);
+		return ink(U(R(x0, 0, x0 + m.h, m.H), foot(m, x0, x0 + m.h, 'top', { r: 0 }), foot(m, x0, x0 + m.h, 'base'),
+			I(U(dl.s, dr.s), R(-10, 0, W + 10, m.H)), stemV(m, rs, m.S, [0, 1], [1, 1])));
+	},
+	N(m) {
+		const x0 = m.ov, W = m.H * 0.94, rx = W - m.ov - m.h, wd = m.S * 1.04;
+		const d = slant(x0, rx + m.h - (wd * Math.hypot(rx - x0, m.H)) / m.H, wd, 0, m.H);
+		return ink(U(R(x0, 0, x0 + m.h, m.H), foot(m, x0, x0 + m.h, 'top', { r: 0 }), foot(m, x0, x0 + m.h, 'base'),
+			I(d.s, R(-10, 0, W + 10, m.H)), R(rx, 0, rx + m.h, m.H), foot(m, rx, rx + m.h, 'top')));
+	},
+	R(m) {
+		const x0 = m.ov, yr = m.H * 0.53, W = x0 + m.H * 0.84, flat = m.H * 0.05, xr = x0 + m.H * 0.6, cx = x0 + m.S + flat;
+		const bowl = dBowl(m, x0, 0, yr, xr, m.S * 0.94, flat), wedge = U(R(-10, yr - m.h, W + 10, m.H), bowl);
+		// the leg runs on up into the bowl's side, so it springs from the curve rather than standing under it
+		const leg = slant(cx + m.H * 0.02, W - m.ov - m.S * 1.1, m.S, yr - m.h, m.H), legUp = slant(...[yr * 0.45].map((y) => leg.at(y)[0]), W - m.ov - m.S * 1.1, m.S, yr * 0.45, m.H);
+		return ink(U(bowl, R(x0, 0, x0 + m.S, m.H), foot(m, x0, x0 + m.S, 'top', { r: 0 }), foot(m, x0, x0 + m.S, 'base'),
+			I(legUp.s, wedge), foot(m, leg.at(m.H)[0], leg.at(m.H)[1], 'base', { da: leg.up, db: leg.up })));
+	},
+	S(m) {
+		const W = m.H * 0.66, r1y = m.H * 0.255, r2y = m.H / 2 - r1y + m.h * 0.5, r1x = W * 0.46, r2x = W * 0.5, c1 = [W * 0.5, r1y], c2 = [W * 0.5, m.H - r2y];
+		const t = m.S * 0.98, up = ringArc(...c1, r1x, r1y, t, m.h, -197, -26), lo = ringArc(...c2, r2x, r2y, t, m.h, -18, 154);
+		// the spine joins the upper bowl's lower-left cut to the lower bowl's upper-right cut
+		const a = up.end(-197), b = lo.end(-18), spine = poly([a.o, b.i, b.o, a.i]);
+		const tt = up.end(-26), bb = lo.end(154);
+		return ink(U(soften(U(up.s, lo.s, spine), m.br, m.h * 0.35), ball(tt.o, c1, m.S * 0.44), ball(bb.o, c2, m.S * 0.46)));
+	},
+	// P is R's bowl on a stem; G is C with a spur
+	P(m) {
+		const x0 = m.ov, yr = m.H * 0.56, xr = x0 + m.H * 0.64, flat = m.H * 0.05;
+		return ink(U(dBowl(m, x0, 0, yr, xr, m.S * 0.96, flat), R(x0, 0, x0 + m.S, m.H), foot(m, x0, x0 + m.S, 'top', { r: 0 }), foot(m, x0, x0 + m.S, 'base')));
+	},
+	G(m) {
+		const W = m.H * 0.9, cx = W / 2, cy = m.H / 2, rx = W / 2, ry = m.H / 2, a0 = -38, a1 = 12, sw = m.S * 0.96, ys = m.H * 0.56;
+		const r = ringArc(cx, cy, rx, ry, m.S * 1.04, m.h, a1, 360 + a0), top = r.end(360 + a0);
+		// the spur: a thick upright under the right side, from the arc's end down into the bowl's foot, a hairline serif on its top
+		const xs = W - sw, spur = I(R(xs, ys, W, m.H), ellipse(cx, cy, rx, ry, 0, 360));
+		return ink(U(r.s, ball(top.o, [cx, cy], m.S * 0.5), spur, R(xs - m.ov * 0.7, ys, W + m.ov * 0.4, ys + m.h)));
+	},
+	T(m) {
+		const W = m.H * 0.8, sx = (W - m.S) / 2, bk = beak(m, W, 'top');
+		return ink(U(R(0, 0, W, m.h), bk, mapPts(bk, ([x, y]) => [W - x, y]), R(sx, 0, sx + m.S, m.H),
+			foot(m, sx, sx + m.S, 'base'), bracket([sx, m.h], [-1, 0], [0, 1], m.br), bracket([sx + m.S, m.h], [1, 0], [0, 1], m.br)));
+	},
+};
+
+/**
+ * The serif capital k in face m, its ink's left edge at x and its cap line at y.
+ *
+ * @param {string} k The letter (a SERIF_GLYPHS key).
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} [x=0] Where its ink starts.
+ * @param {number} [y=0] Its cap line.
+ * @returns {import('./serif.js').Glyph} The letter and its width.
+ */
+export const serifLetter = (k, m, x = 0, y = 0) => { const g = SERIF_GLYPHS[k](m); return { s: move(g.s, x, y), w: g.w }; };
+
+/**
+ * The serif capital k in face m, centred on (cx, cy).
+ *
+ * @param {string} k The letter (a SERIF_GLYPHS key).
+ * @param {import('./serif.js').Face} m The face.
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @returns {import('../geometry/types.js').Shape} The letter.
+ */
+export const serifLetterAt = (k, m, cx, cy) => { const g = SERIF_GLYPHS[k](m); return move(g.s, cx - g.w / 2, cy - m.H / 2); };
+
+/* ---------- interlace ---------- */
+
+/**
+ * A ring's area.
+ *
+ * @param {readonly (readonly number[])[]} r The ring.
+ * @returns {number} The area.
+ */
+const area = (r) => Math.abs(r.reduce((a, p, i) => { const q = r[(i + 1) % r.length]; return a + p[0] * q[1] - q[0] * p[1]; }, 0)) / 2;
+
+/**
+ * The mean of a polygon's outer ring's points.
+ *
+ * @param {import('../geometry/types.js').Polygon} pg The polygon.
+ * @returns {number[]} The point.
+ */
+const centre = (pg) => { const r = pg[0], n = r.length; return r.reduce((a, p) => [a[0] + p[0] / n, a[1] + p[1] / n], [0, 0]); };
+
+/**
+ * The places two shapes cross (their overlaps, larger than `min`), sorted by `key` (x then y by default).
+ *
+ * @param {import('../geometry/types.js').Geom} a One shape.
+ * @param {import('../geometry/types.js').Geom} b The other.
+ * @param {number} [min=40] The smallest overlap that counts.
+ * @param {(c: number[]) => number} [key] The sort key of a crossing's centre.
+ * @returns {{ pg: import('../geometry/types.js').Polygon, c: number[] }[]} Each crossing and its centre.
+ */
+export const crossings = (a, b, min = 40, key = ([x, y]) => x * 1000 + y) =>
+	I(a, b).filter((pg) => area(pg[0]) > min).map((pg) => ({ pg, c: centre(pg) })).sort((p, q) => key(p.c) - key(q.c));
+
+/**
+ * Two shapes laid over each other with an over-under: at each crossing one is in front and the other is cut back by the
+ * gap g round the front's strokes near that crossing (within `reach` of it). `order` picks the front: a string read
+ * crossing by crossing in `key` order ('ab': a in front at the first, b at the second, the last letter repeating), or
+ * `{ under: [[x, y]] }`: a in front everywhere except the crossings nearest those points, where b is.
+ *
+ * @param {import('../geometry/types.js').Geom} a One shape.
+ * @param {import('../geometry/types.js').Geom} b The other.
+ * @param {string | { under?: number[][] }} order Which is in front at each crossing.
+ * @param {number} [g] The gap (22).
+ * @param {{ reach?: number, key?: (c: number[]) => number, min?: number }} [o] How far from a crossing the cut runs (80),
+ *   the crossings' order and the smallest crossing (40).
+ * @returns {{ s: import('../geometry/types.js').Shape, n: number, xs: { pg: import('../geometry/types.js').Polygon, c: number[] }[] }}
+ *   The pair, how many crossings, and the crossings.
+ */
+export const interlace = (a, b, order, g = GAP, { reach = 80, key, min = 40 } = {}) => {
+	const xs = crossings(a, b, min, key); let A = a, B = b;
+	const tucked = new Set((order.under || []).map(([x, y]) => xs.reduce((bi, q, i) => (Math.hypot(q.c[0] - x, q.c[1] - y) < Math.hypot(xs[bi].c[0] - x, xs[bi].c[1] - y) ? i : bi), 0)));
+	const front = (i) => (typeof order === 'string' ? (order[i] || order.at(-1)) === 'a' : !tucked.has(i));
+	let ga, gb; // each letter grown by the gap once; a crossing cuts the other back by it within reach of the crossing
+	xs.forEach(({ pg }, i) => {
+		const near = grown([pg], reach);
+		if (front(i)) B = D(B, I(ga ||= grow(a, g), near)); else A = D(A, I(gb ||= grow(b, g), near));
+	});
+	return { s: U(A, B), n: xs.length, xs };
+};
+
+/**
+ * A tucked serif pair: the first letter a leads at cap H, the second b at H·kb sits fx of the lead's width to the right
+ * and fy·H lower, behind it, cut back by the gap where they cross (`order` as interlace()). The hairline is set so it fits
+ * to 31 at 448.
+ *
+ * @param {string} a The lead (a SERIF_GLYPHS key).
+ * @param {string} b The second letter.
+ * @param {{ H?: number, kb?: number, fx?: number, fy?: number, order?: string | { under?: number[][] } }} [o] The lead's
+ *   cap (360), the second's scale (0.8), its offset across (0.65) and down (0.2), and the over-under ('a').
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build, for exact().
+ */
+export const pairOf = (a, b, { H = 360, kb = 0.8, fx = 0.65, fy = 0.2, order = 'a' } = {}) => (g) => {
+	const draw = (h) => {
+		const ma = face(H, { h }), mb = face(H * kb, { h }), A = serifLetter(a, ma), B = serifLetter(b, mb, A.w * fx, H * fy);
+		return despeckShape(interlace(A.s, B.s, order, g).s, 500, 30);
+	};
+	const [x0, y0, x1, y1] = bbox(draw(32)); return draw(Math.ceil((31 * Math.max(x1 - x0, y1 - y0)) / 448));
+};
+
+/* ---------- frames ---------- */
+
+/**
+ * A stressed oval frame centred on (cx, cy), rx × ry: its sides t thick, its top and bottom hairlines h.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} rx The radius across.
+ * @param {number} ry The radius down.
+ * @param {number} t The sides' thickness.
+ * @param {number} h The hairline.
+ * @returns {import('../geometry/types.js').Shape} The frame.
+ */
+export const ovalFrame = (cx, cy, rx, ry, t, h) => ringArc(cx, cy, rx, ry, t, h).s;
+
+/**
+ * A rectangle's four corners.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @returns {number[][]} The corners.
+ */
+const corners = (cx, cy, w, h) => [[cx - w / 2, cy - h / 2], [cx + w / 2, cy - h / 2], [cx - w / 2, cy + h / 2], [cx + w / 2, cy + h / 2]];
+
+/**
+ * A cartouche: a rectangle w × h centred on (cx, cy) with its corners scooped out by quarter circles of radius r.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @param {number} r The scoops' radius.
+ * @returns {import('../geometry/types.js').Shape} The cartouche.
+ */
+export const cartouche = (cx, cy, w, h, r) => D(rect(cx - w / 2, cy - h / 2, w, h), ...corners(cx, cy, w, h).map(([x, y]) => circle(x, y, r, 160)));
+
+/**
+ * A cartouche's outline, t thick: its inner edge scooped round the same corner centres at r + t.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @param {number} r The scoops' radius.
+ * @param {number} t The outline's thickness.
+ * @returns {import('../geometry/types.js').Shape} The outline.
+ */
+export const cartoucheRule = (cx, cy, w, h, r, t) => D(cartouche(cx, cy, w, h, r),
+	D(rect(cx - w / 2 + t, cy - h / 2 + t, w - 2 * t, h - 2 * t), ...corners(cx, cy, w, h).map(([x, y]) => circle(x, y, r + t, 160))));
+
+/**
+ * A hairline rule from x0 to x1 at height y, h thick, its ends tapered to a point over `taper`.
+ *
+ * @param {number} x0 Its left end.
+ * @param {number} x1 Its right end.
+ * @param {number} y Its top.
+ * @param {number} h Its thickness.
+ * @param {number} [taper=0] How long each tapered end is (0: square ends).
+ * @returns {import('../geometry/types.js').Polygon} The rule.
+ */
+export const rule = (x0, x1, y, h, taper = 0) => taper ? poly([[x0, y + h / 2], [x0 + taper, y], [x1 - taper, y], [x1, y + h / 2], [x1 - taper, y + h], [x0 + taper, y + h]]) : rect(x0, y, x1 - x0, h);
+
+/**
+ * An octagonal plaque: a rectangle w × h centred on (cx, cy) with its corners chamfered c.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @param {number} c The chamfer.
+ * @returns {import('../geometry/types.js').Polygon} The plaque.
+ */
+export const octagon = (cx, cy, w, h, c) => {
+	const x0 = cx - w / 2, y0 = cy - h / 2, x1 = cx + w / 2, y1 = cy + h / 2;
+	return poly([[x0 + c, y0], [x1 - c, y0], [x1, y0 + c], [x1, y1 - c], [x1 - c, y1], [x0 + c, y1], [x0, y1 - c], [x0, y0 + c]]);
+};
+
+/**
+ * An octagonal plaque's outline, t thick (its inner edge parallel, so the chamfers stay even).
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @param {number} c The chamfer.
+ * @param {number} t The outline's thickness.
+ * @returns {import('../geometry/types.js').Shape} The outline.
+ */
+export const octagonRule = (cx, cy, w, h, c, t) => { const k = t * (Math.SQRT2 - 1); return D(octagon(cx, cy, w, h, c), octagon(cx, cy, w - 2 * t, h - 2 * t, c - k)); };
+
+/* ---------- the moves ---------- */
+// One-move builds. Each takes a glyph source `src(H, o)` → { s, w, m }: the capital at cap H on the glyph frame above (cap
+// line y 0, baseline y H, ink from x 0) and its face m (H, S, h). `drawn(k)` is this face's capital k; /font's
+// `fontSource()` is a font's. Each move returns `(g) => shape` on the 512 canvas for exact().
+
+/**
+ * This face's capital k as a glyph source.
+ *
+ * @param {string} k The letter (a SERIF_GLYPHS key).
+ * @returns {import('./serif.js').GlyphSource} The source: `o` is face()'s options (stem S…), plus the gap g, which it
+ *   ignores.
+ */
+export const drawn = (k) => (H, o = {}) => { const m = face(H, o); return { ...serifLetter(k, m), m }; };
+
+/**
+ * A five-point star of radius R centred on (cx, cy), its inner radius R·k.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} R The outer radius.
+ * @param {number} [k=0.42] The inner radius, as a fraction of R.
+ * @returns {import('../geometry/types.js').Polygon} The star.
+ */
+export const star5 = (cx, cy, R, k = 0.42) => poly([...Array(10)].map((_, i) => { const a = ((-90 + i * 36) * Math.PI) / 180, r = i % 2 ? R * k : R; return [cx + r * Math.cos(a), cy + r * Math.sin(a)]; }));
+
+/**
+ * The capital alone, centred (a font edition of a mark whose move is the letter itself).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} [H=380] The cap height.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const plain = (src, H = 380) => (g) => centred(src(H, { g }), H, 256, 256);
+
+/**
+ * A capital standing a gap above a tapered hairline rule `over` wider than it each side (Rule).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {number} [over=60] How far the rule runs past the letter each side.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const ruled = (src, H, over = 60) => (g) => {
+	const { s, w, m } = src(H, { g }), x0 = 256 - w / 2, y0 = 256 - (H + g + m.h) / 2;
+	return U(move(s, x0, y0), rule(x0 - over, x0 + w + over, y0 + H + g * 1.4, m.h, over * 0.9));
+};
+
+/**
+ * A capital cut once across by the gap (Split).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {(m: import('./serif.js').Face, w: number, g: number, L: import('./serif.js').SourceGlyph) => import('../geometry/types.js').Geom} cut
+ *   The strip removed, in the glyph's own coordinates.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const split = (src, H, cut) => (g) => { const L = src(H, { g }); return move(D(L.s, cut(L.m, L.w, g, L)), 256 - L.w / 2, 256 - H / 2); };
+
+/**
+ * A capital with a ball (a full stop) or a five-point star placed by `at` (Dot, Star).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {(m: import('./serif.js').Face, w: number, g: number, L: import('./serif.js').SourceGlyph) => number[]} at
+ *   Where it goes: [cx, cy, r] in the glyph's coordinates.
+ * @param {'dot' | 'star'} [kind='dot'] A ball or a star.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const dotted = (src, H, at, kind = 'dot') => (g) => {
+	const L = src(H, { g }), [cx, cy, r] = at(L.m, L.w, g, L);
+	const mark = kind === 'star' ? star5(cx, cy, r) : circle(cx, cy, r, 160), s = U(L.s, mark), [x0, , x1] = bbox(s); return move(s, 256 - (x0 + x1) / 2, 256 - H / 2);
+};
+
+/**
+ * A capital whose base serifs run together into one hairline plinth, reaching `over` past the letter (Plinth).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {number} [over=40] How far the plinth runs past the letter each side.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const plinth = (src, H, over = 40) => (g) => { const { s, w, m } = src(H, { g }); return move(U(s, rect(-over, m.H - m.h, w + 2 * over, m.h)), 256 - w / 2, 256 - H / 2); };
+
+/**
+ * The glyph centred on (cx, cy); a source whose ink sits m.dy above its cap box (a grown font glyph) is moved down by it.
+ *
+ * @param {import('./serif.js').SourceGlyph} L The glyph.
+ * @param {number} H The cap height.
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @returns {import('../geometry/types.js').Shape} The glyph, placed.
+ */
+const centred = ({ s, w, m }, H, cx, cy) => move(s, cx - w / 2, cy - H / 2 + (m.dy || 0));
+
+/**
+ * A capital (stems 0.25 of the cap) in a frame, centred a gap or more inside it (Frame).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {(g: number) => import('../geometry/types.js').Geom} frame The frame.
+ * @param {{ dx?: number, dy?: number }} [o] The letter's offset from the centre.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const framed = (src, H, frame, o = {}) => (g) => U(frame(g), centred(src(H, { S: Math.round(H * 0.25), g }), H, 256 + (o.dx || 0), 256 + (o.dy || 0)));
+
+/**
+ * A double frame: the outer band, a gap, a hairline inner rule, and the capital (stems 0.27) inside (Cartouche).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {(g: number) => import('../geometry/types.js').Geom} outer The outer band.
+ * @param {(g: number) => import('../geometry/types.js').Geom} inner The inner rule.
+ * @param {{ dx?: number, dy?: number }} [o] The letter's offset from the centre.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const crest = (src, H, outer, inner, o = {}) => (g) => U(outer(g), inner(g), centred(src(H, { S: Math.round(H * 0.27), g }), H, 256 + (o.dx || 0), 256 + (o.dy || 0)));
+
+/**
+ * A solid plaque with a hairline inner rule and the capital (stems 0.25) knocked out of it.
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} H The cap height.
+ * @param {() => import('../geometry/types.js').Geom} shape The plaque.
+ * @param {(g: number) => import('../geometry/types.js').Geom} ruleFn The inner rule.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const plaque = (src, H, shape, ruleFn) => (g) => D(shape(), ruleFn(g), centred(src(H, { S: Math.round(H * 0.25), g }), H, 256, 256));
+
+/**
+ * The fat-face inline: the capital (stems 0.26 of the cap, the framed weight) less itself shrunk by (S − g) ÷ 2, so every
+ * thick stroke keeps a g-wide channel down its middle that stops short of its ends and the hairlines stay whole (Inline).
+ *
+ * @param {import('./serif.js').GlyphSource} src The glyph source.
+ * @param {number} [H=380] The cap height.
+ * @returns {(g: number) => import('../geometry/types.js').Shape} The build.
+ */
+export const inline = (src, H = 380) => (g) => { const { s, w, m } = src(H, { S: Math.round(H * 0.26), g }); return move(D(s, grow(s, -(m.S - g) / 2)), 256 - w / 2, 256 - H / 2); };

package/src/letters/stair.d.ts

@@ -0,0 +1,8 @@
+import type { Polygon, Shape } from '../geometry/types.js';
+
+/** The grid: the cell P, the neck's width NECK, the corner radius EDGE and the neck roots' fillet FIL. */
+export const STAIR: { P: number; NECK: number; EDGE: number; FIL: number };
+/** A bar NECK wide along each corner-only contact's diagonal. */
+export function necks(rows: readonly string[], o?: { P?: number; NECK?: number }): Polygon[];
+/** A stair glyph's build: the cells as one solid, corners rounded, corner contacts necked. */
+export function stair(rows: readonly string[], o?: { P?: number; NECK?: number; EDGE?: number; FIL?: number }): () => Shape;