ntk 8.14.4 → 8.14.6

package/lib/cliprect.js

@@ -101,9 +101,19 @@ export function clipTrianglesToRect(tris, x0, y0, x1, y1) {
 }
 
 /**
- * A flat `[x, y, w, h, …]` list of rectangles cut to `[0, width) × [0,
- * height)`, dropping the ones with nothing left: core X's rectangles are 16
- * bits. The list itself when every rectangle is already on the surface.
+ * A flat `[x, y, w, h, …]` list of rectangles on whole pixels and cut to
+ * `[0, width) × [0, height)`, dropping the ones with nothing left: core X's
+ * rectangles are 16 bits. The list itself when every rectangle is already
+ * whole and on the surface.
+ *
+ * Each edge is rounded on its own. The wire truncates a rectangle's x and
+ * its width separately, so two rectangles meeting at a fractional edge —
+ * the selection bands of two lines whose height is the face's, 15.13px —
+ * left a row of neither between them every seventh or eighth line, and one
+ * that crossed the surface's edge was cut a pixel differently from the
+ * same rectangle moved: a scroll's copy and a repaint disagreed. Rounded
+ * edges meet whoever they are shared with, and move with a whole-pixel
+ * shift.
  */
 export function rectsOnSurface(flat, width, height) {
   let out = null;
@@ -112,16 +122,21 @@ export function rectsOnSurface(flat, width, height) {
     const y = flat[i + 1];
     const w = flat[i + 2];
     const h = flat[i + 3];
+    const whole =
+      Number.isInteger(x) &&
+      Number.isInteger(y) &&
+      Number.isInteger(w) &&
+      Number.isInteger(h);
     const inside = x >= 0 && y >= 0 && x + w <= width && y + h <= height;
-    if (inside) {
+    if (whole && inside) {
       if (out) out.push(x, y, w, h);
       continue;
     }
     if (!out) out = flat.slice(0, i);
-    const x0 = Math.max(x, 0);
-    const y0 = Math.max(y, 0);
-    const x1 = Math.min(x + w, width);
-    const y1 = Math.min(y + h, height);
+    const x0 = Math.max(Math.round(x), 0);
+    const y0 = Math.max(Math.round(y), 0);
+    const x1 = Math.min(Math.round(x + w), width);
+    const y1 = Math.min(Math.round(y + h), height);
     if (x1 > x0 && y1 > y0) out.push(x0, y0, x1 - x0, y1 - y0);
   }
   return out ?? flat;

package/lib/path.js

@@ -491,13 +491,19 @@ function normalizeRadii(w, h, radii) {
     br = take(radii[2]);
     bl = take(radii[3]);
   }
-  // scale down so opposite corners never overlap
+  // Scale down so opposite corners never overlap: by the side's length over
+  // the radii along it, which is 0 for a side of no length, and the radii go
+  // with it. Only radii of nothing leave a side alone — `|| 1` guarded that
+  // 0 / 0 and took a real 0 for one as well, so a box of no height kept its
+  // corners, and a clip to it was two lobes of arc a radius above and below
+  // it that let what it should have hidden through.
+  const fit = (side, radii) => (radii > 0 ? side / radii : 1);
   const s = Math.min(
     1,
-    w / (tl.x + tr.x) || 1,
-    h / (tr.y + br.y) || 1,
-    w / (br.x + bl.x) || 1,
-    h / (bl.y + tl.y) || 1
+    fit(w, tl.x + tr.x),
+    fit(h, tr.y + br.y),
+    fit(w, br.x + bl.x),
+    fit(h, bl.y + tl.y)
   );
   const f = (r) => ({ x: Math.max(0, r.x * s), y: Math.max(0, r.y * s) });
   return [f(tl), f(tr), f(br), f(bl)];
@@ -803,6 +809,62 @@ function addCubic(pts, x0, y0, x1, y1, x2, y2, x3, y3, tol2, depth) {
   addCubic(pts, mx, my, bcx, bcy, cx, cy, x3, y3, tol2, depth + 1);
 }
 
+/**
+ * Which way a cubic leaves (x0, y0), or arrives at (x, y) with `end`: the
+ * control point next to that end, or the next one along where it sits on
+ * the end itself. Null for a cubic that is a single point.
+ */
+function cubicTangent(x0, y0, x1, y1, x2, y2, x, y, end) {
+  if (end) {
+    if (x !== x2 || y !== y2) return [x - x2, y - y2];
+    if (x !== x1 || y !== y1) return [x - x1, y - y1];
+    return x !== x0 || y !== y0 ? [x - x0, y - y0] : null;
+  }
+  if (x1 !== x0 || y1 !== y0) return [x1 - x0, y1 - y0];
+  if (x2 !== x0 || y2 !== y0) return [x2 - x0, y2 - y0];
+  return x !== x0 || y !== y0 ? [x - x0, y - y0] : null;
+}
+
+/**
+ * The tangent at a curve command's end or start, in the flattened
+ * polyline's space; (x0, y0) is where the command begins, already there.
+ */
+function commandTangent(c, x0, y0, m, end) {
+  const p = (x, y) => (m ? matApply(m, x, y) : [x, y]);
+  const [x, y] = p(c.x, c.y);
+  if (c.type === 'Q') {
+    const [qx, qy] = p(c.x1, c.y1);
+    return cubicTangent(
+      x0, y0,
+      x0 + (2 / 3) * (qx - x0), y0 + (2 / 3) * (qy - y0),
+      x + (2 / 3) * (qx - x), y + (2 / 3) * (qy - y),
+      x, y,
+      end
+    );
+  }
+  const [x1, y1] = p(c.x1, c.y1);
+  const [x2, y2] = p(c.x2, c.y2);
+  return cubicTangent(x0, y0, x1, y1, x2, y2, x, y, end);
+}
+
+/**
+ * The tangents a flattened subpath leaves its first point and arrives at its
+ * last with, where that end is a curve — null where it is a line, whose
+ * chord already says which way the path heads. Worked out on demand from the
+ * commands `flattenPath` kept: only a stroke whose ends meet asks.
+ */
+export function subpathHead(poly) {
+  return poly.head
+    ? commandTangent(poly.head, poly.pts[0], poly.pts[1], poly.m, false)
+    : null;
+}
+
+export function subpathTail(poly) {
+  return poly.tail
+    ? commandTangent(poly.tail, poly.tailX, poly.tailY, poly.m, true)
+    : null;
+}
+
 /**
  * Chords of the arc a tagged cubic stands for, appended to `pts`. Returns
  * false — flatten the cubic instead — when the path's current point is not
@@ -858,6 +920,13 @@ function addArcChords(pts, cmd, m, tol, x0, y0) {
  * geometry (see addArcChords); genuine beziers — hand-built paths, SVG curve
  * commands, font outlines — take the adaptive bisection route.
  *
+ * A subpath that begins or ends on a curve also keeps the command it began
+ * or ended with, for `subpathHead` and `subpathTail`: flattening turns a
+ * curve's end into a chord, which points half a chord's angle away from the
+ * curve, and the stroker asks for the curve's own tangent where that
+ * difference shows (a ring's seam). Kept rather than worked out, because a
+ * fill never asks.
+ *
  * @returns {Array<{pts: number[], closed: boolean}>} flat [x0,y0,x1,y1,…]
  */
 export function flattenPath(cmds, m = null, tol = FLATTEN_TOLERANCE) {
@@ -872,19 +941,24 @@ export function flattenPath(cmds, m = null, tol = FLATTEN_TOLERANCE) {
       case 'M': {
         if (pts && pts.pts.length >= 4) polys.push(pts);
         const [x, y] = p(c.x, c.y);
-        pts = { pts: [x, y], closed: false };
+        pts = { pts: [x, y], closed: false, head: null, tail: null, tailX: 0, tailY: 0, m };
         break;
       }
       case 'L': {
         if (!pts) break;
         const [x, y] = p(c.x, c.y);
         pts.pts.push(x, y);
+        pts.tail = null;
         break;
       }
       case 'C': {
         if (!pts) break;
         const x0 = pts.pts[pts.pts.length - 2];
         const y0 = pts.pts[pts.pts.length - 1];
+        if (pts.pts.length === 2) pts.head = c;
+        pts.tail = c;
+        pts.tailX = x0;
+        pts.tailY = y0;
         if (c.arc && addArcChords(pts.pts, c, m, tol, x0, y0)) break;
         const [x1, y1] = p(c.x1, c.y1);
         const [x2, y2] = p(c.x2, c.y2);
@@ -896,6 +970,10 @@ export function flattenPath(cmds, m = null, tol = FLATTEN_TOLERANCE) {
         if (!pts) break;
         const x0 = pts.pts[pts.pts.length - 2];
         const y0 = pts.pts[pts.pts.length - 1];
+        if (pts.pts.length === 2) pts.head = c;
+        pts.tail = c;
+        pts.tailX = x0;
+        pts.tailY = y0;
         const [qx, qy] = p(c.x1, c.y1);
         const [x, y] = p(c.x, c.y);
         // degree elevation: quadratic -> cubic
@@ -916,7 +994,7 @@ export function flattenPath(cmds, m = null, tol = FLATTEN_TOLERANCE) {
             polys.push(pts);
           }
           // a new subpath continues from the subpath start
-          pts = { pts: [pts.pts[0], pts.pts[1]], closed: false };
+          pts = { pts: [pts.pts[0], pts.pts[1]], closed: false, head: null, tail: null, tailX: 0, tailY: 0, m };
         }
         break;
       }

package/lib/renderingcontext_2d.js

@@ -22,6 +22,8 @@ import {
   matInvert,
   matIsIdentity,
   matMultiply,
+  subpathHead,
+  subpathTail,
 } from "./path.js";
 import Picture from "./picture.js";
 import { formatForDepth } from "./pictformat.js";
@@ -524,16 +526,23 @@ class RenderingContext2d {
       );
     }
     if (typeof window.on === "function") {
-      window.on("_backing", () => this._bindTarget());
+      // Kept, so `destroy` can take them off again: a surface drawn through
+      // `render()` gets a context a call, and each one left three listeners
+      // on the pixmap — holding the dead context — for as long as the
+      // surface lived. A fade redraws its group surface every frame.
+      this._onBacking = () => this._bindTarget();
       // masks are sized to the drawable — recreate them after a resize
-      window.on("resize", () => this._dropMasks());
+      this._onResize = () => this._dropMasks();
       // window-backed pictures are freed server-side with the window
-      window.on("_destroyed", () => {
+      this._onDestroyed = () => {
         if (this._picture && this._target === this.window) {
           this._picture.forget();
           this._picture = null;
         }
-      });
+      };
+      window.on("_backing", this._onBacking);
+      window.on("resize", this._onResize);
+      window.on("_destroyed", this._onDestroyed);
     }
 
     this.fillMask = null;
@@ -876,6 +885,13 @@ class RenderingContext2d {
     if (this._destroyed) return;
     this._destroyed = true;
     gcRegistry.unregister(this);
+    const drawable = this.window;
+    if (this._onBacking && typeof drawable?.removeListener === "function") {
+      drawable.removeListener("_backing", this._onBacking);
+      drawable.removeListener("resize", this._onResize);
+      drawable.removeListener("_destroyed", this._onDestroyed);
+      this._onBacking = this._onResize = this._onDestroyed = null;
+    }
 
     this._setClips([]);
     this._dropMasks();
@@ -2401,6 +2417,32 @@ class RenderingContext2d {
         addDisk(pts[pts.length - 1][0], pts[pts.length - 1][1]);
       }
     };
+    // An open subpath that ends where it began, heading the way it began —
+    // a full circle from arc(), which leaves its subpath open. Stroked
+    // open, each end got a cap square to its own chord, and a flattened
+    // curve's first and last chords point a chord's angle apart: a wedge
+    // of ink went missing outside the seam, a hairline across every
+    // stroked ring, and doubled inside it. Where the two ends meet head to
+    // tail the caps and a join are the same ink, so it is stroked as the
+    // loop it is. A path that comes back to its start at a corner keeps
+    // its caps, as the spec gives them.
+    const smoothLoop = (poly, pts) => {
+      const n = pts.length;
+      if (n < 4) return false;
+      const [fx, fy] = pts[0];
+      const [lx, ly] = pts[n - 1];
+      if (Math.abs(fx - lx) > 1e-6 || Math.abs(fy - ly) > 1e-6) return false;
+      const [hx, hy] = (poly.head && subpathHead(poly)) ?? [
+        pts[1][0] - fx,
+        pts[1][1] - fy,
+      ];
+      const [tx, ty] = (poly.tail && subpathTail(poly)) ?? [
+        lx - pts[n - 2][0],
+        ly - pts[n - 2][1],
+      ];
+      const lengths = Math.hypot(hx, hy) * Math.hypot(tx, ty);
+      return lengths > 0 && (hx * tx + hy * ty) / lengths > 1 - 1e-9;
+    };
     // dash boundaries can duplicate run endpoints; collapse them
     const cleanRun = (run) => {
       const out = [run[0]];
@@ -2433,12 +2475,13 @@ class RenderingContext2d {
           pts.push([fx, fy]);
       }
       if (pts.length < 2) continue;
+      const closed = poly.closed || smoothLoop(poly, pts);
 
       if (!dash) {
-        extrudeRun(pts, poly.closed);
+        extrudeRun(pts, closed);
         continue;
       }
-      const dashed = dashPolyline(pts, poly.closed, dash, dashOffset, view);
+      const dashed = dashPolyline(pts, closed, dash, dashOffset, view);
       if (!dashed) {
         extrudeRun(pts, poly.closed);
       } else if (dashed.closedLoop) {
@@ -3056,6 +3099,25 @@ class RenderingContext2d {
    * for the whole list and then draws the rectangles through here */
   _fillRect(x, y, w, h) {
     if (matIsIdentity(this._m)) {
+      // On whole pixels, each edge rounded on its own (see rectsOnSurface):
+      // the wire truncates x and width separately, so rectangles that met
+      // at a fractional edge left a row of neither between them. Whole, a
+      // rectangle under a rectangular clip also keeps the bounded
+      // composite below instead of building a mask.
+      if (
+        !Number.isInteger(x) ||
+        !Number.isInteger(y) ||
+        !Number.isInteger(w) ||
+        !Number.isInteger(h)
+      ) {
+        const x0 = Math.round(x);
+        const y0 = Math.round(y);
+        w = Math.round(x + w) - x0;
+        h = Math.round(y + h) - y0;
+        x = x0;
+        y = y0;
+        if (!(w > 0 && h > 0)) return;
+      }
       // X coordinates and sizes are 16 bits, and a coordinate past 32,767
       // throws out of the paint (lib/cliprect.js): a rectangle that reaches
       // past the surface is filled as the part of it the surface has.
@@ -3224,13 +3286,14 @@ class RenderingContext2d {
     let x1 = -Infinity;
     let y1 = -Infinity;
     for (let i = 0; i < flat.length; i += 4) {
-      // the part of it on the surface: the wire's coordinates are 16 bits
-      const left = Math.trunc(flat[i]);
-      const top = Math.trunc(flat[i + 1]);
+      // on whole pixels, each edge rounded as `_fillRect` rounds it, and the
+      // part of it on the surface: the wire's coordinates are 16 bits
+      const left = Math.round(flat[i]);
+      const top = Math.round(flat[i + 1]);
       const x = Math.max(0, left);
       const y = Math.max(0, top);
-      const w = Math.min(this.width, left + Math.trunc(flat[i + 2])) - x;
-      const h = Math.min(this.height, top + Math.trunc(flat[i + 3])) - y;
+      const w = Math.min(this.width, Math.round(flat[i] + flat[i + 2])) - x;
+      const h = Math.min(this.height, Math.round(flat[i + 1] + flat[i + 3])) - y;
       if (w <= 0 || h <= 0) continue;
       rects.push(x, y, w, h);
       if (x < x0) x0 = x;

package/lib/text/font.js

@@ -3,6 +3,7 @@ import * as fontkit from 'fontkit';
 import { flatten, rasterizePath } from '../rasterize.js';
 import { NO_ANCHOR, tolerateAnchors, watchAnchors } from './anchors.js';
 import { marksCover, standInMarks } from './marks.js';
+import { pairGlyphs, pairsCover } from './pairs.js';
 
 // Axis coordinates are rounded to this many decimals before anything is
 // instantiated or cached. Every distinct coordinate is a font in its own
@@ -111,6 +112,28 @@ function answerWithCharacters(fk) {
   Object.defineProperty(fk, '__ntkCharacters', { value: true });
 }
 
+/**
+ * A face's cap height or x-height, as its OS/2 table states it, or else the
+ * top of its `H` or `x`. A table older than version 2 has neither field, and
+ * a face with no OS/2 table at all — Apple's Courier.ttc — has no table to
+ * state them: fontkit answered 0 for one and nothing for the other, and an
+ * `ex` in either came out half an em (CSS Values 4, 6.1.1 lets the height
+ * of a lowercase glyph stand in, as browsers measure it). NaN where the face
+ * has no such glyph either, which is the "half an em" case the spec keeps.
+ */
+function statedOrGlyph(fk, field, codePoint) {
+  const os2 = fk['OS/2'];
+  const stated = os2 && os2.version >= 2 ? os2[field] : undefined;
+  if (stated > 0) return stated;
+  try {
+    if (!fk.hasGlyphForCodePoint(codePoint)) return NaN;
+    const top = fk.glyphForCodePoint(codePoint).bbox.maxY;
+    return top > 0 ? top : NaN;
+  } catch {
+    return NaN;
+  }
+}
+
 export default class Font {
   constructor(fkFont, path, postscriptName) {
     answerWithCharacters(fkFont);
@@ -132,6 +155,8 @@ export default class Font {
     // whether the face's mark attachment is watched for a NULL anchor
     // (./anchors.js): set at its first shaping, false once one has been met
     this._anchors = false;
+    // the glyphs its pairs can move (./pairs.js), read when first asked
+    this._pairs = undefined;
   }
 
   static loadSync(path, postscriptName) {
@@ -286,8 +311,8 @@ export default class Font {
       ascent: this.fk.ascent,
       descent: -this.fk.descent,
       lineGap: this.fk.lineGap,
-      capHeight: this.fk.capHeight,
-      xHeight: this.fk.xHeight
+      capHeight: statedOrGlyph(this.fk, 'capHeight', 0x48),
+      xHeight: statedOrGlyph(this.fk, 'xHeight', 0x78)
     });
     const s = this.scale(size);
     const ascent = v.ascent * s;
@@ -334,6 +359,17 @@ export default class Font {
     return this._drawable;
   }
 
+  /**
+   * Whether two glyphs side by side can be set otherwise than apart: the
+   * left one moved against what follows it, or the right one against what
+   * comes before it (./pairs.js). True where the tables cannot tell.
+   */
+  mayKern(left, right) {
+    if (this._pairs === undefined) this._pairs = pairGlyphs(this.fk);
+    const pairs = this._pairs;
+    return pairs === null || pairsCover(pairs.left, left) || pairsCover(pairs.right, right);
+  }
+
   hasGlyph(codepoint) {
     return this.drawable && this.fk.hasGlyphForCodePoint(codepoint);
   }

package/lib/text/fontmanager.js

@@ -235,6 +235,8 @@ export default class FontManager {
     this._shapeCount = 0;
     // whether two letters shape otherwise together than apart (`_meets`)
     this._meetings = new Map();
+    // how much two letters kern across a break opportunity (`_kernAcross`)
+    this._kerns = new Map();
     // a paragraph's layout up to the line fill, for its next width
     // (text/paragraphs.js, TextLayout)
     this._paragraphs = new ParagraphCache();
@@ -580,6 +582,28 @@ export default class FontManager {
     return meets;
   }
 
+  /**
+   * How much wider the two letters of `pair`, cut at `cut`, are set
+   * together than apart in this style: their kerning, negative for a pair
+   * set closer. 0 where they do not kern, and where shaping them together
+   * changes a glyph — a ligature, a contextual form — which no offset
+   * between the two stands for. Kept, as `_meets` keeps its answers.
+   */
+  _kernAcross(pair, cut, style, levelsKey = '0') {
+    const key = `${shapeGroupOf(style, levelsKey)}|${cut}|${pair}`;
+    let kern = this._kerns.get(key);
+    if (kern !== undefined) return kern;
+    const whole = this._shapeCached(pair, style, levelsKey);
+    const left = this._shapeCached(pair.slice(0, cut), style, sliceKey(levelsKey, 0, cut));
+    const right = this._shapeCached(pair.slice(cut), style, sliceKey(levelsKey, cut, pair.length));
+    const ids = (...shaped) => shaped.flatMap((s) => s.runs.flatMap((r) => r.glyphs.map((g) => g.id))).join(',');
+    kern = whole.width - left.width - right.width;
+    if (Math.abs(kern) <= 1e-6 || ids(whole) !== ids(left, right)) kern = 0;
+    if (this._kerns.size >= SHAPE_GENERATION) this._kerns.clear();
+    this._kerns.set(key, kern);
+    return kern;
+  }
+
   _shapeCached(text, style, levelsKey = '0') {
     // A hit in this generation is the whole cost of a word a paragraph has
     // shaped before — a relayout at a new width asks for every word again,

package/lib/text/layout.js

@@ -21,10 +21,16 @@ const UNSPACED =
 /** How wide a line's tokens are, the white space it ends on left out. */
 function tokensWidth(toks) {
   let width = 0;
-  for (const token of toks) width += token.width;
+  for (let i = 0; i < toks.length; i++) width += toks[i].width + (i ? kernBefore(toks[i]) : 0);
   return toks.length ? width - toks[toks.length - 1].wsWidth : 0;
 }
 
+/** The kerning between a token and the one before it on its line
+ *  (`TextLayout._kernBefore`); none for a token a line starts with. */
+function kernBefore(token) {
+  return token.kernBefore ?? 0;
+}
+
 function isWsGlyph(g) {
   return g.codePoints.length > 0 && g.codePoints.every((cp) => WS.has(cp));
 }
@@ -121,7 +127,7 @@ export class TextLayout {
         curWidth = 0;
       };
       for (let token of tokens) {
-        while (wraps && curWidth + token.width - token.wsWidth > maxWidth) {
+        while (wraps && curWidth + (cur.length ? kernBefore(token) : 0) + token.width - token.wsWidth > maxWidth) {
           if (cur.length > 0) {
             flush();
           } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
@@ -135,8 +141,8 @@ export class TextLayout {
             token = rest;
           }
         }
+        curWidth += token.width + (cur.length ? kernBefore(token) : 0);
         cur.push(token);
-        curWidth += token.width;
         if (token.required) flush();
       }
       if (cur.length) lineTokens.push(cur);
@@ -185,16 +191,24 @@ export class TextLayout {
       // .start/.end are absolute code-unit ranges into the full text, kept
       // for caret positioning (caretPosition / indexAt)
       let entries = [];
-      for (const token of toks) {
+      for (let t = 0; t < toks.length; t++) {
+        const token = toks[t];
+        // the kerning with the token before it goes before its first run
+        let kern = t ? kernBefore(token) : 0;
         for (const frag of token.fragments) {
           for (const run of frag.shaped.runs) {
-            entries.push({
+            const entry = {
               run,
               span: frag.span,
               level: run.level,
               start: frag.start + run.start,
               end: frag.start + run.end
-            });
+            };
+            if (kern) {
+              entry.kern = kern;
+              kern = 0;
+            }
+            entries.push(entry);
           }
         }
       }
@@ -234,6 +248,7 @@ export class TextLayout {
       const runs = [];
       let x = 0;
       for (const e of entries) {
+        if (e.kern) x += e.kern;
         const positioned = { x, width: e.run.width, run: e.run, span: e.span, start: e.start, end: e.end };
         if (e.ellipsis) positioned.ellipsis = true;
         runs.push(positioned);
@@ -396,10 +411,48 @@ export class TextLayout {
         tokens.push(this._makeToken(text, prev, text.length, levels, spanAt, false));
       }
     }
+    for (let i = 1; i < tokens.length; i++) {
+      const kern = this._kernBefore(text, tokens[i - 1], tokens[i], levels);
+      if (kern) tokens[i].kernBefore = kern;
+    }
 
     return { spans, text, baseLevel, tokens };
   }
 
+  /**
+   * The kerning between the last letter of one token and the first of the
+   * next, where the two are on one line. Each token is shaped apart, so a
+   * pair either side of a break opportunity was never kerned — Trebuchet MS
+   * sets a space closer to an A, a T or a Y — and a line of it came out
+   * wider than a browser's, which shapes a line whole: shaping breaks only
+   * at an inline box's margin, border or padding (CSS Text 3, 7.3). Only
+   * between letters shaped alike at one left-to-right level; a line that
+   * breaks there never meets it.
+   */
+  _kernBefore(text, prev, next, levels) {
+    if (prev.required) return 0;
+    const a = prev.fragments[prev.fragments.length - 1];
+    const b = next.fragments[0];
+    if (!a || !b || a.shaping !== b.shaping || a.span.shapeApart || b.span.shapeApart) return 0;
+    const at = a.start + a.text.length;
+    if (at !== b.start) return 0;
+    // two glyphs the face's tables cannot move against each other are set
+    // together as apart, and asked about no further: most faces kern no
+    // space, and a paragraph meets one at every word
+    const l = a.shaped.runs[a.shaped.runs.length - 1];
+    const r = b.shaped.runs[0];
+    if (!l || !r || l.font !== r.font) return 0;
+    const lg = l.glyphs[l.glyphs.length - 1];
+    const rg = r.glyphs[0];
+    if (!lg || !rg || (l.font.mayKern && !l.font.mayKern(lg.id, rg.id))) return 0;
+    const low = text.charCodeAt(at - 1);
+    const before = low >= 0xdc00 && low < 0xe000 && at >= 2 ? 2 : 1;
+    const after = text.codePointAt(at) > 0xffff ? 2 : 1;
+    const key = normalizedLevels(levels, at - before, at + after);
+    if (key.includes(',') || Number(key) & 1) return 0;
+    return this.fonts._kernAcross(text.slice(at - before, at + after), before, a.shaping, key);
+  }
+
   /**
    * Whether the letters that meet at an edge between two spans of a group
    * shape otherwise together than apart: their glyphs or their advances
@@ -537,9 +590,10 @@ export class TextLayout {
     for (const token of toks) {
       // trailing whitespace does not count against the budget, exactly as it
       // does not count during the greedy fill
-      if (used + token.width - token.wsWidth <= budget) {
+      const kern = kept.length ? kernBefore(token) : 0;
+      if (used + kern + token.width - token.wsWidth <= budget) {
         kept.push(token);
-        used += token.width;
+        used += kern + token.width;
         continue;
       }
       const [head] = this._forceBreak(token, budget - used);

package/lib/text/marks.js

@@ -102,7 +102,7 @@ export function marksCover(bits, id) {
  * base)` reads the 16-bit offset stored at `pos` and answers where it
  * points, `base` being what the format measures it from.
  */
-function table(fk, tag) {
+export function table(fk, tag) {
   const entry = fk.directory?.tables?.[tag];
   if (!entry) return null;
   const stream = fk._getTableStream(tag);
@@ -163,7 +163,7 @@ function coverLookup(t, lookupList, index, bits) {
  * Where the coverage a subtable is entered from starts, or -1 for a
  * subtable this does not know.
  */
-function firstCoverage(t, type, sub) {
+export function firstCoverage(t, type, sub) {
   const format = t.u16(sub);
   switch (type) {
     case 1: // single adjustment
@@ -191,7 +191,7 @@ function firstCoverage(t, type, sub) {
   }
 }
 
-function addCoverage(t, coverage, bits) {
+export function addCoverage(t, coverage, bits) {
   const format = t.u16(coverage);
   const count = t.u16(coverage + 2);
   if (format === 1) {

package/lib/text/pairs.js

@@ -0,0 +1,88 @@
+// The glyphs a face can set closer or further from the glyph beside them,
+// read from its tables' bytes the way ./marks.js reads its marks: a pair of
+// letters that neither can be is set together as it is set apart, and the
+// layout need not shape the two to find that out (`TextLayout._kernBefore`).
+//
+// A pair's left glyph can be moved by a pair adjustment it enters, by a
+// cursive attachment, by a context it is the first input of, or by the
+// pairs of a legacy `kern` table; its right glyph only by a context it is
+// the first input of, with the left glyph behind it. Every GPOS lookup is
+// read, whatever feature names it — a superset of what fontkit applies,
+// which only widens what counts.
+//
+// Null — ask the shaper — for a face shaped through AAT's morx, a `kern`
+// table in a format this does not read, or tables it cannot read to the end.
+
+import { addCoverage, firstCoverage, table } from './marks.js';
+
+/**
+ * @param {object} fk a fontkit font
+ * @returns {{ left: Uint8Array, right: Uint8Array }|null} a bit per glyph id,
+ *   set for every glyph that can be moved against the glyph after it
+ *   (`left`) or before it (`right`); null where this cannot tell
+ */
+export function pairGlyphs(fk) {
+  try {
+    if (fk.directory?.tables?.morx) return null;
+    const left = new Uint8Array(8192);
+    const right = new Uint8Array(8192);
+    const gpos = table(fk, 'GPOS');
+    if (gpos) {
+      const lookupList = gpos.offset(8, 0);
+      for (let index = 0, n = gpos.u16(lookupList); index < n; index++) {
+        if (!coverPairs(gpos, lookupList, index, left, right)) return null;
+      }
+    }
+    const kern = table(fk, 'kern');
+    if (kern && !kernLefts(kern, left)) return null;
+    return { left, right };
+  } catch {
+    return null;
+  }
+}
+
+/** Whether `bits` (from `pairGlyphs`) has glyph `id`. */
+export function pairsCover(bits, id) {
+  return (bits[id >> 3] & (1 << (id & 7))) !== 0;
+}
+
+/** Adds what a lookup can move against a neighbour; false for one it cannot read. */
+function coverPairs(t, lookupList, index, left, right) {
+  const lookup = t.offset(lookupList + 2 + index * 2, lookupList);
+  const type = t.u16(lookup);
+  for (let i = 0, n = t.u16(lookup + 4); i < n; i++) {
+    let sub = t.offset(lookup + 6 + i * 2, lookup);
+    let subType = type;
+    if (subType === 9) {
+      if (t.u16(sub) !== 1) return false;
+      subType = t.u16(sub + 2);
+      sub += t.u32(sub + 4);
+    }
+    // a single adjustment moves a glyph whatever is beside it, and a mark
+    // attaches with no advance of its own
+    if (subType !== 2 && subType !== 3 && subType !== 7 && subType !== 8) continue;
+    const coverage = firstCoverage(t, subType, sub);
+    if (coverage < 0) return false;
+    addCoverage(t, coverage, left);
+    if (subType === 7 || subType === 8) addCoverage(t, coverage, right);
+  }
+  return true;
+}
+
+/** Adds the left glyphs of a Microsoft `kern` table's pairs; false for a
+ *  table or subtable format this does not read. */
+function kernLefts(t, left) {
+  if (t.u16(0) !== 0) return false;
+  let at = 4;
+  for (let i = 0, n = t.u16(2); i < n; i++) {
+    const length = t.u16(at + 2);
+    const format = t.u16(at + 4) >> 8;
+    if (format !== 0) return false;
+    for (let j = 0, pairs = t.u16(at + 6); j < pairs; j++) {
+      const id = t.u16(at + 14 + j * 6);
+      left[id >> 3] |= 1 << (id & 7);
+    }
+    at += length;
+  }
+  return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.14.4",
+  "version": "8.14.6",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",