ntk 8.14.7 → 8.15.1

package/lib/text/layout.js

@@ -18,11 +18,95 @@ 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 wide a line's tokens are, the white space it ends on left out. */
-function tokensWidth(toks) {
-  let width = 0;
-  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;
+/**
+ * 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). What it compares is the line's items, each
+ * rounded up to a 64th first (`fittedWidth`).
+ */
+const FIT_SLACK = 1 / 64;
+
+/** A width rounded up to a 64th of a pixel, as Blink rounds an item's
+ *  shaped width up to a LayoutUnit (`ShapeResult::SnappedWidth`). The
+ *  nudge keeps a sum that lands on a 64th, give or take the last bit of a
+ *  double, where it lands. */
+function snapUp(width) {
+  return Math.ceil(width * 64 - 1e-7) / 64;
+}
+
+/**
+ * A line's width as a browser fits it: its spans' parts of it each rounded
+ * up to a 64th of a pixel and summed, its trailing white space left out.
+ *
+ * A browser measures a line in items — the text of one element between its
+ * edges, shaped — and rounds each one's width up to a LayoutUnit before it
+ * adds it (Blink's `ShapeResult::SnappedWidth`, which every text item's
+ * `inline_size` on a line is), so a line of three items is up to three 64ths
+ * wider than its advances. Compared with the width and its 64th to spare
+ * (`FIT_SLACK`), a line of Verdana 0.002px past its 529px, the `<abbr>` in
+ * it making three items, is 2 64ths past and breaks, as it does in Chrome;
+ * a line that is one item and a hair over still fits. A span is an item,
+ * and so is its part of a line; a `kernAcross` span is not one of its own
+ * — it is a space a justified line or `word-spacing` spaces out, which a
+ * browser spaces inside the item — and is measured with the span before it.
+ *
+ * Kept a token at a time: `add` puts one on the line, `with` is the line's
+ * width were the next one put on it.
+ */
+class LineFit {
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    /** the items closed on the line, each rounded up */
+    this.closed = 0;
+    /** the width of the item the line ends in, as far as it goes */
+    this.open = 0;
+    this.span = null;
+  }
+
+  add(token, kern) {
+    const frags = token.fragments;
+    for (let i = 0; i < frags.length; i++) {
+      const frag = frags[i];
+      const width = frag.shaped.width + (frag.kern ?? 0) + (i === 0 ? kern : 0);
+      if (this.span === null || this.span === frag.span || frag.span.kernAcross || this.span.kernAcross) {
+        this.open += width;
+      } else {
+        this.closed += snapUp(this.open);
+        this.open = width;
+      }
+      this.span = frag.span;
+    }
+    // a token of no text, a forced break's, adds nothing but its kerning
+    if (!frags.length) this.open += kern;
+  }
+
+  /** The line's width with `token` on it, the white space it ends on left
+   *  out. */
+  with(token, kern) {
+    const { closed, open, span } = this;
+    this.add(token, kern);
+    const width = this.closed + snapUp(this.open - token.wsWidth);
+    this.closed = closed;
+    this.open = open;
+    this.span = span;
+    return width;
+  }
+}
+
+/** A line's tokens' width as a browser fits it (`LineFit`). */
+function fittedWidth(toks) {
+  if (!toks.length) return 0;
+  const fit = new LineFit();
+  for (let i = 0; i < toks.length - 1; i++) fit.add(toks[i], i ? kernBefore(toks[i]) : 0);
+  const last = toks.length - 1;
+  return fit.with(toks[last], last ? kernBefore(toks[last]) : 0);
 }
 
 /** The kerning between a token and the one before it on its line
@@ -46,7 +130,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 +139,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'
@@ -120,14 +209,17 @@ export class TextLayout {
     const wraps = options.wrap !== false;
     {
       let cur = [];
-      let curWidth = 0;
+      const fit = new LineFit();
       const flush = () => {
         lineTokens.push(cur);
         cur = [];
-        curWidth = 0;
+        fit.reset();
       };
       for (let token of tokens) {
-        while (wraps && curWidth + (cur.length ? kernBefore(token) : 0) + token.width - token.wsWidth > maxWidth) {
+        while (
+          wraps &&
+          fit.with(token, cur.length ? kernBefore(token) : 0) > maxWidth + FIT_SLACK
+        ) {
           if (cur.length > 0) {
             flush();
           } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
@@ -141,7 +233,7 @@ export class TextLayout {
             token = rest;
           }
         }
-        curWidth += token.width + (cur.length ? kernBefore(token) : 0);
+        fit.add(token, cur.length ? kernBefore(token) : 0);
         cur.push(token);
         if (token.required) flush();
       }
@@ -180,7 +272,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 && fittedWidth(toks) > maxWidth + FIT_SLACK);
       const ellipsis = cut ? this._elide(toks, baseSpan) : null;
       if (ellipsis) {
         toks = this._fitBefore(toks, maxWidth - ellipsis.width);
@@ -195,7 +287,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 +317,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 +354,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 +527,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 +564,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 +637,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 +715,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 +733,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 +753,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 +762,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 +784,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 +804,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 +1320,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 +1448,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.7",
+  "version": "8.15.1",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",