@muhammara/native-core 7.0.0 → 7.1.1

package/lib/recipe/text.js

@@ -3,8 +3,8 @@ const { Word, Line, Column } = require("./text.helper");
 const { htmlToTextObjects, HtmlTag } = require("./htmlToTextObjects");
 const { Color, xObjectForm } = require("./xObjectForm");
 const { linkPdf } = require("./annotation");
-const muhammara = require("../muhammara");
-const { UsedFont } = require("../muhammara");
+const { resolveFontSize, trimBreakableEnd } = require("./utils");
+const { miterLimitOption, rotationOption } = require("../recipe-options");
 const {
   TextWrap,
   TextAlign,
@@ -13,6 +13,51 @@ const {
   Colorspace,
 } = require("../recipe-constants");
 
+/**
+ * Matches HTML that ends with a closed block element, which ends its line.
+ */
+const BLOCK_END = /<\/(?:p|div|ul|ol|li|h[1-6]|blockquote|pre)\s*>\s*$/i;
+
+/**
+ * Matches HTML that opens with a block element, which starts a new line.
+ */
+const BLOCK_START = /^\s*<(?:p|div|ul|ol|li|h[1-6]|blockquote|pre)\b/i;
+
+/**
+ * Matches the line break that ends a word at a required break.
+ */
+const LINE_BREAK_END = /(?:\r\n|[\n\r\v\f\u0085\u2028\u2029])$/;
+
+/**
+ * Find the first node with text, unless a line break or block element comes
+ * before it.
+ * @private
+ * @param {Object[]} nodes - HTML layout nodes in drawing order.
+ * @returns {Object|undefined} The node, or undefined.
+ */
+function firstInlineText(nodes) {
+  for (const node of nodes) {
+    if (node.lineBreak || node.needsLineBreaker) return undefined;
+    if (node.value) return node;
+    if (node.childs?.some(hasLayout)) return firstInlineText(node.childs);
+  }
+  return undefined;
+}
+
+/**
+ * Report whether an HTML layout node has text or a line break to lay out.
+ * @private
+ * @param {Object} textObject - The layout node.
+ * @returns {boolean} Whether laying the node out adds a run.
+ */
+function hasLayout(textObject) {
+  return Boolean(
+    textObject.lineBreak ||
+    textObject.value ||
+    textObject.childs?.some(hasLayout),
+  );
+}
+
 //  Table indicating how to specify coloration of elements
 //  -------------------------------------------------------------------
 // |Color | HexColor   | DecimalColor                   | PercentColor |
@@ -267,7 +312,7 @@ exports._makeTextBox = function _makeTextBox(options) {
  * @param {Object} [options] - The options
  * @param {string|number[]} [options.color] - Text color (HexColor, PercentColor or DecimalColor)
  * @param {number} [options.opacity=1] - opacity
- * @param {number} [options.rotation=0] - Accept: +/- 0 through 360.
+ * @param {number} [options.rotation=0] - Clockwise rotation in degrees, +/- 0 through 360.
  * @param {number[]} [options.rotationOrigin=[x,y]] - [originX, originY]
  * @param {string} [options.font=Helvetica] - The font. 'Arial', 'Helvetica'...
  * @param {number} [options.size=14] - The font size
@@ -279,8 +324,9 @@ exports._makeTextBox = function _makeTextBox(options) {
  * @param {Object|Boolean} [options.underline] - Text markup annotation.
  * @param {Object|Boolean} [options.strikeOut] - Text markup annotation.
  * @param {Boolean} [options.html] - Interpret text as html
- * @param {Boolean} [options.flow=false] - Used to activate/deactivate text flow which is the
- * ability to use multiple calls to 'text' to create an overall text box.
+ * @param {Boolean} [options.flow] - Used to activate/deactivate text flow which is the
+ * ability to use multiple calls to 'text' to create an overall text box. Defaults to
+ * `true` for a call without coordinates and `false` for a call with them.
  * @param {number|string} [options.layout] - An identifier of the layout to be associated with given text.
  * @param {function} [options.overflow] - Called when the text is going to exceed the area
  * of the given text object. Intended for column layouts. Its parameter is (self) where 'self' is the recipe handle so
@@ -322,6 +368,8 @@ exports._makeTextBox = function _makeTextBox(options) {
  * @param {string} [options.link] - Make the text open this URL.
  * @returns {Recipe} The recipe instance. Without an active page nothing is drawn.
  * @throws {TypeError} If `options.charSpace` or `options.rotation` is not a finite number; nothing is drawn.
+ * @throws {RangeError} If `options.size` is not greater than zero or
+ *   `options.miterLimit` is below 1; nothing is drawn.
  * @throws {Error} If an overflow callback names an undefined layout, or a font cannot be loaded.
  */
 exports.text = function text(text = "", x, y, options = {}) {
@@ -330,9 +378,15 @@ exports.text = function text(text = "", x, y, options = {}) {
   if (!this.pageContext) {
     return this;
   }
-  // Validate before _initOptions moves the text position or resets the flow.
+  // A call with coordinates starts a new text box, so an open flow is drawn
+  // first instead of being discarded.
+  // Validate before _initOptions moves the text position or resets the flow,
+  // and before an open flow is drawn.
   const rawOptions = (typeof x === "object" ? x : options) || {};
   _validateCharSpace(rawOptions);
+  rotationOption(rawOptions.rotation);
+  miterLimitOption(rawOptions.miterLimit);
+  resolveFontSize(rawOptions);
   // Reject invalid markup annotations before any text is drawn.
   for (let key in rawOptions) {
     if (this._getTextMarkupAnnotationSubtype(key) && rawOptions[key]) {
@@ -340,6 +394,9 @@ exports.text = function text(text = "", x, y, options = {}) {
       this._validateAnnot({ ...markup, flag: rawOptions.flag });
     }
   }
+  if (typeof x !== "object" && x !== undefined) {
+    this._flushTextFlow();
+  }
   options = _initOptions(this, x, y, options);
   const linkX = this.x;
   const linkY = this.y;
@@ -364,9 +421,61 @@ exports.text = function text(text = "", x, y, options = {}) {
   // save text state for continued text?
   this._textOptions = this._flow ? options : { textBox: {} };
 
-  const textObjects = options.html
-    ? htmlToTextObjects(text, options)
-    : this._makeTextObject(text, pathOptions.size, options);
+  // Line breaks that end a flowed run end its line, as movedown() does,
+  // instead of being drawn.
+  let trailingBreaks = 0;
+  if (this._flow) {
+    const breaks = /\n+$/.exec(text);
+    if (breaks) {
+      trailingBreaks = breaks[0].length;
+      text = text.slice(0, breaks.index);
+      if (text === "" && this._previousTextObjects.length) {
+        return this.movedown(trailingBreaks);
+      }
+    }
+  }
+
+  // HTML without text or line breaks has nothing to lay out, which would
+  // discard the runs of an open flow, so it is laid out as empty plain text.
+  let textObjects =
+    options.html && text !== "" ? htmlToTextObjects(text, options) : null;
+  if (
+    textObjects &&
+    this._previousTextObjects.length &&
+    !textObjects.some(hasLayout)
+  ) {
+    textObjects = this._makeTextObject("", pathOptions.size, options);
+  }
+  textObjects =
+    textObjects || this._makeTextObject(text, pathOptions.size, options);
+
+  // HTML continues the open line of a flow unless it opens with a block
+  // element or the run before closed one. It then keeps one space that
+  // starts it, as HTML text after inline content does, unless the run
+  // before ends with a space.
+  pathOptions.startsBlock = Boolean(options.html) && BLOCK_START.test(text);
+  const openRun =
+    this._previousTextObjects[this._previousTextObjects.length - 1];
+  if (
+    options.html &&
+    /^\s/.test(text) &&
+    openRun &&
+    !openRun.lineComplete &&
+    /\S$/.test(openRun.text) &&
+    !this._flowEndsBlock &&
+    !pathOptions.startsBlock
+  ) {
+    const first = firstInlineText(textObjects);
+    if (first && !/^\s/.test(first.value)) {
+      // A space before an element is a run of its own, as in one call.
+      if (textObjects.includes(first)) first.value = " " + first.value;
+      else {
+        textObjects.unshift(
+          ...this._makeTextObject(" ", pathOptions.size, options),
+        );
+      }
+    }
+  }
   const textBox = this._makeTextBox(options);
 
   if (textBox.onClip && !textBox.clipIfExceedsBox) {
@@ -391,7 +500,22 @@ exports.text = function text(text = "", x, y, options = {}) {
   // need to collect all the text that is 'flowing' before processing.
   if (this._flow) {
     this._previousTextObjects = [...toWriteTextObjects];
+    // A later HTML run starts a new line after a closed block element.
+    this._flowEndsBlock = Boolean(options.html) && BLOCK_END.test(text);
+    if (trailingBreaks) this.movedown(trailingBreaks);
   } else {
+    this._flowEndsBlock = false;
+    // Runs of different sizes on one line share its baseline and height; the
+    // first line moves down by what it grew so its tallest run fits the box,
+    // and movedown() moves by its full height.
+    // An empty first run that a later run replaced does not size it either.
+    const firstLineHeight = toWriteTextObjects[0]?.lineHeight;
+    alignLineBaselines(toWriteTextObjects);
+    if (firstLineHeight !== undefined) {
+      this._lineHeight += toWriteTextObjects[0].lineHeight - firstLineHeight;
+      this._firstLineHeight = toWriteTextObjects[0].lineHeight;
+      textBox.firstLineHeight = this._firstLineHeight;
+    }
     textBox.textHeight = getTextBoxHeight(toWriteTextObjects);
 
     let clipResult;
@@ -466,8 +590,23 @@ exports.text = function text(text = "", x, y, options = {}) {
       currentLineID = currentLineID || lineID;
       const isContinued = currentLineID == lineID ? true : false;
 
+      /**
+       * Where a line's first run starts, from the box edge and the line's
+       * alignment.
+       * @param {number} startX - The x of the box edge plus the width of the
+       *   line's runs before the run.
+       * @param {Object} content - The run, whose alignment places the line.
+       * @returns {number} The x of the run.
+       */
       const getStartX = (startX, content) => {
-        let spaceWidth = content.text.endsWith(" ") ? content.spaceWidth : 0;
+        // Right alignment leaves out the space that ends the line, which
+        // belongs to its last run with text; every run of the line shifts
+        // alike.
+        const lastContent =
+          toWriteContents.findLast((run) => run.text !== "") || content;
+        let spaceWidth = lastContent.text.endsWith(" ")
+          ? lastContent.spaceWidth
+          : 0;
         let offsetX;
         switch (content.writeOptions.alignHorizontal) {
           case TextAlign.CENTER:
@@ -777,7 +916,8 @@ exports.text = function text(text = "", x, y, options = {}) {
 
       /** Queues a text link limited to the run's visible clipping region. */
       var queueTextLink = function (content, x, y, nextX) {
-        if (!content.writeOptions.link) return;
+        // The empty run that ends a flow inherits the link but covers nothing.
+        if (!content.writeOptions.link || !content.text) return;
         var left = x;
         var width = nextX ? nextX - x : content.lineWidth;
         if (textBox.wrap === TextWrap.CLIP) {
@@ -1003,10 +1143,38 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
       textObject.value !== null &&
       textObject.value !== "") ||
     textObject.childs?.some(hasRenderableContent);
-
+  /**
+   * Finds the node laid out last that has more than spaces, after its
+   * parents' text.
+   * @param {Object[]} nodes - Layout nodes in drawing order.
+   * @returns {Object|undefined} The node, or undefined when none has text.
+   */
+  const lastTextNode = (nodes) => {
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      const node = nodes[i];
+      const child =
+        node.tag && node.childs?.length && lastTextNode(node.childs);
+      if (child) return child;
+      if (!node.lineBreak && /\S/.test(node.value ?? "")) return node;
+    }
+    return undefined;
+  };
+  // Only the call's last text and the spaces after it end its line, so the
+  // spaces between its HTML elements stay when the call ends a flow.
+  const lastText = lastTextNode(textObjects);
+  let atEnd = !lastText;
+
+  // Every object is laid out after the runs of an open flow, which each
+  // result repeats; the first result keeps them and later ones drop them.
+  const previousRuns = new Set(this._previousTextObjects);
   /** Adds laid-out objects, recording the first line height. */
   const addLaidOutObjects = (newToWriteObjects, paragraphHeight) => {
-    toWriteTextObjects = [...toWriteTextObjects, ...newToWriteObjects];
+    toWriteTextObjects = [
+      ...toWriteTextObjects,
+      ...(toWriteTextObjects.length
+        ? newToWriteObjects.filter((textObj) => !previousRuns.has(textObj))
+        : newToWriteObjects),
+    ];
 
     if (!firstLineHeight) {
       this._lineHeight = firstLineHeight = toWriteTextObjects[0].lineHeight;
@@ -1017,8 +1185,19 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
     totalHeight += paragraphHeight;
   };
 
+  /**
+   * Lays out a layout node and then its HTML children, adding the runs.
+   * @param {Object} textObject - The layout node; list markers, indents,
+   *   sizes and styles are passed on to its children in place.
+   * @returns {void}
+   */
+  // A run whose first word wraps ends the open line of a flow; the call's
+  // later runs continue the line it wrapped onto instead.
+  const wrappedLineIDs = new Map();
   const writeValue = (textObject) => {
     textObject.lineID = textObject.lineID || Date.now() * Math.random();
+    textObject.lineID =
+      wrappedLineIDs.get(textObject.lineID) ?? textObject.lineID;
     textObject.lineID =
       textObject.needsLineBreaker || textObject.lineBreak
         ? Date.now() * Math.random()
@@ -1048,9 +1227,16 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
       textObject.styles.color = textObject.styles.color
         ? this._transformColor(textObject.styles.color)
         : pathOptions.color;
+      atEnd = atEnd || textObject === lastText;
       const { toWriteTextObjects: newToWriteObjects, paragraphHeight } =
-        makeTextObjects(this, textObject, pathOptions, textBox);
+        makeTextObjects(this, textObject, pathOptions, textBox, atEnd);
       addLaidOutObjects(newToWriteObjects, paragraphHeight);
+      if (openLine?.lineComplete && textObject.lineID === openLine.lineID) {
+        wrappedLineIDs.set(
+          openLine.lineID,
+          newToWriteObjects[newToWriteObjects.length - 1].lineID,
+        );
+      }
     }
     if (textObject.tag && textObject.childs.length) {
       // console.log(textObject);
@@ -1124,8 +1310,17 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
     }
   };
   // Top-level nodes share a line, as children of a block element do, so
-  // inline runs outside any element are not split onto separate lines.
-  const topLevelLineID = Date.now() * Math.random();
+  // inline runs outside any element are not split onto separate lines. In a
+  // flow they continue the line the previous run left open, unless both are
+  // HTML and the previous one closed a block element or this one opens one.
+  const openLine =
+    this._previousTextObjects?.[this._previousTextObjects.length - 1];
+  const topLevelLineID =
+    openLine &&
+    !openLine.lineComplete &&
+    !(pathOptions.html && (this._flowEndsBlock || pathOptions.startsBlock))
+      ? openLine.lineID
+      : Date.now() * Math.random();
   textObjects.forEach((textObject) => {
     textObject.lineID = textObject.lineID || topLevelLineID;
     writeValue(textObject);
@@ -1145,7 +1340,15 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
         ...breakObject,
         lineID: previous ? pendingBreaks[index].lineID : breakObject.lineID,
         text: "",
-        lineComplete: true,
+        // A later call of the flow lays the blank lines out again; they are
+        // no longer breaks, and the last one is the line it continues.
+        lineBreak: false,
+        blankLine: true,
+        lineComplete: !(
+          this._flow &&
+          !nextTextObject &&
+          index === blankBreaks.length - 1
+        ),
         lineWidth: 0,
         textWidth: 0,
       });
@@ -1162,6 +1365,7 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
     // Whitespace that only precedes a line break would start a blank line.
     const beforeLineBreak =
       !textObject.lineBreak &&
+      !textObject.blankLine &&
       textObject.text.trim() == "" &&
       objects[index + 1]?.lineBreak;
     if (beforeLineBreak) return;
@@ -1176,6 +1380,17 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
   });
   if (pendingBreaks.length) appendPendingBreaks();
   toWriteTextObjects = normalizedTextObjects;
+  // Every line the call ends, ends with its last word, so its trailing
+  // spaces do not widen it, as in Wasm. A flow's open line may continue
+  // in a later call, and clipped text keeps its spaces.
+  if (textBox.wrap !== TextWrap.CLIP) {
+    toWriteTextObjects.forEach((textObj, index) => {
+      const next = toWriteTextObjects[index + 1];
+      if (next && next.lineID === textObj.lineID) return;
+      if (this._flow && !next && !textObj.lineComplete) return;
+      trimLineEnd(toWriteTextObjects, index);
+    });
+  }
 
   return {
     toWriteTextObjects: toWriteTextObjects,
@@ -1183,6 +1398,36 @@ exports._layoutText = function _layoutText(textObjects, textBox, pathOptions) {
   };
 };
 
+/**
+ * Give the runs of each line one height and one baseline, so runs of
+ * different sizes sit on the same baseline and the tallest one fits the
+ * line.
+ * @private
+ * @param {Object[]} textObjs - The laid-out runs; updated in place.
+ * @returns {void}
+ */
+function alignLineBaselines(textObjs) {
+  // Runs without visible text, such as an empty run or the space before a
+  // wrapped word, size only a line that has nothing else.
+  const visibleLines = new Set(
+    textObjs.filter(({ text }) => /\S/.test(text)).map(({ lineID }) => lineID),
+  );
+  const lines = new Map();
+  for (const { lineID, lineHeight, baseline, text } of textObjs) {
+    if (visibleLines.has(lineID) && !/\S/.test(text)) continue;
+    const line = lines.get(lineID) || { lineHeight: 0, ascent: 0 };
+    line.lineHeight = Math.max(line.lineHeight, lineHeight);
+    // Each run's baseline offset is its line height less its ascent.
+    line.ascent = Math.max(line.ascent, lineHeight - baseline);
+    lines.set(lineID, line);
+  }
+  for (const textObj of textObjs) {
+    const line = lines.get(textObj.lineID);
+    textObj.lineHeight = line.lineHeight;
+    textObj.baseline = line.lineHeight - line.ascent;
+  }
+}
+
 /**
  * The height of laid-out text: the sum of the line heights, counting each
  * line once.
@@ -1389,14 +1634,18 @@ function justify(left, x, wto, textBox, position) {
  * @param {Object} brk - The line break opportunity: position and required.
  * @param {number} previousPosition - The position of the previous break.
  * @param {Object} pathOptions - The resolved text options.
+ * @param {boolean} [keepEnd=false] - Whether a required break drops only
+ *   the line break, keeping the spaces before it, as clipped text does.
  * @returns {Word} The word; trimmed at a required break.
  */
-function nextWord(text, brk, previousPosition, pathOptions) {
+function nextWord(text, brk, previousPosition, pathOptions, keepEnd = false) {
   let nextWord = text.slice(previousPosition, brk.position);
 
   if (brk.required) {
     // effectively saw a '\n' in text.
-    nextWord = nextWord.trim();
+    nextWord = keepEnd
+      ? nextWord.trimStart().replace(LINE_BREAK_END, "")
+      : trimBreakableEnd(nextWord.trimStart());
   }
 
   return new Word(nextWord, pathOptions);
@@ -1460,8 +1709,12 @@ function elideNonFittingText(textBox, line, word, pathOptions) {
  */
 function makeTextObject(lines, line, lineID, textBox, options = {}) {
   const lineHeight = line.height;
+  // Clipped text is measured with the spaces that end it, as in Wasm.
   const spaceSz =
-    options.lastLine && line.lastWord && line.lastWord.value.endsWith(" ")
+    textBox.wrap !== TextWrap.CLIP &&
+    options.lastLine &&
+    line.lastWord &&
+    line.lastWord.value.endsWith(" ")
       ? line.spaceWidth / 2
       : 0;
   let lid;
@@ -1501,12 +1754,20 @@ function makeTextObject(lines, line, lineID, textBox, options = {}) {
  * @param {Object[]} textObjects - The runs laid out so far; updated in place.
  * @param {number} wordCount - The words counted so far on the line.
  * @param {number} totalTextWidth - The text width counted so far on the line.
+ * @param {boolean} [ends=true] - Whether the line ends here. A line that a
+ *   later flowed run continues keeps the space after its last word.
  * @returns {number[]} The updated [wordCount, totalTextWidth].
  */
-function bindTextToLine(line, textObjects, wordCount, totalTextWidth) {
+function bindTextToLine(
+  line,
+  textObjects,
+  wordCount,
+  totalTextWidth,
+  ends = true,
+) {
   // Apply justification information to previous text objects.
   if (wordCount > 0) {
-    line.markLastWord();
+    if (ends) line.markLastWord();
     wordCount += line.words.length;
     totalTextWidth += line.textWidth;
 
@@ -1548,11 +1809,19 @@ function bindTextToLine(line, textObjects, wordCount, totalTextWidth) {
  * @param {Object} [textObject] - The text layout object.
  * @param {Object} pathOptions - The resolved text options.
  * @param {Object} [textBox] - The text box; line and baseline heights are set in place.
+ * @param {boolean} [atEnd=true] - Whether only spaces follow the object in
+ *   its call, so its line ends with the call when the call ends a flow.
  * @returns {{toWriteTextObjects: Object[], paragraphHeight: number}} The runs,
  *   including the carried-over flowed ones, and the paragraph height.
  * @throws {Error} If the font cannot be loaded.
  */
-function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
+function makeTextObjects(
+  self,
+  textObject = {},
+  pathOptions,
+  textBox = {},
+  atEnd = true,
+) {
   const toWriteTextObjects = [...self._previousTextObjects];
   let text =
     (textObject.prependValue ? textObject.prependValue : "") +
@@ -1602,6 +1871,8 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
   const lineMaxWidth = textBox.width
     ? textBox.width - textBox.paddingLeft - textBox.paddingRight
     : null;
+  // Clipped text keeps the spaces that end its lines, as in Wasm.
+  const keepLineEnd = textBox.wrap === TextWrap.CLIP;
   let remainderWidth = lineMaxWidth;
   let newLine;
   let last = 0;
@@ -1615,19 +1886,36 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
   let lineHeight =
     textHeight > textBox.lineHeight ? textHeight : textBox.lineHeight;
 
+  // An empty flowed run that leaves its line open has no words to join, so
+  // it is dropped and the next run starts that line instead of a new one.
+  while (
+    toWriteTextObjects.length > 0 &&
+    toWriteTextObjects[toWriteTextObjects.length - 1].text === "" &&
+    !toWriteTextObjects[toWriteTextObjects.length - 1].lineComplete &&
+    !toWriteTextObjects[toWriteTextObjects.length - 1].blankLine
+  ) {
+    toWriteTextObjects.pop();
+  }
+
   // When text flow is involved, there may be lines that are
   // incomplete. So need to determine previous line word count
   // and remove last line marks because more text is being processed.
   if (toWriteTextObjects.length > 0) {
     let lineWidth = 0;
-    let spaceSz = 0;
     const end = toWriteTextObjects.length - 1;
     const previousLine = toWriteTextObjects[end];
     let lineComplete, fini;
 
-    if (text === "" && !self._flow && !textObject.lineBreak) {
+    if (
+      !self._flow &&
+      !textObject.lineBreak &&
+      (text === "" || (!pathOptions.html && /^[^\S\n]+$/.test(text)))
+    ) {
       // turning off flow with empty text so
       previousLine.lastLine = true; // need to make previous line, the last.
+      // The flow's line ends with its last run with text, as when a run with
+      // text ends the flow.
+      if (!previousLine.lineComplete) trimLineEnd(toWriteTextObjects, end);
     }
 
     for (let i = end; i >= 0; i--) {
@@ -1637,26 +1925,27 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
       if (textObj.lineID !== previousLine.lineID) {
         break;
       }
-      spaceSz = textObj.spaceWidth;
       textLine = textObj.text + textLine;
       totalTextWidth += textObj.textWidth;
-      lineWidth += textObj.lineWidth;
+      // Each run is drawn after the one before it, plus a space after a run
+      // that ends with one.
+      lineWidth +=
+        textObj.lineWidth +
+        (textObj.text.endsWith(" ") ? textObj.spaceWidth : 0);
       if (i === end) {
         fini = lineComplete = textObj.lineComplete;
       } else {
         fini = textObj.lineComplete;
       }
-      textObj.wordsInLine[textObj.wordsInLine.length - 1].lastWord(fini);
+      // An empty flowed run has no words.
+      textObj.wordsInLine[textObj.wordsInLine.length - 1]?.lastWord(fini);
     }
 
     if (lineComplete) {
       totalTextWidth = 0;
     } else if (textLine) {
       wordCount = textLine.trim().split(/\s+/).length;
-      if (!textLine.endsWith(" ")) {
-        spaceSz = 0;
-      }
-      remainderWidth = lineMaxWidth - lineWidth - spaceSz;
+      remainderWidth = lineMaxWidth - lineWidth;
     }
   }
 
@@ -1664,7 +1953,7 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
   newLine.indent(indent);
 
   while (bk) {
-    let word = nextWord(text, bk, last, pathOptions);
+    let word = nextWord(text, bk, last, pathOptions, keepLineEnd);
 
     if (newLine.canFit(word)) {
       newLine.addWord(word);
@@ -1678,12 +1967,18 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
           // and mark last word of previous line in case justifying.
           wordCount = 0;
           totalTextWidth = 0;
+          trimLineEnd(toWriteTextObjects, toWriteTextObjects.length - 1);
           markLineComplete(toWriteTextObjects);
+          // The word wraps, so an HTML run's first line is a new line, not
+          // the open one it would have continued.
+          lineID = newLine.lineID;
         }
       } else {
         // remove any trailing space on previous word so right justification works appropriately
         if (previousWord && textBox.wrap === TextWrap.AUTO) {
-          newLine.replaceLastWord(previousWord.value.trim());
+          newLine.replaceLastWord(
+            trimBreakableEnd(previousWord.value.trimStart()),
+          );
         }
 
         [wordCount, totalTextWidth] = bindTextToLine(
@@ -1706,6 +2001,12 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
             }),
           ),
         );
+        // The line may end with this run's spaces, after earlier runs.
+        // Clipped and ellipsized lines continue with the word that does
+        // not fit, so they keep the space before it.
+        if (textBox.wrap === TextWrap.AUTO) {
+          trimLineEnd(toWriteTextObjects, toWriteTextObjects.length - 1);
+        }
         wordCount = 0;
         totalTextWidth = 0;
       }
@@ -1743,7 +2044,14 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
             .join("");
           newLine.addWord(new Word(space, pathOptions));
         }
-        newLine.addWord(word);
+        // A wrapped line starts with its first word, without the spaces
+        // that started the run before it wrapped.
+        const wrapped = word.value.replace(/^[^\S\u00a0]+/, "");
+        if (wrapped) {
+          newLine.addWord(
+            wrapped === word.value ? word : new Word(wrapped, pathOptions),
+          );
+        }
       }
     }
 
@@ -1773,7 +2081,7 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
             Object.assign({ lineComplete: true, lastLine: true }, lineOpts),
           ),
         );
-        markLineComplete(toWriteTextObjects);
+        markLineComplete(toWriteTextObjects, null, keepLineEnd);
         newLine = new Line(lineMaxWidth, lineHeight, size, pathOptions);
       }
     }
@@ -1793,6 +2101,7 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
       toWriteTextObjects,
       wordCount,
       totalTextWidth,
+      !self._flow && atEnd,
     );
 
     toWriteTextObjects.push(
@@ -1821,28 +2130,82 @@ function makeTextObjects(self, textObject = {}, pathOptions, textBox = {}) {
   };
 }
 
+/**
+ * Drop the spaces that end a line, back to its last word: the line's runs of
+ * only spaces become empty, and the run with its last word loses the spaces
+ * after it, as the last run of a line does. Non-breaking spaces stay.
+ * @private
+ * @param {Object[]} textObjs - The laid-out runs; the line's are updated in place.
+ * @param {number} end - The index of the line's last run.
+ * @returns {void}
+ */
+function trimLineEnd(textObjs, end) {
+  const { lineID } = textObjs[end];
+  for (let i = end; i >= 0; i--) {
+    const run = textObjs[i];
+    if (run.lineID !== lineID || (i < end && run.lineComplete)) break;
+    const lastWord = run.wordsInLine[run.wordsInLine.length - 1];
+    const trimmed = trimBreakableEnd(run.text);
+    if (lastWord && trimmed !== run.text) {
+      lastWord.lastWord();
+      run.text = trimmed;
+      run.lineWidth = trimmed
+        ? new Word(trimmed, run.writeOptions).dimensions.xMax
+        : 0;
+    }
+    if (run.text) break;
+  }
+}
+
 /**
  * Mark the last run as ending its line: trim it, mark its last word and
  * optionally move the next line down.
  * @private
  * @param {Object[]} toWriteTextObjects - The runs; the last one is updated.
  * @param {number|null} [lines=null] - The line offset for the next line.
+ * @param {boolean} [keepEnd=false] - Whether the run keeps the spaces that
+ *   end it, as clipped text does.
  * @returns {void}
  */
-function markLineComplete(toWriteTextObjects, lines = null) {
+function markLineComplete(toWriteTextObjects, lines = null, keepEnd = false) {
   // Get last element in text objects and mark it.
   const textObj = toWriteTextObjects[toWriteTextObjects.length - 1];
   const lastWordIdx = textObj.wordsInLine.length - 1;
+  const alreadyComplete = textObj.lineComplete;
 
-  textObj.wordsInLine[lastWordIdx].lastWord();
-  textObj.text = textObj.text.trim();
+  // An empty flowed run has no words.
+  textObj.wordsInLine[lastWordIdx]?.lastWord();
+  textObj.text = textObj.text.trimStart();
+  if (!keepEnd) textObj.text = trimBreakableEnd(textObj.text);
   textObj.lineComplete = true;
 
   if (lines) {
-    textObj.lineOffset = lines;
+    // Ending a line that already ended adds blank lines, as one movedown()
+    // with the summed count does.
+    textObj.lineOffset = alreadyComplete
+      ? (textObj.lineOffset || 1) + lines
+      : lines;
   }
 }
 
+/**
+ * Draw the open text flow, if any, as `text("", { flow: false })` would.
+ * text() with coordinates, table(), and endPage() call it, so flowed text
+ * that is never ended explicitly is still drawn.
+ * @name _flushTextFlow
+ * @function
+ * @memberof Recipe#
+ * @private
+ * @returns {Recipe} The recipe instance.
+ * @throws {Error} If an overflow callback names an undefined layout, or a font cannot be loaded.
+ */
+exports._flushTextFlow = function _flushTextFlow() {
+  if (this._flow && this.pageContext && this._previousTextObjects?.length) {
+    this.text("", { flow: false });
+  }
+  return this;
+};
+
 /** Move text positioning down N lines in text box
  * @name movedown
  * @function