ntk 8.14.6 → 8.15.0

package/lib/renderingcontext_2d.js

@@ -1899,11 +1899,12 @@ class RenderingContext2d {
    * well as the AddTraps: two requests become one, and the one that is left
    * touches only the bounding box.
    */
-  _uploadCoverage(job, b, out, edges) {
+  _uploadCoverage(job, b, out, edges, route) {
     const rasterizer = this.window.app.rasterizer;
     if (!rasterizer) return false;
-    if (routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy) !== "local")
-      return false;
+    const where =
+      route ?? routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy);
+    if (where !== "local") return false;
 
     // Rasterized over the whole box, as always, so a drawing that clips
     // split across passes — a pan's strips, a full repaint — gets the same
@@ -1978,6 +1979,84 @@ class RenderingContext2d {
     return out;
   }
 
+  /**
+   * A drawing's own extent: its box with the same pixel of slack as
+   * `_clampBBox`, and *not* clamped to the surface — what its masks are
+   * clustered and routed by (`_fillPolys`, the stroke's mask path).
+   *
+   * Which rasterizer draws a mask — ours or the server's — has to be a
+   * property of the drawing, never of where it lands. The two antialias
+   * differently, so a route taken from the part the surface shows changed
+   * as the drawing moved: a stroke whose cap had just left the surface had
+   * three triangles fewer to count, went to the other rasterizer, and came
+   * out up to ten levels different along its whole length — a pan's copy
+   * of it one way, the strip beside it the other. Clamping and culling
+   * decide how much work a mask is, never how it is drawn.
+   */
+  _rawBox(minX, minY, maxX, maxY) {
+    const x = Math.floor(minX) - 1;
+    const y = Math.floor(minY) - 1;
+    return { x, y, w: Math.ceil(maxX) + 1 - x, h: Math.ceil(maxY) + 1 - y };
+  }
+
+  /** `_rawBox` of one flat `[x0, y0, …]` point list; null for none. */
+  _pointsExtent(pts) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < pts.length; i += 2) {
+      if (pts[i] < minX) minX = pts[i];
+      if (pts[i] > maxX) maxX = pts[i];
+      if (pts[i + 1] < minY) minY = pts[i + 1];
+      if (pts[i + 1] > maxY) maxY = pts[i + 1];
+    }
+    if (!(maxX >= minX && maxY >= minY)) return null;
+    return this._rawBox(minX, minY, maxX, maxY);
+  }
+
+  /** `_rawBox` over every subpath of a flattened path; null for none. */
+  _polysExtent(polys) {
+    let out = null;
+    for (const poly of polys) {
+      const b = this._pointsExtent(poly.pts);
+      if (!b) continue;
+      out = out ? unionBox(out, b) : b;
+    }
+    return out;
+  }
+
+  /**
+   * Where a drawing whose own box is `box` is rasterized (`routeRaster`),
+   * sized by as much of it as the surface could ever show — each side no
+   * longer than the surface's, and its edges in the same proportion —
+   * rather than by the part it shows now: a route that depends only on the
+   * drawing's size and complexity is the same wherever the drawing lands
+   * (`_rawBox`). Counting every edge of a stroke that runs far past the
+   * surface sent it through the mask more often than the part it shows
+   * earned: a fifth more bytes a frame for a hundred such strokes.
+   */
+  _routeFor(box, edges) {
+    const w = Math.min(box.w, this.width);
+    const h = Math.min(box.h, this.height);
+    return routeRaster(
+      w,
+      h,
+      (edges * w * h) / (box.w * box.h),
+      this.window.app.rasterPolicy,
+    );
+  }
+
+  /** the part of a box on the surface; null where there is none */
+  _onSurface(b) {
+    const x = Math.max(0, b.x);
+    const y = Math.max(0, b.y);
+    const w = Math.min(this.width, b.x + b.w) - x;
+    const h = Math.min(this.height, b.y + b.h) - y;
+    if (w <= 0 || h <= 0) return null;
+    return { x, y, w, h };
+  }
+
   // a pixel of slack for the antialiased edge, clamped to the surface
   _clampBBox(minX, minY, maxX, maxY) {
     const x = Math.max(0, Math.floor(minX) - 1);
@@ -2030,7 +2109,7 @@ class RenderingContext2d {
    *
    * @returns {boolean} whether anything was composited
    */
-  _paintThroughMask(b, job, { edges, src, op, alpha, server }) {
+  _paintThroughMask(b, job, { edges, route, src, op, alpha, server }) {
     const R = this.Render;
     // Everything is bounded to the part of the box the clip lets through:
     // the clip's rectangle, or the extents of a stack with a path in it —
@@ -2049,7 +2128,9 @@ class RenderingContext2d {
       if (!out) return false;
     }
     if (this._hasPolyClip) this._requireClipMask();
-    if (!this._uploadCoverage({ ...job, dx: -b.x, dy: -b.y }, b, out, edges)) {
+    if (
+      !this._uploadCoverage({ ...job, dx: -b.x, dy: -b.y }, b, out, edges, route)
+    ) {
       R.FillRectangles(
         R.PictOp.Src,
         this.fillMask.id,
@@ -2118,12 +2199,13 @@ class RenderingContext2d {
     if (!prepareStyle(src, this._m)) return;
 
     // one box per subpath, so a path holding disjoint ones can be masked as
-    // the pieces it is rather than as the box around all of them
+    // the pieces it is rather than as the box around all of them — each the
+    // subpath's own box, on the surface or not (`_rawBox`)
     const shapes = [];
     const pieces = [];
     for (const p of polys) {
       if (p.pts.length < 6) continue;
-      const b = this._pointsBBox(p.pts);
+      const b = this._pointsExtent(p.pts);
       if (!b) continue;
       shapes.push(p.pts);
       pieces.push(b);
@@ -2133,18 +2215,30 @@ class RenderingContext2d {
     this._ensureFillMask();
     let painted = false;
     for (const cluster of this._maskClusters(pieces, op)) {
+      // Routed by every subpath of the cluster, and rasterized from the
+      // ones the surface shows, over the part of them it shows: a subpath
+      // wholly off it adds nothing to the winding of a pixel outside its
+      // own box.
       const flat = [];
+      let box = null;
       let edges = 0;
+      let drawn = 0;
       for (const i of cluster.items) {
-        flat.push(shapes[i]);
         edges += shapes[i].length / 2;
+        const shown = this._onSurface(pieces[i]);
+        if (!shown) continue;
+        flat.push(shapes[i]);
+        drawn += shapes[i].length / 2;
+        box = box ? unionBox(box, shown) : shown;
       }
+      if (!box) continue;
       painted =
         this._paintThroughMask(
-          cluster,
+          box,
           { polys: flat, rule },
           {
-            edges,
+            edges: drawn,
+            route: this._routeFor(cluster, edges),
             src,
             op,
             alpha,
@@ -2497,28 +2591,12 @@ class RenderingContext2d {
     // cuts above are meant to keep the extruder off that path; this keeps
     // a future miss from being catastrophic. A sum is finite iff every
     // term is.
-    //
-    // A triangle wholly off the surface is left out as well: it adds
-    // nothing on either route — the rasterizer would walk its rows only for
-    // its edges to cancel on the border column, and the server would be
-    // sent it only to clip it away — and a zoomed graph has hundreds of
-    // edges past the window every frame.
-    const right = this.width + 1;
-    const bottom = this.height + 1;
     let w = 0;
     for (let i = 0; i < tris.length; i += 6) {
-      const ax = tris[i];
-      const ay = tris[i + 1];
-      const bx = tris[i + 2];
-      const by = tris[i + 3];
-      const cx = tris[i + 4];
-      const cy = tris[i + 5];
-      if (!Number.isFinite(ax + ay + bx + by + cx + cy)) continue;
       if (
-        (ax < -1 && bx < -1 && cx < -1) ||
-        (ay < -1 && by < -1 && cy < -1) ||
-        (ax > right && bx > right && cx > right) ||
-        (ay > bottom && by > bottom && cy > bottom)
+        !Number.isFinite(
+          tris[i] + tris[i + 1] + tris[i + 2] + tris[i + 3] + tris[i + 4] + tris[i + 5],
+        )
       ) {
         continue;
       }
@@ -2527,19 +2605,6 @@ class RenderingContext2d {
     }
     if (w < tris.length) tris.length = w;
     if (!tris.length) return;
-    // Triangles are 16.16 fixed point, and the source origin a direct stroke
-    // hands the server is 16 bits: a stroke that reaches that far is cut to
-    // the surface first (lib/cliprect.js), a pixel to spare on every side, so
-    // what the surface shows is drawn exactly as before. One that does not
-    // goes as it came, for the server to clip.
-    const edgeX = this.width + 1;
-    const edgeY = this.height + 1;
-    if (!withinRect(tris, -WIRE_REACH, -WIRE_REACH, WIRE_REACH, WIRE_REACH)) {
-      const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
-      tris.length = 0;
-      for (let i = 0; i < cut.length; i++) tris.push(cut[i]);
-      if (!tris.length) return;
-    }
 
     const op = this._op();
     // round-cap/join disks overlap the stroke body; overlapping coverage
@@ -2555,6 +2620,14 @@ class RenderingContext2d {
       op === this.Render.PictOp.Over;
     const chunk = 4000 * 6;
     if (direct) {
+      this._cullTris(tris);
+      if (!tris.length) return;
+      const cut = this._wireCut(tris);
+      if (cut !== tris) {
+        tris.length = 0;
+        for (let i = 0; i < cut.length; i++) tris.push(cut[i]);
+        if (!tris.length) return;
+      }
       for (let i = 0; i < tris.length; i += chunk) {
         const batch = tris.slice(i, i + chunk);
         // RENDER aligns the source with the *first triangle's first vertex*,
@@ -2588,24 +2661,31 @@ class RenderingContext2d {
     // and took 1.9 s on XQuartz where the bounded version takes 37 ms
     // (react-x11#148). Stale mask content outside the boxes is never
     // composited, so clearing only them is safe.
+    //
+    // The islands are the whole stroke's, on the surface or not, and so are
+    // the clusters and the route each is drawn by (`_rawBox`); only the
+    // triangles the surface shows are rasterized.
     this._ensureFillMask();
     const pieces = this._trisPieces(tris);
     if (!pieces.length) return;
-    // the soup itself when it is one piece holding every triangle — the
-    // common case (one polyline is one piece), and worth not copying
-    const whole =
-      pieces.length === 1 &&
-      pieces[0].start === 0 &&
-      pieces[0].end === tris.length;
     let painted = false;
     for (const cluster of this._maskClusters(pieces, op)) {
-      const batch = whole ? tris : this._trisOf(tris, pieces, cluster.items);
+      let edges = 0;
+      for (const i of cluster.items) {
+        edges += (pieces[i].end - pieces[i].start) / 2;
+      }
+      const batch = this._trisBatch(tris, pieces, cluster);
+      if (!batch.length) continue;
+      // the mask over what is drawn, as tight as it always was
+      const box = this._pointsBBox(batch);
+      if (!box) continue;
       painted =
         this._paintThroughMask(
-          cluster,
+          box,
           { triangles: batch },
           {
             edges: batch.length / 2,
+            route: this._routeFor(cluster, edges),
             src,
             op,
             alpha: this.globalAlpha,
@@ -2642,17 +2722,17 @@ class RenderingContext2d {
    * linear pre-pass whose only job is to hand the clustering a handful of
    * boxes instead of thousands of triangles.
    *
-   * A piece that misses the surface entirely is dropped, leaving a hole in
-   * the spans — which is why the caller gathers a batch from the spans it
-   * has rather than assuming they tile `tris`.
+   * Each piece is its own box (`_rawBox`), on the surface or not: the
+   * clusters and the routes are the stroke's, and the surface only bounds
+   * the work (`_trisBatch`).
    */
   _trisPieces(tris) {
     const pieces = [];
     let open = null;
     const close = () => {
       if (!open) return;
-      const b = this._clampBBox(open.minX, open.minY, open.maxX, open.maxY);
-      if (b) pieces.push({ ...b, start: open.start, end: open.end });
+      const b = this._rawBox(open.minX, open.minY, open.maxX, open.maxY);
+      pieces.push({ ...b, start: open.start, end: open.end });
       open = null;
     };
     for (let i = 0; i < tris.length; i += 6) {
@@ -2681,17 +2761,81 @@ class RenderingContext2d {
     return pieces;
   }
 
-  /** the triangles of the given pieces, gathered into one soup */
-  _trisOf(tris, pieces, items) {
-    let n = 0;
-    for (const i of items) n += pieces[i].end - pieces[i].start;
-    const out = new Array(n);
-    let w = 0;
+  /**
+   * One cluster's triangles, gathered from its pieces: less those wholly
+   * off the surface, which add nothing on either route — the rasterizer
+   * would walk their rows only for their edges to cancel on the border
+   * column, and the server would be sent them only to clip them away — and
+   * cut to the wire's reach (`_wireCut`). The soup itself when the cluster
+   * is all of it and all of it is on the surface: the common case, one
+   * polyline in view, and worth not copying.
+   */
+  _trisBatch(tris, pieces, cluster) {
+    const { items } = cluster;
+    const inside =
+      cluster.x >= -1 &&
+      cluster.y >= -1 &&
+      cluster.x + cluster.w <= this.width + 1 &&
+      cluster.y + cluster.h <= this.height + 1;
+    if (
+      inside &&
+      items.length === 1 &&
+      pieces[items[0]].start === 0 &&
+      pieces[items[0]].end === tris.length
+    ) {
+      return this._wireCut(tris);
+    }
+    const out = [];
     for (const i of items) {
-      const piece = pieces[i];
-      for (let k = piece.start; k < piece.end; ++k) out[w++] = tris[k];
+      for (let k = pieces[i].start; k < pieces[i].end; ++k) out.push(tris[k]);
     }
-    return out;
+    if (!inside) this._cullTris(out);
+    return this._wireCut(out);
+  }
+
+  /**
+   * Leave out, in place, every triangle wholly off the surface: nothing of
+   * it can land on it, and a zoomed graph has hundreds of edges past the
+   * window every frame.
+   */
+  _cullTris(tris) {
+    const right = this.width + 1;
+    const bottom = this.height + 1;
+    let w = 0;
+    for (let i = 0; i < tris.length; i += 6) {
+      const ax = tris[i];
+      const ay = tris[i + 1];
+      const bx = tris[i + 2];
+      const by = tris[i + 3];
+      const cx = tris[i + 4];
+      const cy = tris[i + 5];
+      if (
+        (ax < -1 && bx < -1 && cx < -1) ||
+        (ay < -1 && by < -1 && cy < -1) ||
+        (ax > right && bx > right && cx > right) ||
+        (ay > bottom && by > bottom && cy > bottom)
+      ) {
+        continue;
+      }
+      if (w < i) for (let k = 0; k < 6; k++) tris[w + k] = tris[i + k];
+      w += 6;
+    }
+    if (w < tris.length) tris.length = w;
+    return tris;
+  }
+
+  /**
+   * Triangles are 16.16 fixed point, and the source origin a direct stroke
+   * hands the server is 16 bits: a stroke that reaches that far is cut to
+   * the surface first (lib/cliprect.js), a pixel to spare on every side, so
+   * what the surface shows is drawn exactly as before. One that does not
+   * goes as it came, for the server to clip — the same array.
+   */
+  _wireCut(tris) {
+    if (withinRect(tris, -WIRE_REACH, -WIRE_REACH, WIRE_REACH, WIRE_REACH)) {
+      return tris;
+    }
+    return clipTrianglesToRect(tris, -1, -1, this.width + 1, this.height + 1);
   }
 
   /**
@@ -4129,11 +4273,10 @@ class RenderingContext2d {
     if (!rasterizer) return false;
     const { shapes, edges } = fillableShapes(entry.polys);
     if (!shapes.length) return false;
-    if (
-      routeRaster(bb.w, bb.h, edges, this.window.app.rasterPolicy) !== "local"
-    ) {
+    // routed by the clip's own extent, as a fill is (`_rawBox`), and
+    // rasterized over the part of it on the surface
+    if (this._routeFor(this._polysExtent(entry.polys) ?? bb, edges) !== "local")
       return false;
-    }
 
     const coverage = rasterizer.rasterize({
       polys: shapes,

package/lib/text/layout.js

@@ -18,6 +18,17 @@ const TRAILING_WS = /[ \t]+$/;
 const UNSPACED =
   /[\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}\p{Script=Tai_Le}\p{Script=New_Tai_Lue}\p{Script=Tai_Tham}\p{Script=Tai_Viet}\p{Script=Ahom}\p{Script=Javanese}\p{Script=Balinese}\p{Script=Buginese}]/u;
 
+/**
+ * How far a line's content may reach past its width and still fit it: a
+ * 64th of a pixel. The advances of a line are summed in floating point and
+ * come out a hair over a width they were set to fill — a line of Verdana at
+ * 12.8px measures 410.0125px in the 410px column it was written for — and
+ * a browser takes the line as fitting, comparing in 64ths of a pixel with
+ * that much to spare (Blink's line breaker adds a LayoutUnit's epsilon to
+ * the width it fits to).
+ */
+const FIT_SLACK = 1 / 64;
+
 /** How wide a line's tokens are, the white space it ends on left out. */
 function tokensWidth(toks) {
   let width = 0;
@@ -46,7 +57,7 @@ function isWsGlyph(g) {
  *
  * Content is a plain string or an array of spans
  * `{ text, family?, size?, weight?, style?, features?, language?,
- * letterSpacing?, color?, nowrap?, shapeApart? }`;
+ * letterSpacing?, color?, nowrap?, shapeApart?, kernAcross? }`;
  * span fields override the base style. Spans that share a truthy `nowrap` —
  * `true`, or any value a caller tells its groups apart by — have no break
  * opportunity inside them or between them, as the text of an element with
@@ -55,7 +66,12 @@ function isWsGlyph(g) {
  * apart — are shaped as one text, so a word across them keeps its kerning
  * and its joining; a span with a truthy `shapeApart` is shaped on its own,
  * as CSS breaks the shaping at an inline box with a margin, border or
- * padding. Options:
+ * padding. A span of another letter spacing is shaped on its own too, as a
+ * browser shapes an element's `letter-spacing`, but one with a truthy
+ * `kernAcross` keeps the kerning its letters make with its neighbours':
+ * the spacing a justified line or CSS's `word-spacing` adds to a space is
+ * in addition to kerning, and no element's (CSS Text 3, 7.2, 7.3).
+ * Options:
  *
  * - `maxWidth` — target container width (default: unlimited)
  * - `align` — 'left' | 'right' | 'center' | 'start' | 'end'
@@ -127,7 +143,10 @@ export class TextLayout {
         curWidth = 0;
       };
       for (let token of tokens) {
-        while (wraps && curWidth + (cur.length ? kernBefore(token) : 0) + token.width - token.wsWidth > maxWidth) {
+        while (
+          wraps &&
+          curWidth + (cur.length ? kernBefore(token) : 0) + token.width - token.wsWidth > maxWidth + FIT_SLACK
+        ) {
           if (cur.length > 0) {
             flush();
           } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
@@ -180,7 +199,7 @@ export class TextLayout {
       // Elision is the last kept line's business, or a line's that does not
       // wrap and runs past the width, and it happens before entries exist,
       // because dropping content means re-shaping the tail.
-      const cut = (elide && li === lineTokens.length - 1) || (cutWide && tokensWidth(toks) > maxWidth);
+      const cut = (elide && li === lineTokens.length - 1) || (cutWide && tokensWidth(toks) > maxWidth + FIT_SLACK);
       const ellipsis = cut ? this._elide(toks, baseSpan) : null;
       if (ellipsis) {
         toks = this._fitBefore(toks, maxWidth - ellipsis.width);
@@ -195,7 +214,13 @@ export class TextLayout {
         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 (let f = 0; f < token.fragments.length; f++) {
+          const frag = token.fragments[f];
+          // and a fragment's with the one before it after that one's last
+          // run, where shaping puts a pair's kerning: on its first letter,
+          // which keeps it when the second is a space the line ends on
+          const before = entries[entries.length - 1];
+          if (f && frag.kern && before) before.kernAfter = (before.kernAfter ?? 0) + frag.kern;
           for (const run of frag.shaped.runs) {
             const entry = {
               run,
@@ -219,6 +244,9 @@ export class TextLayout {
           ? entries[entries.length - 1].end
           : lineStart;
       if (ellipsis) {
+        // the letter the ellipsis follows is kerned with nothing after it
+        const last = entries[entries.length - 1];
+        if (last?.kernAfter) entries[entries.length - 1] = { ...last, kernAfter: 0 };
         // The ellipsis takes the *paragraph* level, which is what a neutral
         // at the end of a paragraph resolves to under UAX#9 — so reorderRuns
         // puts it at the right edge of an LTR line and the left edge of an
@@ -253,6 +281,7 @@ export class TextLayout {
         if (e.ellipsis) positioned.ellipsis = true;
         runs.push(positioned);
         x += e.run.width;
+        if (e.kernAfter) x += e.kernAfter;
         const m = e.run.font.metrics(e.run.size);
         if (m.ascent > ascent) ascent = m.ascent;
         if (m.descent > descent) descent = m.descent;
@@ -425,15 +454,27 @@ export class TextLayout {
    * 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.
+   * at an inline box's margin, border or padding (CSS Text 3, 7.3). 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;
+    return this._kernBetween(text, prev.fragments[prev.fragments.length - 1], next.fragments[0], levels);
+  }
+
+  /**
+   * The kerning between the last letter of fragment `a` and the first of
+   * `b`, which follows it: at one left-to-right level, between letters
+   * shaped alike, or alike but for the spacing a `kernAcross` span adds
+   * (`pairShaping`). A justified line spaces its spaces and nothing else,
+   * so each is a span apart, and the pairs a space makes (Arial's space and
+   * T, its L and space) were dropped there, where the same line unjustified
+   * kept them: it came out wider and broke a word before a browser does.
+   */
+  _kernBetween(text, a, b, levels) {
+    if (!a || !b || a.span.shapeApart || b.span.shapeApart) return 0;
+    const shaping = pairShaping(a, b);
+    if (!shaping) 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
@@ -450,7 +491,7 @@ export class TextLayout {
     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);
+    return this.fonts._kernAcross(text.slice(at - before, at + after), before, shaping, key);
   }
 
   /**
@@ -523,7 +564,17 @@ export class TextLayout {
         const shaped = pieces ? pieces[i] : this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
-        fragments.push({ text: fragText, span, shaping, shaped, start: fragStart, levels: fragLevels });
+        const frag = { text: fragText, span, shaping, shaped, start: fragStart, levels: fragLevels };
+        // a group shaped apart from the one before it for the spacing a
+        // `kernAcross` span adds still kerns against it (`_kernBetween`)
+        if (i === 0 && fragments.length) {
+          const kern = this._kernBetween(text, fragments[fragments.length - 1], frag, levels);
+          if (kern) {
+            frag.kern = kern;
+            width += kern;
+          }
+        }
+        fragments.push(frag);
         width += shaped.width;
       }
       pos = groupEnd;
@@ -591,7 +642,7 @@ export class TextLayout {
       // trailing whitespace does not count against the budget, exactly as it
       // does not count during the greedy fill
       const kern = kept.length ? kernBefore(token) : 0;
-      if (used + kern + token.width - token.wsWidth <= budget) {
+      if (used + kern + token.width - token.wsWidth <= budget + FIT_SLACK) {
         kept.push(token);
         used += kern + token.width;
         continue;
@@ -609,9 +660,12 @@ export class TextLayout {
     let used = 0;
     for (let i = 0; i < token.fragments.length; i++) {
       const frag = token.fragments[i];
-      if (used + frag.shaped.width <= maxWidth) {
+      // the kerning with the fragment before it, which a token's first has
+      // none of: it starts a line
+      const kern = i && frag.kern ? frag.kern : 0;
+      if (used + kern + frag.shaped.width <= maxWidth + FIT_SLACK) {
         headFrags.push(frag);
-        used += frag.shaped.width;
+        used += kern + frag.shaped.width;
         continue;
       }
       // shaped at the bidi level this text actually has: assuming level 0
@@ -626,7 +680,7 @@ export class TextLayout {
       // and its combining mark, or inside an emoji ZWJ sequence, leaves a
       // dotted circle or a pair of half-emoji on the two sides of the break.
       const lead = firstGrapheme(frag.text);
-      if (used + shape(lead, 0, lead.length).width <= maxWidth) {
+      if (used + kern + shape(lead, 0, lead.length).width <= maxWidth + FIT_SLACK) {
         // binary search the longest grapheme prefix of this fragment that fits
         const cps = graphemes(frag.text);
         let lo = 0;
@@ -635,7 +689,7 @@ export class TextLayout {
           const mid = (lo + hi) >> 1;
           const prefix = cps.slice(0, mid + 1).join('');
           const shaped = shape(prefix, 0, prefix.length);
-          if (used + shaped.width <= maxWidth) {
+          if (used + kern + shaped.width <= maxWidth + FIT_SLACK) {
             best = { len: prefix.length, shaped, text: prefix };
             lo = mid + 1;
           } else {
@@ -657,7 +711,8 @@ export class TextLayout {
           shaping,
           shaped: best.shaped,
           start: frag.start,
-          levels: sliceLevels(frag.levels, 0, best.len)
+          levels: sliceLevels(frag.levels, 0, best.len),
+          ...(kern ? { kern } : null)
         });
       }
 
@@ -676,7 +731,7 @@ export class TextLayout {
         });
       }
       restFrags.push(...token.fragments.slice(i + 1));
-      const sum = (frags) => frags.reduce((w, f) => w + f.shaped.width, 0);
+      const sum = (frags) => frags.reduce((w, f, j) => w + f.shaped.width + (j && f.kern ? f.kern : 0), 0);
       const splitAt = restFrags.length ? restFrags[0].start : token.end;
       const head = headFrags.length
         ? { fragments: headFrags, width: sum(headFrags), wsWidth: 0, required: false, start: token.start, end: splitAt }
@@ -1192,6 +1247,8 @@ function stripTrailingWhitespace(entries) {
     }
     entries[i] = {
       ...entries[i],
+      // its kerning with what came after it went with its last letter
+      kernAfter: 0,
       end: entries[i].end - cuStripped,
       run: {
         ...run,
@@ -1318,6 +1375,38 @@ function visibleRows(ctx, y) {
  */
 const MAX_SHAPING_STYLES = 16;
 
+/**
+ * What the letters either side of fragments `a` and `b` are shaped with as
+ * a pair: the style both were shaped with, or where the two differ in
+ * their letter spacing alone and one is a `kernAcross` span's, the spaced
+ * one — spacing is in addition to kerning, and a pair with spacing between
+ * it takes no optional ligature (CSS Text 3, 7.2). None otherwise: an
+ * element's own letter spacing is a change of formatting a browser breaks
+ * the shaping at.
+ */
+function pairShaping(fa, fb) {
+  const a = fa.shaping;
+  const b = fb.shaping;
+  if (a === b) return a;
+  if (!fa.span.kernAcross && !fb.span.kernAcross) return null;
+  if (
+    a.given !== b.given ||
+    a.font !== b.font ||
+    a.family !== b.family ||
+    a.size !== b.size ||
+    a.weight !== b.weight ||
+    a.style !== b.style ||
+    a.variations !== b.variations ||
+    a.opticalSize !== b.opticalSize ||
+    a.opticalSizing !== b.opticalSizing ||
+    a.features !== b.features ||
+    a.language !== b.language
+  ) {
+    return null;
+  }
+  return a.letterSpacing ? a : b;
+}
+
 /**
  * The style `span` is shaped with: one already made for a span whose every
  * property shaping reads is the same (`===`), or a new one. Its font is the

package/package.json

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