ntk 8.15.0 → 8.15.1

package/lib/text/layout.js

@@ -25,15 +25,88 @@ const UNSPACED =
  * 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).
+ * 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;
 
-/** 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;
+/** 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
@@ -136,16 +209,16 @@ 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 + FIT_SLACK
+          fit.with(token, cur.length ? kernBefore(token) : 0) > maxWidth + FIT_SLACK
         ) {
           if (cur.length > 0) {
             flush();
@@ -160,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();
       }
@@ -199,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 + FIT_SLACK);
+      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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.15.0",
+  "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",