ntk 8.22.0 → 8.23.1

package/lib/image.js

@@ -3,7 +3,7 @@ import { PNG } from 'pngjs';
 
 import { builtin } from './builtin.js';
 import { fromStraightRgba, pixelLayout } from './imagedata.js';
-import Picture from './picture.js';
+import Picture, { OWN_PICTURE } from './picture.js';
 
 /**
  * A decoded raster image: `width`, `height` and non-premultiplied RGBA
@@ -31,10 +31,17 @@ export class Image {
 
   /**
    * The server-side Picture for this image on `app`'s display (uploaded
-   * and cached on first use). Used by `ctx.drawImage`; useful directly
-   * when compositing manually via the Render extension.
+   * and cached on first use), read as stored: no transform, the `nearest`
+   * filter, no repeat. Useful directly when compositing manually via the
+   * Render extension; set anything else on it through the Picture's own
+   * `setTransform`/`setFilter`/`setRepeat`.
    */
   picture(app) {
+    return this[OWN_PICTURE](app)._settle();
+  }
+
+  /** The picture as ntk's draws left it (`drawImage` sets what it needs). */
+  [OWN_PICTURE](app) {
     let upload = this._uploads.get(app);
     if (upload) return upload.picture;
 
@@ -87,7 +94,7 @@ export class Image {
    * this image everywhere else.
    */
   pixmap(app) {
-    this.picture(app);
+    this[OWN_PICTURE](app);
     return this._uploads.get(app).pixmap;
   }
 

package/lib/picture.js

@@ -7,6 +7,18 @@ const registry = new FinalizationRegistry(({ Render, X, id }) => {
   });
 });
 
+/** RENDER's identity transform, row-major as `SetPictureTransform` takes it. */
+export const IDENTITY_TRANSFORM = Object.freeze([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+const NO_PARAMS = Object.freeze([]);
+
+/**
+ * The picture an `Image` or a `Surface` keeps for ntk's own draws, without
+ * putting it back as stored (`picture(app)` does that): `drawImage` reads it
+ * through and leaves its state for the next draw to set
+ * (docs/context-2d.md#how-an-image-is-read).
+ */
+export const OWN_PICTURE = Symbol('ntk.ownPicture');
+
 export default class Picture {
   constructor(app, args = {}) {
     const X = app.X;
@@ -23,6 +35,20 @@ export default class Picture {
     }
     this._owned = true;
     registry.register(this, { Render: this.Render, X, id: this.id }, this);
+    // How the server reads the picture — its transform, filter and repeat —
+    // as last set through the methods below, so a draw that needs what is
+    // there already sends nothing. Flipping them is not free: a filter
+    // changed and changed back around every composite cost Xwayland's glamor
+    // 36 ms over 256 composites where the composites took 0.6, and a
+    // transform put back to identity after each cost pixman 7.
+    this._transform = IDENTITY_TRANSFORM;
+    this._filter = 'nearest';
+    this._filterParams = NO_PARAMS;
+    this._repeat = args.repeat ?? 0;
+    // Whether what the picture is read through now is what a draw left
+    // (`_readThrough`) rather than what was set on it: the one `_settle`
+    // puts back. A filter hung on a surface to be drawn through stays.
+    this._leftByDraw = false;
   }
 
   /**
@@ -32,9 +58,67 @@ export default class Picture {
    *
    * That is what makes it right for resampling (`'bilinear'` under a
    * transform) and a trap for anything expensive: see `setBlurFilter`.
+   *
+   * Nothing is sent when the picture has this filter already.
    */
-  setFilter(name, params) {
+  setFilter(name, params = NO_PARAMS) {
+    this._leftByDraw = false;
+    if (name === this._filter && sameNumbers(params, this._filterParams)) return;
     this.Render.SetPictureFilter(this.id, name, params);
+    this._filter = name;
+    this._filterParams = params.length ? params.slice() : NO_PARAMS;
+  }
+
+  /**
+   * Set the transform the picture is read through: nine numbers, row-major,
+   * taking a destination point to the source point read for it, as RENDER's
+   * `SetPictureTransform` has them. Nothing is sent when it is the one the
+   * picture has.
+   */
+  setTransform(m) {
+    this._leftByDraw = false;
+    if (sameNumbers(m, this._transform)) return;
+    this.Render.SetPictureTransform(this.id, m);
+    this._transform = sameNumbers(m, IDENTITY_TRANSFORM) ? IDENTITY_TRANSFORM : m.slice();
+  }
+
+  /** Set how the picture is read past its edge — RENDER's `repeat`: 0 none,
+   * 1 normal, 2 pad, 3 reflect. Nothing is sent when it is so already. */
+  setRepeat(repeat) {
+    this._leftByDraw = false;
+    if (repeat === this._repeat) return;
+    this.Render.ChangePicture(this.id, { repeat });
+    this._repeat = repeat;
+  }
+
+  /**
+   * Read as stored: no transform, the `nearest` filter and no repeat — how a
+   * composite takes the pixels themselves. What a picture is left as by a
+   * draw that read it some other way is put back here, and only what differs
+   * is sent.
+   */
+  plain() {
+    this.setTransform(IDENTITY_TRANSFORM);
+    this.setFilter('nearest');
+    this.setRepeat(0);
+    return this;
+  }
+
+  /** A draw reading the picture through these, and leaving them for the
+   * next draw to set (docs/context-2d.md#how-an-image-is-read). */
+  _readThrough(transform, filter, repeat) {
+    this.setTransform(transform);
+    this.setFilter(filter);
+    this.setRepeat(repeat);
+    this._leftByDraw = true;
+  }
+
+  /** Put back what a draw left, and nothing that was set on the picture:
+   * what `Image.picture(app)` and `Surface.picture(app)` hand out, and what a
+   * draw that reads the pixels as they are reads. */
+  _settle() {
+    if (this._leftByDraw) this.plain();
+    return this;
   }
 
   /**
@@ -93,6 +177,13 @@ export default class Picture {
   }
 }
 
+function sameNumbers(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
 // normalized 2d gaussian, row-major size x size
 function gaussianKernel(size, sigma) {
   const kernel = new Array(size * size);

package/lib/renderingcontext_2d.js

@@ -25,7 +25,7 @@ import {
   subpathHead,
   subpathTail,
 } from "./path.js";
-import Picture from "./picture.js";
+import Picture, { OWN_PICTURE } from "./picture.js";
 import { formatForDepth } from "./pictformat.js";
 import Pixmap from "./pixmap.js";
 import { REGION_DOCS, regionId } from "./region.js";
@@ -564,6 +564,58 @@ function contextSource(ctx, app) {
   };
 }
 
+/**
+ * The picture a draw reads `image` through, and whether ntk keeps it. An
+ * `Image`'s and a `Surface`'s are kept: nothing reads them but ntk's draws
+ * and their `picture(app)`, which puts one back as stored first, so a draw
+ * sets the transform, filter and repeat it reads through (`readAs`) and
+ * leaves them for the next. A surface drawn through a matrix a tile at a
+ * time had each tile's transform and filter set, and both put back after
+ * it: five requests a tile where two do, and the putting back was most of
+ * the server's time (docs/context-2d.md#how-an-image-is-read). Any other
+ * picture — a context's own, a caller's handed in through a `picture(app)`
+ * of its own — is put back as stored once read (`readDone`), as every draw
+ * used to put back every picture.
+ */
+function sourcePicture(image, app) {
+  const own = image[OWN_PICTURE];
+  return own
+    ? { picture: own.call(image, app), kept: true }
+    : { picture: image.picture(app), kept: false };
+}
+
+/** Have `picture` read through `transform`, `filter` and `repeat`. An ntk
+ * Picture sends only what it does not have; a caller's handle, which may be
+ * no more than an id and a `setFilter`, is sent all of it. */
+function readAs(R, picture, transform, filter, repeat) {
+  if (picture instanceof Picture) {
+    picture._readThrough(transform, filter, repeat);
+    return;
+  }
+  R.SetPictureTransform(picture.id, transform);
+  picture.setFilter(filter);
+  if (repeat) R.ChangePicture(picture.id, { repeat });
+}
+
+/** After `readAs`: a picture ntk does not keep is put back as stored. */
+function readDone(R, picture, kept, repeat) {
+  if (kept) return;
+  if (picture instanceof Picture) {
+    picture.plain();
+    return;
+  }
+  R.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
+  picture.setFilter("nearest");
+  if (repeat) R.ChangePicture(picture.id, { repeat: 0 });
+}
+
+/** Before a read of `picture`'s pixels as they are. One ntk does not keep
+ * is so at rest; one it keeps is put back from whatever the last draw left,
+ * and a filter set on it is kept, as it always was. */
+function readPlain(picture, kept) {
+  if (kept) picture._settle();
+}
+
 function destroyedSourceError() {
   return new Error(
     "drawImage: the 2d context passed as the image has been destroyed — by\n" +
@@ -1586,8 +1638,9 @@ class RenderingContext2d {
     const source = this._fillSource;
     this.fillStyle = this._shadowColor;
     try {
+      const { picture, kept } = sourcePicture(surface, this.window.app);
       this._drawCoverage(
-        surface.picture(this.window.app),
+        picture,
         0,
         0,
         surface.width,
@@ -1597,6 +1650,7 @@ class RenderingContext2d {
         surface.width,
         surface.height,
         this._op(),
+        kept,
       );
     } finally {
       this._fillStyle = style;
@@ -1992,7 +2046,10 @@ class RenderingContext2d {
       this._shadowTile(plan),
     );
     if (!tile) return false;
-    const picture = tile.picture(app);
+    // A piece drawn at its own size reads the tile as stored and a stretched
+    // one through its scale: `_drawCoverage` sets each, and sends only what
+    // the piece before did not leave.
+    const { picture, kept } = sourcePicture(tile, app);
     // put back as it was, as _paintShadow does
     const style = this._fillStyle;
     const source = this._fillSource;
@@ -2003,16 +2060,7 @@ class RenderingContext2d {
         if (clip && !boxesMeet({ x: dx, y: dy, width: dw, height: dh }, clip)) {
           continue;
         }
-        // a piece drawn at its own size reads the tile as it is: undo the
-        // transform the last stretched one left on the picture
-        if (sw === dw && sh === dh && picture._tileScaled) {
-          this.Render.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
-          picture.setFilter("nearest");
-          picture._tileScaled = false;
-        } else if (sw !== dw || sh !== dh) {
-          picture._tileScaled = true;
-        }
-        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept);
       }
     } finally {
       this._fillStyle = style;
@@ -5694,7 +5742,7 @@ class RenderingContext2d {
    * coverage is composited through here as it is. Under a transform,
    * `drawImage` places coverage with `_drawCoverageTurned` instead.
    */
-  _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op) {
+  _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept = false) {
     // 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 —
@@ -5705,31 +5753,15 @@ class RenderingContext2d {
     // whose transform collapsed paints nothing
     if (!prepareStyle(this._backgroundPicture, this._m, this.width, this.height)) return;
     const scaled = dw !== sw || dh !== sh;
+    // the edge clamped when scaled, as drawImage's scaled path explains
     if (scaled) {
-      R.SetPictureTransform(picture.id, [
-        sw / dw,
-        0,
-        sx,
-        0,
-        sh / dh,
-        sy,
-        0,
-        0,
-        1,
-      ]);
-      picture.setFilter("bilinear");
-      // the edge clamped, as drawImage's scaled path explains
-      R.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
+      readAs(R, picture, [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1], "bilinear", 2);
+    } else {
+      readPlain(picture, kept);
     }
     // with a transform in place the mask is already sampled from (sx, sy)
     this._paintCoverage(picture, scaled ? 0 : sx, scaled ? 0 : sy, dx, dy, dw, dh, op);
-
-    if (scaled) {
-      // restore defaults so the cached surface stays reusable as-is
-      R.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
-      picture.setFilter("nearest");
-      R.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
-    }
+    if (scaled) readDone(R, picture, kept, 2);
   }
 
   /**
@@ -5883,12 +5915,12 @@ class RenderingContext2d {
     if (rect && !intersectBox(box, rect)) return;
     if (!prepareStyle(this._backgroundPicture, this._m, this.width, this.height)) return;
     const R = this.Render;
-    const picture = image.picture(this.window.app);
-    R.SetPictureTransform(picture.id, transform);
-    picture.setFilter("bilinear");
+    const { picture, kept } = sourcePicture(image, this.window.app);
+    // no repeat: under a turn the box is the bounding box, and a padded
+    // edge would paint its corners
+    readAs(R, picture, transform, "bilinear", 0);
     this._paintCoverage(picture, 0, 0, box.x, box.y, box.w, box.h, op);
-    R.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
-    picture.setFilter("nearest");
+    readDone(R, picture, kept, 0);
   }
 
   /**
@@ -5941,31 +5973,19 @@ class RenderingContext2d {
     }
 
     if (image.format === "a8") {
-      const picture = image.picture(app);
-      this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+      const { picture, kept } = sourcePicture(image, app);
+      this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op, kept);
       return;
     }
 
     const state = this._beginDirectComposite({ x: dx, y: dy, w: dw, h: dh }, op);
     if (state.empty) return;
     // only now that the clip has had its say: a node-canvas uploads here
-    const picture = image.picture(app);
+    const { picture, kept } = sourcePicture(image, app);
     const scaled = dw !== sw || dh !== sh;
     if (scaled) {
-      // the picture transform maps composite coordinates into source
-      // samples: dest pixel (i, j) reads (sx + i*sw/dw, sy + j*sh/dh)
-      this.Render.SetPictureTransform(picture.id, [
-        sw / dw,
-        0,
-        sx,
-        0,
-        sh / dh,
-        sy,
-        0,
-        0,
-        1,
-      ]);
-      picture.setFilter("bilinear");
+      // The picture transform maps composite coordinates into source
+      // samples: dest pixel (i, j) reads (sx + i*sw/dw, sy + j*sh/dh).
       // Bilinear sampling at the rim reads half a source pixel past the
       // image, and a picture's default repeat reads transparent there: an
       // upscaled image faded into whatever it was drawn over across its
@@ -5975,7 +5995,13 @@ class RenderingContext2d {
       // composite box is the destination rectangle exactly: under a
       // rotation the box is the bounding box, and pad would paint its
       // corners.
-      this.Render.ChangePicture(picture.id, { repeat: 2 }); // Repeat.Pad
+      readAs(
+        this.Render,
+        picture,
+        [sw / dw, 0, sx, 0, sh / dh, sy, 0, 0, 1],
+        "bilinear",
+        2, // Repeat.Pad
+      );
       this._compositeOnto(
         state.after,
         op,
@@ -5990,14 +6016,9 @@ class RenderingContext2d {
         dw,
         dh,
       );
-      // restore defaults so the cached upload can be reused as-is
-      this.Render.SetPictureTransform(
-        picture.id,
-        [1, 0, 0, 0, 1, 0, 0, 0, 1],
-      );
-      picture.setFilter("nearest");
-      this.Render.ChangePicture(picture.id, { repeat: 0 }); // Repeat.None
+      readDone(this.Render, picture, kept, 2);
     } else {
+      readPlain(picture, kept);
       this._compositeOnto(
         state.after,
         op,
@@ -6230,9 +6251,11 @@ class RenderingContext2d {
       format: coverage ? R.a8 : R.rgba32,
     });
     try {
+      const { picture: from, kept } = sourcePicture(image, app);
+      readPlain(from, kept);
       R.Composite(
         R.PictOp.Src,
-        image.picture(app).id,
+        from.id,
         0,
         picture.id,
         x0,
@@ -6314,9 +6337,9 @@ class RenderingContext2d {
     const direct = this._boxedComposite(bbox);
     if (direct && !direct.box) return;
 
-    const picture = image.picture(this.window.app);
-    this.Render.SetPictureTransform(picture.id, transform);
-    picture.setFilter("bilinear");
+    const { picture, kept } = sourcePicture(image, this.window.app);
+    // no repeat: the box is the bounding box of the turned rectangle
+    readAs(this.Render, picture, transform, "bilinear", 0);
     if (direct) {
       const box = direct.box;
       this.Render.Composite(
@@ -6336,8 +6359,7 @@ class RenderingContext2d {
     } else {
       this._compositeMasked(op, picture.id, 0, 0, bbox);
     }
-    this.Render.SetPictureTransform(picture.id, [1, 0, 0, 0, 1, 0, 0, 0, 1]);
-    picture.setFilter("nearest");
+    readDone(this.Render, picture, kept, 0);
     this._markDirty();
   }
 }

package/lib/shadow.js

@@ -118,7 +118,7 @@ function halveCoverage(surface, R) {
   const small = new Surface(surface.app, { width, height, format: 'a8' });
   const picture = surface.picture();
   picture.setFilter('bilinear');
-  R.SetPictureTransform(picture.id, [2, 0, 0, 0, 2, 0, 0, 0, 1]);
+  picture.setTransform([2, 0, 0, 0, 2, 0, 0, 0, 1]);
   R.Composite(R.PictOp.Src, picture.id, 0, small.picture().id, 0, 0, 0, 0, 0, 0, width, height);
   surface.destroy();
   return small;
@@ -143,7 +143,7 @@ function expandCoverage(small, width, height, scale, R) {
   const out = new Surface(small.app, { width, height, format: 'a8' });
   const picture = small.picture();
   picture.setFilter('bilinear');
-  R.SetPictureTransform(picture.id, [1 / scale, 0, 0, 0, 1 / scale, 0, 0, 0, 1]);
+  picture.setTransform([1 / scale, 0, 0, 0, 1 / scale, 0, 0, 0, 1]);
   R.Composite(R.PictOp.Src, picture.id, 0, out.picture().id, 0, 0, 0, 0, 0, 0, width, height);
   small.destroy();
   return out;

package/lib/surface.js

@@ -1,4 +1,4 @@
-import Picture from './picture.js';
+import Picture, { OWN_PICTURE } from './picture.js';
 import Pixmap from './pixmap.js';
 import { safeRelease } from './cleanup.js';
 
@@ -62,10 +62,16 @@ export class Surface {
     return this.width * this.height * (this.depth === 8 ? 1 : 4);
   }
 
-  /** The server-side Picture, on the app this surface belongs to. Mirrors
+  /** The server-side Picture, on the app this surface belongs to, read as
+   * stored: no transform, the `nearest` filter, no repeat. Mirrors
    * `Image.picture(app)` so `drawImage` can take either without asking which
    * it has. */
   picture(app) {
+    return this[OWN_PICTURE](app)._settle();
+  }
+
+  /** The picture as ntk's draws left it (`drawImage` sets what it needs). */
+  [OWN_PICTURE](app) {
     if (app && app !== this.app) {
       throw new Error('Surface: belongs to a different X connection');
     }

package/lib/text/fontmanager.js

@@ -565,6 +565,15 @@ export default class FontManager {
     return new TextLayout(this, content, style, options);
   }
 
+  /**
+   * Whether `layout` takes `justify`, and fills a line with its word
+   * separators itself. True; a caller that asks before it passes the option
+   * keeps its own way of justifying for an engine without it.
+   */
+  get justifies() {
+    return true;
+  }
+
   /**
    * Memoized shaping used by TextLayout and the canvas text path, bounded at
    * two generations of `SHAPE_GENERATION` words. `levelsKey` is a compact
@@ -671,7 +680,7 @@ export default class FontManager {
    */
   _shapeCachedWhole(text, style) {
     const emb = embeddingLevels(text, style.direction);
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    const baseLevel = emb.paragraphs[0].level;
     const shaped = this._shapeCached(text, style, normalizedLevels(emb.levels, 0, text.length));
     return shaped.baseLevel === baseLevel ? shaped : { ...shaped, baseLevel };
   }

package/lib/text/layout.js

@@ -12,6 +12,29 @@ const WS = new Set([0x20, 0x09]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
 const TRAILING_WS = /[ \t]+$/;
 
+// The word separators a justified line's room is shared out at (CSS Text 3,
+// 7.4, `text-justify: auto` as a browser has it for the scripts that space
+// their words): a space and a no-break space.
+const SEPARATORS = new Set([0x20, 0xa0]);
+const separates = (g) => g.codePoints.length === 1 && SEPARATORS.has(g.codePoints[0]);
+
+// What ends a line `justify` sets as it does a paragraph's last: a line feed,
+// a carriage return or a paragraph separator, as a browser's forced break
+// does. A line separator, U+2028, is not one, so a caller can ask a line to
+// break there and be justified.
+const JUSTIFY_STOPS = /[\n\r\u2029]$/;
+
+// `justify`'s lines as bits: those that go on to another (REST), and the
+// paragraph's last with those a forced break ends (LAST).
+const REST = 1;
+const LAST = 2;
+function justifyBits(justify) {
+  if (justify === true || justify === 'rest') return REST;
+  if (justify === 'last') return LAST;
+  if (justify === 'all') return REST | LAST;
+  return 0;
+}
+
 /** Scripts written without spaces between words, whose line breaking
  *  needs a dictionary (UAX #14's SA class, and Javanese, Balinese and
  *  Buginese, which are AL there): a token of theirs is a run of words. */
@@ -162,6 +185,44 @@ function isWsGlyph(g) {
   return g.codePoints.length > 0 && g.codePoints.every((cp) => WS.has(cp));
 }
 
+/**
+ * A line set to fill `width`: what it leaves of it shared equally among its
+ * word separators (`SEPARATORS`), each glyph's advance widened by its share
+ * — the white space it ends on hangs, and takes none. Its runs are made
+ * anew, those with a separator in them over glyphs of their own, since a
+ * shaped run is the paragraph's and shared by every layout of it; caret
+ * positions, hit testing, drawing and coverage all read the advances, and
+ * agree. A line with no separator, or with no room left, keeps its
+ * alignment. Answers the line's width.
+ */
+function justifyLine(line, width) {
+  const free = width - line.width;
+  if (!(free > 0)) return line.width;
+  let count = 0;
+  for (const r of line.runs) {
+    for (const g of r.run.glyphs) if (separates(g)) count++;
+  }
+  if (count === 0) return line.width;
+  const extra = free / count;
+  let shift = 0;
+  line.runs = line.runs.map((r) => {
+    const moved = shift ? { ...r, x: r.x + shift } : r;
+    let k = 0;
+    for (const g of r.run.glyphs) if (separates(g)) k++;
+    if (k === 0) return moved;
+    shift += k * extra;
+    const glyphs = r.run.glyphs.map((g) => (separates(g) ? { ...g, ax: g.ax + extra } : g));
+    return {
+      ...moved,
+      width: r.width + k * extra,
+      run: { ...r.run, glyphs, width: r.run.width + k * extra }
+    };
+  });
+  line.width += count * extra;
+  line.advance += count * extra;
+  return line.width;
+}
+
 /**
  * Multi-line text layout: breaks (possibly styled) text into lines for a
  * target container width, with full shaping — kerning, ligatures, complex
@@ -205,6 +266,13 @@ function isWsGlyph(g) {
  *   past the line's end, as CSS's `overflow-wrap: normal` does — but for
  *   text in a script written without spaces (Thai, Khmer, Javanese…), whose
  *   words the breaker cannot find, which is cut as a fallback
+ * - `justify` — the lines set to fill `maxWidth`, what each leaves of it
+ *   shared equally among its word separators, a space and a no-break space:
+ *   `true` (or `'rest'`) for every line but the paragraph's last and each a
+ *   forced break ends, as CSS's `text-align: justify`; `'last'` for only
+ *   those; `'all'` for every line. A line with no separator, or none of the
+ *   width to spare, keeps `align`'s place, as do the lines not justified.
+ *   The breaks are the layout's at its width; justifying moves none
  * - `fit` — 'items' fits and measures a line as a browser does: each span's
  *   part of it rounded up to a 64th of a pixel before it is added, as Blink
  *   rounds an element's text on a line up to a LayoutUnit; a line's `width`
@@ -436,6 +504,11 @@ export class TextLayout {
         natural = m.lineHeight;
       }
       if (runs.length) fitted += round(item);
+      // a line's place in the paragraph, for `justify`: its last, which a
+      // `maxLines` cut leaves no line, or one a forced break ends
+      const ends =
+        (li === lineTokens.length - 1 && !this.truncated) ||
+        JUSTIFY_STOPS.test(text.slice(Math.max(lineStart, lineEnd - 1), lineEnd));
       if (fitted > layoutWidth) layoutWidth = fitted;
       // Half-leading (CSS Inline Layout 3): the slack between the glyphs and
       // the line box is split evenly above and below, rather than all of it
@@ -462,11 +535,27 @@ export class TextLayout {
         start: lineStart,
         end: lineEnd,
         _contentEnd: contentEnd,
-        _trailing: trailing
+        _trailing: trailing,
+        _ends: ends,
+        _elided: !!ellipsis
       });
       y += box;
     }
 
+    // ---- justification ----
+    // After the lines are broken, so a width the lines are set at is no
+    // shaping: a paragraph laid out again at another width breaks the glyphs
+    // it has into other lines and spaces them, where one that spaced its
+    // words through letter spacing was shaped again at every width.
+    const justify = justifyBits(options.justify);
+    if (justify && Number.isFinite(maxWidth)) {
+      for (const line of this.lines) {
+        if (line._elided || !(justify & (line._ends ? LAST : REST))) continue;
+        const width = justifyLine(line, maxWidth);
+        if (width > layoutWidth) layoutWidth = width;
+      }
+    }
+
     this.width = layoutWidth;
     this.height = y;
 
@@ -537,7 +626,7 @@ export class TextLayout {
     const text = spans.map((s) => s.text).join('');
     const emb = embeddingLevels(text, direction);
     const levels = emb.levels;
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level & 1 : 0;
+    const baseLevel = emb.paragraphs[0].level & 1;
 
     // span boundaries, for binary search by char position
     const spanStarts = [];

package/lib/text/shape.js

@@ -21,17 +21,30 @@ function neverSwitches(cp) {
 
 /**
  * UAX#9 embedding levels for a string. `direction` is 'ltr', 'rtl' or 'auto'
- * (first-strong detection). Returns bidi-js's result object.
+ * (first-strong detection). Returns bidi-js's result object, which always
+ * has a first paragraph: its level is the text's base level.
  */
 export function embeddingLevels(text, direction = 'auto') {
   const explicit = direction === 'ltr' || direction === 'rtl' ? direction : null;
+  // An empty text is a paragraph too, at the level its direction names.
+  // bidi-js finds no paragraph in it, and a base level read as 0 for want
+  // of one set an empty right-to-left field's line, and the caret on it,
+  // at the left — where the same field holding only a line break had it
+  // at the right. Under 'auto' there is no strong character to find, and
+  // the paragraph is left-to-right (UAX#9 P3).
+  if (!text.length) {
+    return {
+      levels: new Uint8Array(0),
+      paragraphs: [{ start: 0, end: -1, level: explicit === 'rtl' ? 1 : 0 }]
+    };
+  }
   // Text that nothing can make right-to-left is level 0 throughout, which
   // is what the algorithm would work out a character at a time: every
   // layout asks, and most text is Latin, CJK or digits with no bidi at all.
   if (explicit !== 'rtl' && !MAY_REVERSE.test(text)) {
     return {
       levels: new Uint8Array(text.length),
-      paragraphs: text.length ? [{ start: 0, end: text.length - 1, level: 0 }] : []
+      paragraphs: [{ start: 0, end: text.length - 1, level: 0 }]
     };
   }
   return bidi.getEmbeddingLevels(text, explicit);
@@ -161,7 +174,7 @@ export function shapeText(fonts, text, style, levels) {
   if (!levels) {
     const emb = embeddingLevels(text, style.direction);
     levels = emb.levels;
-    baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    baseLevel = emb.paragraphs[0].level;
   } else {
     baseLevel = levels.length ? levels[0] & ~1 : 0;
   }

package/package.json

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