ntk 8.14.2 → 8.14.4

package/lib/color.js

@@ -42,6 +42,85 @@ function parseHex(value) {
   return [part(0) / 255, part(1) / 255, part(2) / 255, hasAlpha ? part(3) / 255 : 1];
 }
 
+// CSS Color 4's rgb() and hsl(), in both the syntaxes it defines: the legacy
+// one with a comma between every component, and the modern one with spaces
+// and an optional `/ alpha` — `rgb(255 128 0 / 50%)`, which is what a design
+// tool copies out today. parse-color reads neither right. The modern syntax
+// not at all; a percentage as though it were a byte, so `rgb(100%, 0%, 0%)`
+// came out at 39% red; and nothing out of range clamped, so `rgb(300, 0, 0)`
+// reached XRender as 1.18. A spelling this does not read still goes to
+// parse-color, so nothing it accepted is refused.
+const FUNCTIONAL = /^(rgba?|hsla?)\(([^()]*)\)$/i;
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const HUE = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(deg|grad|rad|turn)?$/i;
+const DEGREES = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+
+/** A number, or a percentage, as a fraction of `whole`, clamped to 0..1;
+ *  NaN when it is neither. */
+function fraction(text, whole) {
+  if (text.endsWith('%')) {
+    const n = text.slice(0, -1);
+    return NUMBER.test(n) ? clamp01(Number(n) / 100) : NaN;
+  }
+  return NUMBER.test(text) ? clamp01(Number(text) / whole) : NaN;
+}
+
+function parseFunctional(value) {
+  const m = FUNCTIONAL.exec(value);
+  if (!m) return null;
+  const body = m[2].trim();
+  let parts;
+  let alpha = null;
+  if (body.includes(',')) {
+    parts = body.split(',').map((p) => p.trim());
+    if (parts.length === 4) alpha = parts.pop();
+    else if (parts.length !== 3) return null;
+  } else {
+    const halves = body.split('/');
+    if (halves.length > 2) return null;
+    parts = halves[0].trim().split(/\s+/);
+    if (parts.length !== 3) return null;
+    if (halves.length === 2) alpha = halves[1].trim();
+    // `none` is the modern syntax's alone: a missing component, which is 0
+    const none = (p) => (p.toLowerCase() === 'none' ? '0' : p);
+    parts = parts.map(none);
+    if (alpha !== null) alpha = none(alpha);
+  }
+  const a = alpha === null ? 1 : fraction(alpha, 1);
+  let rgb;
+  if (m[1][0].toLowerCase() === 'r') {
+    rgb = parts.map((p) => fraction(p, 255));
+  } else {
+    const hue = HUE.exec(parts[0]);
+    if (!hue) return null;
+    // saturation and lightness are percentages, which the modern syntax
+    // also takes as bare numbers
+    rgb = hslToRgb(
+      Number(hue[1]) * DEGREES[(hue[2] ?? 'deg').toLowerCase()],
+      fraction(parts[1], 100),
+      fraction(parts[2], 100)
+    );
+  }
+  const out = [rgb[0], rgb[1], rgb[2], a];
+  return out.every(Number.isFinite) ? out : null;
+}
+
+/** hsl() to sRGB, rounded to bytes as a browser rounds it. parse-color did
+ *  the same, give or take one where the exact value is a half and its float
+ *  error fell below it — `hsl(-30, …)` and `hsl(330, …)` could differ. */
+function hslToRgb(h, s, l) {
+  const hue = ((h % 360) + 360) % 360;
+  const chroma = s * Math.min(l, 1 - l);
+  const channel = (n) => {
+    const k = (n + hue / 30) % 12;
+    const v = l - chroma * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    return Math.round(v * 255) / 255;
+  };
+  return [channel(0), channel(8), channel(4)];
+}
+
 // Each spelling is parsed once. A UI draws with a few dozen colours and sets
 // them again on every paint — every box's background, every border, every
 // edge of a graph — and a parse is a regular expression and an allocation
@@ -84,17 +163,21 @@ function parseStraight(value) {
 
   // '#' is ours alone: falling back to parse-color for a hex form we reject
   // is how '#1234567' turns into rgba [18, 52, 86, 7, 1] -> alpha 7.
-  const rgba = v.startsWith('#') ? parseHex(v) : rawRgba(v);
+  const rgba = v.startsWith('#') ? parseHex(v) : (parseFunctional(v) ?? rawRgba(v));
   if (!rgba) return null;
   // NaN would otherwise reach the wire as a garbage fixed-point value
   return rgba.every((c) => Number.isFinite(c)) ? rgba : null;
 }
 
 function rawRgba(value) {
-  const c = parseColorRaw(value);
+  // CSS's names and functions are case-insensitive, and parse-color's
+  // tables are lower case: `TOMATO` was not a colour
+  const c = parseColorRaw(value.toLowerCase());
   if (!c || !c.rgba) return null;
   const [r, g, b, a] = c.rgba;
-  return [r / 255, g / 255, b / 255, a];
+  // clamped as CSS clamps: a component past 1 is not a brighter colour,
+  // and XRender warns on one
+  return [clamp01(r / 255), clamp01(g / 255), clamp01(b / 255), clamp01(a)];
 }
 
 /**

package/lib/dash.js

@@ -0,0 +1,209 @@
+// A stroke's dash pattern, walked along its path as far as the surface can
+// show it.
+//
+// Walking a pattern costs a run for every dash: the path's length over the
+// pattern's. A dashed border round a box 380,000 pixels tall — a code block
+// in a scroll pane — was 95,000 runs and 78 ms a stroke for the handful the
+// surface shows, and a pattern a billionth of a pixel long ran the heap out.
+//
+// So each segment is walked only where it lies inside `view`: the surface,
+// grown by what a join or a cap can reach past a point. Everywhere else the
+// pattern is advanced by the length passed, arithmetically, which leaves
+// every dash that is drawn where a walk of the whole path puts it. A run is
+// ended where its segment leaves the view and begun again where one comes
+// back, both out of sight. And where what is left would still be more than
+// `MAX_BOUNDARIES` dashes, the stroke is drawn solid, as Skia draws one past
+// its kMaxDashCount: dashes that fine are a tone, not a pattern.
+
+/** Past this many dash boundaries in what the surface shows, the stroke is
+ *  drawn solid instead. */
+export const MAX_BOUNDARIES = 100000;
+
+// the part of a segment inside the view, as parameters along it (Liang-
+// Barsky): written here rather than returned, since the walk asks once a
+// segment and an array a segment is garbage a stroke
+let clipFrom = 0;
+let clipTo = 1;
+
+/** Whether segment a→b meets `view` ([x0, y0, x1, y1]), and if so the part of
+ *  it that does in `clipFrom`..`clipTo`. */
+function clipSegment(ax, ay, bx, by, view) {
+  const [x0, y0, x1, y1] = view;
+  if (ax >= x0 && ax <= x1 && ay >= y0 && ay <= y1 && bx >= x0 && bx <= x1 && by >= y0 && by <= y1) {
+    clipFrom = 0;
+    clipTo = 1;
+    return true;
+  }
+  const dx = bx - ax;
+  const dy = by - ay;
+  clipFrom = 0;
+  clipTo = 1;
+  // each edge of the view as p·t ≤ q
+  if (!clipEdge(-dx, ax - x0) || !clipEdge(dx, x1 - ax) || !clipEdge(-dy, ay - y0) || !clipEdge(dy, y1 - ay)) {
+    return false;
+  }
+  return clipTo > clipFrom;
+}
+
+/** Narrow `clipFrom`..`clipTo` to where p·t ≤ q; false where nothing is left. */
+function clipEdge(p, q) {
+  if (p === 0) return q >= 0; // parallel to this edge: inside it or not at all
+  const t = q / p;
+  if (p < 0) {
+    if (t > clipTo) return false;
+    if (t > clipFrom) clipFrom = t;
+  } else {
+    if (t < clipFrom) return false;
+    if (t < clipTo) clipTo = t;
+  }
+  return true;
+}
+
+/**
+ * Split a device-space polyline into dash "on" runs by arc length.
+ *
+ * `pts` is [[x, y], ...] with no consecutive duplicates; for closed subpaths
+ * the closing point is already appended, and the pattern continues around the
+ * loop as one uninterrupted walk. Returns null when the pattern cannot
+ * produce gaps (all-zero), or would make more than `MAX_BOUNDARIES` of them
+ * in what the view shows — stroke it solid — otherwise { runs, closedLoop }:
+ * `runs` is a list of [[x, y], ...] open polylines (caps apply to each),
+ * `closedLoop` marks a closed subpath the pattern never split — stroke it
+ * closed, with no caps.
+ *
+ * `view` is [x0, y0, x1, y1], outside which nothing drawn can be seen; null
+ * walks the whole path.
+ */
+export function dashPolyline(pts, closed, pattern, offset, view = null) {
+  const n = pattern.length;
+  let total = 0;
+  for (const d of pattern) total += d;
+  if (!(total > 0)) return null;
+
+  // what the walk would visit, and so how many boundaries it would make
+  let visible = 0;
+  for (let i = 1; i < pts.length; i++) {
+    const [ax, ay] = pts[i - 1];
+    const [bx, by] = pts[i];
+    const len = Math.hypot(bx - ax, by - ay);
+    if (!view) visible += len;
+    else if (clipSegment(ax, ay, bx, by, view)) visible += len * (clipTo - clipFrom);
+  }
+  if ((visible / total) * n > MAX_BOUNDARIES) return null;
+
+  // starting phase: offset into the pattern, wrapped into [0, total)
+  let phase = offset % total;
+  if (phase < 0) phase += total;
+  let idx = 0;
+  while (phase > 0 && phase >= pattern[idx]) {
+    phase -= pattern[idx];
+    idx = (idx + 1) % n;
+  }
+
+  let on = idx % 2 === 0; // even entries are "on", odd are gaps
+  const startedOn = on;
+  let toggled = false;
+  let remain = pattern[idx] - phase;
+
+  // Move along the pattern by `d` without drawing. A boundary is crossed
+  // only once `d` is past it, as the walk below crosses one.
+  const advance = (d) => {
+    if (d <= remain) {
+      remain -= d;
+      return;
+    }
+    d -= remain;
+    idx = (idx + 1) % n;
+    on = !on;
+    toggled = true;
+    // whole periods leave the entry where it was, and `on` too where the
+    // pattern has an even number of entries, as canvas makes it
+    const periods = Math.floor(d / total);
+    d -= periods * total;
+    if (n % 2 === 1 && periods % 2 === 1) on = !on;
+    while (d > pattern[idx]) {
+      d -= pattern[idx];
+      idx = (idx + 1) % n;
+      on = !on;
+    }
+    remain = pattern[idx] - d;
+  };
+
+  const runs = [];
+  let cur = null;
+  // whether the first run starts at the path's start and the last ends at
+  // its end: only then does a closed path's seam join them
+  let openedAtStart = false;
+  let openAtEnd = false;
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    const segLen = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    let from = 0;
+    let to = 1;
+    if (view) {
+      if (!clipSegment(a[0], a[1], b[0], b[1], view)) {
+        if (cur) runs.push(cur);
+        cur = null;
+        advance(segLen);
+        continue;
+      }
+      from = clipFrom;
+      to = clipTo;
+    }
+    if (from > 0) {
+      if (cur) runs.push(cur);
+      cur = null;
+      advance(segLen * from);
+    }
+    let px = from > 0 ? a[0] + (b[0] - a[0]) * from : a[0];
+    let py = from > 0 ? a[1] + (b[1] - a[1]) * from : a[1];
+    const ex = to < 1 ? a[0] + (b[0] - a[0]) * to : b[0];
+    const ey = to < 1 ? a[1] + (b[1] - a[1]) * to : b[1];
+    if (on && !cur) {
+      cur = [from > 0 ? [px, py] : a];
+      if (i === 1 && from === 0) openedAtStart = true;
+    }
+    let len = to < 1 || from > 0 ? Math.hypot(ex - px, ey - py) : segLen;
+    while (len > remain) {
+      // cross a dash boundary inside this segment
+      const t = len > 0 ? remain / len : 0;
+      const bx = px + (ex - px) * t;
+      const by = py + (ey - py) * t;
+      if (on) {
+        cur.push([bx, by]);
+        runs.push(cur);
+        cur = null;
+      } else {
+        cur = [[bx, by]];
+      }
+      on = !on;
+      toggled = true;
+      px = bx;
+      py = by;
+      len = Math.hypot(ex - px, ey - py);
+      idx = (idx + 1) % n;
+      remain = pattern[idx];
+    }
+    remain -= len;
+    if (on) cur.push(to < 1 ? [ex, ey] : b);
+    if (to < 1) {
+      if (cur) runs.push(cur);
+      cur = null;
+      advance(segLen * (1 - to));
+    }
+  }
+  if (cur) {
+    runs.push(cur);
+    openAtEnd = true;
+  }
+
+  if (closed && !toggled) return { runs, closedLoop: startedOn };
+  // closed subpath with dashes on both sides of the seam: merge the last
+  // run into the first so no caps appear at the seam
+  if (closed && openedAtStart && openAtEnd && runs.length > 1) {
+    const last = runs.pop();
+    runs[0] = last.concat(runs[0].slice(1));
+  }
+  return { runs, closedLoop: false };
+}

package/lib/rasterize.js

@@ -48,6 +48,39 @@ export class CoverageAccumulator {
    * split across the pixels the edge passes through.
    */
   edge(ax, ay, bx, by) {
+    if (ay === by) return;
+    const { width } = this;
+    if (ax < 0 || bx < 0 || ax > width || bx > width) {
+      // Cut where the edge crosses the grid's left and right borders. What
+      // lies left of the grid is all of it left of every pixel in the row,
+      // so it counts as an edge up the border itself; what lies right of
+      // it is left of none of them, and counts for nothing. Squashing each
+      // row's span into the grid instead spread the part past a border
+      // over the pixels the rest crossed: a triangle poking past the right
+      // edge left its last column at a tenth of its coverage.
+      const tl = (0 - ax) / (bx - ax);
+      const tr = (width - ax) / (bx - ax);
+      let t0 = 0;
+      let px = ax;
+      let py = ay;
+      for (const t of tl < tr ? [tl, tr, 1] : [tr, tl, 1]) {
+        if (!(t > t0) || t > 1) continue;
+        const qx = t === 1 ? bx : ax + (bx - ax) * t;
+        const qy = t === 1 ? by : ay + (by - ay) * t;
+        const mid = (px + qx) / 2;
+        if (mid < 0) this._edge(0, py, 0, qy);
+        else if (mid <= width) this._edge(px, py, qx, qy);
+        t0 = t;
+        px = qx;
+        py = qy;
+      }
+      return;
+    }
+    this._edge(ax, ay, bx, by);
+  }
+
+  /** `edge` for a piece already between the borders. */
+  _edge(ax, ay, bx, by) {
     if (ay === by) return;
     let dir = 1;
     let x0 = ax;
@@ -62,6 +95,11 @@ export class CoverageAccumulator {
       y1 = ay;
     }
     const { width, stride, acc, height } = this;
+    // An edge with no row in the grid adds nothing any pixel reads, and one
+    // past 2^31 would start its rows at `y0 | 0`, which wraps negative: a
+    // fill under a transform that put it a trillion pixels away ran the
+    // loop below over billions of rows. NaN fails both tests too.
+    if (!(y1 > 0 && y0 < height)) return;
     const dxdy = (x1 - x0) / (y1 - y0);
     let x = x0;
     if (y0 < 0) {
@@ -75,9 +113,8 @@ export class CoverageAccumulator {
       const dy = Math.min(y + 1, y1) - Math.max(y, y0);
       const xnext = x + dxdy * dy;
       const d = dy * dir;
-      // the row's x span, clamped into the grid — geometry outside the
-      // bitmap piles its coverage onto the border column, which is what a
-      // clipped fill should look like
+      // the row's x span, kept in the grid: `edge` has cut the edge at the
+      // borders already, and this only catches what rounding leaves over
       let xa = x < xnext ? x : xnext;
       let xb = x < xnext ? xnext : x;
       if (xa < 0) xa = 0;

package/lib/renderingcontext_2d.js

@@ -1,4 +1,3 @@
-import parseFontStyle from "canvas-fontstyle";
 import extrudePolyline from "extrude-polyline";
 
 import { safeRelease } from "./cleanup.js";
@@ -36,6 +35,7 @@ import {
   WIRE_REACH,
   withinRect,
 } from "./cliprect.js";
+import { dashPolyline } from "./dash.js";
 import {
   blurCoverage,
   cachedShadow,
@@ -66,6 +66,7 @@ import {
   runId,
   snapOrigin,
 } from "./text/glyphs.js";
+import { parseFontCached } from "./text/fontshorthand.js";
 import { TextLayout } from "./text/layout.js";
 import { reorderRuns } from "./text/shape.js";
 import { trapezoidize } from "./trapezoid.js";
@@ -445,80 +446,6 @@ const PIECE_SLACK = 2;
 const LINE_CAP = { butt: "butt", square: "square", round: "butt" };
 const LINE_JOIN = { miter: "miter", bevel: "bevel", round: "bevel" };
 
-/**
- * Split a device-space polyline into dash "on" runs by arc length.
- *
- * `pts` is [[x, y], ...] with no consecutive duplicates; for closed subpaths
- * the closing point is already appended, and the pattern continues around the
- * loop as one uninterrupted walk. Returns null when the pattern cannot
- * produce gaps (all-zero), otherwise { runs, closedLoop }: `runs` is a list
- * of [[x, y], ...] open polylines (caps apply to each), `closedLoop` marks a
- * closed subpath the pattern never split — stroke it closed, with no caps.
- */
-function dashPolyline(pts, closed, pattern, offset) {
-  let total = 0;
-  for (const d of pattern) total += d;
-  if (!(total > 0)) return null;
-
-  // starting phase: offset into the pattern, wrapped into [0, total)
-  let phase = offset % total;
-  if (phase < 0) phase += total;
-  let idx = 0;
-  while (phase > 0 && phase >= pattern[idx]) {
-    phase -= pattern[idx];
-    idx = (idx + 1) % pattern.length;
-  }
-
-  let on = idx % 2 === 0; // even entries are "on", odd are gaps
-  const startedOn = on;
-  let toggled = false;
-  let remain = pattern[idx] - phase;
-  const runs = [];
-  let cur = on ? [pts[0]] : null;
-  let x0 = pts[0][0];
-  let y0 = pts[0][1];
-
-  for (let i = 1; i < pts.length; i++) {
-    const x1 = pts[i][0];
-    const y1 = pts[i][1];
-    let len = Math.hypot(x1 - x0, y1 - y0);
-    while (len > remain) {
-      // cross a dash boundary inside this segment
-      const t = len > 0 ? remain / len : 0;
-      const bx = x0 + (x1 - x0) * t;
-      const by = y0 + (y1 - y0) * t;
-      if (on) {
-        cur.push([bx, by]);
-        runs.push(cur);
-        cur = null;
-      } else {
-        cur = [[bx, by]];
-      }
-      on = !on;
-      toggled = true;
-      x0 = bx;
-      y0 = by;
-      len = Math.hypot(x1 - x0, y1 - y0);
-      idx = (idx + 1) % pattern.length;
-      remain = pattern[idx];
-    }
-    remain -= len;
-    if (on) cur.push([x1, y1]);
-    x0 = x1;
-    y0 = y1;
-  }
-  if (cur) runs.push(cur);
-
-  if (closed && !toggled) return { runs, closedLoop: startedOn };
-  // closed subpath with dashes on both sides of the seam: merge the last
-  // run into the first so no caps appear at the seam
-  if (closed && startedOn && on && runs.length > 1) {
-    const last = runs.pop();
-    runs[0] = last.concat(runs[0].slice(1));
-  }
-  return { runs, closedLoop: false };
-}
-
 // An array is taken as already-premultiplied `[r, g, b, a]` in 0..1 (the
 // documented form in docs/context-2d.md), so it passes through untouched; a
 // string is a CSS colour and gets premultiplied on the way in. Both end up in
@@ -530,6 +457,17 @@ function parseColor(value) {
   return c;
 }
 
+/**
+ * Whether a rectangle call draws at all: canvas draws nothing for one with
+ * a side that is not finite. The callers then turn a negative size round
+ * into the same rectangle drawn the other way, as canvas does. X takes a
+ * rectangle's size unsigned and its corner in 16 bits, so a negative size
+ * that reached the wire threw from inside the paint.
+ */
+function finiteRect(x, y, w, h) {
+  return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(w) && Number.isFinite(h);
+}
+
 /**
  * Canvas-like 2d rendering context backed by the XRender extension: most
  * operations (composition, gradients, text composition) happen server-side.
@@ -1058,8 +996,10 @@ class RenderingContext2d {
   }
 
   set fillStyle(value) {
+    // the picture first: a value that throws leaves the style as it was
+    const picture = this._stylePicture(value);
     this._fillStyle = value;
-    this._backgroundPicture = this._stylePicture(value);
+    this._backgroundPicture = picture;
   }
 
   get fillStyle() {
@@ -1067,8 +1007,10 @@ class RenderingContext2d {
   }
 
   set strokeStyle(value) {
+    // the picture first: a value that throws leaves the style as it was
+    const picture = this._stylePicture(value);
     this._strokeStyle = value;
-    this._strokePicture = this._stylePicture(value);
+    this._strokePicture = picture;
   }
 
   get strokeStyle() {
@@ -2236,6 +2178,11 @@ class RenderingContext2d {
       ? this._lineDash.map((d) => d * scale)
       : null;
     const dashOffset = this._lineDashOffset * scale;
+    // what a dash beyond cannot be seen: the surface, grown by how far a
+    // miter or a square cap reaches from the point it is drawn at
+    // (lib/dash.js)
+    const reach = (thickness / 2) * Math.max(this.miterLimit, 1.5) + 2;
+    const view = [-reach, -reach, this.width + reach, this.height + reach];
 
     const tris = [];
     // round caps/joins: extrude-polyline extrudes them as butt/bevel (see
@@ -2491,7 +2438,7 @@ class RenderingContext2d {
         extrudeRun(pts, poly.closed);
         continue;
       }
-      const dashed = dashPolyline(pts, poly.closed, dash, dashOffset);
+      const dashed = dashPolyline(pts, poly.closed, dash, dashOffset, view);
       if (!dashed) {
         extrudeRun(pts, poly.closed);
       } else if (dashed.closedLoop) {
@@ -3050,13 +2997,25 @@ class RenderingContext2d {
   // clearing stays opaque white — the paper an opaque window starts from,
   // and what every caller predating ARGB windows expects.
   clearRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     const alpha = this._hasAlpha;
     if (matIsIdentity(this._m) && !this._hasPolyClip && !this._clipRect()) {
+      // the part of it the surface has, as `_fillRect` fills it
+      const onSurface = rectsOnSurface([x, y, w, h], this.width, this.height);
+      if (!onSurface.length) return;
       this.Render.FillRectangles(
         this.Render.PictOp.Src,
         this._dst(),
         alpha ? [0, 0, 0, 0] : [1, 1, 1, 1],
-        [x, y, w, h],
+        onSurface,
       );
       this._markDirty();
       return;
@@ -3080,6 +3039,15 @@ class RenderingContext2d {
   }
 
   fillRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     if (this._shadowed()) this._shadowOfRect(x, y, w, h, false);
     this._fillRect(x, y, w, h);
   }
@@ -3324,6 +3292,15 @@ class RenderingContext2d {
   }
 
   strokeRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     if (this._shadowed()) this._shadowOfRect(x, y, w, h, true);
     const m = this._m;
     if (m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1) {
@@ -4335,10 +4312,12 @@ class RenderingContext2d {
    */
   set font(val) {
     if (!val || typeof val !== "string") return;
-    const parsed = parseFontStyle(val);
+    const parsed = parseFontCached(val);
     if (!parsed) return;
     const style = {
-      family: parsed.family,
+      // the whole list, so a letter the first family lacks is set in the
+      // next one the font names, as CSS sets it (`FontManager.match`)
+      family: parsed.families.join(","),
       weight: parsed.weight,
       style: parsed.style,
       size: parsed.size,
@@ -4513,8 +4492,15 @@ class RenderingContext2d {
         `putImageData: data must be ${width * height * 4} RGBA bytes for ${width}x${height}`,
       );
     }
-    dirtyWidth ??= width;
-    dirtyHeight ??= height;
+    // Every position and extent is a WebIDL `long`, as `| 0` makes one: NaN
+    // and infinities are 0, a fraction goes toward 0. A fraction reached
+    // the typed-array copies below and threw.
+    x |= 0;
+    y |= 0;
+    dirtyX |= 0;
+    dirtyY |= 0;
+    dirtyWidth = dirtyWidth === undefined ? width : dirtyWidth | 0;
+    dirtyHeight = dirtyHeight === undefined ? height : dirtyHeight | 0;
     // the spec normalises negative extents by moving the origin
     if (dirtyWidth < 0) {
       dirtyX += dirtyWidth;
@@ -4524,11 +4510,22 @@ class RenderingContext2d {
       dirtyY += dirtyHeight;
       dirtyHeight = -dirtyHeight;
     }
-    const sx = Math.max(0, dirtyX);
-    const sy = Math.max(0, dirtyY);
-    const sw = Math.min(width, dirtyX + dirtyWidth) - sx;
-    const sh = Math.min(height, dirtyY + dirtyHeight) - sy;
+    let sx = Math.max(0, dirtyX);
+    let sy = Math.max(0, dirtyY);
+    let sw = Math.min(width, dirtyX + dirtyWidth) - sx;
+    let sh = Math.min(height, dirtyY + dirtyHeight) - sy;
     if (!(sw > 0) || !(sh > 0)) return;
+    // and only the part the surface has: X takes the corner in 16 bits, and
+    // image data put a million pixels away threw
+    const left = Math.max(x + sx, 0);
+    const top = Math.max(y + sy, 0);
+    const right = Math.min(x + sx + sw, this.width);
+    const bottom = Math.min(y + sy + sh, this.height);
+    if (!(right > left) || !(bottom > top)) return;
+    sx = left - x;
+    sy = top - y;
+    sw = right - left;
+    sh = bottom - top;
 
     let rgba = src;
     if (sx !== 0 || sy !== 0 || sw !== width || sh !== height) {
@@ -4724,6 +4721,11 @@ class RenderingContext2d {
    * rendered copy instead of each needing their own.
    */
   _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op) {
+    // Coverage the surface has none of is drawn as nothing. X takes the
+    // destination's corner in 16 bits, and a shadow thrown past it — an
+    // offset of 65,535, or text a million pixels away with its shadow —
+    // threw out of the paint. A NaN destination fails the test too.
+    if (!(dx < this.width && dy < this.height && dx + dw > 0 && dy + dh > 0)) return;
     const R = this.Render;
     // the coverage is painted in the current fillStyle, on both branches
     // below — a gradient/pattern whose transform collapsed paints nothing
@@ -5162,12 +5164,18 @@ class RenderingContext2d {
  * The picture is created on first use and freed by the GC, through
  * `Picture`'s finalizer.
  */
+/** How far from the origin a gradient's own points and radii may reach and
+ *  still be carried in 16.16 fixed point, with room to spare. */
+const GRADIENT_REACH = 16384;
+
 class CanvasGradient {
   constructor(type, ctx, p0, p1, p2, p3, p4, p5) {
     this.type = type;
     this.stops = [];
     this.ctx = ctx;
     this._id = null;
+    // how much smaller than asked the picture was made, to fit the wire
+    this._scale = 1;
     this._picture = null;
     // what the server currently holds: a fresh gradient picture is
     // untransformed, so an untransformed fill costs no extra request
@@ -5197,37 +5205,55 @@ class CanvasGradient {
     const Render = this.ctx.Render;
     const X = this.ctx.X;
 
-    this._id = X.AllocID();
+    // XRender takes a gradient's points and radii in 16.16 fixed point, and
+    // a coordinate past 32,767 overflows the word it is written into. A
+    // gradient that reaches further is made at a scale that fits, and
+    // `_sync` scales the picture transform to match: the same colours land
+    // on the same pixels.
+    // Geometry that is not finite, which canvas refuses when the gradient
+    // is made, is taken as 0 rather than thrown out of the paint using it.
+    const f = (v) => (Number.isFinite(v) ? v : 0);
+    const [x0, y0, x1, y1, r0, r1] = [this.x0, this.y0, this.x1, this.y1, this.r0, this.r1].map(f);
+    let reach = Math.max(Math.abs(x0), Math.abs(y0));
+    if (this.type !== "conical") reach = Math.max(reach, Math.abs(x1), Math.abs(y1));
+    if (this.type === "radial") reach = Math.max(reach, Math.abs(r0), Math.abs(r1));
+    const k = reach > GRADIENT_REACH ? reach / GRADIENT_REACH : 1;
+    // the id is the gradient's only once the picture exists: one kept after
+    // the request threw named a picture the server never made, in every
+    // fill after it
+    const id = X.AllocID();
     switch (this.type) {
       case "linear":
         Render.LinearGradient(
-          this._id,
-          [this.x0, this.y0],
-          [this.x1, this.y1],
+          id,
+          [x0 / k, y0 / k],
+          [x1 / k, y1 / k],
           this.stops,
         );
         break;
       case "radial":
         Render.RadialGradient(
-          this._id,
-          [this.x0, this.y0],
-          [this.x1, this.y1],
-          this.r0,
-          this.r1,
+          id,
+          [x0 / k, y0 / k],
+          [x1 / k, y1 / k],
+          r0 / k,
+          r1 / k,
           this.stops,
         );
         break;
       case "conical":
         Render.ConicalGradient(
-          this._id,
-          [this.x0, this.y0],
-          this.angle,
+          id,
+          [x0 / k, y0 / k],
+          f(this.angle),
           this.stops,
         );
         break;
       default:
         throw new Error("unknown gradient type");
     }
+    this._id = id;
+    this._scale = k;
     // Past the outermost stop a gradient clamps to that stop's colour, as
     // the canvas and CSS specs say — which is XRender's RepeatPad, not the
     // RepeatNone (transparent) a gradient picture is born with. Without it
@@ -5250,9 +5276,16 @@ class CanvasGradient {
    * nothing, exactly as the canvas spec says.
    */
   _sync(ctm) {
-    const inv = matInvert(ctm);
+    let inv = matInvert(ctm);
     if (!inv) return false;
     const id = this.id; // lazily creates the picture
+    // a gradient made smaller to fit the wire (see `id`) is sampled that
+    // much nearer its origin
+    const k = this._scale;
+    if (k !== 1) inv = inv.map((v) => v / k);
+    // the transform is 16.16 fixed point too: one that cannot be carried
+    // fills nothing, rather than throwing the rest of the paint away
+    if (!inv.every((v) => Math.abs(v) < 32767)) return false;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||

package/lib/sharedglyphs.js

@@ -42,14 +42,20 @@ const RPC_TIMEOUT = 2000;
  * The token naming one shared font page: content-addressed, because the
  * generator's input is a font file far too big to name literally.
  *
- *     ntkg1:<sha1 of font file bytes>:<variation coords>:<px size>:<format>
+ *     ntkg2:<sha1 of font file bytes>:<face>:<variation coords>:<px size>:<format>
  *
- * The `ntkg1` version prefix is load-bearing, not hygiene: advances are
+ * The `ntkg2` version prefix is load-bearing, not hygiene: advances are
  * baked into glyphs at AddGlyphs time and idempotent duplicate uploads
  * assume byte-identical rasterization, both of which hold only among
  * processes running the same rasterizer and rounding. Change either — bump
  * the version, and two ntk versions on one display simply share nothing.
  *
+ * `<face>` is the face's PostScript name, because a file is not a face. A
+ * collection — Helvetica.ttc, a .dfont — holds several, which number their
+ * glyphs alike, and `ntkg1` named a page by the file alone: Helvetica and
+ * Helvetica-Bold were one page, and whichever face uploaded a glyph first
+ * was what both drew, in every ntk app on the display.
+ *
  * The sha1 is computed from the loaded font buffer, lazily on first shared
  * use, and cached on the base face (a variation instance hashes the same
  * file its base was cut from). `null` — no buffer to hash, or no crypto in
@@ -68,7 +74,8 @@ export function fontPageToken(font, size) {
     base._ntkSha1 = crypto ? crypto.createHash('sha1').update(buffer).digest('hex') : null;
   }
   if (!base._ntkSha1) return null;
-  return `ntkg1:${base._ntkSha1}:${variationKey(font.variationCoords)}:${size}:a8`;
+  const face = base.fk?.postscriptName ?? '';
+  return `ntkg2:${base._ntkSha1}:${face}:${variationKey(font.variationCoords)}:${size}:a8`;
 }
 
 // ---------------------------------------------------------------------------

package/lib/text/fontmanager.js

@@ -193,6 +193,10 @@ function instantiate(font, weight, variations, opticalSize) {
  * fontconfig, e.g. a StaticFontSource in a browser bundle. `source` also
  * takes a font spec: a path, a directory of faces, or font bytes.
  */
+/** Whether a style asks for italics. Anything but a string asks for nothing:
+ *  a style of `7` threw from here, out of whatever paint was measuring. */
+const italicIn = (style) => typeof style === 'string' && style.includes('italic');
+
 /** A CSS family list's names, unquoted. */
 function familiesOf(family) {
   return String(family)
@@ -221,6 +225,7 @@ export default class FontManager {
     this._source = createFontSource(source) ?? null;
     this._fonts = new Map(); // candidate key -> Font
     this._matches = new Map(); // family|weight|style -> Font
+    this._lastMatch = null; // the last of them asked for (`match`)
     this._fallbacks = new Map(); // family|weight|style -> Map(codepoint -> Font|null)
     this._registered = []; // { font, family (lowercase), weight, italic }
     // word-level shaping memo, in two generations (`_shapeCached`): each a
@@ -330,9 +335,10 @@ export default class FontManager {
       font,
       family: (opts.family || font.familyName || '').toLowerCase(),
       weight: opts.weight !== undefined ? numWeight(opts.weight) : detected.weight,
-      italic: opts.style !== undefined ? opts.style.includes('italic') : detected.italic
+      italic: typeof opts.style === 'string' ? opts.style.includes('italic') : detected.italic
     });
     this._matches.clear();
+    this._lastMatch = null;
     this._fallbacks.clear();
     // a kept paragraph's spans hold the faces their families matched before
     this._paragraphs.clear();
@@ -376,13 +382,23 @@ export default class FontManager {
    */
   match(family = 'sans-serif', opts = {}) {
     const weight = numWeight(opts.weight);
-    const italic = !!(opts.style && opts.style.includes('italic'));
+    const italic = italicIn(opts.style);
+    // The face the last call matched, asked for again — a paragraph's spans,
+    // a list's rows of one style — is the most recent in the map already: no
+    // key to spell and no move to make, where both were most of the call.
+    // Only a miss below changes the map, and it sets this; `load()` clears
+    // both.
+    const last = this._lastMatch;
+    if (last !== null && last.family === family && last.weight === weight && last.italic === italic) {
+      return instantiate(last.face, weight, opts.variations, opticalSizeFor(opts));
+    }
     const cacheKey = `${family}|${weight}|${italic}`;
     let face = this._matches.get(cacheKey);
     if (face) {
       // insertion order is LRU order; re-inserting a hit moves it to the tail
       this._matches.delete(cacheKey);
       this._matches.set(cacheKey, face);
+      this._lastMatch = { family, weight, italic, face };
       return instantiate(face, weight, opts.variations, opticalSizeFor(opts));
     }
 
@@ -411,6 +427,7 @@ export default class FontManager {
       face = head?.drawable ? head : this._firstDrawable(source.matchSorted(pattern));
     }
     this._matches.set(cacheKey, face);
+    this._lastMatch = { family, weight, italic, face };
     // A long-lived app can name a lot of families. Same sweep as the shaping
     // memo: drop the stale half in one pass rather than one entry per insert.
     if (this._matches.size > MAX_MATCHES) {
@@ -456,7 +473,7 @@ export default class FontManager {
     let found = null;
     if (this._registered.length) {
       const weight = numWeight(opts.weight);
-      const italic = !!opts.style?.includes('italic');
+      const italic = italicIn(opts.style);
       for (const name of familiesOf(family)) {
         const font = this._matchRegistered([name.toLowerCase()], weight, italic);
         if (font && font.hasGlyph(codepoint)) {
@@ -482,7 +499,7 @@ export default class FontManager {
         // raw weight — undefined for regular text — it was another pattern,
         // and the first character to need a fallback waited on a fc-match
         // of its own.
-        candidates = source.matchSorted(patternOf(family, numWeight(opts.weight), !!opts.style?.includes('italic')));
+        candidates = source.matchSorted(patternOf(family, numWeight(opts.weight), italicIn(opts.style)));
       } catch (err) {
         // no system fonts to fall back to is an answer, not a crash; a source
         // that failed for any other reason is a real bug and still propagates

package/lib/text/fontshorthand.js

@@ -0,0 +1,213 @@
+// The CSS `font` shorthand, as `ctx.font` takes it:
+//
+//   [ <style> || <variant> || <weight> || <stretch> ]? <size> [ / <line-height> ]? <family>#
+//
+// canvas-fontstyle read this before, with a regular expression from an old
+// node-canvas that allowed no space at all after a weight — so `2000px` was
+// weight 200 at size 0, and every size from 1000 up that begins with a weight
+// set no text — required the weight before the style, took no line height,
+// and cached every string it was handed as a property on an LRU object it
+// never evicted from, which grew without bound under an animated size.
+
+// What 1em is. Canvas resolves a relative size against the canvas element's
+// font; a context here has no element, so it is the size of the font a
+// context starts with (DEFAULT_FONT in renderingcontext_2d.js).
+const EM = 20;
+
+const ABSOLUTE_SIZES = {
+  'xx-small': 9,
+  'x-small': 10,
+  small: 13,
+  medium: 16,
+  large: 18,
+  'x-large': 24,
+  'xx-large': 32,
+  'xxx-large': 48
+};
+
+const UNITS = {
+  px: 1,
+  pt: 4 / 3,
+  pc: 16,
+  in: 96,
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  q: 96 / 101.6,
+  em: EM,
+  rem: EM,
+  '%': EM / 100
+};
+
+const STYLES = new Set(['italic', 'oblique']);
+const WEIGHTS = new Set(['bold', 'bolder', 'lighter']);
+const STRETCHES = new Set([
+  'ultra-condensed',
+  'extra-condensed',
+  'condensed',
+  'semi-condensed',
+  'semi-expanded',
+  'expanded',
+  'extra-expanded',
+  'ultra-expanded'
+]);
+
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const LENGTH = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z]+|%)$/i;
+const ANGLE = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:deg|grad|rad|turn)$/i;
+
+/** A font size in pixels, or null when `token` is not one. */
+function sizeOf(token) {
+  const word = token.toLowerCase();
+  if (Object.hasOwn(ABSOLUTE_SIZES, word)) return ABSOLUTE_SIZES[word];
+  if (word === 'larger') return EM * 1.2;
+  if (word === 'smaller') return EM / 1.2;
+  const m = LENGTH.exec(word);
+  if (!m || !Object.hasOwn(UNITS, m[2])) return null;
+  const px = Number(m[1]) * UNITS[m[2]];
+  return px >= 0 && px < Infinity ? px : null;
+}
+
+/** A line height; only its shape matters, since a canvas ignores it. */
+const isLineHeight = (text) =>
+  text.toLowerCase() === 'normal' || NUMBER.test(text) || (LENGTH.test(text) && sizeOf(text) !== null);
+
+/**
+ * The family list, first family first: quoted names as written, unquoted ones
+ * as the identifiers they are with the white space between them collapsed.
+ * Null when it is not a list of families.
+ */
+function familiesOf(text) {
+  const families = [];
+  let i = 0;
+  while (i < text.length) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let name;
+    if (text[i] === '"' || text[i] === "'") {
+      const quote = text[i];
+      const end = text.indexOf(quote, i + 1);
+      if (end === -1) return null;
+      name = text.slice(i + 1, end);
+      i = end + 1;
+      while (i < text.length && /\s/.test(text[i])) i++;
+    } else {
+      const end = text.indexOf(',', i);
+      const raw = (end === -1 ? text.slice(i) : text.slice(i, end)).trim();
+      // a run of identifiers: `Times New Roman`, not `12px` or `"x`
+      if (!/^-?[a-z_\u00a0-\uffff][\w\u00a0-\uffff-]*(?:\s+-?[a-z_\u00a0-\uffff][\w\u00a0-\uffff-]*)*$/i.test(raw)) {
+        return null;
+      }
+      name = raw.replace(/\s+/g, ' ');
+      i = end === -1 ? text.length : end;
+    }
+    if (!name) return null;
+    families.push(name);
+    if (i < text.length) {
+      if (text[i] !== ',') return null;
+      i++;
+    }
+  }
+  return families.length ? families : null;
+}
+
+/**
+ * Parse a CSS `font` shorthand into `{ weight, style, size, unit, family,
+ * families }`, the size in pixels, or undefined when it is not one — which
+ * `ctx.font` ignores, keeping the font it had, as canvas says.
+ *
+ * `weight` and `style` are the words written (`'normal'`, `'bold'`, `'600'`,
+ * `'oblique 10deg'`), `family` the first family and `families` all of them.
+ */
+export function parseFont(value) {
+  if (typeof value !== 'string') return undefined;
+  const text = value.trim();
+  if (!text) return undefined;
+
+  let weight;
+  let style;
+  let variant;
+  let stretch;
+  let normals = 0;
+  let i = 0;
+  let size = null;
+  // the keywords before the size, each at most once, in any order; `normal`
+  // is whichever of them is left unset, so it only counts against the four
+  for (;;) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let end = i;
+    while (end < text.length && !/[\s/,"']/.test(text[end])) end++;
+    const token = text.slice(i, end);
+    if (!token) return undefined;
+    const word = token.toLowerCase();
+    if (STYLES.has(word) && style === undefined) {
+      style = word;
+      // `oblique` may carry its angle
+      if (word === 'oblique') {
+        let j = end;
+        while (j < text.length && /\s/.test(text[j])) j++;
+        let k = j;
+        while (k < text.length && !/[\s/,]/.test(text[k])) k++;
+        if (ANGLE.test(text.slice(j, k))) {
+          style = `oblique ${text.slice(j, k).toLowerCase()}`;
+          end = k;
+        }
+      }
+    } else if (WEIGHTS.has(word) && weight === undefined) {
+      weight = word;
+    } else if (NUMBER.test(word) && weight === undefined && Number(word) >= 1 && Number(word) <= 1000) {
+      weight = word;
+    } else if (word === 'small-caps' && variant === undefined) {
+      variant = word;
+    } else if (STRETCHES.has(word) && stretch === undefined) {
+      stretch = word;
+    } else if (word === 'normal') {
+      normals++;
+    } else {
+      size = sizeOf(token);
+      if (size === null) return undefined;
+      i = end;
+      break;
+    }
+    const named = [style, weight, variant, stretch].filter((v) => v !== undefined).length;
+    if (named + normals > 4) return undefined;
+    i = end;
+  }
+
+  while (i < text.length && /\s/.test(text[i])) i++;
+  if (text[i] === '/') {
+    i++;
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let end = i;
+    while (end < text.length && !/[\s,"']/.test(text[end])) end++;
+    if (!isLineHeight(text.slice(i, end))) return undefined;
+    i = end;
+  }
+
+  const families = familiesOf(text.slice(i));
+  if (!families) return undefined;
+  return {
+    weight: weight ?? 'normal',
+    style: style ?? 'normal',
+    size,
+    unit: 'px',
+    family: families[0],
+    families
+  };
+}
+
+// Each spelling is parsed once: a context sets its font on every draw, and
+// the same few strings come round again. Bounded, and dropped whole rather
+// than evicted — the old cache held every string it was ever handed.
+const parsed = new Map();
+const PARSED_MAX = 256;
+
+/** `parseFont`, remembered per spelling. */
+export function parseFontCached(value) {
+  if (typeof value !== 'string') return undefined;
+  let font = parsed.get(value);
+  if (font === undefined && !parsed.has(value)) {
+    font = parseFont(value);
+    if (parsed.size >= PARSED_MAX) parsed.clear();
+    parsed.set(value, font);
+  }
+  return font;
+}

package/lib/text/glyphs.js

@@ -2,7 +2,7 @@ import GlyphSet from '../glyphset.js';
 import Picture from '../picture.js';
 import Pixmap from '../pixmap.js';
 import { fontPageToken, sharedGlyphsFor } from '../sharedglyphs.js';
-import { trapezoidize } from '../trapezoid.js';
+import { clipTraps, trapezoidize } from '../trapezoid.js';
 
 /**
  * Text rendering policy — the bitmap/vector routing thresholds and the
@@ -201,6 +201,13 @@ export class GlyphPage {
 /** per-app page cache: pages (and their server glyphsets) are shared by all
  *  windows/pixmaps of a connection. Access refreshes LRU order. */
 export function getGlyphPage(app, font, size) {
+  // The page the last run was drawn from, asked for again — a paragraph's
+  // spans, an editor's tokens, a table's cells are runs of one face at one
+  // size — is the most recent already: no key to spell and no move to make,
+  // where both were most of what drawing a run cost here. Only this
+  // function orders the pages, and an eviction forgets it (trimGlyphPages).
+  const last = app._lastGlyphPage;
+  if (last && last.font === font && last.size === size) return last.page;
   if (!app._glyphPages) app._glyphPages = new Map();
   const key = `${font.key}@${size}`;
   let page = app._glyphPages.get(key);
@@ -211,6 +218,7 @@ export function getGlyphPage(app, font, size) {
     page = new GlyphPage(app, font, size);
   }
   app._glyphPages.set(key, page);
+  app._lastGlyphPage = { font, size, page };
   return page;
 }
 
@@ -266,6 +274,7 @@ export function trimGlyphPages(app, policy = policyOf(app), inUse = null) {
     if (inUse && inUse.has(page)) continue;
     pages.delete(key);
     total -= page.bytes;
+    if (app._lastGlyphPage?.page === page) app._lastGlyphPage = null;
     page.destroy();
   }
 }
@@ -679,6 +688,8 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
   const placed = [];
   let minX = Infinity;
   let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
   for (const { run, x, y } of positioned) {
     let cursor = x;
     for (const g of run.glyphs) {
@@ -691,17 +702,46 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
       placed.push({ run, glyph: g, x: gx, y: gy });
       if (gx + e.minX < minX) minX = gx + e.minX;
       if (gy + e.minY < minY) minY = gy + e.minY;
+      if (gx + e.maxX > maxX) maxX = gx + e.maxX;
+      if (gy + e.maxY > maxY) maxY = gy + e.maxY;
     }
   }
   if (placed.length === 0) return;
 
-  const bx = Math.floor(minX) - 1;
-  const by = Math.floor(minY) - 1;
+  let bx = Math.floor(minX) - 1;
+  let by = Math.floor(minY) - 1;
 
-  const traps = [];
+  let traps = [];
   for (const p of placed) {
     trapezoidize(p.run.font.outline(p.glyph.id, p.run.size), p.x - bx, p.y - by, traps);
   }
+  // Only the part the destination can show, when the ink reaches past it: a
+  // mask is the size of what it covers, and a glyph bigger than the surface
+  // — a size a zoom or a style can reach — asked for one the size of the
+  // glyph, which past 32767 pixels is not a pixmap X can make.
+  if (
+    bounds !== null &&
+    (minX < bounds.x || minY < bounds.y || maxX > bounds.x + bounds.w || maxY > bounds.y + bounds.h)
+  ) {
+    const x0 = Math.max(bx, Math.floor(bounds.x) - 1);
+    const y0 = Math.max(by, Math.floor(bounds.y) - 1);
+    const x1 = Math.ceil(bounds.x + bounds.w) + 1;
+    const y1 = Math.ceil(bounds.y + bounds.h) + 1;
+    if (x1 <= x0 || y1 <= y0) return;
+    const cut = clipTraps(traps, x0 - bx, y0 - by, x1 - bx, y1 - by);
+    // …from the cut's corner, which is the mask's now
+    for (let i = 0; i < cut.length; i += 6) {
+      cut[i] -= x0 - bx;
+      cut[i + 1] -= x0 - bx;
+      cut[i + 2] -= y0 - by;
+      cut[i + 3] -= x0 - bx;
+      cut[i + 4] -= x0 - bx;
+      cut[i + 5] -= y0 - by;
+    }
+    traps = cut;
+    bx = x0;
+    by = y0;
+  }
   compositeTraps(app, op, srcId, dstId, traps, bx, by);
 }
 

package/lib/text/layout.js

@@ -158,7 +158,10 @@ export class TextLayout {
 
     // ---- assemble lines: strip trailing ws, bidi-reorder, position ----
     const baseSpan = spans[0];
-    const lineHeightMul = options.lineHeight ?? 1;
+    // a multiplier, as a number or a numeric string; anything else is the
+    // font's own line height — `'24px'` made every line NaN pixels tall
+    const asked = options.lineHeight == null ? NaN : Number(options.lineHeight);
+    const lineHeightMul = asked >= 0 && asked < Infinity ? asked : 1;
     this.lines = [];
     let y = 0;
     let layoutWidth = 0;
@@ -1043,21 +1046,31 @@ function graphemeSegmenter() {
   return segmenter;
 }
 
-// Two ASCII characters are never one cluster, bar a CR before a LF (UAX#29
-// GB3): whatever extends a cluster or joins into one — marks, joiners,
-// spacing marks, prepends — sits above U+02FF. So text of nothing else,
-// which is most of what a document cuts, needs no segmenter: it costs a
-// microsecond a call, and the width floors ask once a word.
-function plainAscii(text) {
+// A character that never joins the ones beside it into a cluster (UAX#29):
+// whatever extends a cluster or joins into one — marks, joiners, spacing
+// marks, prepends — sits at U+0300 or above, and the general punctuation
+// block has two of them, the zero-width joiner and non-joiner. Checked pair
+// by pair against Intl.Segmenter, all 770,884 pairs of these: every one is
+// two clusters but a CR before a LF (GB3). The stateful rules — emoji
+// sequences, flags, Indic conjuncts — are about characters outside it.
+const standsAlone = (c) =>
+  c < 0x300 || (c >= 0x2000 && c <= 0x206f && c !== 0x200c && c !== 0x200d);
+
+// So text of nothing else, which is most of what a document cuts — Latin
+// letters, accented or not, and the dashes, quotes and ellipses around them
+// — needs no segmenter. One costs a microsecond a call, and the width floors
+// ask once a word; and the first one made costs 10 ms, loading ICU's break
+// rules, which a first frame of any text with a curly quote in it paid.
+function standsApart(text) {
   for (let i = 0; i < text.length; i++) {
     const c = text.charCodeAt(i);
-    if (c >= 0x80 || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
+    if (!standsAlone(c) || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
   }
   return true;
 }
 
 function graphemes(text) {
-  if (plainAscii(text)) return text.split('');
+  if (standsApart(text)) return text.split('');
   const segments = graphemeSegmenter();
   if (!segments) return Array.from(text);
   const out = [];
@@ -1068,7 +1081,9 @@ function graphemes(text) {
 /** The first grapheme cluster of `text`, without segmenting the rest. */
 function firstGrapheme(text) {
   const c0 = text.charCodeAt(0);
-  if (c0 < 0x80 && c0 !== 13 && !(text.charCodeAt(1) >= 0x80)) return text.slice(0, 1);
+  if (c0 !== 13 && standsAlone(c0) && (text.length === 1 || standsAlone(text.charCodeAt(1)))) {
+    return text.slice(0, 1);
+  }
   const segments = graphemeSegmenter();
   if (!segments) return String.fromCodePoint(text.codePointAt(0));
   for (const { segment } of segments.segment(text)) return segment;

package/lib/trapezoid.js

@@ -129,3 +129,69 @@ export function trapArea(traps) {
   }
   return area;
 }
+
+/**
+ * Trapezoids cut to the rectangle [x0, x1] × [y0, y1], with the coverage
+ * inside it unchanged — the part of a mask that can show anything. A glyph
+ * a million pixels high is a mask no X server will make and coordinates
+ * past what 16.16 fixed point carries, and every pixel of it outside the
+ * surface is a pixel rasterized for nothing.
+ *
+ * The cut is exact. Each trapezoid is clipped to the rows and then split
+ * into bands where either edge crosses x0 or x1, so that within a band an
+ * edge lies wholly on one side of each line: an edge outside the rectangle
+ * becomes the vertical just past it, which covers the same pixels inside,
+ * and a band with nothing inside is dropped.
+ *
+ * @param {Array<number>} traps AddTraps data, as `trapezoidize` makes it
+ * @returns {Array<number>} the cut trapezoids, in the same coordinates
+ */
+export function clipTraps(traps, x0, y0, x1, y1) {
+  const out = [];
+  for (let i = 0; i < traps.length; i += 6) {
+    const tl = traps[i];
+    const tr = traps[i + 1];
+    const ty = traps[i + 2];
+    const bl = traps[i + 3];
+    const br = traps[i + 4];
+    const by = traps[i + 5];
+    if (!(by > y0 && ty < y1 && by > ty)) continue;
+    const top = Math.max(ty, y0);
+    const bottom = Math.min(by, y1);
+    // each edge's x at a height
+    const left = (y) => tl + (bl - tl) * ((y - ty) / (by - ty));
+    const right = (y) => tr + (br - tr) * ((y - ty) / (by - ty));
+    const cuts = [top, bottom];
+    for (const [a, b] of [
+      [tl, bl],
+      [tr, br]
+    ]) {
+      for (const x of [x0, x1]) {
+        if ((a - x) * (b - x) >= 0) continue; // does not cross this line
+        const y = ty + (by - ty) * ((x - a) / (b - a));
+        if (y > top && y < bottom) cuts.push(y);
+      }
+    }
+    cuts.sort((p, q) => p - q);
+    for (let k = 0; k + 1 < cuts.length; k++) {
+      const ya = cuts[k];
+      const yb = cuts[k + 1];
+      if (!(yb > ya)) continue;
+      const mid = (ya + yb) / 2;
+      const lm = left(mid);
+      const rm = right(mid);
+      if (lm >= x1 || rm <= x0) continue; // nothing of this band inside
+      const inL = lm >= x0;
+      const inR = rm <= x1;
+      out.push(
+        inL ? left(ya) : x0 - 1,
+        inR ? right(ya) : x1 + 1,
+        ya,
+        inL ? left(yb) : x0 - 1,
+        inR ? right(yb) : x1 + 1,
+        yb
+      );
+    }
+  }
+  return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.14.2",
+  "version": "8.14.4",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "bidi-js": "^1.0.3",
-    "canvas-fontstyle": "^1.0.1",
     "domutils": "^4.0.2",
     "extrude-polyline": "^1.0.6",
     "fontkit": "^2.0.4",