@jasy/pdf 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/renderer/text-renderer.js

@@ -3,7 +3,7 @@ import { HorizontalAlignment } from "../elements/pdf-element.js";
 import { VERTICAL_TEXT_SHIFT } from "../elements/text-element.js";
 import { isEmojiCodePoint } from "../text/emoji-codepoints.js";
 import { emojiImageNode } from "./emoji-image.js";
-import { MAX_SPACE_SHRINK, breakSegmentsIntoLines, } from "../text/line-breaker.js";
+import { MAX_SPACE_SHRINK, breakSegmentsIntoLines, lineGaps, runStyleOf, } from "../text/line-breaker.js";
 import { lineBoxForSegmentLine } from "../text/line-metrics.js";
 import { runAdvance } from "../text/advance.js";
 import { visualRunsOf } from "../text/bidi.js";
@@ -21,12 +21,12 @@ function spokenText(pieces) {
 }
 export class TextRenderer {
     static async render(textElement, objectManager, scope) {
-        const { x, y, width, fontSize, color, spans, fontFamily, fontStyle, textAlignment, maxLines, overflow, lineHeight, underline, strikethrough, skipInk, letterSpacing, direction, wordSpacing, textIndent, ligatures, role, breaking, } = textElement.getProps();
+        const { x, y, width, color, spans, textAlignment, maxLines, overflow, lineHeight, underline, strikethrough, skipInk, direction, textIndent, role, breaking, } = textElement.getProps();
         // Component -> display list: the lines come from the one breaker, positioning stays here; the
         // backend turns each run into BT/Tf/Td/Tj/ET.
-        const { runs, links, decorations, linkGroups } = TextRenderer._buildRuns(spans, breaking, fontSize, fontFamily, fontStyle, objectManager, width ?? Number.NaN, textAlignment, color, 
+        const { runs, links, decorations, linkGroups } = TextRenderer._buildRuns(spans, breaking, objectManager, width ?? Number.NaN, textAlignment, color, 
         // Every run, decoration and link rect derives from this one absolute origin.
-        scope.origin.x + (x ?? 0), scope.origin.y + (y ?? 0), maxLines, overflow, lineHeight, underline, strikethrough, skipInk, letterSpacing, direction, wordSpacing, textIndent, ligatures);
+        scope.origin.x + (x ?? 0), scope.origin.y + (y ?? 0), maxLines, overflow, lineHeight, underline, strikethrough, skipInk, direction, textIndent);
         // Accessible tagging: this whole text block is one structure element (a paragraph P, or a heading
         // from `role`); each run's text lands under it. Emoji sub-nodes produced below stay untagged (drawn
         // as artifacts). Keyed by structId so a block split across pages stays one element.
@@ -233,7 +233,7 @@ export class TextRenderer {
     // only the output form changed from PDF strings to `TextRun`s.
     static _buildRuns(content, 
     // How the text is broken - the element's own settings, the ones it was measured with.
-    breaking, fontSize, fontFamily, fontStyle, objectManager, maxWidth, textAlignment, color, initialX, yPosition, maxLines, overflow, lineHeight, underline = false, strikethrough = false, skipInk = false, letterSpacing = 0, direction = "ltr", wordSpacing = 0, textIndent = 0, ligatures = true) {
+    breaking, objectManager, maxWidth, textAlignment, color, initialX, yPosition, maxLines, overflow, lineHeight, underline = false, strikethrough = false, skipInk = false, direction = "ltr", textIndent = 0) {
         const runs = [];
         // /Link annotation rects for any `href` spans, collected as we place segments. Empty for the
         // common (no-href) case, so plain text keeps producing exactly the runs it did before.
@@ -269,20 +269,18 @@ export class TextRenderer {
          * Spaces are stretched by moving the pen, not by the `Tw` operator: `Tw` applies only to the
          * single byte 32, so an embedded (Identity-H) font would ignore it entirely.
          */
-        const justifyExtra = (line, naturalWidth, isLast, indent = 0) => {
+        const justifyExtra = (segments, naturalWidth, isLast, indent = 0) => {
             if (align !== HorizontalAlignment.justify)
                 return 0;
-            const gaps = [...line].filter((c) => c === " ").length;
+            const { gaps, width: gapWidth } = lineGaps(segments, breaking, objectManager);
             if (gaps === 0)
                 return 0;
             const slack = maxWidth - indent - naturalWidth;
             // Negative slack is real now: the breaker keeps a word when the line can be SQUEEZED to hold
             // it, so justification has to deliver that squeeze. The floor is the same limit the breaker
-            // used, which is what stops a line it never promised from being crushed.
-            // A space as the breaker counts it: word-spacing included.
-            const spaceWidth = runAdvance(objectManager, " ", { fontFamily, fontSize, fontStyle }, letterSpacing) +
-                wordSpacing;
-            const extra = Math.max(slack / gaps, -spaceWidth * MAX_SPACE_SHRINK);
+            // used - the gaps' widths, summed - which is what stops a line it never promised from being
+            // crushed.
+            const extra = Math.max(slack / gaps, (-gapWidth * MAX_SPACE_SHRINK) / gaps);
             // The last line is never STRETCHED - the rule print and CSS follow. It may still be SQUEEZED:
             // the breaker was allowed to pack it that way, and drawing it loose would push it out of its box.
             return isLast ? Math.min(0, extra) : extra;
@@ -323,7 +321,7 @@ export class TextRenderer {
         };
         // The decoration strokes for one drawn run, at the geometry ITS OWN font declares. A mixed-size
         // line therefore gets a thicker line under the bigger span, which is what a browser does too.
-        const decorate = (text, runX, runWidth, baselineY, family, style, size, runColor, wantsUnderline, wantsStrikethrough, runLetterSpacing) => {
+        const decorate = (text, runX, runWidth, baselineY, family, style, size, runColor, wantsUnderline, wantsStrikethrough, runLetterSpacing, runSkipInk) => {
             if ((!wantsUnderline && !wantsStrikethrough) || runWidth <= 0)
                 return;
             const metrics = objectManager.getFontDecoration(family, style);
@@ -340,7 +338,7 @@ export class TextRenderer {
             };
             if (wantsUnderline) {
                 const stroke = underlineStroke(metrics, size, baselineY);
-                for (const [from, to] of underlineSegments(text, runWidth, baselineY, size, family, style, stroke, runLetterSpacing)) {
+                for (const [from, to] of underlineSegments(text, runWidth, baselineY, size, family, style, stroke, runLetterSpacing, runSkipInk)) {
                     push(from, to, stroke);
                 }
             }
@@ -352,8 +350,8 @@ export class TextRenderer {
         };
         // The x-ranges the underline actually draws. Without `skipInk` that is the whole run; with it,
         // the descenders are cut out of it (which needs the real outlines, i.e. an embedded font).
-        const underlineSegments = (text, runWidth, baselineY, size, family, style, stroke, runLetterSpacing) => {
-            if (!skipInk)
+        const underlineSegments = (text, runWidth, baselineY, size, family, style, stroke, runLetterSpacing, runSkipInk) => {
+            if (!runSkipInk)
                 return [[0, runWidth]];
             if (!objectManager.isCustomFont(family, style)) {
                 throw new Error(`skipInk needs an embedded font, but "${family}" is a standard-14 font whose glyph outlines ` +
@@ -372,10 +370,10 @@ export class TextRenderer {
          * GLYPHS for an rtl run. A font that does not shape keeps the old path exactly: draw the visual
          * text, no glyph list, byte-identical output.
          */
-        const shapedPiece = (part, family, style) => {
+        const shapedPiece = (part, family, style, runLigatures) => {
             // The run's OWN setting, not the default: measuring asked with it (`runAdvance` -> RunFont), and
             // drawing has to ask the same question or the line is measured one width and drawn another.
-            const shaped = objectManager.shapeText(part.logical, family, style, ligatures ? undefined : []);
+            const shaped = objectManager.shapeText(part.logical, family, style, runLigatures ? undefined : []);
             if (!shaped)
                 return { text: part.text };
             const ordered = part.rtl ? [...shaped].reverse() : shaped;
@@ -391,8 +389,7 @@ export class TextRenderer {
             let x = initialX + indent + alignmentOffset(line.width, indent);
             // Word-spacing is a per-gap advance just like the justification slack, so it rides the same
             // mechanism: `Tw` would reach only the single byte 32 and miss every embedded font.
-            const extra = wordSpacing +
-                justifyExtra(line.segments.map((seg) => seg.content).join(""), line.width, isLast, indent);
+            const justify = justifyExtra(line.segments, line.width, isLast, indent);
             // Across span boundaries, so a Hebrew span is ordered against its neighbours rather than inside
             // itself. Each run keeps the segment it came from, and with it that span's style.
             const ordered = visualRunsOf(line.segments.map((segment) => ({ text: segment.content, source: segment })), direction);
@@ -401,11 +398,11 @@ export class TextRenderer {
                 if (part.text === "")
                     return;
                 const segment = part.source;
-                const family = segment.fontFamily || fontFamily;
-                const size = segment.fontSize || fontSize;
-                const style = segment.fontStyle || fontStyle;
-                const segLetterSpacing = segment.letterSpacing ?? letterSpacing;
-                const piece = shapedPiece(part, family, style);
+                const run = runStyleOf(segment, breaking);
+                const { fontFamily: family, fontSize: size, fontStyle: style } = run.font;
+                const segLetterSpacing = run.letterSpacing;
+                const runLigatures = run.font.ligatures ?? true;
+                const piece = shapedPiece(part, family, style, runLigatures);
                 const runText = piece.text;
                 const runColor = segment.fontColor || color;
                 // `vertical-align`: this run alone leaves the line's baseline. Its own decoration and link box
@@ -413,7 +410,7 @@ export class TextRenderer {
                 const shift = VERTICAL_TEXT_SHIFT[segment.verticalAlign ?? "baseline"] * size;
                 const runY = lineY - shift;
                 const firstRun = runs.length;
-                const drawn = emitPiece(piece, (word) => shapedPiece({ text: word, logical: word, rtl: part.rtl }, family, style), part.rtl, x, extra, {
+                const drawn = emitPiece(piece, (word) => shapedPiece({ text: word, logical: word, rtl: part.rtl }, family, style, runLigatures), part.rtl, x, run.wordSpacing + justify, {
                     y: runY,
                     fontFamily: family,
                     fontStyle: style,
@@ -422,8 +419,8 @@ export class TextRenderer {
                     ...(segLetterSpacing ? { letterSpacing: segLetterSpacing } : {}),
                 }, 
                 // `ligatures` is part of the font: the advances must be the glyphs that are drawn.
-                { fontFamily: family, fontSize: size, fontStyle: style, ligatures }, segLetterSpacing);
-                decorate(runText, x, drawn, runY, family, style, size, runColor, segment.underline ?? underline, segment.strikethrough ?? strikethrough, segLetterSpacing);
+                run.font, segLetterSpacing);
+                decorate(runText, x, drawn, runY, family, style, size, runColor, segment.underline ?? underline, segment.strikethrough ?? strikethrough, segLetterSpacing, segment.skipInk ?? skipInk);
                 // An href/to span becomes a /Link annotation over exactly this run's glyph box: from its own
                 // ascent above the baseline down to its own descender. A span wrapped across lines yields
                 // one rect per line.

package/dist/svg/index.d.ts

@@ -7,7 +7,7 @@ export interface SvgTarget {
     width: number;
     height: number;
 }
-/** The intrinsic size of an SVG: its `width`/`height`, else its `viewBox`. */
+/** The intrinsic size of an SVG in points: its `width`/`height`, else its `viewBox`, else 300 x 150 px. */
 export interface SvgSize {
     width: number;
     height: number;

package/dist/svg/index.js

@@ -2,6 +2,7 @@ import { parseXml } from "./xml.js";
 import { SvgParseError, SvgUnsupportedError } from "./errors.js";
 import { IDENTITY, isIdentity, multiply, parseTransform } from "./transform.js";
 import { shapeOf } from "./shapes.js";
+import { length } from "./units.js";
 import { transformCommands } from "../vector/path.js";
 import { declarationsFor, parseStylesheet } from "./css.js";
 import { ROOT_STYLE, isPaintRef, cascadedReader, paintAlpha, resolveStyle, } from "./style.js";
@@ -72,6 +73,21 @@ function stylesheetOf(node, out = [], depth = 0) {
 const elements = (node) => node.type === "element"
     ? node.children.filter((child) => child.type === "element")
     : [];
+/** SVG's user unit is the CSS px: 1/96 inch, so 0.75pt - the resolution an image without one gets too. */
+const PT_PER_USER_UNIT = 72 / 96;
+/** The size of a replaced element that declares none (CSS). */
+const DEFAULT_VIEWPORT = { width: 300, height: 150 };
+/**
+ * A root `width`/`height` in user units, or `undefined` when it gives none. A percentage sizes against a
+ * container, which a drawing on its own does not have - a browser treats it as not given, and so do we.
+ */
+function rootLength(value, name) {
+    const text = value?.trim() ?? "";
+    if (text === "" || text.endsWith("%"))
+        return undefined;
+    const n = length(text, `the root <svg> ${name}`, NaN);
+    return n > 0 ? n : undefined;
+}
 /**
  * Reads the root `<svg>` and returns the matrix that maps its user space onto `target`, plus the
  * intrinsic size. The `viewBox` scales UNIFORMLY and centres - SVG's default `preserveAspectRatio`
@@ -85,11 +101,16 @@ function rootMapping(root, target) {
         .split(/[\s,]+/)
         .map(Number);
     const hasBox = box.length === 4 && box.every((n) => Number.isFinite(n)) && box[2] > 0 && box[3] > 0;
-    const declaredW = Number(attributes["width"]);
-    const declaredH = Number(attributes["height"]);
+    // The viewport in user units. One side given and a viewBox: the other follows its ratio, as in a
+    // browser. Nothing to go on: CSS's 300 x 150 for a replaced element without a size.
+    const w = rootLength(attributes["width"], "width");
+    const h = rootLength(attributes["height"], "height");
+    const ratio = hasBox ? box[2] / box[3] : undefined;
+    const userWidth = w ?? (h !== undefined && ratio ? h * ratio : hasBox ? box[2] : DEFAULT_VIEWPORT.width);
+    const userHeight = h ?? (w !== undefined && ratio ? w / ratio : hasBox ? box[3] : DEFAULT_VIEWPORT.height);
     const size = {
-        width: Number.isFinite(declaredW) && declaredW > 0 ? declaredW : hasBox ? box[2] : target.width,
-        height: Number.isFinite(declaredH) && declaredH > 0 ? declaredH : hasBox ? box[3] : target.height,
+        width: userWidth * PT_PER_USER_UNIT,
+        height: userHeight * PT_PER_USER_UNIT,
     };
     // We always scale uniformly and centre, which is SVG's default "xMidYMid meet". Any other value
     // moves or crops the drawing, so it is named rather than quietly ignored.
@@ -97,7 +118,7 @@ function rootMapping(root, target) {
     if (par !== "" && !/^xMidYMid(\s+meet)?$/.test(par)) {
         throw new SvgUnsupportedError(`preserveAspectRatio="${par}"`, 'Only the default "xMidYMid meet" is honoured. Size the drawing through width/height instead.');
     }
-    const [vx, vy, vw, vh] = hasBox ? box : [0, 0, size.width, size.height];
+    const [vx, vy, vw, vh] = hasBox ? box : [0, 0, userWidth, userHeight];
     const scale = Math.min(target.width / vw, target.height / vh);
     const dx = target.x + (target.width - vw * scale) / 2;
     const dy = target.y + (target.height - vh * scale) / 2;

package/dist/svg/style.js

@@ -1,5 +1,5 @@
 import { Color } from "../common/color.js";
-import { toColor } from "../api/color.js";
+import { toColor } from "../common/color-input.js";
 import { SvgParseError, SvgUnsupportedError } from "./errors.js";
 import { length, ratio } from "./units.js";
 export const isPaintRef = (paint) => paint !== undefined && !(paint instanceof Color);

package/dist/text/line-breaker.d.ts

@@ -42,6 +42,18 @@ export interface RunDefaults {
 }
 /** Everything the breaker reads besides the spans: what they inherit, and how lines end. */
 export type SegmentDefaults = RunDefaults & LineOptions;
+/** How one span is measured, broken and drawn. */
+export interface RunStyle {
+    font: RunFont;
+    letterSpacing: number;
+    wordSpacing: number;
+    splitting: WordSplitting;
+}
+/**
+ * A span's run style: what it sets itself, else what the paragraph sets. The ONE place a span inherits
+ * it, so breaking, drawing and the element's own sizing ask the same question.
+ */
+export declare function runStyleOf(seg: TextSegment, defaults: SegmentDefaults): RunStyle;
 /** What happens to text beyond `maxLines`: `"clip"` drops it, `"ellipsis"` ends the last kept line
  *  with an ellipsis. Mirrors Flutter's `TextOverflow`. */
 export type TextOverflow = "clip" | "ellipsis";
@@ -53,7 +65,18 @@ export interface SegmentLine {
     /** Where the line begins in the source: the span, and the offset in that span's content. */
     start: SegmentPosition;
     end: LineEnd;
+    /** How far the line, as drawn, runs past the room it was broken in: above 0 only for a piece that
+     *  could not break. */
+    overrun: number;
 }
+/**
+ * A line's spaces, each as wide as its own span makes it - what justification spreads the slack over,
+ * and squeezes by at most `shrink` of their width.
+ */
+export declare function lineGaps(segments: TextSegment[], defaults: SegmentDefaults, metrics: FontMetrics): {
+    gaps: number;
+    width: number;
+};
 export interface SegmentPosition {
     segment: number;
     offset: number;

package/dist/text/line-breaker.js

@@ -14,11 +14,54 @@ import { headAt, hyphenBreaks, mayBreak, NO_BREAKS } from "./hyphen-breaks.js";
  * Only justified text uses it: under any other alignment a squeezed line would simply overflow.
  */
 export const MAX_SPACE_SHRINK = 1 / 4;
+/**
+ * A span's run style: what it sets itself, else what the paragraph sets. The ONE place a span inherits
+ * it, so breaking, drawing and the element's own sizing ask the same question.
+ */
+export function runStyleOf(seg, defaults) {
+    return {
+        font: {
+            fontFamily: seg.fontFamily || defaults.fontFamily,
+            fontSize: seg.fontSize || defaults.fontSize,
+            fontStyle: seg.fontStyle || defaults.fontStyle,
+            ligatures: seg.ligatures ?? defaults.ligatures,
+        },
+        letterSpacing: seg.letterSpacing ?? defaults.letterSpacing ?? 0,
+        wordSpacing: seg.wordSpacing ?? defaults.wordSpacing ?? 0,
+        splitting: {
+            breakWord: seg.breakWord ?? defaults.splitting?.breakWord,
+            hyphenate: seg.hyphenate ?? defaults.splitting?.hyphenate,
+        },
+    };
+}
 /** Three ASCII dots, NOT the "…" glyph (U+2026): plain dots encode in every font - standard-14
  *  (WinAnsi) and any embedded TTF - whereas U+2026 needs a glyph the font may not carry. */
 const ELLIPSIS = "...";
 /** The spaces that end a line: they hang past its edge, neither drawn nor in its width. */
 const TRAILING_SPACES = / +$/;
+/**
+ * A line's spaces, each as wide as its own span makes it - what justification spreads the slack over,
+ * and squeezes by at most `shrink` of their width.
+ */
+export function lineGaps(segments, defaults, metrics) {
+    let gaps = 0;
+    let width = 0;
+    for (const seg of segments) {
+        const spaces = [...seg.content].filter((c) => c === " ").length;
+        if (spaces === 0)
+            continue;
+        const run = runStyleOf(seg, defaults);
+        gaps += spaces;
+        width += spaces * (runAdvance(metrics, " ", run.font, run.letterSpacing) + run.wordSpacing);
+    }
+    return { gaps, width };
+}
+/** How far `line` runs past `room` once a justified line has been squeezed as far as it may be. */
+function overrunOf(line, room, defaults, metrics) {
+    const shrink = defaults.shrink ?? 0;
+    const squeeze = shrink > 0 ? lineGaps(line.segments, defaults, metrics).width * shrink : 0;
+    return line.width - squeeze - room;
+}
 /**
  * The width of `text` set as ONE line, accumulated in EXACTLY the order the breaker builds a line: the
  * first word, then `+ (space + word)` each time. The order matters because floating-point
@@ -62,9 +105,11 @@ export function breakStringIntoLines(text, fontFamily, fontSize, fontStyle, maxW
  */
 export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, maxLines, overflow) {
     const lines = [];
-    const { indent = 0, wordSpacing = 0, shrink = 0 } = defaults;
+    const { indent = 0, shrink = 0 } = defaults;
     let width = 0;
-    let gaps = 0; // spaces on the line, which is what a justified line can squeeze
+    // The spaces on the line, summed - what a justified line can squeeze. Summed, not counted: each space
+    // is as wide as its own span makes it.
+    let gapWidth = 0;
     let lineSegments = [];
     let combined = "";
     let lineStart = { segment: 0, offset: 0 }; // where the current line begins
@@ -94,13 +139,8 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
         if (glued &&
             last?.content.endsWith(SOFT_HYPHEN) &&
             !withoutSoftHyphens(last.content).endsWith("-")) {
-            const font = {
-                fontFamily: last.fontFamily || defaults.fontFamily,
-                fontSize: last.fontSize || defaults.fontSize,
-                fontStyle: last.fontStyle || defaults.fontStyle,
-                ligatures: defaults.ligatures,
-            };
-            width += runAdvance(metrics, HYPHEN, font, last.letterSpacing ?? defaults.letterSpacing ?? 0);
+            const run = runStyleOf(last, defaults);
+            width += runAdvance(metrics, HYPHEN, run.font, run.letterSpacing);
             segs = segs.map((seg, i) => i === lastIndex ? { ...seg, content: withoutSoftHyphens(seg.content) + HYPHEN } : seg);
             ends = "hyphen";
         }
@@ -117,11 +157,14 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
             ? { ...seg, content: withoutSoftHyphens(seg.content) }
             : seg);
         const drawn = stripped.filter((seg) => seg.content !== "");
+        const kept = drawn.length > 0 ? drawn : stripped.slice(0, 1);
+        const room = lines.length === 0 ? maxWidth - indent : maxWidth;
         lines.push({
-            segments: drawn.length > 0 ? drawn : stripped.slice(0, 1),
+            segments: kept,
             width,
             start: lineStart,
             end: ends,
+            overrun: overrunOf({ segments: kept, width }, room, defaults, metrics),
         });
     };
     // Where each piece of the line begins in the source: a word that runs across a span boundary can move
@@ -138,13 +181,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
         let ink = 0;
         let open = false;
         for (const piece of pieces) {
-            const font = {
-                fontFamily: piece.fontFamily || defaults.fontFamily,
-                fontSize: piece.fontSize || defaults.fontSize,
-                fontStyle: piece.fontStyle || defaults.fontStyle,
-                ligatures: defaults.ligatures,
-            };
-            const spacing = piece.letterSpacing ?? defaults.letterSpacing ?? 0;
+            const { font, letterSpacing: spacing, wordSpacing } = runStyleOf(piece, defaults);
             const space = runAdvance(metrics, " ", font, spacing) + wordSpacing;
             piece.content.split(" ").forEach((word, i) => {
                 total = total + ((open && i > 0 ? space : 0) + runAdvance(metrics, word, font, spacing));
@@ -195,16 +232,8 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
         return null;
     };
     segments.forEach((segment, segmentIndex) => {
-        const family = segment.fontFamily || defaults.fontFamily;
-        const size = segment.fontSize || defaults.fontSize;
-        const style = segment.fontStyle || defaults.fontStyle;
-        const letterSpacing = segment.letterSpacing ?? defaults.letterSpacing ?? 0;
-        const font = {
-            fontFamily: family,
-            fontSize: size,
-            fontStyle: style,
-            ligatures: defaults.ligatures,
-        };
+        const { font, letterSpacing, wordSpacing, splitting } = runStyleOf(segment, defaults);
+        const family = font.fontFamily;
         const spaceWidth = runAdvance(metrics, " ", font, letterSpacing) + wordSpacing;
         const at = (offset) => ({ segment: segmentIndex, offset });
         // A `\n` is a HARD break: close the line where it sits, whatever else was already on it, and start
@@ -215,7 +244,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
             if (paragraphIndex > 0) {
                 close(lineSegments, ink, "hard");
                 width = 0;
-                gaps = 0;
+                gapWidth = 0;
                 open = false;
                 inked = false;
                 ink = 0;
@@ -242,10 +271,63 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                 lineStart = glued.from;
                 width = carried.width;
                 ink = carried.ink;
-                gaps = 0;
+                gapWidth = 0;
                 open = true;
                 inked = true;
             };
+            /**
+             * No regular break before a word glued to the line, and it does not fit: Chrome's `overflow-wrap`
+             * emergency break, where a break after a character is allowed by THAT character's own setting.
+             * As much of the word as fits stays here if its span may split; else the line ends at the span
+             * boundary if the span before it may split; else one character is forced on if this span may
+             * split at all. `false`: none applies, and the word overflows on this line as before.
+             */
+            const emergencyBreak = (word, wordAt, room) => {
+                let before;
+                for (let i = lineSegments.length - 1; i >= 0 && !before; i--)
+                    if (lineSegments[i].content !== "")
+                        before = lineSegments[i];
+                const beforeMaySplit = before !== undefined && runStyleOf(before, defaults).splitting.breakWord === true;
+                let head = null; // how much of the word's source stays on this line
+                if (splitting.breakWord) {
+                    const split = splitLongWord(word, room - width, font, metrics, letterSpacing, {
+                        breakWord: true,
+                    });
+                    // A glyph forced on past the edge is the last resort, below a break at the span boundary.
+                    const fits = split && runAdvance(metrics, split[0].text, font, letterSpacing) <= room - width;
+                    if (fits)
+                        head = split[0].source;
+                }
+                if (head === null && beforeMaySplit) {
+                    close(lineSegments, ink, "split");
+                    startLine(wordAt);
+                    placeWord(word, wordAt, false);
+                    return true;
+                }
+                if (head === null && splitting.breakWord)
+                    head = String.fromCodePoint(word.codePointAt(0)).length;
+                if (head === null)
+                    return false;
+                combined += word.slice(0, head);
+                width += runAdvance(metrics, word.slice(0, head), font, letterSpacing);
+                ink = width;
+                lineSegments[lineSegments.length - 1].content = combined;
+                close(lineSegments, ink, "split");
+                startLine(wordAt + head);
+                placeWord(word.slice(head), wordAt + head, false);
+                return true;
+            };
+            /** An empty line, starting at source offset `startAt` in this segment. */
+            const startLine = (startAt) => {
+                lineSegments = [started({ ...segment, fontFamily: family, content: "" }, at(startAt))];
+                combined = "";
+                width = 0;
+                gapWidth = 0;
+                open = false;
+                inked = false;
+                ink = 0;
+                lineStart = at(startAt);
+            };
             // One word, placed at source offset `wordAt`; `joined`: a space joins it to the word before.
             const placeWord = (word, wordAt, joined) => {
                 const afterSpace = hung;
@@ -254,14 +336,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                 // one. It must not slip in behind the space it was written after, however narrow it is.
                 if (afterSpace && inked && word !== "") {
                     close(lineSegments, ink, "soft");
-                    lineSegments = [started({ ...segment, fontFamily: family, content: "" }, at(wordAt))];
-                    combined = "";
-                    width = 0;
-                    gaps = 0;
-                    open = false;
-                    inked = false;
-                    ink = 0;
-                    lineStart = at(wordAt);
+                    startLine(wordAt);
                 }
                 // Only a word that follows something on this line is joined to it by the space.
                 const joins = open && joined;
@@ -271,23 +346,14 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                 const room = lines.length === 0 ? maxWidth - indent : maxWidth;
                 // How much a JUSTIFIED line may be squeezed to keep one more word: the spaces already on the
                 // line plus the one that would join it, each giving up at most `shrink` of its width. Zero for
-                // every other alignment, where a squeezed line would simply overflow instead.
-                const squeeze = (gaps + (joins ? 1 : 0)) * spaceWidth * shrink;
+                // every other alignment, where a squeezed line would simply overflow instead. The drawing
+                // spreads the same total evenly over the gaps (`justifyExtra`).
+                const squeeze = (gapWidth + (joins ? spaceWidth : 0)) * shrink;
                 // A hyphen inside the word is a break opportunity, taken only when the whole word does not fit
                 // here - the same test, squeeze included, as below.
                 const fitsHere = (w) => !open ? w <= room : width + ((joins ? spaceWidth : 0) + w) - squeeze <= room;
                 const breaks = mayBreak(word) ? hyphenBreaks(word) : NO_BREAKS;
                 if (breaks.length > 0 && !fitsHere(wordWidth)) {
-                    const freshLine = (startAt) => {
-                        lineSegments = [started({ ...segment, fontFamily: family, content: "" }, at(startAt))];
-                        combined = "";
-                        width = 0;
-                        gaps = 0;
-                        open = false;
-                        inked = false;
-                        ink = 0;
-                        lineStart = at(startAt);
-                    };
                     let head = 0;
                     for (const k of breaks) {
                         if (!fitsHere(runAdvance(metrics, headAt(word, k), font, letterSpacing)))
@@ -306,7 +372,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                             lineSegments.push(started({ ...segment, fontFamily: family, content: "" }, at(wordAt)));
                         lineSegments[lineSegments.length - 1].content = combined;
                         close(lineSegments, ink, endAt(word, head));
-                        freshLine(wordAt + head);
+                        startLine(wordAt + head);
                         placeWord(word.slice(head), wordAt + head, false);
                         return;
                     }
@@ -319,22 +385,33 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                         }
                         if (glued !== null) {
                             close(lineSegments, ink, "soft", !joined);
-                            freshLine(wordAt);
+                            startLine(wordAt);
                             placeWord(word, wordAt, false);
                             return;
                         }
                     }
                     placeWord(headAt(word, breaks[0]), wordAt, joined);
                     close(lineSegments, ink, endAt(word, breaks[0]));
-                    freshLine(wordAt + breaks[0]);
+                    startLine(wordAt + breaks[0]);
                     placeWord(word.slice(breaks[0]), wordAt + breaks[0], false);
                     return;
                 }
+                // A word glued to the line - it continues one from an earlier span - that does not fit here.
+                if (!joined && !afterSpace && inked && word !== "" && !fitsHere(wordWidth)) {
+                    const glued = gluedTail(word, afterSpace);
+                    if (glued && glued.moved.length > 0) {
+                        carryOver(glued, wordAt);
+                        placeWord(word, wordAt, false);
+                        return;
+                    }
+                    if (glued === null && emergencyBreak(word, wordAt, room))
+                        return;
+                }
                 const splitRoom = lines.length === 0 && !open ? room : maxWidth;
                 // A word too wide for the box is split into pieces that fit (hyphenation first, break-word as
                 // the floor). Each finished piece closes the line it sits on, keeping this segment's style. Off
                 // by default, so a document that asks for neither never gets here.
-                const split = splitLongWord(word, splitRoom, font, metrics, letterSpacing, defaults.splitting ?? {});
+                const split = splitLongWord(word, splitRoom, font, metrics, letterSpacing, splitting);
                 if (split) {
                     // Close whatever is already on the line FIRST: the pieces were measured against the full box,
                     // not against what is left of this line.
@@ -356,7 +433,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                     lineStart = at(pieceAt);
                     combined = split[split.length - 1].text;
                     width = runAdvance(metrics, combined, font, letterSpacing);
-                    gaps = 0;
+                    gapWidth = 0;
                     open = true;
                     inked = true;
                     ink = width;
@@ -391,7 +468,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                         close(lineSegments, ink, "soft", !joined);
                         lineStart = at(wordAt);
                         width = wordWidth;
-                        gaps = 0;
+                        gapWidth = 0;
                         ink = wordWidth;
                         inked = true;
                         lineSegments = [];
@@ -403,7 +480,7 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
                 combined += joins ? " " + word : word;
                 width = candidate;
                 if (joins)
-                    gaps += 1;
+                    gapWidth += spaceWidth;
                 open = true;
                 if (word !== "") {
                     ink = width;
@@ -436,7 +513,9 @@ export function breakSegmentsIntoLines(segments, defaults, maxWidth, metrics, ma
         if (overflow === "ellipsis") {
             // The same room that line was broken against: the first one lost the indent to it.
             const room = kept.length === 1 ? maxWidth - indent : maxWidth;
-            ellipsizeLine(kept[kept.length - 1], defaults, room, metrics);
+            const last = kept[kept.length - 1];
+            ellipsizeLine(last, defaults, room, metrics);
+            last.overrun = overrunOf(last, room, defaults, metrics);
         }
     }
     // A piece of a paragraph split across pages draws only its own lines.
@@ -474,18 +553,16 @@ function ellipsizeLine(line, defaults, maxWidth, metrics) {
     const segs = line.segments;
     if (segs.length === 0)
         return;
-    const lsOf = (seg) => seg.letterSpacing ?? defaults.letterSpacing ?? 0;
     // Summed word by word, as the breaker sums a line - one owner for a line's width.
-    const widthOf = (seg) => singleLineWidth(seg.content, {
-        fontFamily: seg.fontFamily || defaults.fontFamily,
-        fontSize: seg.fontSize || defaults.fontSize,
-        fontStyle: seg.fontStyle || defaults.fontStyle,
-        ligatures: defaults.ligatures,
-    }, metrics, lsOf(seg), defaults.wordSpacing);
+    const widthOf = (seg) => {
+        const run = runStyleOf(seg, defaults);
+        return singleLineWidth(seg.content, run.font, metrics, run.letterSpacing, run.wordSpacing);
+    };
     let prefix = 0;
     for (let i = 0; i < segs.length - 1; i++)
         prefix += widthOf(segs[i]);
     const last = segs[segs.length - 1];
-    last.content = ellipsize(last.content, last.fontFamily || defaults.fontFamily, last.fontSize || defaults.fontSize, last.fontStyle || defaults.fontStyle, maxWidth - prefix, metrics, lsOf(last), defaults.wordSpacing, defaults.ligatures);
+    const run = runStyleOf(last, defaults);
+    last.content = ellipsize(last.content, run.font.fontFamily, run.font.fontSize, run.font.fontStyle, maxWidth - prefix, metrics, run.letterSpacing, run.wordSpacing, run.font.ligatures);
     line.width = prefix + widthOf(last);
 }

package/dist/text/line-metrics.d.ts

@@ -50,3 +50,5 @@ export declare function lineBoxForString(metrics: FontMetrics, fontFamily: strin
 export declare function lineBoxForSegmentLine(line: SegmentLine, defaults: SegmentDefaults, metrics: FontMetrics, lineHeight?: number): LineBox;
 /** How tall a text is at `maxWidth`: its lines, from the one breaker, each in its own line box. */
 export declare function textHeight(spans: TextSegment[], defaults: SegmentDefaults, maxWidth: number, metrics: FontMetrics, maxLines?: number, overflow?: TextOverflow, lineHeight?: number): number;
+/** How tall these lines stand, each in its own line box. */
+export declare function linesHeight(lines: SegmentLine[], defaults: SegmentDefaults, metrics: FontMetrics, lineHeight?: number): number;

package/dist/text/line-metrics.js

@@ -58,5 +58,9 @@ export function lineBoxForSegmentLine(line, defaults, metrics, lineHeight) {
 }
 /** How tall a text is at `maxWidth`: its lines, from the one breaker, each in its own line box. */
 export function textHeight(spans, defaults, maxWidth, metrics, maxLines, overflow, lineHeight) {
-    return breakSegmentsIntoLines(spans, defaults, maxWidth, metrics, maxLines, overflow).reduce((total, line) => total + lineBoxForSegmentLine(line, defaults, metrics, lineHeight).height, 0);
+    return linesHeight(breakSegmentsIntoLines(spans, defaults, maxWidth, metrics, maxLines, overflow), defaults, metrics, lineHeight);
+}
+/** How tall these lines stand, each in its own line box. */
+export function linesHeight(lines, defaults, metrics, lineHeight) {
+    return lines.reduce((total, line) => total + lineBoxForSegmentLine(line, defaults, metrics, lineHeight).height, 0);
 }