@react-x11/components 0.8.0 → 0.10.0

package/dist/html/layout/inline.js

@@ -1,5 +1,39 @@
-import { codeUnitOffsets } from '../../internal/text.js';
-import { inkColor, isTransparent } from '../css/values.js';
+// Inline layout: text, and the atomic things that sit in the middle of it.
+//
+// The whole file turns on one decision — **how many times ntk's `TextLayout`
+// is called per paragraph** — because that is where a document's first paint
+// is won or lost.
+//
+// `TextLayout` does the expensive and difficult half already: UAX#14 break
+// opportunities, OpenType shaping with a memo per inter-break segment, font
+// fallback, bidi, and per-line UAX#9 reordering. Calling it **once** for a
+// whole inline formatting context is therefore both the fastest and the most
+// correct thing this can do, and it is what the common case does: a
+// paragraph, a heading, a list item's line, a table cell.
+//
+// Two things break that. An **atomic** in the middle of the text — an image,
+// an inline-block, a form control — which the text layout knows nothing
+// about; and a **float**, which makes the available width differ line by
+// line while `TextLayout` takes one `maxWidth`. Either drops this into a
+// line-at-a-time loop that re-lays the remaining text per line. That loop is
+// quadratic, and that is fine, because it *leaves* itself the moment nothing
+// ahead can vary the width again: the tail of a long paragraph beside a
+// floated image is one call, not one per line.
+//
+// The runs handed to `TextLayout` are richtext's `TextRun`s, and that is
+// deliberate rather than incidental: ntk lets unknown span fields ride along
+// and hands them back on the laid-out runs, so the decoration a `<span>`
+// carries reaches paint on the same object the glyphs did — which is exactly
+// the trick `<richtext>` is built on, and it is why paint reuses richtext's
+// decoration pass unchanged instead of reimplementing it. What a run does
+// *not* carry is its element: a layout outlives the parse it was made for
+// (`TextLayoutCache`), so the element under a run is found from its text's
+// place in the document (`LineText.spans`) instead.
+import { codePointAtOffset, codeUnitOffsets } from '../../internal/text.js';
+import { CONTAIN_LAYOUT, INLINE_BEFORE_ABSOLUTE, scrolls, } from '../css/style.js';
+import { inkColor, isTransparent, resolve } from '../css/values.js';
+import { BOX_RAISES, LINE_BOX_RAISES, isOffset, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, } from './boxes.js';
+import { tableGrid } from './grid.js';
 /**
  * The text behind a layout, for the one caller that needs it: a selection
  * band has to turn a document offset into a **code point** index, which is
@@ -11,6 +45,119 @@ import { inkColor, isTransparent } from '../css/values.js';
  * most documents are read without using.
  */
 const LAYOUT_RUNS = new WeakMap();
+const WIDEST_WORD = new WeakMap();
+/**
+ * The widest word between spaces in a layout's text: its runs laid out
+ * again with every space a line break, at no width limit. Where a text's
+ * only breaks are spaces that is its min-content width, and where it has
+ * others — a hyphen, a slash — more: an upper bound of it either way. The
+ * other way to ask, a layout of no width, has ntk search every word for a
+ * place to cut it, since none fits, which costs fifteen layouts of this
+ * one. Infinity where the runs are no longer kept.
+ */
+export function widestWord(fonts, layout, measured = true) {
+    if (!measured)
+        return longestWord(layout);
+    let widest = WIDEST_WORD.get(layout);
+    if (widest !== undefined)
+        return widest;
+    const held = LAYOUT_RUNS.get(layout);
+    if (!held || (held.length > 0 && typeof held[0] === 'number')) {
+        return Infinity;
+    }
+    const words = fonts.layout(held.map((run) => ({
+        ...run,
+        text: run.text.replace(/[ \t\u200b]+/g, '\n'),
+    })), {}, {});
+    widest = 0;
+    for (const line of words.lines)
+        widest = Math.max(widest, line.width);
+    WIDEST_WORD.set(layout, widest);
+    return widest;
+}
+const SPACE_BREAKS = new WeakMap();
+/**
+ * Whether a layout's text breaks only at its spaces: letters and digits of
+ * the Latin, Greek and Cyrillic scripts, and the punctuation that UAX #14
+ * never breaks after between two letters — no hyphen, slash, `!`, `?`,
+ * `|`, `}`, soft hyphen or ellipsis, and nothing of a script that breaks
+ * between its letters or by dictionary. Where it does, its widest word
+ * (`widestWord`) is exactly its min-content width.
+ */
+export function spaceBreaksOnly(layout) {
+    let only = SPACE_BREAKS.get(layout);
+    if (only !== undefined)
+        return only;
+    const held = LAYOUT_RUNS.get(layout);
+    only = !!held && (held.length === 0 || typeof held[0] !== 'number');
+    if (only) {
+        outer: for (const run of held) {
+            const text = run.text;
+            for (let i = 0; i < text.length; i += 1) {
+                if (!breaksOnlyAtSpace(text.charCodeAt(i))) {
+                    only = false;
+                    break outer;
+                }
+            }
+        }
+    }
+    SPACE_BREAKS.set(layout, only);
+    return only;
+}
+function breaksOnlyAtSpace(c) {
+    if (c < 0x80) {
+        // `-` `/` `!` `?` `|` `}`: a break may follow each
+        return (c >= 0x20 &&
+            c !== 0x2d &&
+            c !== 0x2f &&
+            c !== 0x21 &&
+            c !== 0x3f &&
+            c !== 0x7c &&
+            c !== 0x7d &&
+            c !== 0x7f);
+    }
+    // Latin-1 but the soft hyphen and the acute accent, which a break may
+    // precede; Latin Extended, the combining marks, Greek and Cyrillic
+    if (c >= 0xa0 && c < 0x530)
+        return c !== 0xad && c !== 0xb4 && c !== 0x2c8;
+    // the curly quotes
+    return c >= 0x2018 && c <= 0x201f;
+}
+const LONGEST_WORD = new WeakMap();
+/**
+ * `widestWord` estimated from the text alone, with no layout: each word's
+ * characters at half again their size, which no glyph a document sets
+ * words in is wider than, and their letter spacing. What is under it
+ * needs no measuring, and most words are.
+ */
+function longestWord(layout) {
+    let longest = LONGEST_WORD.get(layout);
+    if (longest !== undefined)
+        return longest;
+    const held = LAYOUT_RUNS.get(layout);
+    if (!held || (held.length > 0 && typeof held[0] === 'number')) {
+        return Infinity;
+    }
+    longest = 0;
+    let word = 0;
+    for (const run of held) {
+        const per = (run.size ?? 16) * 1.5 + Math.max(0, run.letterSpacing ?? 0);
+        const text = run.text;
+        for (let i = 0; i < text.length; i += 1) {
+            const c = text.charCodeAt(i);
+            if (c === 0x20 || c === 0x09 || c === 0x0a || c === 0x200b)
+                word = 0;
+            else if (c < 0xdc00 || c > 0xdfff) {
+                // a surrogate pair is one character
+                word += per;
+                if (word > longest)
+                    longest = word;
+            }
+        }
+    }
+    LONGEST_WORD.set(layout, longest);
+    return longest;
+}
 /** Code-unit → code-point offsets for a layout's text, built once. */
 export function layoutOffsets(layout) {
     const held = LAYOUT_RUNS.get(layout);
@@ -23,17 +170,129 @@ export function layoutOffsets(layout) {
     return offsets;
 }
 const EMPTY_OFFSETS = [0];
+function isText(item) {
+    return item.kind === 'text';
+}
 /**
  * Lay out one inline formatting context. Coordinates in the result are
  * relative to the containing block's content box; the caller translates.
  */
 export function layoutInline(block, options) {
-    const fonts = options.fonts;
+    const result = layoutLines(block, options);
+    const clamp = options.clamp?.lines;
+    // A clamped block shows its first lines and is as tall as they are. The
+    // one-layout paths below had the engine cut them, with its ellipsis; a
+    // block laid out a line at a time — an image on a line, a float beside
+    // it — is cut here, and ends where its last line does, with none.
+    if (clamp !== undefined && result.lines.length > clamp) {
+        const lines = result.lines.slice(0, clamp);
+        const last = lines[clamp - 1];
+        let widest = 0;
+        for (const line of lines)
+            widest = Math.max(widest, line.width);
+        return {
+            lines,
+            height: last ? last.y + last.height : 0,
+            width: widest,
+            cut: true,
+        };
+    }
+    return result;
+}
+function cutOf(style, clamp) {
+    // the ellipsis a clamp ends in is placed apart (`ellipsized`)
+    if (clamp)
+        return { maxLines: clamp.lines, overflow: 'clip' };
+    if (style.textOverflow === 'ellipsis' &&
+        !wraps(style) &&
+        style.overflowX !== 'visible') {
+        return { maxLines: 1, overflow: 'ellipsis', wrap: false };
+    }
+    return null;
+}
+function layoutLines(block, options) {
     const items = [];
-    collect(block, items);
-    if (!items.length || !fonts)
-        return EMPTY;
+    const statics = [];
+    const floatCount = collect(block, items, options.width, options.fonts, block.style, !!options.floatBoxes, statics);
+    const result = linesOf(block, options, items, floatCount);
+    // whichever way the lines were made, one pass over them
+    if (statics.length) {
+        staticPositions(statics, items, result.lines, block, options);
+    }
+    return result;
+}
+/** The lines of a block's inline content, gathered into `items`. */
+function linesOf(block, options, items, floatCount) {
+    let fonts = options.fonts;
+    const placing = options.floatBoxes;
+    if (items.length === floatCount || !fonts) {
+        // no line to wait for: the floats go at the top
+        const placed = [];
+        for (const item of items) {
+            if (item.kind === 'float') {
+                placing.size(item.box);
+                placing.place(item.box, options.startY);
+                placed.push(item.box);
+            }
+        }
+        if (!placed.length)
+            return EMPTY;
+        return { ...EMPTY, floatRow: besideLines([], placed, options.startY) };
+    }
+    // text a box's background shows through (`background-clip: text`): its
+    // layouts are made through a recorder, so paint can lay the same text out
+    // again with no ink of its own and fill it with that background
+    if (options.clipText && clipsText(block, items)) {
+        CLIPPED_TEXT.add(block);
+        fonts = recording(fonts);
+    }
+    if (wraps(block.style))
+        holdNoWrap(items, block);
+    // one walk for what few paragraphs have: text that casts a shadow, and a
+    // tab, which only a `white-space` that keeps it leaves — so no text is
+    // searched for one where it cannot be
+    let tabbed = false;
+    let shadowed = false;
+    for (const item of items) {
+        if (item.kind !== 'text' || item.control)
+            continue;
+        const style = item.box.style;
+        if (style.textShadow)
+            shadowed = true;
+        if (!tabbed &&
+            (style.whiteSpace === 'pre' || style.whiteSpace === 'pre-wrap') &&
+            item.run.text.includes('\t')) {
+            tabbed = true;
+        }
+    }
+    if (shadowed)
+        SHADOWED_TEXT.add(block);
+    if (tabbed) {
+        setTabs(items, fonts, block.style, blockIndent(block, options.width));
+    }
+    // an override on the block is one on all of its inline content (CSS 2.1
+    // 9.10); its embedding or isolation is the paragraph's own direction
+    const own = block.style.unicodeBidi === 'bidi-override' ||
+        block.style.unicodeBidi === 'isolate-override'
+        ? bidiControls(block.style, true)
+        : null;
+    if (own) {
+        const first = items.find(isText);
+        let last;
+        for (const item of items)
+            if (item.kind === 'text')
+                last = item;
+        if (first && last) {
+            const opening = [];
+            pushControls(opening, own[0], block, first.start);
+            items.unshift(...opening);
+            pushControls(items, own[1], block, last.start + last.length);
+        }
+    }
+    if (options.firstLine)
+        firstLineColour(items, options.firstLine);
     const style = block.style;
+    const wrapWords = overflowWrapOf(style, items);
     const base = {
         family: style.fontFamily,
         size: style.fontSize,
@@ -42,14 +301,76 @@ export function layoutInline(block, options) {
         color: style.color,
     };
     const lineHeightMul = lineHeightMultiplier(fonts, style);
-    const align = alignFor(style);
-    const indent = indentOf(style, options.width);
-    const hasAtomics = items.some((i) => i.kind === 'atomic');
-    const floated = options.floats?.intersects(options.startY, Infinity) ?? false;
+    // The lines the end of the text or a forced break ends take
+    // `text-align-last` (CSS Text 3, 7.2), and a text that does not wrap is
+    // all such lines. Where they are aligned otherwise than the rest, and
+    // neither is justified — which fills a line whatever its alignment — the
+    // lines are made one at a time, each aligned its own way.
+    const lastAlign = lastAlignOf(style);
+    const align = engineAlign(wraps(style) ? style.textAlign : lastAlign);
+    const rtl = style.direction === 'rtl';
+    const alignedApart = wraps(style) &&
+        style.textAlign !== 'justify' &&
+        lastAlign !== 'justify' &&
+        alignShift(style.textAlign, rtl) !== alignShift(lastAlign, rtl);
+    const indent = blockIndent(block, options.width);
+    let hasAtomics = false;
+    let hasEdges = false;
+    let hasOffset = false;
+    let raised = false;
+    for (const item of items) {
+        if (item.kind === 'atomic')
+            hasAtomics = true;
+        else if (item.kind === 'text') {
+            // text in an inline box with a line height of its own, which an
+            // inline box of no edges has as much as one with them
+            if (!raised && fonts && inBoxOwningLeading(fonts, block, item.box)) {
+                hasOffset = true;
+                raised = true;
+            }
+        }
+        else if (item.kind === 'edge') {
+            hasEdges = true;
+            if (item.box.style.verticalAlign !== 'baseline' ||
+                ownsLeading(fonts, block.style, item.box.style) ||
+                tallerStrut(fonts, block.style, item.box)) {
+                hasOffset = true;
+                raised = true;
+            }
+            else if (!hasOffset && isOffset(item.box.style))
+                hasOffset = true;
+        }
+    }
+    // a float in the content is placed on the line it is on, which only the
+    // line-at-a-time loop knows, as it does whatever floats are beside it
+    const floated = floatCount > 0 ||
+        (options.floats?.intersects(options.startY, Infinity) ?? false);
+    // An inline box's edges take room on their lines. Where nothing else on
+    // the lines has to be placed a piece at a time, they go into the one
+    // layout as spacers (`spacerRun`) — which only holds where no bidi
+    // reordering can move one off the side of its box it belongs to, and no
+    // box between edges is moved afterwards, which needs its text apart.
+    const spaced = hasEdges && !hasAtomics && !hasOffset && spacersHold(style, items);
+    // a first line in fonts of its own is found a piece at a time, in them
+    const restyled = options.firstLineStyle !== undefined;
+    // Inline boxes' edges as spacers in one layout, where the engine left
+    // every edge on the line of the content it belongs to (`layoutSpaced`);
+    // the lines a piece at a time, below, where it did not.
+    if (spaced && !floated && !indent && !alignedApart && !restyled) {
+        const laid = layoutSpaced(items, base, style, options.width, lineHeightMul, align, fonts);
+        if (laid)
+            return laid;
+    }
     // The text-only, float-free, unindented case: one call, every line — or
     // one call per *chunk*, when the text is long and carries hard breaks.
-    if (!hasAtomics && !floated && !indent) {
-        // `hasAtomics` is false, so every item is text; the cast is that fact.
+    if (!hasAtomics &&
+        !hasEdges &&
+        !raised &&
+        !floated &&
+        !indent &&
+        !alignedApart &&
+        !restyled) {
+        // no atomics and no edges, so everything is text
         const textItems = items;
         let total = 0;
         let hasNewline = false;
@@ -60,25 +381,92 @@ export function layoutInline(block, options) {
         }
         if (!total)
             return EMPTY;
-        if (total > CHUNK_TRIGGER_CHARS && hasNewline) {
+        // `text-overflow` cuts every line that overflows, and a layout can cut
+        // only its last: one that a forced break ends is laid out apart, a hard
+        // line at a time, or the lines after the first were lost. A clamp is
+        // the paragraph's, and stays one layout.
+        const clamp = options.clamp;
+        let cut = cutOf(style, clamp);
+        const perLine = cut !== null && !clamp && hasNewline;
+        // an embedding cannot be cut into chunks
+        if (perLine && !hasControls(items)) {
+            return layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts, { chars: Infinity, hardLines: 1, cut });
+        }
+        if (perLine)
+            cut = null;
+        if (total > CHUNK_TRIGGER_CHARS && hasNewline && !hasControls(items)) {
             return layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts);
         }
-        const runs = [];
-        const spans = new SpanMap();
+        let runs = [];
+        let spans = new SpanMap();
         for (const item of textItems) {
-            spans.add(item.box.textStart, item.run.text.length);
+            spans.add(item.start, item.run.text.length, item.control ? null : item.box);
             runs.push(item.run);
         }
-        const layout = fonts.layout(runs, base, {
-            maxWidth: wraps(style) ? options.width : undefined,
+        // justified lines fill their width, so where all but the last are,
+        // the layout is aligned as those are
+        const justifies = wraps(style) && style.textJustify !== 'none';
+        const justifyRest = style.textAlign === 'justify' && justifies;
+        const justifyLast = lastAlign === 'justify' && justifies;
+        const layoutOptions = {
+            maxWidth: wraps(style) || cut ? options.width : undefined,
             lineHeight: lineHeightMul,
-            align,
+            align: justifyRest && !justifyLast ? engineAlign(lastAlign) : align,
             direction: style.direction,
-        });
+            overflowWrap: cutWrap(style, cut, wrapWords),
+            ...cut,
+        };
+        let layout = fonts.layout(runs, base, layoutOptions);
         LAYOUT_RUNS.set(layout, runs);
+        // A clamp that cut the text short says so, for the clamp point after
+        // it, and its last line ends in an ellipsis — as it does where the
+        // clamp point falls just after the lines, more of the container after
+        // them (CSS Overflow 4, 4.2).
+        let clampCut = false;
+        if (clamp) {
+            const shown = layout.lines.length;
+            clampCut =
+                shown > 0 &&
+                    shown >= clamp.lines &&
+                    (layout.truncated ?? inkBeyond(runs, layout.lines[shown - 1].end));
+            if (clamp.ellipsis &&
+                shown > 0 &&
+                shown === clamp.lines &&
+                (clampCut || clamp.follows)) {
+                const ended = ellipsized(fonts, textItems, runs, base, layoutOptions, layout, options.width, style);
+                layout = ended.layout;
+                runs = ended.runs;
+                spans = ended.spans;
+                LAYOUT_RUNS.set(layout, runs);
+            }
+        }
+        // `text-wrap: balance`: the lines broken at the narrowest width that
+        // keeps as many of them, and then set in the whole width
+        let balanced = false;
+        if (style.textWrapStyle === 'balance' &&
+            layoutOptions.maxWidth !== undefined &&
+            !cut &&
+            style.textAlign !== 'justify' &&
+            layout.lines.length > 1 &&
+            layout.lines.length <= BALANCE_LINES) {
+            const width = layoutOptions.maxWidth;
+            const at = balancedWidth(fonts, runs, base, layoutOptions, width, layout);
+            if (at < width) {
+                layout = fonts.layout(runs, base, { ...layoutOptions, maxWidth: at });
+                LAYOUT_RUNS.set(layout, runs);
+                balanced = true;
+            }
+        }
+        layout = justifiedLayout(fonts, runs, base, layoutOptions, layout, options.width, { rest: justifyRest, last: justifyLast }).layout;
         const lines = [];
-        const widest = emitLayout(layout, spans, 0, 0, lines);
-        return { lines, height: layout.height, width: widest };
+        const widest = emitLayout(layout, spans, 0, 0, lines, layoutOptions.maxWidth === undefined
+            ? unwrappedPlacer(style, options.width, true)
+            : balanced
+                ? unwrappedPlacer(style, options.width, false)
+                : null);
+        return clampCut
+            ? { lines, height: layout.height, width: widest, cut: true }
+            : { lines, height: layout.height, width: widest };
     }
     // --- the general case: line at a time -------------------------------------
     const lines = [];
@@ -87,34 +475,212 @@ export function layoutInline(block, options) {
     let index = 0;
     let offset = 0;
     let open = openLine(indent);
-    const close = () => {
-        const line = finishLine(open, y);
+    /** Start edges waiting for the content they belong to: an inline box's
+     *  opening margin, border and padding go on the line its first content
+     *  goes on, so they are placed with it, never left at a line's end. */
+    let pending = [];
+    let pendingWidth = 0;
+    const placePending = (left) => {
+        if (pending.length)
+            open.left = left;
+        for (const edge of pending) {
+            const placed = {
+                box: edge.box,
+                side: 'start',
+                x: left + open.x,
+                width: edge.width,
+            };
+            open.edges.push(placed);
+            open.order.push({ kind: 'edge', at: open.x, item: placed });
+            open.x += edge.width;
+        }
+        pending = [];
+        pendingWidth = 0;
+    };
+    /** Floats met on a line they did not fit beside: they go at the top of
+     *  the next line, as the line they were met on closes. */
+    let deferred = [];
+    /** Every float placed, in order, for the lines they stand beside. */
+    const floatsPlaced = [];
+    const placeDeferred = () => {
+        for (const box of deferred) {
+            options.floatBoxes.place(box, options.startY + y);
+            floatsPlaced.push(box);
+        }
+        deferred = [];
+    };
+    const strut = fonts ? strutOf(fonts, style) : null;
+    // How tall a line is taken to be before it is made, for its room beside
+    // the floats: the paragraph's strut, a line of its text. An item taller
+    // asks over its own height, and the line made over its whole (`close`).
+    // A 1.4em guess put a line of `line-height: 0` below floats it fitted
+    // beside.
+    const guess = strut ? strut.ascent + strut.descent : style.fontSize * 1.4;
+    const lifts = raised && fonts ? new Lifts(fonts, block.style) : null;
+    const restShift = alignShift(style.textAlign, rtl);
+    const lastShift = alignShift(lastAlign, rtl);
+    // a justified line fills its room, whatever made it a piece at a time
+    const justify = justification(style);
+    const lineJustify = fonts && (justify.rest || justify.last)
+        ? {
+            fonts,
+            base,
+            options: {
+                lineHeight: lineHeightMul,
+                align: 'left',
+                direction: style.direction,
+                overflowWrap: wrapWords,
+            },
+        }
+        : null;
+    // The first line in its `::first-line` fonts, until a line is closed
+    const lineOne = options.firstLineStyle
+        ? firstLineSetting(block, items, options.firstLineStyle, fonts, strut, lineJustify)
+        : null;
+    /** Close the open line; `last` where the text or a forced break ends it,
+     *  which `text-align-last` aligns. */
+    const close = (last = false) => {
+        const onFirst = lineOne !== null && !lines.length;
+        const line = finishLine(open, y, 
+        // the room beside the floats over the whole line box, which an
+        // inline-block can make taller than its text (CSS 2.1 9.5)
+        (height) => bandAt(options, y, Math.max(height, guess)), last || !wraps(style) ? lastShift : restShift, rtl, onFirst ? lineOne.strut : strut, onFirst ? lineOne.lifts : lifts, (last || !wraps(style) ? justify.last : justify.rest)
+            ? onFirst
+                ? lineOne.justify
+                : lineJustify
+            : null);
         if (!line) {
             open = openLine(0);
+            placeDeferred();
             return;
         }
         lines.push(line);
         widest = Math.max(widest, line.width);
         y += line.height;
         open = openLine(0);
+        placeDeferred();
     };
     while (index < items.length) {
-        const band = bandAt(options, y, style.fontSize * 1.4);
+        const band = bandAt(options, y, guess);
         const available = band.right - band.left;
         const item = items[index];
+        const onFirst = lineOne !== null && !lines.length;
+        const lineItems = onFirst ? lineOne.items : items;
+        const lineBase = onFirst ? lineOne.base : base;
+        if (item.kind === 'float') {
+            // No higher than the top of the line it is met on (CSS 2.1 9.5.1):
+            // at that top where it fits beside what the line holds already, and
+            // what the line holds moves over for it; under the line where it
+            // does not, with the rest of the line's content still on the line.
+            // Where the line cannot break at the float, what follows it up to
+            // where it can is on the line too, and has to fit beside it as well,
+            // as browsers place one: `nowrap` text it is in the middle of runs on
+            // past it otherwise, under it.
+            const outer = options.floatBoxes.size(item.box);
+            // and after a float that waits for the next line, since none goes
+            // higher than one before it (9.5.1, rule 5)
+            let fits = !deferred.length &&
+                (isEmpty(open) || open.x + pendingWidth + outer <= available);
+            if (fits && !isEmpty(open) && !breaksAtEnd(open, style)) {
+                const after = unbreakableAfter(lineItems, index + 1, style, fonts, lineBase);
+                fits = open.x + pendingWidth + after + outer <= available;
+            }
+            if (fits) {
+                options.floatBoxes.place(item.box, options.startY + y);
+                floatsPlaced.push(item.box);
+                const left = bandAt(options, y, guess).left;
+                if (!isEmpty(open) && left !== open.left) {
+                    const dx = left - open.left;
+                    for (const text of open.texts)
+                        text.drawX += dx;
+                    for (const placed of open.atomics)
+                        placed.x += dx;
+                    for (const edge of open.edges)
+                        edge.x += dx;
+                    open.left = left;
+                }
+            }
+            else {
+                deferred.push(item.box);
+            }
+            index += 1;
+            continue;
+        }
+        if (item.kind === 'edge') {
+            if (item.side === 'start') {
+                pending.push(item);
+                pendingWidth += item.width;
+            }
+            else {
+                // an end edge follows the content it closes onto its line; it may
+                // run past the line's end, as a trailing space does, rather than
+                // leave the content it closes
+                placePending(band.left);
+                const placed = {
+                    box: item.box,
+                    side: 'end',
+                    x: band.left + open.x,
+                    width: item.width,
+                };
+                open.edges.push(placed);
+                open.order.push({ kind: 'edge', at: open.x, item: placed });
+                open.x += item.width;
+                open.left = band.left;
+            }
+            index += 1;
+            continue;
+        }
         if (item.kind === 'atomic') {
             const box = item.box;
             const outer = box.width + box.marginLeft + box.marginRight;
-            if (open.x > 0 && open.x + outer > available) {
+            // An inline-block makes its line as tall as itself, and the line box
+            // must not run into a float over that height either (CSS 2.1 9.5):
+            // the room is what the floats leave beside all of it.
+            const tall = box.marginTop + box.height + box.marginBottom;
+            const lineTall = Math.max(guess, tall);
+            const room = tall > guess ? bandAt(options, y, tall) : band;
+            const roomWidth = room.right - room.left;
+            // a line with nothing on it keeps what comes first, indent or not:
+            // there is no break before it (a first line's `text-indent` is room
+            // taken, and no content)
+            if (open.x !== open.indent && open.x + pendingWidth + outer > roomWidth) {
                 close();
                 continue;
             }
-            open.atomics.push({ box, x: band.left + open.x + box.marginLeft, y: 0 });
+            // an inline-block wider than the room a float left goes below it,
+            // as a word does (below)
+            if (isEmpty(open) &&
+                pendingWidth + outer > roomWidth &&
+                roomWidth < options.width) {
+                const below = belowFloats(options, y, lineTall);
+                if (below !== null) {
+                    y = below;
+                    continue;
+                }
+            }
+            placePending(room.left);
+            const placed = {
+                box,
+                x: room.left + open.x + box.marginLeft,
+                y: 0,
+            };
+            const raise = atomicRaise(fonts, box, (box.parent ?? block).style);
+            if (raise)
+                placed.raise = raise;
+            open.atomics.push(placed);
+            open.order.push({ kind: 'atomic', at: open.x, item: placed });
             open.x += outer;
+            open.hang = 0;
+            open.left = room.left;
             index += 1;
             continue;
         }
-        const segment = segmentFrom(items, index, offset);
+        const plain = segmentFrom(lineItems, index, offset);
+        // measured as it will be drawn where it is justified, its spaces
+        // spaced apart (`HAIR`) — the same text, so every offset holds
+        const segment = lineJustify
+            ? { ...plain, runs: spacedApart(plain.runs) }
+            : plain;
         // `segmentFrom` always passes at least the text item it started on, so
         // this advances even when the slice came out empty — which is what stops
         // a zero-length tail from spinning the loop.
@@ -128,18 +694,34 @@ export function layoutInline(block, options) {
         // one layout, every line of it. This is the exit that keeps the loop
         // below from being quadratic on an ordinary paragraph: it runs line by
         // line only while it has to.
-        const tailIsPlain = segment.nextIndex >= items.length &&
+        // An inline box's edges of no width on the open line are no room it
+        // takes, and are still on it: an empty `<span>` with a tall line height
+        // before the text was left on a line of its own after it, and the
+        // text's line was as short as the paragraph's
+        // (and its lines all aligned alike, which the last is not where
+        // `text-align-last` sets it apart)
+        const tailIsPlain = !alignedApart &&
+            !onFirst &&
+            segment.nextIndex >= items.length &&
             open.x === 0 &&
             !open.atomics.length &&
+            !open.edges.length &&
+            !pending.length &&
+            !deferred.length &&
             !(options.floats?.intersects(options.startY + y, Infinity) ?? false);
         if (tailIsPlain) {
-            const layout = fonts.layout(segment.runs, base, {
+            const tailOptions = {
                 maxWidth: wraps(style) ? Math.max(1, available) : undefined,
                 lineHeight: lineHeightMul,
                 align,
                 direction: style.direction,
-            });
+                overflowWrap: wrapWords,
+            };
+            let layout = fonts.layout(segment.runs, base, tailOptions);
             LAYOUT_RUNS.set(layout, segment.runs);
+            // the lines past the floats are justified as the lines beside them
+            // were (`finishLine`), in the room they have
+            layout = justifiedLayout(fonts, segment.runs, base, tailOptions, layout, Math.max(1, available), justify).layout;
             for (let i = 0; i < layout.lines.length; i += 1) {
                 const natural = layout.lines[i];
                 const text = {
@@ -150,13 +732,15 @@ export function layoutInline(block, options) {
                     textStart: segment.spans.documentAt(natural.start),
                     textEnd: segment.spans.documentAt(natural.end),
                     layoutStart: natural.start,
+                    spans: segment.spans,
                 };
+                segment.spans.giveGaps(text, natural.start, natural.end);
                 lines.push({
                     x: band.left + natural.x,
                     y: y + natural.y,
                     width: natural.width,
                     height: natural.height,
-                    baseline: natural.baseline,
+                    baseline: natural.baseline - natural.y,
                     texts: [text],
                     textStart: text.textStart,
                     textEnd: text.textEnd,
@@ -175,15 +759,29 @@ export function layoutInline(block, options) {
         // re-cut (which is what an earlier shape paid, per line, beside every
         // float). ntk's shaping memo makes the successive cuts cheap; only the
         // line breaker re-runs.
-        const room = Math.max(1, available - open.x);
-        const fragment = fonts.layout(segment.runs, base, {
-            maxWidth: wraps(style) ? room : undefined,
-            lineHeight: lineHeightMul,
-            // A fragment that does not start at the line's left edge cannot be
-            // aligned by the text layout: the alignment belongs to the whole line,
-            // which only this loop can see.
-            align: open.x > 0 ? 'left' : align,
+        const room = Math.max(1, available - open.x - pendingWidth);
+        // A float met inside a word, or inside a `nowrap` element, is no place
+        // for the line to break: the text after it up to where it may break
+        // is on this line too, so this line keeps room for it — or breaks
+        // before the word it is tied to. It overran the line otherwise, the
+        // float having gone below, and the break it could have taken passed.
+        const tied = wraps(style) &&
+            items[segment.nextIndex]?.kind === 'float' &&
+            !BREAKS_AFTER.test(segment.runs[segment.runs.length - 1].text)
+            ? unbreakableAfter(lineItems, segment.nextIndex, style, fonts, lineBase)
+            : 0;
+        const fragment = fonts.layout(segment.runs, lineBase, {
+            maxWidth: wraps(style) ? Math.max(1, room - tied) : undefined,
+            lineHeight: onFirst ? lineOne.lineHeight : lineHeightMul,
+            // Never aligned by the text layout: the alignment belongs to the whole
+            // line — its text, its atomics and its inline boxes' edges together —
+            // which only this loop can see, and `finishLine` shifts it all. Laid
+            // out aligned, the first fragment of a centred line was centred alone
+            // and whatever followed it on the line was placed as though it had
+            // not been, over it.
+            align: 'left',
             direction: style.direction,
+            overflowWrap: wrapWords,
             maxLines: 1,
         });
         LAYOUT_RUNS.set(fragment, segment.runs);
@@ -193,42 +791,91 @@ export function layoutInline(block, options) {
             offset = 0;
             continue;
         }
-        open.texts.push({
+        // Nothing fits beside the floats — the first word is wider than the
+        // room they leave, and was either run past it or cut inside itself to
+        // fit — so the line moves down to where a float ends, and tries again
+        // there (CSS 2.1 9.5). Only where a float took some of the line's width:
+        // past the floats the line has the whole of it, and a word wider still
+        // is `overflow-wrap`'s to break or to let run past.
+        if (isEmpty(open) &&
+            available < options.width &&
+            tooNarrow(segment.runs, first.end, first.width, room)) {
+            const below = belowFloats(options, y, guess);
+            if (below !== null) {
+                y = below;
+                continue;
+            }
+        }
+        // An inline box's opening edge goes with the first word after it: where
+        // the word does not fit the room the edge leaves, both go to the next
+        // line, rather than the edge being left at this one's end. And a word
+        // that may start a line — after a space the line ends on, or after an
+        // atomic, which has a break after it (CSS Text 3, 5.1) — goes to the
+        // next line whole where it does not fit what is left of this one,
+        // rather than being broken inside itself to fit it: the text after an
+        // inline-block, or after a float it was cut at, was its first letter
+        // at the line's end and the rest on the next.
+        const startsLine = wraps(style) &&
+            (open.hang > 0 || open.order[open.order.length - 1]?.kind === 'atomic');
+        if (!isEmpty(open) &&
+            (pendingWidth > 0
+                ? tooNarrow(segment.runs, first.end, first.width, room)
+                : startsLine &&
+                    // run past the room — its white space is no part of the width —
+                    // or cut inside itself to fit it
+                    (first.width > room + 0.5 ||
+                        tooNarrow(segment.runs, first.end, first.width, room)))) {
+            close();
+            continue;
+        }
+        placePending(band.left);
+        const placed = {
             layout: fragment,
             layoutLine: 0,
-            // The layout's own `first.x` carries the alignment offset, so the
-            // origin is the band edge plus the cursor — subtracting `first.x`
-            // here would left-align a centred line. Mid-line continuations were
-            // laid out `left`, where `first.x` is zero and the two agree.
+            // laid out `left`, so the fragment starts at the cursor
             drawX: band.left + open.x,
             drawY: 0, // filled in by `finishLine`, which is where the top is known
             textStart: segment.spans.documentAt(first.start),
             textEnd: segment.spans.documentAt(first.end),
             layoutStart: first.start,
+            spans: segment.spans,
+        };
+        segment.spans.giveGaps(placed, first.start, first.end);
+        open.texts.push(placed);
+        open.order.push({
+            kind: 'text',
+            at: open.x,
+            item: placed,
+            reads: readingOf(segment.runs, first.start, first.end),
         });
         open.x += first.width;
         open.left = band.left;
+        open.hang = 0;
         // Did the segment wrap? ntk answers with `truncated`. A layout that does
         // not carry the flag — react-x11's Cocoa engine reports none — is asked
         // the same of its line ends instead: it wrapped if anything but
         // whitespace follows the first line. Read as "fitted", a cut fragment
         // advanced past the whole segment, and a paragraph beside a float lost
-        // every line after its first.
-        const wrapped = fragment.truncated ?? inkBeyond(segment.runs, first.end);
+        // every line after its first. And a line that ends at a `<br>` is over
+        // whether or not anything followed it in this segment: what comes next
+        // — an atomic, an element's edge — is the next line's.
+        const wrapped = breakBefore(segment.runs, first.end) ||
+            (fragment.truncated ?? inkBeyond(segment.runs, first.end));
         if (!wrapped) {
             // It fitted: the cursor stays on this line for whatever comes next.
             //
-            // With one correction first. ntk strips a line's trailing whitespace —
-            // right at a real line end, wrong here, where the "line" is only a
-            // fragment and an atomic follows on the same one: `Name <input>` laid
-            // the space out to width zero and the control sat flush against the
-            // label (nbsp included; ntk's whitespace set has U+00A0 in it). The
-            // stripped advance is measured back and added to the cursor.
+            // With one correction first. A text engine strips a line's trailing
+            // whitespace — right at a real line end, wrong here, where the "line"
+            // is only a fragment and an atomic follows on the same one: `Name
+            // <input>` laid the space out to width zero and the control sat flush
+            // against the label. The stripped advance is measured back and added
+            // to the cursor: what the engine strips, and no more (`hungSpaces`).
             if (segment.nextIndex < items.length) {
+                const hung = hungSpaces(fonts, segment.runs[segment.runs.length - 1]);
                 let trailing = '';
                 for (let i = segment.runs.length - 1; i >= 0; i -= 1) {
                     const text = segment.runs[i].text;
-                    const m = /[ \t\u00A0]+$/.exec(text);
+                    const m = hung.exec(text);
                     if (!m)
                         break;
                     trailing = m[0] + trailing;
@@ -236,45 +883,294 @@ export function layoutInline(block, options) {
                         break;
                 }
                 if (trailing) {
-                    open.x +=
+                    // and noted: if what follows goes to the next line after all,
+                    // these spaces end this one, where CSS removes them (16.6.1)
+                    open.hang =
                         spaceAdvance(fonts, segment.runs[segment.runs.length - 1]) *
                             trailing.length;
+                    open.x += open.hang;
                 }
             }
             index = segment.nextIndex;
             offset = 0;
             continue;
         }
-        close();
+        close(breakBefore(segment.runs, first.end));
         const advanced = advance(items, index, offset, first.end);
         index = advanced.index;
         offset = advanced.offset;
     }
-    if (open.texts.length || open.atomics.length)
-        close();
-    return { lines, height: y, width: widest };
+    if (pending.length)
+        placePending(bandAt(options, y, guess).left);
+    if (open.texts.length || open.atomics.length || open.edges.length) {
+        close(true);
+    }
+    placeDeferred();
+    if (!floatsPlaced.length)
+        return { lines, height: y, width: widest };
+    const floatRow = besideLines(Number.isFinite(options.width) ? [] : lines, floatsPlaced, options.startY);
+    return { lines, height: y, width: widest, floatRow };
 }
 const EMPTY = { lines: [], height: 0, width: 0 };
-/** Append one layout's lines as LineBoxes at an offset; returns the widest. */
-function emitLayout(layout, spans, xOff, yOff, lines) {
+/**
+ * Which line each float a paragraph placed stands beside: the one whose top
+ * it went at, whose content moved over for it — added up on the line, for
+ * what the line is measured with (`LineBox.floats`). The widest row of the
+ * rest, side by side where they went at one top, is the answer. Both lines
+ * and floats come in order down the paragraph, since a float goes no
+ * higher than the one before it.
+ *
+ * The lines are handed over only where the paragraph had no width limit,
+ * where its content is measured at its widest and a float is beside a line
+ * because nothing made the line go under it. At a width, the least a
+ * paragraph can be is its widest word or float, not the two side by side
+ * (where the word ran past the room a float left it), and its floats are
+ * rows of their own.
+ */
+function besideLines(lines, placed, startY) {
+    let row = 0;
+    let rowTop = NaN;
+    let widest = 0;
+    let at = 0;
+    for (const box of placed) {
+        const top = box.y - box.marginTop - startY;
+        const width = box.width + box.marginLeft + box.marginRight;
+        while (at < lines.length && lines[at].y < top - 0.01)
+            at += 1;
+        const line = lines[at];
+        if (line && Math.abs(line.y - top) <= 0.01) {
+            line.floats = (line.floats ?? 0) + width;
+        }
+        else if (Math.abs(top - rowTop) <= 0.01)
+            row += width;
+        else {
+            widest = Math.max(widest, row);
+            row = width;
+            rowTop = top;
+        }
+    }
+    return Math.max(widest, row);
+}
+/** A no-break space in a paragraph's face, and its advance, per font
+ *  manager and per style — which the cascade shares between every element
+ *  of a kind, so a document of paragraphs asks once. */
+const SPACERS = new WeakMap();
+/**
+ * An inline box's edge as a run of the one layout: a no-break space in the
+ * paragraph's face, letter-spaced to the edge's width. A no-break space
+ * glues to the text on either side, so a start edge goes to whichever line
+ * the box's first word goes to, and an end edge stays with its last; a line
+ * may still break after a space before it (UAX #14, LB12a). It is drawn as
+ * nothing, and is no part of the document's text: the line's text notes
+ * where it is (`LineText.gaps`). Laid out piece by piece instead, a
+ * paragraph with an inline `<code>` in it — whose padding is an edge —
+ * cost five layouts where one does, and a document of them reflowed two
+ * and a half times slower.
+ */
+function spacerRun(fonts, style, width) {
+    let byStyle = SPACERS.get(fonts);
+    if (!byStyle) {
+        byStyle = new WeakMap();
+        SPACERS.set(fonts, byStyle);
+    }
+    let spacer = byStyle.get(style);
+    if (!spacer) {
+        const face = {
+            family: style.fontFamily,
+            size: style.fontSize,
+            weight: style.fontWeight,
+            style: style.fontStyle === 'normal'
+                ? 'normal'
+                : 'italic',
+        };
+        const run = { text: '\u00a0', ...face };
+        spacer = { run, advance: fonts.layout([run], face, {}).width };
+        byStyle.set(style, spacer);
+    }
+    return { ...spacer.run, letterSpacing: width - spacer.advance };
+}
+/** Text that bidi could reorder around a spacer: any right-to-left
+ *  letter, and the explicit embedding and isolate controls. */
+const REORDERS = /[\u0590-\u08ff\ufb1d-\ufdff\ufe70-\ufefc\u202a-\u202e\u2066-\u2069]|[\ud802\ud803\ud83a\ud83b]/;
+/** Whether a paragraph's edges can be spacers: it reads left to right, and
+ *  nothing in it can be reordered. */
+function spacersHold(style, items) {
+    if (style.direction !== 'ltr')
+        return false;
+    for (const item of items) {
+        if (item.kind === 'text' && REORDERS.test(item.run.text))
+            return false;
+        // A negative margin takes room back. As a spacer it is a space with
+        // negative letter spacing, which ntk's line fill counts and CoreText's
+        // typesetter breaks the line before: the line at a time does the sum.
+        if (item.kind === 'edge' &&
+            (item.box.style.direction !== 'ltr' || item.width < 0))
+            return false;
+    }
+    return true;
+}
+/**
+ * A paragraph whose inline boxes have edges, as one layout with the edges
+ * in it as spacers (`spacerRun`), each line told where its spacers are and
+ * where they put the edges. Null where the engine began a line with an
+ * edge that closes a box: a break after a box's last character is after
+ * its end edge, which stays on the line of the content it closes (CSS Text
+ * 3, 5.1), and a line break after a space may come before a no-break space
+ * (UAX #14, LB12a), which is what a spacer is. The lines a piece at a time
+ * keep it there.
+ */
+function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts) {
+    const wrapWords = overflowWrapOf(style, items);
+    const runs = [];
+    const spans = new SpanMap();
+    const spacers = [];
+    let doc = 0;
+    for (const item of items) {
+        if (item.kind === 'text') {
+            doc = item.start;
+            break;
+        }
+    }
+    for (const item of items) {
+        if (item.kind === 'edge') {
+            spacers.push({ at: spans.laidOut, edge: item });
+            spans.add(doc, 1, null);
+            runs.push(spacerRun(fonts, style, item.width));
+        }
+        else if (item.kind === 'text') {
+            spans.add(item.start, item.run.text.length, item.control ? null : item.box);
+            runs.push(item.run);
+            if (!item.control)
+                doc = item.start + item.run.text.length;
+        }
+    }
+    const layoutOptions = {
+        maxWidth: wraps(style) ? width : undefined,
+        lineHeight: lineHeightMul,
+        align,
+        direction: style.direction,
+        overflowWrap: wrapWords,
+    };
+    let layout = fonts.layout(runs, base, layoutOptions);
+    LAYOUT_RUNS.set(layout, runs);
+    // justified with its spacers in it, which are edges and not spaces
+    layout = justifiedLayout(fonts, runs, base, layoutOptions, layout, width, justification(style), new Set(spacers.map((spacer) => spacer.at))).layout;
+    const place = wraps(style) ? null : unwrappedPlacer(style, width);
+    let offsets = null;
+    const lines = [];
     let widest = 0;
+    let next = 0;
     for (let i = 0; i < layout.lines.length; i += 1) {
         const natural = layout.lines[i];
+        const dx = place ? place(natural) : 0;
+        const edges = [];
+        while (next < spacers.length && spacers[next].at < natural.end) {
+            const { at, edge } = spacers[next];
+            next += 1;
+            if (at < natural.start)
+                continue;
+            if (i > 0 && edge.side === 'end' && at === natural.start)
+                return null;
+            const run = natural.runs?.find((r) => r.start === at);
+            const x = run
+                ? natural.x + run.x
+                : layout.caretPosition(codePointAt((offsets ??= layoutOffsets(layout)), at)).x;
+            edges.push({
+                box: edge.box,
+                side: edge.side,
+                x: x + dx,
+                width: edge.width,
+            });
+        }
+        const text = {
+            layout,
+            layoutLine: i,
+            drawX: dx,
+            drawY: 0,
+            textStart: spans.documentAt(natural.start),
+            textEnd: spans.documentAt(natural.end),
+            layoutStart: natural.start,
+            spans,
+        };
+        spans.giveGaps(text, natural.start, natural.end);
+        lines.push({
+            x: natural.x + dx,
+            y: natural.y,
+            width: natural.width,
+            height: natural.height,
+            baseline: natural.baseline - natural.y,
+            texts: [text],
+            textStart: text.textStart,
+            textEnd: text.textEnd,
+            atomics: [],
+            ...(edges.length ? { edges } : null),
+        });
+        widest = Math.max(widest, natural.width);
+    }
+    return { lines, height: layout.height, width: widest };
+}
+/** The code point a code-unit offset into a layout's text starts. */
+function codePointAt(offsets, units) {
+    if (!offsets.length)
+        return units;
+    let lo = 0;
+    let hi = offsets.length - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (offsets[mid] <= units)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return lo;
+}
+/**
+ * A code-unit offset in a line's layout as a document index, and back:
+ * `textStart` is `layoutStart`, and every spacer before the offset is a
+ * unit of the layout that is no text of the document's. A document offset
+ * with a spacer right at it is past the spacer, where a caret or a range's
+ * start goes — inside a padded box, after its padding — and before it as
+ * a range's `end`, so a selection does not take in the padding after it.
+ */
+export function documentOffsetOf(text, units) {
+    let doc = text.textStart + (units - text.layoutStart);
+    for (const gap of text.gaps ?? [])
+        if (gap < units)
+            doc -= 1;
+    return doc;
+}
+export function layoutOffsetOf(text, doc, end = false) {
+    let units = text.layoutStart + (doc - text.textStart);
+    for (const gap of text.gaps ?? []) {
+        if (end ? gap < units : gap <= units)
+            units += 1;
+    }
+    return units;
+}
+/** Append one layout's lines as LineBoxes at an offset, each moved where
+ *  `place` says; returns the widest. */
+function emitLayout(layout, spans, xOff, yOff, lines, place = null) {
+    let widest = 0;
+    for (let i = 0; i < layout.lines.length; i += 1) {
+        const natural = layout.lines[i];
+        const dx = place ? place(natural) : 0;
         const text = {
             layout,
             layoutLine: i,
-            drawX: xOff,
+            drawX: xOff + dx,
             drawY: yOff,
             textStart: spans.documentAt(natural.start),
             textEnd: spans.documentAt(natural.end),
             layoutStart: natural.start,
+            spans,
         };
+        spans.giveGaps(text, natural.start, natural.end);
         lines.push({
-            x: xOff + natural.x,
+            x: xOff + dx + natural.x,
             y: yOff + natural.y,
             width: natural.width,
             height: natural.height,
-            baseline: natural.baseline,
+            baseline: natural.baseline - natural.y,
             texts: [text],
             textStart: text.textStart,
             textEnd: text.textEnd,
@@ -292,6 +1188,11 @@ function emitLayout(layout, spans, xOff, yOff, lines) {
 const CHUNK_TRIGGER_CHARS = 16384;
 const CHUNK_MAX_CHARS = 8192;
 const CHUNK_MAX_HARD_LINES = 64;
+const CHUNKS = {
+    chars: CHUNK_MAX_CHARS,
+    hardLines: CHUNK_MAX_HARD_LINES,
+    cut: null,
+};
 /**
  * A long hard-broken text — a `<pre>` holding a log, a wall of `<br>`s — laid
  * out as a sequence of layouts split at newline boundaries.
@@ -305,7 +1206,8 @@ const CHUNK_MAX_HARD_LINES = 64;
  * breaking never crosses a required break), so the chunk seams are
  * invisible; each chunk stays a single batch a viewport can keep whole.
  */
-function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
+function layoutChunked(items, base, style, width, lineHeightMul, align, fonts, chunking = CHUNKS) {
+    const wrapWords = overflowWrapOf(style, items);
     const lines = [];
     let widest = 0;
     let y = 0;
@@ -313,17 +1215,25 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
     let chunkSpans = new SpanMap();
     let chars = 0;
     let hardLines = 0;
+    const { cut } = chunking;
+    const place = wraps(style) || cut ? null : unwrappedPlacer(style, width);
     const flush = () => {
         if (!chunkRuns.length)
             return;
-        const layout = fonts.layout(chunkRuns, base, {
-            maxWidth: wraps(style) ? width : undefined,
+        const chunkOptions = {
+            maxWidth: wraps(style) || cut ? width : undefined,
             lineHeight: lineHeightMul,
             align,
             direction: style.direction,
-        });
+            overflowWrap: cutWrap(style, cut, wrapWords),
+            ...cut,
+        };
+        let layout = fonts.layout(chunkRuns, base, chunkOptions);
         LAYOUT_RUNS.set(layout, chunkRuns);
-        widest = Math.max(widest, emitLayout(layout, chunkSpans, 0, y, lines));
+        // a chunk ends at a forced break or at the paragraph's end, which is
+        // where `justifiedRuns` takes a chunk's last line to end
+        layout = justifiedLayout(fonts, chunkRuns, base, chunkOptions, layout, width, justification(style)).layout;
+        widest = Math.max(widest, emitLayout(layout, chunkSpans, 0, y, lines, place));
         y += layout.height;
         chunkRuns = [];
         chunkSpans = new SpanMap();
@@ -332,7 +1242,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
     };
     for (const item of items) {
         let text = item.run.text;
-        let docStart = item.box.textStart;
+        let docStart = item.start;
         while (text.length) {
             // Scan up to the budgets, remembering the last newline: the split has
             // to land just after one for the chunking to be exact.
@@ -341,8 +1251,8 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
             let lines2 = hardLines;
             let taken = chars;
             while (i < text.length &&
-                taken < CHUNK_MAX_CHARS &&
-                lines2 < CHUNK_MAX_HARD_LINES) {
+                taken < chunking.chars &&
+                lines2 < chunking.hardLines) {
                 if (text.charCodeAt(i) === 10) {
                     lines2 += 1;
                     lastBreak = i;
@@ -353,7 +1263,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
             if (i >= text.length) {
                 // the rest of this run fits the open chunk
                 chunkRuns.push(text === item.run.text ? item.run : { ...item.run, text });
-                chunkSpans.add(docStart, text.length);
+                chunkSpans.add(docStart, text.length, item.box);
                 chars = taken;
                 hardLines = lines2;
                 break;
@@ -369,7 +1279,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
                 const next = text.indexOf('\n', i);
                 const end = next < 0 ? text.length : next + 1;
                 chunkRuns.push({ ...item.run, text: text.slice(0, end) });
-                chunkSpans.add(docStart, end);
+                chunkSpans.add(docStart, end, item.box);
                 flush();
                 docStart += end;
                 text = text.slice(end);
@@ -377,7 +1287,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
             }
             const cut = lastBreak + 1;
             chunkRuns.push({ ...item.run, text: text.slice(0, cut) });
-            chunkSpans.add(docStart, cut);
+            chunkSpans.add(docStart, cut, item.box);
             flush();
             docStart += cut;
             text = text.slice(cut);
@@ -387,30 +1297,207 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts) {
     return { lines, height: y, width: widest };
 }
 function openLine(indent) {
-    return { x: indent, left: 0, texts: [], atomics: [] };
+    return {
+        x: indent,
+        left: 0,
+        texts: [],
+        atomics: [],
+        edges: [],
+        order: [],
+        hang: 0,
+        indent,
+    };
+}
+/** Whether a line may break where it has got to: after the white space it
+ *  ends on, which hangs, or after an inline-block, where its block wraps. */
+function breaksAtEnd(open, style) {
+    return (wraps(style) &&
+        (open.hang > 0 || open.order[open.order.length - 1]?.kind === 'atomic'));
+}
+/**
+ * How wide the content from `from` on is up to where its line may break:
+ * its text up to a space it may break at — one `holdNoWrap` left a space —
+ * or, in a block that does not wrap, up to a line's end, with the edges of
+ * inline boxes on the way, and an inline-block, which has a break before it
+ * where the block wraps. Floats take no room on the line.
+ */
+function unbreakableAfter(items, from, style, fonts, base) {
+    const wrapping = wraps(style);
+    const runs = [];
+    let width = 0;
+    for (let i = from; i < items.length; i += 1) {
+        const item = items[i];
+        if (item.kind === 'float')
+            continue;
+        if (item.kind === 'edge') {
+            width += item.width;
+            continue;
+        }
+        if (item.kind === 'atomic') {
+            if (wrapping)
+                break;
+            width += item.box.width + item.box.marginLeft + item.box.marginRight;
+            continue;
+        }
+        const text = item.run.text;
+        const stop = wrapping ? text.search(/[ \t\n]/) : text.indexOf('\n');
+        if (stop < 0) {
+            runs.push(item.run);
+            continue;
+        }
+        if (stop > 0)
+            runs.push({ ...item.run, text: text.slice(0, stop) });
+        break;
+    }
+    return runs.length ? width + fonts.layout(runs, base, {}).width : width;
 }
-function finishLine(open, y) {
-    if (!open.texts.length && !open.atomics.length)
+/**
+ * Close a line: its height and baseline from what is on it, then where it
+ * sits — in the room `bandFor` answers for a line that tall, and aligned in
+ * it by `shift` of the room it did not use (0 flush left, 1 flush right, ½
+ * centred), moved onto every text, atomic and edge on it at once.
+ */
+function finishLine(open, y, bandFor, shift, rtl, strut, lifts = null, justify = null) {
+    if (!open.texts.length && !open.atomics.length && !open.edges.length) {
         return null;
-    let ascent = 0;
-    let descent = 0;
-    let height = 0;
-    for (const text of open.texts) {
-        const natural = text.layout.lines[text.layoutLine];
-        ascent = Math.max(ascent, natural.baseline);
-        descent = Math.max(descent, natural.height - natural.baseline);
-        height = Math.max(height, natural.height);
     }
+    const reordered = open.order.some((p) => needsOrdering(p, rtl));
+    if (reordered)
+        reorderLine(open, rtl);
+    // Every line box starts with the block's strut, its face at its line
+    // height, so a line of images alone is still as tall as `line-height`
+    // makes a line (CSS 2.1 10.8.1). Not one with nothing on it that takes
+    // room, which has no height at all (9.4.2), nor one that holds a block
+    // an inline box was split around, which is no line of text.
+    const held = strut &&
+        (open.texts.length > 0 ||
+            open.atomics.some((placed) => placed.box.style.display.startsWith('inline')) ||
+            open.edges.some((edge) => edge.width !== 0 || hasEdgeOn(edge.box, edge.side)));
+    let ascent = held ? strut.ascent : 0;
+    let descent = held ? strut.descent : 0;
+    // A text `vertical-align` raises takes its own box's room about where it
+    // is raised to. A `top` or `bottom` box takes the room of all it holds
+    // on the line about its baseline, and the line is as tall as that.
+    const lifted = lifts ? open.texts.map((text) => lifts.of(text)) : null;
+    let edges = null;
+    for (let i = 0; i < open.texts.length; i += 1) {
+        const lift = lifted?.[i];
+        if (lift) {
+            if (lift.edge) {
+                edges ??= new Map();
+                let room = edges.get(lift.edge.box);
+                if (!room) {
+                    room = {
+                        to: lift.edge.to,
+                        ascent: lift.edge.ascent,
+                        descent: lift.edge.descent,
+                    };
+                    edges.set(lift.edge.box, room);
+                }
+                room.ascent = Math.max(room.ascent, lift.ascent + lift.raise);
+                room.descent = Math.max(room.descent, lift.descent - lift.raise);
+            }
+            else {
+                ascent = Math.max(ascent, lift.ascent + lift.raise);
+                descent = Math.max(descent, lift.descent - lift.raise);
+            }
+            continue;
+        }
+        const natural = open.texts[i].layout.lines[open.texts[i].layoutLine];
+        const own = natural.baseline - natural.y;
+        ascent = Math.max(ascent, own);
+        descent = Math.max(descent, natural.height - own);
+    }
+    // an inline box with no text on the line is on it all the same, as tall
+    // as its own face and line height make it (CSS 2.1 10.8): an empty one,
+    // or one whose text is on another line — raised, or with a line height
+    // of its own, which an empty `<span>` made the line's no taller for.
+    // Only on a line that is one at all, which is none for boxes of no
+    // edges and no text (9.4.2)
+    if (lifts && held) {
+        for (const placed of open.edges) {
+            if (placed.side !== 'start' || placed.box.kind !== 'inline')
+                continue;
+            const room = lifts.ofBox(placed.box);
+            if (!room)
+                continue;
+            ascent = Math.max(ascent, room.ascent + room.raise);
+            descent = Math.max(descent, room.descent - room.raise);
+        }
+    }
+    // `top` and `bottom` boxes are set against the line's edges rather than
+    // its baseline, so all they ask of it is to be as tall as they are
+    let top = 0;
+    let bottom = 0;
     for (const placed of open.atomics) {
-        const h = placed.box.height + placed.box.marginTop + placed.box.marginBottom;
-        const va = placed.box.style.verticalAlign;
-        if (va === 'top' || va === 'bottom' || va === 'middle')
-            height = Math.max(height, h);
-        else
-            ascent = Math.max(ascent, h);
+        const box = placed.box;
+        const h = box.height + box.marginTop + box.marginBottom;
+        const va = box.style.verticalAlign;
+        if (va === 'top' || va === 'bottom') {
+            if (va === 'top')
+                top = Math.max(top, h);
+            else
+                bottom = Math.max(bottom, h);
+            continue;
+        }
+        // on the line's baseline by its own, raised from it by its
+        // `vertical-align`, and below it by the rest of it
+        const raise = placed.raise ?? 0;
+        const b = atomicBaseline(box);
+        ascent = Math.max(ascent, b + raise);
+        descent = Math.max(descent, h - b - raise);
+    }
+    if (edges) {
+        for (const room of edges.values()) {
+            const h = room.ascent + room.descent;
+            if (room.to === 'top')
+                top = Math.max(top, h);
+            else
+                bottom = Math.max(bottom, h);
+        }
+    }
+    // Where the baseline goes in a line one of them made taller than the
+    // rest is left open (CSS 2.1 10.8.1). Browsers keep it where the rest
+    // puts it, under the line's top, and only a taller `bottom` box moves it
+    // down: an image set `top` beside a line of text has the text at its
+    // top, not halfway down it.
+    let height = ascent + descent;
+    let baseline = ascent;
+    if (bottom > height) {
+        baseline += bottom - height;
+        height = bottom;
+    }
+    height = Math.max(height, top);
+    // Placed beside the floats at the text's height; a float the whole line
+    // reaches moves it, and the alignment divides the room that is left.
+    // The indent is at the line's start, which is its right in a
+    // right-to-left paragraph: the content moves back over it there, and
+    // the room it takes is at the other end (CSS 2.1 16.1).
+    const band = bandFor(height);
+    const indent = rtl ? open.indent : 0;
+    let used = open.x - open.hang - indent;
+    let free = band.right - indent - band.left - used;
+    // A justified line fills its room (CSS Text 3, 7.4). Not yet one that
+    // reads right to left, whose pieces are in visual order by now and would
+    // take their shares from the wrong end: that is left at its start, as it
+    // was.
+    if (justify && !rtl && !reordered && Number.isFinite(free) && free > 0) {
+        const grew = justifyLine(open, free, justify);
+        used += grew;
+        free -= grew;
+    }
+    let dx = band.left - open.left - indent;
+    if (shift > 0 && Number.isFinite(free) && free > 0)
+        dx += free * shift;
+    if (dx) {
+        for (const text of open.texts)
+            text.drawX += dx;
+        for (const placed of open.atomics)
+            placed.x += dx;
+        for (const edge of open.edges)
+            edge.x += dx;
+        open.left += dx;
     }
-    height = Math.max(height, ascent + descent);
-    const baseline = Math.max(ascent, (height - ascent - descent) / 2 + ascent);
     let textStart = Infinity;
     let textEnd = 0;
     for (const text of open.texts) {
@@ -418,63 +1505,597 @@ function finishLine(open, y) {
         textEnd = Math.max(textEnd, text.textEnd);
     }
     const line = {
-        x: open.left,
+        x: open.left + indent,
         y,
-        width: open.x,
+        width: used,
         height,
         baseline,
         texts: open.texts,
         textStart: Number.isFinite(textStart) ? textStart : 0,
         textEnd,
         atomics: open.atomics,
+        ...(open.edges.length ? { edges: open.edges } : null),
     };
     for (const placed of open.atomics)
-        placed.y = y + alignAtomic(placed.box, line);
+        placed.y = y + alignAtomic(placed, line);
     // Every fragment on this line shares the line's baseline, whatever its own
-    // layout thinks: that is what makes a small `<sup>` beside body text sit on
-    // the same baseline rather than on its own.
-    for (const text of open.texts) {
+    // layout thinks: that is what makes a small `<span>` beside body text sit
+    // on the same baseline rather than on its own. One that `vertical-align`
+    // raises is drawn that far above it.
+    for (let i = 0; i < open.texts.length; i += 1) {
+        const text = open.texts[i];
         const natural = text.layout.lines[text.layoutLine];
-        text.drawY = y + baseline - natural.baseline - natural.y;
+        let at = y + baseline;
+        const lift = lifted?.[i];
+        if (lift) {
+            const room = lift.edge && edges.get(lift.edge.box);
+            if (lift.edge?.to === 'top')
+                at = y + room.ascent - lift.raise;
+            else if (lift.edge)
+                at = y + height - room.descent - lift.raise;
+            else
+                at -= lift.raise;
+            if (at !== y + baseline) {
+                TEXT_RAISES.set(text, y + baseline - at);
+                SHIFTED_LINES.add(line);
+            }
+            // and the boxes it is in, up to the `top` or `bottom` one, whose
+            // backgrounds are drawn from their own baselines
+            if (lift.edge && lifts) {
+                const owner = text.spans.boxAt?.(text.layoutStart);
+                for (let at2 = owner?.parent; at2?.kind === 'inline'; at2 = at2.parent) {
+                    const placed = lifts.edgeOf(at2);
+                    if (!placed)
+                        break;
+                    const room = edges.get(placed.edge);
+                    if (!room)
+                        break;
+                    const own = placed.edge.style.verticalAlign === 'top'
+                        ? y + room.ascent
+                        : y + height - room.descent;
+                    let raises = LINE_BOX_RAISES.get(line);
+                    if (!raises)
+                        LINE_BOX_RAISES.set(line, (raises = new Map()));
+                    raises.set(at2, y + baseline - (own - placed.raise));
+                    SHIFTED_LINES.add(line);
+                }
+            }
+        }
+        text.drawY = at - natural.baseline;
     }
     return line;
 }
+/**
+ * Put a line's pieces in visual order. The text and the atomics first, by
+ * UAX #9's L2 over pieces rather than characters: a fragment is in order
+ * inside itself already — the engine laid it out bidirectionally — so what
+ * is left to order is the fragments and the atomics between them, each at
+ * a level — a fragment the direction its letters read in, or the
+ * paragraph's where they read both ways, and a neutral (an atomic, a
+ * fragment of spaces and digits) its neighbours' where they agree and the
+ * paragraph's where they do not (N1, N2).
+ *
+ * Then each element's edges, innermost first, around what of it is on the
+ * line: CSS 2.1 8.6 puts an ltr element's left margin, border and padding
+ * on its leftmost box and a rtl one's right ones on its rightmost, which is
+ * a matter of its `direction` rather than of which way its text reads — so
+ * an edge is placed beside its element's pieces, never ordered among them.
+ * Each piece keeps the room it took, and a right-to-left fragment's hung
+ * trailing space goes to its left, where its logical end is.
+ */
+function reorderLine(open, rtl) {
+    const order = open.order;
+    const n = order.length;
+    if (!n)
+        return;
+    const content = [];
+    for (let i = 0; i < n; i += 1)
+        if (order[i].kind !== 'edge')
+            content.push(i);
+    const strong = content.map((i) => {
+        const p = order[i];
+        if (p.kind !== 'text' || p.reads === null)
+            return null;
+        return p.reads === 'mixed' ? rtl : p.reads === 'rtl';
+    });
+    const strongAt = (from, step) => {
+        for (let k = from + step; k >= 0 && k < content.length; k += step) {
+            if (strong[k] !== null)
+                return strong[k];
+        }
+        return rtl;
+    };
+    const isRtl = strong.map((r, k) => {
+        if (r !== null)
+            return r;
+        const before = strongAt(k, -1);
+        return before === strongAt(k, 1) ? before : rtl;
+    });
+    // R is level 1 in either paragraph; L is 0 in a left-to-right one and 2
+    // in a right-to-left one
+    const levels = isRtl.map((r) => (r ? 1 : rtl ? 2 : 0));
+    const visual = content.map((_, k) => k);
+    for (let level = Math.max(0, ...levels); level >= 1; level -= 1) {
+        for (let a = 0; a < visual.length;) {
+            if (levels[visual[a]] < level) {
+                a += 1;
+                continue;
+            }
+            let b = a;
+            while (b < visual.length && levels[visual[b]] >= level)
+                b += 1;
+            for (let i = a, j = b - 1; i < j; i += 1, j -= 1) {
+                [visual[i], visual[j]] = [visual[j], visual[i]];
+            }
+            a = b;
+        }
+    }
+    const seq = visual.map((k) => content[k]);
+    const elements = new Map();
+    for (let i = 0; i < n; i += 1) {
+        const p = order[i];
+        if (p.kind !== 'edge')
+            continue;
+        const sides = elements.get(p.item.box) ?? { start: null, end: null };
+        sides[p.item.side] = i;
+        elements.set(p.item.box, sides);
+    }
+    const inside = [...elements].sort(([a], [b]) => depthOf(b) - depthOf(a));
+    for (const [box, { start, end }] of inside) {
+        // what of the element is on this line: everything between its edges,
+        // or the line's end where one of them is on another line
+        const from = start ?? -1;
+        const to = end ?? n;
+        let lo = -1;
+        let hi = -1;
+        for (let k = 0; k < seq.length; k += 1) {
+            if (seq[k] > from && seq[k] < to) {
+                if (lo < 0)
+                    lo = k;
+                hi = k;
+            }
+        }
+        if (lo < 0) {
+            // Nothing of it here but its edges: they go where it is in the text,
+            // after what comes before it, in the paragraph's direction.
+            let at = rtl ? seq.length : 0;
+            for (let i = from - 1; i >= 0; i -= 1) {
+                const k = seq.indexOf(i);
+                if (k >= 0) {
+                    at = rtl ? k : k + 1;
+                    break;
+                }
+            }
+            lo = at;
+            hi = at - 1;
+        }
+        const ltr = box.style.direction !== 'rtl';
+        const left = ltr ? start : end;
+        const right = ltr ? end : start;
+        if (right !== null)
+            seq.splice(hi + 1, 0, right);
+        if (left !== null)
+            seq.splice(lo, 0, left);
+    }
+    let x = order[0].at;
+    for (const i of seq) {
+        const piece = order[i];
+        const room = (i + 1 < n ? order[i + 1].at : open.x) - piece.at;
+        let dx = x - piece.at;
+        if (piece.kind === 'text') {
+            const natural = piece.item.layout.lines[piece.item.layoutLine];
+            const k = content.indexOf(i);
+            if (isRtl[k] && natural)
+                dx += Math.max(0, room - natural.width);
+            piece.item.drawX += dx;
+        }
+        else {
+            piece.item.x += dx;
+        }
+        x += room;
+    }
+}
+/** Whether a piece can be out of place in logical order: anything on a
+ *  right-to-left line, a fragment that reads right to left, or the edge of
+ *  an element whose direction is not the line's. A line of left-to-right
+ *  text, the common one, is placed as it was built. */
+function needsOrdering(piece, rtl) {
+    if (rtl)
+        return true;
+    if (piece.kind === 'text')
+        return piece.reads === 'rtl';
+    return piece.kind === 'edge' && piece.item.box.style.direction === 'rtl';
+}
+/** How deep a box is in the tree — an element inside another is deeper. */
+export function depthOf(box) {
+    let depth = 0;
+    for (let at = box.parent; at; at = at.parent)
+        depth += 1;
+    return depth;
+}
+/**
+ * Which way the text from `start` to `end` of a segment's runs reads, from
+ * its letters. Asked of the text rather than of the engine's runs: a run of
+ * the space before a word reads the paragraph's way wherever it starts a
+ * fragment, which says nothing about the word, and an engine may not say
+ * which way its runs went at all.
+ */
+function readingOf(runs, start, end) {
+    let right = false;
+    let left = false;
+    let at = 0;
+    for (const run of runs) {
+        const length = run.text.length;
+        const from = Math.max(start, at);
+        const to = Math.min(end, at + length);
+        if (to > from) {
+            const text = to - from === length ? run.text : run.text.slice(from - at, to - at);
+            right ||= RIGHT_TO_LEFT.test(text);
+            left ||= LEFT_TO_RIGHT.test(text);
+        }
+        at += length;
+        if (at >= end)
+            break;
+    }
+    return right ? (left ? 'mixed' : 'rtl') : left ? 'ltr' : null;
+}
+/** A letter of a script written right to left — Hebrew, Arabic, Syriac,
+ *  Thaana, N'Ko and their neighbours, their presentation forms, and the
+ *  supplementary planes' right-to-left blocks — and any other letter. */
+const RIGHT_TO_LEFT = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF\u{10800}-\u{10FFF}\u{1E800}-\u{1EFFF}]/u;
+const LEFT_TO_RIGHT = /(?![\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF\u{10800}-\u{10FFF}\u{1E800}-\u{1EFFF}])\p{L}/u;
 /** Where an atomic's top edge sits, relative to the line box top. */
-function alignAtomic(box, line) {
-    const h = box.height + box.marginTop + box.marginBottom;
+function alignAtomic(placed, line) {
+    const box = placed.box;
     switch (box.style.verticalAlign) {
         case 'top':
             return 0;
         case 'bottom':
-            return line.height - h;
-        case 'middle':
-            return (line.height - h) / 2;
-        case 'sub':
-            return line.baseline - h + line.height * 0.1;
-        case 'super':
-            return line.baseline - h - line.height * 0.25;
+            return line.height - (box.height + box.marginTop + box.marginBottom);
         default:
-            if (typeof box.style.verticalAlign === 'number') {
-                return line.baseline - h - box.style.verticalAlign;
-            }
-            return line.baseline - h;
+            return line.baseline - atomicBaseline(box) - (placed.raise ?? 0);
     }
 }
-// --- gathering --------------------------------------------------------------
-/** Flatten an inline subtree into a stream of runs, atomics and breaks. */
-function collect(box, out) {
-    for (const child of box.children) {
-        if (child.outOfFlow || child.isFloat)
-            continue;
-        switch (child.kind) {
-            case 'text':
+/**
+ * How far an atomic's `vertical-align` raises its baseline above its
+ * parent's (CSS 2.1 10.8.1), as `Lifts` raises an inline box's: `sub` and
+ * `super` by a fifth and a third of the parent's font size and a pixel,
+ * `text-top` and `text-bottom` to the edges of the parent's font, `middle`
+ * by its middle to half the parent's x-height above the baseline, a length
+ * by itself and a percentage of its own line height. `top` and `bottom` are
+ * the line box's edges, and raise nothing from a baseline.
+ *
+ * `middle` is the parent's baseline, not the middle of the line: an image
+ * set `middle` beside text in a line an image before it made tall sat
+ * where that image left room, and drew the text beside it a pixel off.
+ * Read before the line moves the atomic, as `atomicBaseline` is.
+ */
+function atomicRaise(fonts, box, parent) {
+    const va = box.style.verticalAlign;
+    switch (va) {
+        case 'baseline':
+        case 'top':
+        case 'bottom':
+            return 0;
+        case 'sub':
+            return -(parent.fontSize / 5 + parent.fontSize / 16);
+        case 'super':
+            return parent.fontSize / 3 + parent.fontSize / 16;
+    }
+    const h = box.height + box.marginTop + box.marginBottom;
+    const b = atomicBaseline(box);
+    switch (va) {
+        case 'text-top':
+            return faceExtent(fonts, parent).ascent - b;
+        case 'text-bottom':
+            return h - b - faceExtent(fonts, parent).descent;
+        case 'middle':
+            return xHeightOf(fonts, parent) / 2 + h / 2 - b;
+        default:
+            return typeof va === 'number'
+                ? va
+                : resolve(va, lineHeightOf(fonts, box.style));
+    }
+}
+/**
+ * Where an atomic's baseline is, from the top of its margin box (CSS 2.1
+ * 10.8.1, 17.5.3): an inline-block's is its last line box's, an
+ * inline-table's its first row's — its first line box's — and the bottom of
+ * its margin box where it has none, is replaced, or clips what overflows
+ * it. Set bottom-on-baseline, an inline-block's text sat its descent above
+ * the text beside it, and a line holding one grew by as much.
+ *
+ * Read while the atomic is still where it was laid out, before the line
+ * moves it: its lines are then at the same offset from its top as they will
+ * be after.
+ */
+function atomicBaseline(box) {
+    const bottom = box.height + box.marginTop + box.marginBottom;
+    if (box.kind === 'replaced' ||
+        scrolls(box.style) ||
+        // layout containment keeps its baseline in (CSS Containment 2, 3.3)
+        box.style.contain & CONTAIN_LAYOUT) {
+        return bottom;
+    }
+    const baseline = box.kind === 'table'
+        ? tableBaseline(box)
+        : // an inline flex box sits on its first (CSS Flexbox 8.5), where an
+            // inline block sits on its last line's
+            box.kind === 'flex'
+                ? firstBaselineIn(box)
+                : lastBaselineIn(box);
+    return baseline === null ? bottom : box.marginTop + (baseline - box.y);
+}
+/**
+ * A flex container's first baseline, or its last (CSS Flexbox 8.5): that
+ * of the first item on its first line that is aligned by its baseline — the
+ * last on its last line — or where none is, of its first item, or last,
+ * in `order`. An item gives its own, or where it has none, its border
+ * box's bottom edge. Not its last child's: an `inline-flex` of a small
+ * item and a big one sat on the big one's baseline. Null for a box with no
+ * item.
+ */
+function flexBaseline(box, first) {
+    let items = [];
+    let reordered = false;
+    for (const child of box.children) {
+        if (child.outOfFlow || child.isFloat)
+            continue;
+        if (child.kind === 'text' || child.kind === 'break')
+            continue;
+        if (child.style.order !== 0)
+            reordered = true;
+        items.push(child);
+    }
+    if (!items.length)
+        return null;
+    if (reordered)
+        items.sort((a, b) => a.style.order - b.style.order);
+    if (!first)
+        items = items.reverse();
+    const style = box.style;
+    if (style.flexDirection.startsWith('row') && !style.grid) {
+        // a line ends where the next item does not go on along the main axis,
+        // which from the last item is where it goes on
+        const back = ((style.flexDirection === 'row-reverse') !==
+            (style.direction === 'rtl')) !==
+            !first;
+        let last = NaN;
+        for (const item of items) {
+            if (!Number.isNaN(last) && (back ? item.x >= last : item.x <= last)) {
+                break;
+            }
+            last = item.x;
+            const align = item.style.alignSelf === 'auto'
+                ? style.alignItems
+                : item.style.alignSelf;
+            if (align === 'baseline')
+                return itemBaselineOf(item, first, style);
+        }
+    }
+    return itemBaselineOf(items[0], first, style);
+}
+/** A flex item's baseline, in document coordinates: its first line's or
+ *  its last's — its bottom margin edge where it clips what it holds — or
+ *  where it has none, its border box's bottom edge, which a grid does not
+ *  take from its item, and has none of its own then (CSS Grid 1, 9). */
+function itemBaselineOf(item, first, container) {
+    const found = childBaseline(item, first ? firstBaselineIn : lastBaselineIn);
+    if (found !== null)
+        return found;
+    return container.grid ? null : item.y + item.height;
+}
+/**
+ * A table's baseline: its first row's (CSS 2.1 17.5.3), which is the first
+ * line of a cell in the row, or where no cell in it has a line, the bottom
+ * content edge of the row's lowest cell. Not the table's bottom: a table
+ * of empty rows stands on its first one, and the rest hang below the line.
+ */
+function tableBaseline(table) {
+    const { cells } = tableGrid(table);
+    let lowest = -Infinity;
+    for (const cell of cells) {
+        if (cell.row > 0)
+            break;
+        const found = firstBaselineIn(cell.box);
+        if (found !== null)
+            return found;
+        const b = cell.box;
+        lowest = Math.max(lowest, b.y + b.height - b.padBottom - b.borderBottom);
+    }
+    return lowest === -Infinity ? null : lowest;
+}
+/**
+ * The baseline a box's content gives it, in document coordinates: its last
+ * line box's, or its last in-flow child's with one — and a child that clips
+ * what overflows it gives its bottom margin edge and no deeper, whatever
+ * text it holds (CSS Box Alignment's synthesized baseline). Null where
+ * nothing in it has one.
+ */
+function lastBaselineIn(box) {
+    // a flex box's is its items', in the order it lays them out
+    if (box.kind === 'flex')
+        return flexBaseline(box, false);
+    if (box.lines?.length) {
+        const line = box.lines[box.lines.length - 1];
+        return line.y + line.baseline;
+    }
+    for (let i = box.children.length - 1; i >= 0; i -= 1) {
+        const found = childBaseline(box.children[i], lastBaselineIn);
+        if (found !== null)
+            return found;
+    }
+    return null;
+}
+/** The same, from the first line box or child: a table's baseline is its
+ *  first row's, and so is a table cell's. */
+export function firstBaselineIn(box) {
+    if (box.kind === 'flex')
+        return flexBaseline(box, true);
+    if (box.lines?.length)
+        return box.lines[0].y + box.lines[0].baseline;
+    for (const child of box.children) {
+        const found = childBaseline(child, firstBaselineIn);
+        if (found !== null)
+            return found;
+    }
+    return null;
+}
+function childBaseline(child, inside) {
+    if (child.outOfFlow || child.isFloat || child.kind === 'replaced') {
+        return null;
+    }
+    if (scrolls(child.style)) {
+        return child.y + child.height + child.marginBottom;
+    }
+    return inside(child);
+}
+/**
+ * The static position of each absolutely positioned box among a
+ * paragraph's content (CSS 2.1 10.3.7, 10.6.4): where it would have been
+ * in flow, found from the content before it. A block-level one would have
+ * broken the line that content is on, so it goes under that line at the
+ * line's start; an inline-level one goes on it, where the pen stood after
+ * that content, or under it where a forced break ends the text; either goes
+ * at the top where nothing comes before it. Taken as the block's content
+ * top for every one of them, a box after a line of text was drawn over that
+ * line, and a menu under its link came up on it. Not from a probe of
+ * intrinsic width, whose room is no place for one.
+ */
+function staticPositions(statics, items, lines, block, options) {
+    if (!Number.isFinite(options.width))
+        return;
+    for (const { index, box } of statics) {
+        const inline = INLINE_BEFORE_ABSOLUTE.has(box.style);
+        let top = lines.length ? lines[0].y : 0;
+        let x = 0;
+        const after = lines.length ? penAfter(items, index, lines) : null;
+        if (after) {
+            const { line, pen, broken } = after;
+            if (inline && !broken) {
+                top = line.y;
+                x = pen;
+            }
+            else {
+                top = line.y + line.height;
+            }
+        }
+        box.staticPosition = {
+            from: block,
+            x: options.originX + x - block.x,
+            right: options.originX + options.width - block.x,
+            y: options.startY + top - block.y,
+        };
+    }
+}
+/** The line the content before `items[index]` ended on, where the pen
+ *  stood after it, and whether it ended in a forced break. Null where no
+ *  text or atomic comes before. */
+function penAfter(items, index, lines) {
+    for (let i = index - 1; i >= 0; i -= 1) {
+        const item = items[i];
+        if (item.kind === 'edge') {
+            // an inline box's margin, border or padding is content, which keeps
+            // its line from being one of no height (CSS 2.1 9.4.2), even where
+            // they add up to no width
+            if (!hasEdgeOn(item.box, item.side))
+                continue;
+            for (const line of lines) {
+                const placed = line.edges?.find((e) => e.box === item.box && e.side === item.side);
+                if (placed) {
+                    return { line, pen: placed.x + placed.width, broken: false };
+                }
+            }
+            continue;
+        }
+        if (item.kind === 'atomic') {
+            for (const line of lines) {
+                const placed = line.atomics.find((a) => a.box === item.box);
+                if (!placed)
+                    continue;
+                const pen = placed.x + item.box.width + item.box.marginRight;
+                return { line, pen, broken: false };
+            }
+            return null;
+        }
+        if (item.kind !== 'text' || item.control)
+            continue;
+        const end = item.start + item.length;
+        const line = lines.find((l) => l.textStart < end && end <= l.textEnd) ??
+            lines[lines.length - 1];
+        const broken = item.run.text.endsWith('\n');
+        return { line, pen: broken ? 0 : caretX(line, end), broken };
+    }
+    return null;
+}
+/** Whether an inline box has margin, border or padding on a side. */
+function hasEdgeOn(box, side) {
+    const left = (side === 'start') !== (box.style.direction === 'rtl');
+    return left
+        ? box.marginLeft !== 0 || box.borderLeft !== 0 || box.padLeft !== 0
+        : box.marginRight !== 0 || box.borderRight !== 0 || box.padRight !== 0;
+}
+/** Where the caret at document offset `at` stands on a line, in the
+ *  paragraph's coordinates: the line's end where no text of it holds the
+ *  offset. */
+function caretX(line, at) {
+    for (const text of line.texts) {
+        if (at < text.textStart || at > text.textEnd)
+            continue;
+        const offsets = layoutOffsets(text.layout);
+        const units = layoutOffsetOf(text, at, true);
+        const caret = text.layout.caretPosition(codePointAtOffset(offsets, units));
+        return text.drawX + caret.x;
+    }
+    return line.x + line.width;
+}
+// --- gathering --------------------------------------------------------------
+/** Flatten an inline subtree into a stream of runs, atomics, breaks and the
+ *  edges of the inline boxes the text sits in. */
+/** Gather an inline formatting context's content into `out`, and answer
+ *  how many floats it gathered — none unless `floats` asks for them. */
+function collect(box, out, width, fonts, block, floats, 
+/** Where each absolutely positioned box among the content is: before the
+ *  item at `index`. No item of the stream, which reads none of them. */
+statics, 
+/** Whether the text is an inline box's that has a margin, border or
+ *  padding at a side, which parts it from the text beside it. */
+apart = false) {
+    let floated = 0;
+    for (const child of box.children) {
+        if (child.outOfFlow) {
+            statics?.push({ index: out.length, box: child });
+            continue;
+        }
+        if (child.isFloat) {
+            if (floats) {
+                out.push({ kind: 'float', box: child });
+                floated += 1;
+            }
+            continue;
+        }
+        switch (child.kind) {
+            case 'text':
                 if (child.text) {
-                    out.push({
-                        kind: 'text',
-                        run: runFor(child.text, child.style, child.el),
-                        box: child,
-                        length: child.text.length,
-                    });
+                    const run = runFor(heldText(child), child.style);
+                    // shaping is broken across the edge (CSS Text 3, 7.3), and the
+                    // engine shapes a word that runs across spans shaped alike as one:
+                    // its text is shaped on its own. At both of its sides, the one
+                    // with no edge among them, as the engine takes it
+                    if (apart)
+                        run.shapeApart = true;
+                    if (child.style.wordSpacing) {
+                        wordSpaced(out, child, run, child.style.wordSpacing);
+                    }
+                    else {
+                        out.push({
+                            kind: 'text',
+                            run,
+                            box: child,
+                            length: child.text.length,
+                            start: child.textStart,
+                        });
+                    }
                 }
                 break;
             case 'break':
@@ -495,11 +2116,52 @@ function collect(box, out) {
                     },
                     box: child,
                     length: 1,
+                    start: child.textStart,
                 });
                 break;
-            case 'inline':
-                collect(child, out);
+            case 'inline': {
+                const [start, end] = inlineEdges(child, width, fonts);
+                // Both edges or neither, so that an element with any is bounded on
+                // the line: its pieces are what lies between them, which is how a
+                // right-to-left line finds them (`reorderLine`), and how a rounded
+                // background knows the fragments that open and close it, to round
+                // only those corners — so it gets them even at width zero.
+                // And a box that `position: relative` moves or `vertical-align`
+                // raises has them, so that its text is laid out apart from the text
+                // around it, to be drawn where the box goes (`offsetInline`,
+                // `Lifts`)
+                // and a margin a border cancels is still an edge, which keeps its
+                // line from being one of no height (CSS 2.1 9.4.2)
+                const edged = start !== 0 ||
+                    end !== 0 ||
+                    hasEdgeOn(child, 'start') ||
+                    hasEdgeOn(child, 'end') ||
+                    (child.decoration !== null &&
+                        child.style.borderRadius.some((r) => r !== 0)) ||
+                    isOffset(child.style) ||
+                    child.style.verticalAlign !== 'baseline' ||
+                    (fonts !== null && ownsLeading(fonts, block, child.style));
+                if (edged) {
+                    out.push({ kind: 'edge', box: child, side: 'start', width: start });
+                }
+                // `unicode-bidi` as the controls it stands for, inside the box's
+                // edges and around its text, where it has any
+                const controls = child.style.unicodeBidi !== 'normal' &&
+                    child.subtreeTextEnd > child.subtreeTextStart
+                    ? bidiControls(child.style, false)
+                    : null;
+                if (controls) {
+                    pushControls(out, controls[0], child, child.subtreeTextStart);
+                }
+                floated += collect(child, out, width, fonts, block, floats, statics, start !== 0 || end !== 0);
+                if (controls) {
+                    pushControls(out, controls[1], child, child.subtreeTextEnd);
+                }
+                if (edged) {
+                    out.push({ kind: 'edge', box: child, side: 'end', width: end });
+                }
                 break;
+            }
             default:
                 // Everything else that reached an inline context is inline-level and
                 // atomic: a replaced element, an `inline-block`, an `inline-table`.
@@ -507,45 +2169,694 @@ function collect(box, out) {
                 break;
         }
     }
+    return floated;
+}
+/**
+ * What a paragraph does with a word too long for its line: cuts it where
+ * its style or any text in it says a word may be cut — `overflow-wrap`, or
+ * `word-break` or `line-break: anywhere`, which cut one whatever
+ * `overflow-wrap` says (CSS Text 3, 5.2 and 5.3) — and lets it run past the
+ * line's end where nothing does, as a browser does. The engine takes one answer for the paragraph, so a span
+ * that breaks its words breaks the paragraph's.
+ */
+function overflowWrapOf(style, items) {
+    if (breaksWords(style))
+        return 'break-word';
+    for (const item of items) {
+        if (item.kind === 'text' && breaksWords(item.box.style)) {
+            return 'break-word';
+        }
+    }
+    return 'normal';
+}
+/** A `text-overflow` cut on a line that does not wrap puts its ellipsis at
+ *  the box's edge, inside a word where one runs past it, as a browser
+ *  does — which is the engine cutting the word there. */
+function cutWrap(style, cut, wrapWords) {
+    return cut && !wraps(style) ? 'break-word' : wrapWords;
+}
+function breaksWords(style) {
+    return (style.overflowWrap !== 'normal' ||
+        style.wordBreak === 'break-all' ||
+        style.wordBreak === 'break-word' ||
+        style.lineBreakAnywhere);
+}
+/**
+ * Keep the text of a `nowrap` element together where its block wraps (CSS
+ * 2.1 16.6). Its runs share the element as their `nowrap`, which ntk makes
+ * no break inside or between; and, for an engine that does not read it,
+ * a space it may not break after is a no-break space, as wide and as many,
+ * so every offset holds. Whether a line breaks between two characters is
+ * the call of the nearest element holding both (CSS Text 3, 5.1), so the
+ * space such an element ends on stays one to break at where the text after
+ * it is not the same element's: text that wraps, or another `nowrap`
+ * element's — two tags side by side, a collapsed space between them.
+ */
+function holdNoWrap(items, block) {
+    let last = true;
+    let nextGroup = null;
+    for (let i = items.length - 1; i >= 0; i -= 1) {
+        const item = items[i];
+        if (item.kind !== 'text')
+            continue;
+        const group = wraps(item.box.style) ? null : noWrapGroup(item.box, block);
+        if (group) {
+            const text = item.run.text;
+            let held = text;
+            // `pre`'s are no-break spaces already (`runFor`)
+            if (item.box.style.whiteSpace === 'nowrap' && text.includes(' ')) {
+                held = text.replace(/ /g, '\u00a0');
+                if (text.endsWith(' ') && (last || nextGroup !== group)) {
+                    held = held.slice(0, -1) + ' ';
+                }
+            }
+            item.run = { ...item.run, text: held, nowrap: group };
+        }
+        last = false;
+        nextGroup = group;
+    }
+}
+/** The element a text that does not wrap is held together by: the outermost
+ *  one inside the block that does not wrap either. */
+function noWrapGroup(box, block) {
+    let group = box;
+    for (let up = box.parent; up && up !== block; up = up.parent) {
+        if (wraps(up.style))
+            break;
+        group = up;
+    }
+    return group;
+}
+/** The bidi controls `unicode-bidi` stands for, opening and closing (CSS
+ *  Writing Modes 3, 2.4.2), in the direction of the box; null for `normal`.
+ *  On a block only an override opens anything: the block's embedding is
+ *  its paragraph's direction. */
+function bidiControls(style, block) {
+    const rtl = style.direction === 'rtl';
+    const override = rtl ? '\u202E' : '\u202D';
+    switch (style.unicodeBidi) {
+        case 'embed':
+            return [rtl ? '\u202B' : '\u202A', '\u202C'];
+        case 'bidi-override':
+            return [override, '\u202C'];
+        case 'isolate':
+            return [rtl ? '\u2067' : '\u2066', '\u2069'];
+        case 'isolate-override':
+            return block
+                ? [override, '\u202C']
+                : [(rtl ? '\u2067' : '\u2066') + override, '\u202C\u2069'];
+        case 'plaintext':
+            return ['\u2068', '\u2069'];
+        default:
+            return null;
+    }
+}
+/** Bidi controls as items of their own, one a unit, at a document index
+ *  none of them takes up. */
+function pushControls(out, controls, box, start) {
+    for (const control of controls) {
+        out.push({
+            kind: 'text',
+            run: runFor(control, box.style),
+            box,
+            length: 1,
+            start,
+            control: true,
+        });
+    }
+}
+function hasControls(items) {
+    for (const item of items)
+        if (item.kind === 'text' && item.control)
+            return true;
+    return false;
+}
+/**
+ * A text box with `word-spacing`, as runs of its words and of the spaces
+ * between them, each space run carrying the extra as letter spacing: the
+ * engines space letters, not words, and a space's letter spacing is exactly
+ * the room CSS adds after a word separator (16.4 — the space and the
+ * no-break space). Only text that asks for it is split.
+ */
+function wordSpaced(out, box, run, spacing) {
+    const text = box.text;
+    const push = (from, to, extra) => {
+        if (to <= from)
+            return;
+        out.push({
+            kind: 'text',
+            run: {
+                ...run,
+                text: text.slice(from, to),
+                ...(extra ? { letterSpacing: (run.letterSpacing ?? 0) + extra } : null),
+            },
+            box,
+            length: to - from,
+            start: box.textStart + from,
+        });
+    };
+    let from = 0;
+    for (const m of text.matchAll(/[ \u00A0]+/g)) {
+        push(from, m.index, 0);
+        push(m.index, m.index + m[0].length, spacing);
+        from = m.index + m[0].length;
+    }
+    push(from, text.length, 0);
+}
+/**
+ * An inline box's margin, border and padding, resolved onto it — percentages
+ * of the containing block's width, as a block's are — and the widths of its
+ * two edges on the line: the start side's before its first fragment, the
+ * end side's after its last. One with a background or a border to paint
+ * also notes its face's ascent and descent, the height CSS paints them over
+ * (10.6.1, the content area), so paint needs no font.
+ */
+function inlineEdges(box, width, fonts) {
+    const s = box.style;
+    box.borderTop = usedBorder(s.borderTopWidth, s.borderTopStyle);
+    box.borderRight = usedBorder(s.borderRightWidth, s.borderRightStyle);
+    box.borderBottom = usedBorder(s.borderBottomWidth, s.borderBottomStyle);
+    box.borderLeft = usedBorder(s.borderLeftWidth, s.borderLeftStyle);
+    box.padTop = resolve(s.paddingTop, width);
+    box.padRight = resolve(s.paddingRight, width);
+    box.padBottom = resolve(s.paddingBottom, width);
+    box.padLeft = resolve(s.paddingLeft, width);
+    box.marginLeft = resolve(s.marginLeft, width);
+    box.marginRight = resolve(s.marginRight, width);
+    if (box.cut) {
+        // a piece of a box broken around a block has no edge where it was cut
+        const rtl = s.direction === 'rtl';
+        if (box.cut & (rtl ? 2 : 1)) {
+            box.marginLeft = box.borderLeft = box.padLeft = 0;
+        }
+        if (box.cut & (rtl ? 1 : 2)) {
+            box.marginRight = box.borderRight = box.padRight = 0;
+        }
+    }
+    box.decoration = inlineDecoration(fonts, box, s);
+    const left = box.marginLeft + box.borderLeft + box.padLeft;
+    const right = box.padRight + box.borderRight + box.marginRight;
+    return s.direction === 'rtl' ? [right, left] : [left, right];
+}
+/**
+ * What an inline box draws around its text, in `s`: the extent of its face
+ * where it has a background, a border or an outline, and null where it
+ * draws none. Its borders are the ones `inlineEdges` just used. Shared with
+ * a pointer move that gives a link a background (`HtmlViewNode`).
+ */
+export function inlineDecoration(fonts, box, s) {
+    const decorated = !isTransparent(s.backgroundColor) ||
+        box.borderTop + box.borderRight + box.borderBottom + box.borderLeft > 0 ||
+        s.outlineStyle !== 'none';
+    return !decorated ? null : fonts ? faceExtent(fonts, s) : NO_EXTENT;
+}
+/** A border's width, or none where its style draws none. */
+function usedBorder(width, style) {
+    return style === 'none' || style === 'hidden' ? 0 : width;
+}
+/** A face's ascent and descent at a style's size, kept per font manager
+ *  and shared by the boxes set in it: by the style, which the cascade
+ *  shares between every element of a kind, and by the face, which styles
+ *  that differ in anything else share. */
+const FACE_EXTENTS = new WeakMap();
+/** The extent of a decorated box where there are no fonts to ask. */
+const NO_EXTENT = { ascent: 0, descent: 0 };
+/** A style's face's ascent and descent, which an inline box's background
+ *  is painted over. */
+export function faceExtentOf(fonts, style) {
+    return faceExtent(fonts, style);
+}
+function faceExtent(fonts, style) {
+    let cache = FACE_EXTENTS.get(fonts);
+    if (!cache) {
+        cache = { byStyle: new WeakMap(), byFace: new Map() };
+        FACE_EXTENTS.set(fonts, cache);
+    }
+    let extent = cache.byStyle.get(style);
+    if (extent)
+        return extent;
+    const key = `${style.fontFamily}|${style.fontSize}|${style.fontWeight}|${style.fontStyle}`;
+    extent = cache.byFace.get(key);
+    if (!extent) {
+        try {
+            const m = fonts
+                .match(style.fontFamily, {
+                size: style.fontSize,
+                weight: style.fontWeight,
+                style: style.fontStyle,
+            })
+                .metrics(style.fontSize);
+            extent = { ascent: m.ascent, descent: m.descent };
+        }
+        catch {
+            extent = { ascent: style.fontSize * 0.8, descent: style.fontSize * 0.2 };
+        }
+        if (cache.byFace.size > 64)
+            cache.byFace.clear();
+        cache.byFace.set(key, extent);
+    }
+    cache.byStyle.set(style, extent);
+    return extent;
+}
+/**
+ * What a first line is made with where its `::first-line` sets its fonts
+ * (CSS 2.1 5.12.1). Its text is in the styles its boxes have on it — each
+ * element's own rules over what it inherits there, which takes the fonts
+ * from `::first-line` (CSS Pseudo 4, 2.1.2), so a `<small>` is smaller
+ * than the line's font and not than the block's — and it is laid out at
+ * the pseudo-element's line height. The pseudo-element is an inline box
+ * around the line's content, so its face at its line height is on the line
+ * with the block's strut, which stays: a `::first-line` of a smaller line
+ * height leaves the line as tall as the block's.
+ */
+function firstLineSetting(block, items, how, fonts, strut, justify) {
+    const style = how.style;
+    const of = (box) => box === block || !box.parent
+        ? style
+        : styleOnFirstLine(box, of(box.parent), how.styler);
+    const restyled = items.map((item) => {
+        if (item.kind !== 'text')
+            return item;
+        const run = restyledRun(item.run, item.box.style, of(item.box));
+        return run === item.run ? item : { ...item, run };
+    });
+    const lineHeight = lineHeightMultiplier(fonts, style);
+    const base = {
+        family: style.fontFamily,
+        size: style.fontSize,
+        weight: style.fontWeight,
+        style: style.fontStyle,
+        color: style.color,
+    };
+    const own = strutOf(fonts, style);
+    return {
+        items: restyled,
+        base,
+        lineHeight,
+        strut: strut && {
+            ascent: Math.max(strut.ascent, own.ascent),
+            descent: Math.max(strut.descent, own.descent),
+        },
+        lifts: new Lifts(fonts, style, of),
+        justify: justify && {
+            ...justify,
+            base,
+            options: { ...justify.options, lineHeight },
+        },
+    };
+}
+/**
+ * Each box's style on a first line (`FirstLineStyler`), kept for the style
+ * its parent has there: every pass asks again, and a style that is a new
+ * object each time is a new face to every cache that keys on one.
+ */
+const ON_FIRST_LINE = new WeakMap();
+/** A box's style on a first line, where its parent's there is `parent`. */
+function styleOnFirstLine(box, parent, styler) {
+    const known = ON_FIRST_LINE.get(box);
+    if (known && known.parent === parent)
+        return known.style;
+    const style = styler(box, parent);
+    ON_FIRST_LINE.set(box, { parent, style });
+    return style;
+}
+/** What a run takes from its style (`runFor`). */
+const RUN_STYLE = [
+    'family',
+    'size',
+    'weight',
+    'style',
+    'color',
+    'letterSpacing',
+    'features',
+    'underline',
+    'underlineStyle',
+    'underlineOffset',
+    'underlineThickness',
+    'strike',
+];
+/**
+ * A run of text in `style` rather than `own`, the style it was made in:
+ * what it has of neither — the room a tab or `word-spacing` adds to its
+ * letter spacing, a `nowrap` group, where its shaping is broken — kept.
+ */
+function restyledRun(run, own, style) {
+    if (style === own)
+        return run;
+    const fresh = runFor(run.text, style);
+    const out = { ...run };
+    for (const name of RUN_STYLE) {
+        if (fresh[name] === undefined)
+            delete out[name];
+        else
+            out[name] = fresh[name];
+    }
+    const added = (run.letterSpacing ?? 0) - (own.letterSpacing || 0);
+    if (added)
+        out.letterSpacing = (out.letterSpacing ?? 0) + added;
+    return out;
+}
+/**
+ * The first line's text in its `::first-line` colour: the runs before the
+ * line's end whose colour is the block's own, the one that ends past it cut
+ * there. A run in a colour of its own — a link's — keeps it, as an element
+ * inside the pseudo-element does. Colour moves no glyph, so the lines break
+ * where they did.
+ */
+function firstLineColour(items, firstLine) {
+    for (let i = 0; i < items.length; i += 1) {
+        const item = items[i];
+        if (item.kind !== 'text')
+            continue;
+        // past the line: a run in a colour of its own may have been the one
+        // across its end, so this is where the walk stops, not at the cut
+        if (item.start >= firstLine.end)
+            break;
+        if (item.run.color !== firstLine.from)
+            continue;
+        const cut = firstLine.end - item.start;
+        if (cut < item.length) {
+            items.splice(i + 1, 0, {
+                ...item,
+                run: { ...item.run, text: item.run.text.slice(cut) },
+                start: item.start + cut,
+                length: item.length - cut,
+            });
+            items[i] = {
+                ...item,
+                run: {
+                    ...item.run,
+                    text: item.run.text.slice(0, cut),
+                    color: firstLine.color,
+                },
+                length: cut,
+            };
+            break;
+        }
+        items[i] = { ...item, run: { ...item.run, color: firstLine.color } };
+    }
 }
-/** The `TextRun` one styled piece of text becomes. */
-function runFor(text, style, owner) {
-    // ntk hands unknown span fields back on the laid-out runs untouched, which
-    // is how the element reaches the paint and hit-test passes without a
-    // parallel structure to keep in step.
+/** The `TextRun` one styled piece of text becomes: its text, and what paint
+ *  needs of its style — nothing that names a box or an element, so that a
+ *  layout made from it can be kept for the next parse (`TextLayoutCache`). */
+/**
+ * A text box's text as it is laid out. `pre` keeps its spaces whole: none
+ * is broken after, and none hangs at a line's end, where a trailing space
+ * counts in the line's width. Laid out, they are no-break spaces, as wide
+ * and as many, so every offset holds (CSS Text 3, 4.1.3). Kept per box: a
+ * pass makes no new string, and the kept layouts find their text by
+ * identity before they compare it.
+ */
+/**
+ * Tabs a `white-space` keeps, set at their stops (CSS Text 3, 4.2): a stop
+ * every `tab-size` spaces of the block's font from the line's start, and a
+ * tab that would reach one less than half a `ch` on goes to the next.
+ * Neither engine has them — ntk draws a tab a space wide, and CoreText
+ * sets it at stops of its own every 28 points — so a tab is laid out as a
+ * space spaced out to its stop: text as the engine sees it and not as the
+ * document holds it, the way `heldText` holds a `pre`'s spaces. Where each
+ * tab starts is read off one layout of the paragraph with its tabs as
+ * spaces, and its inline boxes' edges and its atomics as the room they
+ * take, unwrapped: a line `pre-wrap` wraps sets the tabs after the wrap as
+ * though it had not, and a right-to-left one sets them a space wide.
+ *
+ * Read off each tab's run, which the tab is given of its own, and not off
+ * a caret: CoreText puts a caret after a spaced glyph part of the way
+ * into its spacing, so a tab after `word-spacing` was set from a place
+ * half the spacing short of where it is drawn.
+ */
+function setTabs(items, fonts, block, indent) {
+    // the paragraph as it will be laid out, an inline box's edges and an
+    // atomic as the room they take, each tab a run of its own, and where
+    // each text item starts in it
+    const runs = [];
+    const starts = new Map();
+    const tabs = new Set();
+    let units = 0;
+    for (const item of items) {
+        // a float is beside the line, and takes none of it
+        if (item.kind === 'float')
+            continue;
+        if (item.kind !== 'text') {
+            const box = item.box;
+            runs.push(spacerRun(fonts, block, item.kind === 'edge'
+                ? item.width
+                : box.width + box.marginLeft + box.marginRight));
+            units += 1;
+            continue;
+        }
+        starts.set(item, units);
+        const text = item.run.text;
+        if (item.control || !text.includes('\t')) {
+            runs.push(item.run);
+            units += text.length;
+            continue;
+        }
+        let done = 0;
+        for (let p = text.indexOf('\t'); p >= 0; p = text.indexOf('\t', p + 1)) {
+            if (p > done)
+                runs.push({ ...item.run, text: text.slice(done, p) });
+            // spaced a hair apart from its neighbours, which an engine that
+            // merges runs alike (CoreText) would otherwise take it into
+            tabs.add(units + p);
+            runs.push({
+                ...item.run,
+                text: spaceIn(item.box),
+                letterSpacing: (item.run.letterSpacing ?? 0) + tabs.size * HAIR,
+            });
+            done = p + 1;
+        }
+        if (done < text.length)
+            runs.push({ ...item.run, text: text.slice(done) });
+        units += text.length;
+    }
+    const natural = fonts.layout(runs, fontOf(block), {
+        direction: block.direction,
+    });
+    /** Where each tab starts, by its place in the layout's text. */
+    const found = new Map();
+    natural.lines.forEach((line, i) => {
+        for (const run of line.runs ?? []) {
+            if (tabs.has(run.start))
+                found.set(run.start, { x: line.x + run.x, line: i });
+        }
+    });
+    let offsets;
+    const space = advanceOf(fonts, fontOf(block), ' ') +
+        block.letterSpacing +
+        block.wordSpacing;
+    const every = block.tabSizeIsLength ? block.tabSize : block.tabSize * space;
+    const half = advanceOf(fonts, fontOf(block), '0') / 2;
+    const rtl = block.direction === 'rtl';
+    /** The room tabs have added to each line so far. */
+    const added = new Map();
+    const next = [];
+    for (const item of items) {
+        if (item.kind !== 'text' || item.control || !item.run.text.includes('\t')) {
+            next.push(item);
+            continue;
+        }
+        const text = item.run.text;
+        const at = starts.get(item);
+        // what the space a tab is laid out as takes before it is spaced out
+        const own = advanceOf(fonts, item.run, spaceIn(item.box)) +
+            (item.run.letterSpacing ?? 0);
+        const piece = (start, end, run) => {
+            next.push({
+                ...item,
+                run,
+                length: end - start,
+                start: item.start + start,
+            });
+        };
+        let done = 0;
+        for (let p = text.indexOf('\t'); p >= 0; p = text.indexOf('\t', p + 1)) {
+            if (p > done)
+                piece(done, p, { ...item.run, text: text.slice(done, p) });
+            let advance = own;
+            if (!rtl) {
+                const unit = at + p;
+                let caret = found.get(unit);
+                if (!caret) {
+                    // an engine that says nothing of its runs has a caret to go by
+                    if (offsets === undefined) {
+                        const joined = runs.map((run) => run.text).join('');
+                        offsets = /[\uD800-\uDFFF]/.test(joined)
+                            ? codeUnitOffsets(joined)
+                            : null;
+                    }
+                    caret = natural.caretPosition(offsets ? codePointAt(offsets, unit) : unit);
+                }
+                const before = added.get(caret.line) ?? 0;
+                const x = caret.x + before + (caret.line === 0 ? indent : 0);
+                if (every > 0) {
+                    let stop = (Math.floor(x / every) + 1) * every;
+                    if (stop - x < half)
+                        stop += every;
+                    advance = stop - x;
+                }
+                else
+                    advance = 0;
+                added.set(caret.line, before + advance - own);
+            }
+            piece(p, p + 1, {
+                ...item.run,
+                text: spaceIn(item.box),
+                letterSpacing: (item.run.letterSpacing ?? 0) + advance - own,
+            });
+            done = p + 1;
+        }
+        if (done < text.length) {
+            piece(done, text.length, { ...item.run, text: text.slice(done) });
+        }
+    }
+    items.splice(0, items.length, ...next);
+}
+/** The space a tab in a box is laid out as: a `pre`'s spaces are held
+ *  together (`heldText`), and so are its tabs. */
+function spaceIn(box) {
+    return box.style.whiteSpace === 'pre' ? '\u00a0' : ' ';
+}
+/** A block's font, as its runs name it (`runFor`). */
+function fontOf(style) {
+    return {
+        family: style.fontFamily,
+        size: style.fontSize,
+        weight: style.fontWeight,
+        style: style.fontStyle === 'normal' ? 'normal' : 'italic',
+    };
+}
+/** One character's advance in a font, kept per font manager. */
+function advanceOf(fonts, font, char) {
+    let kept = ADVANCES.get(fonts);
+    if (!kept)
+        ADVANCES.set(fonts, (kept = new Map()));
+    const key = `${font.family}|${font.size}|${font.weight}|${font.style}|${char}`;
+    let advance = kept.get(key);
+    if (advance === undefined) {
+        const face = {
+            family: font.family,
+            size: font.size,
+            weight: font.weight,
+            style: font.style,
+        };
+        // between two letters, so that no engine drops it as a line's end
+        advance =
+            fonts.layout([{ ...face, text: `x${char}x` }], face, {}).width -
+                fonts.layout([{ ...face, text: 'xx' }], face, {}).width;
+        kept.set(key, advance);
+    }
+    return advance;
+}
+const ADVANCES = new WeakMap();
+function heldText(box) {
+    if (box.style.whiteSpace !== 'pre' || !box.text.includes(' ')) {
+        return box.text;
+    }
+    let held = HELD.get(box);
+    if (held === undefined) {
+        held = box.text.replace(/ /g, '\u00a0');
+        HELD.set(box, held);
+    }
+    return held;
+}
+const HELD = new WeakMap();
+/**
+ * The OpenType features a style's text is shaped with: the `font-variant`
+ * longhands' and `font-kerning`'s, then `font-feature-settings`, which has
+ * the last word (CSS Fonts 3, 7.2). One object for each set of them, kept,
+ * because a run's fields are compared by identity — a new object a pass
+ * would find no layout the last pass made.
+ */
+export function featuresOf(style) {
+    const { fontKerning: kerning, fontVariantLigatures: ligatures, fontVariantNumeric: numeric, fontVariantCaps: caps, fontVariantPosition: position, fontFeatureSettings: settings, } = style;
+    if (!kerning && !ligatures && !numeric && !caps && !position && !settings) {
+        return null;
+    }
+    const key = `${kerning}|${ligatures}|${numeric}|${caps}|${position}|${settings}`;
+    let features = FEATURES.get(key);
+    if (!features) {
+        const out = {};
+        for (const part of [
+            kerning,
+            ligatures,
+            numeric,
+            caps,
+            position,
+            settings,
+        ]) {
+            if (!part)
+                continue;
+            for (const pair of part.split(',')) {
+                const at = pair.indexOf('=');
+                out[pair.slice(0, at)] = Number(pair.slice(at + 1));
+            }
+        }
+        features = Object.freeze(out);
+        FEATURES.set(key, features);
+    }
+    return features;
+}
+const FEATURES = new Map();
+/** A run of `text` in `style`: its face, its ink and its rules. Every
+ *  paint field of a run of the document's text is this function's, which
+ *  is what lets a pointer move re-ink a paragraph without laying it out
+ *  again (`HtmlViewNode._hoverInPlace`). */
+export function runFor(text, style) {
     const run = {
         text,
         family: style.fontFamily,
         size: style.fontSize,
         weight: style.fontWeight,
         style: style.fontStyle === 'normal' ? 'normal' : 'italic',
-        color: style.color,
+        // the glyphs' fill, which `-webkit-text-fill-color` sets apart from
+        // `color` — the decorations keep `color`
+        color: style.textFillColor === null
+            ? style.color
+            : inkColor(style.textFillColor, style.color),
+        // set here, and made true later for an inline box's text (`collect`):
+        // added to a run after it was made, it gave the runs of a document two
+        // shapes where the layout cache compares them, and a pass over 600 KB
+        // took 3 ms longer finding every paragraph's layout again
+        shapeApart: false,
     };
-    // An inline background fills the line box rather than hugging the ink:
-    // `<span style="background: yellow">` is a highlighter, and two adjacent
-    // highlighted spans must not leave a seam between them. That is exactly
-    // what richtext's `bgFill: 'line'` was added for.
-    if (!isTransparent(style.backgroundColor)) {
-        run.bg = inkColor(style.backgroundColor, style.color);
-        run.bgFill = 'line';
-    }
-    if (owner)
-        run.element = owner;
-    if (style.textDecorationLine === 'underline') {
-        run.underline = inkColor(style.textDecorationColor ?? 'currentColor', style.color);
+    if (style.letterSpacing)
+        run.letterSpacing = style.letterSpacing;
+    const features = featuresOf(style);
+    if (features)
+        run.features = features;
+    // Hidden text keeps its place on the line and draws nothing, rules
+    // included, and the text of a visible element inside it is its own run
+    // (CSS 2.1 11.2): drawn in no ink, it is laid out as it was
+    if (style.visibility !== 'visible') {
+        run.color = 'transparent';
+        return run;
+    }
+    // A background is not the run's: the inline box it belongs to paints it,
+    // behind every fragment of the box — nested elements' text included — and
+    // out to its padding (`paintInlineBoxes`).
+    // the element's own decorations and the ones propagated to it, in the
+    // colours of the elements that set them (`decorate`)
+    if (style.underline) {
+        run.underline = style.underline;
         // CSS's five rule styles and SGR 4's five are the same set under two
         // names; richtext speaks SGR's, so `solid` is `single` and `wavy` is
         // `curly`. The other three are spelled identically.
         run.underlineStyle =
-            style.textDecorationStyle === 'wavy'
+            style.underlineStyle === 'wavy'
                 ? 'curly'
-                : style.textDecorationStyle === 'solid'
+                : style.underlineStyle === 'solid'
                     ? 'single'
-                    : style.textDecorationStyle;
-    }
-    else if (style.textDecorationLine === 'line-through') {
-        run.strike = inkColor(style.textDecorationColor ?? 'currentColor', style.color);
+                    : style.underlineStyle;
+        if (style.underlineOffset !== null) {
+            run.underlineOffset = style.underlineOffset;
+        }
+        if (style.underlineThickness !== null) {
+            run.underlineThickness = style.underlineThickness;
+        }
     }
+    if (style.lineThrough)
+        run.strike = style.lineThrough;
     return run;
 }
 /**
@@ -556,16 +2867,46 @@ function runFor(text, style, owner) {
 class SpanMap {
     _laid = [];
     _doc = [];
+    _boxes = [];
+    /** Where the laid-out text has a unit that is no text of the document's:
+     *  a spacer, a bidi control. */
+    _gaps = null;
     laidOut = 0;
-    add(documentStart, length) {
+    add(documentStart, length, box = null) {
         this._laid.push(this.laidOut);
         this._doc.push(documentStart);
+        this._boxes.push(box);
+        if (!box) {
+            this._gaps ??= [];
+            for (let i = 0; i < length; i += 1)
+                this._gaps.push(this.laidOut + i);
+        }
         this.laidOut += length;
     }
+    /** Give a line's text the gaps in its part of the laid-out text, where
+     *  it has any. Set after the text is made rather than spread into it: a
+     *  spread in an object literal costs every line that has none. */
+    giveGaps(text, start, end) {
+        if (!this._gaps)
+            return;
+        const gaps = this._gaps.filter((at) => at >= start && at < end);
+        if (gaps.length)
+            text.gaps = gaps;
+    }
+    /** The text box whose text an offset in the laid-out text is. */
+    boxAt(offset) {
+        const i = this._entryAt(offset);
+        return i < 0 ? null : this._boxes[i];
+    }
     documentAt(offset) {
+        const i = this._entryAt(offset);
+        return i < 0 ? 0 : this._doc[i] + (offset - this._laid[i]);
+    }
+    /** The entry an offset falls in, or -1 when there are none. */
+    _entryAt(offset) {
         const laid = this._laid;
         if (!laid.length)
-            return 0;
+            return -1;
         let lo = 0;
         let hi = laid.length - 1;
         while (lo < hi) {
@@ -575,7 +2916,7 @@ class SpanMap {
             else
                 hi = mid - 1;
         }
-        return this._doc[lo] + (offset - laid[lo]);
+        return lo;
     }
 }
 /** The maximal run of text items from `(index, offset)` to the next atomic. */
@@ -590,13 +2931,16 @@ function segmentFrom(items, index, offset) {
             break;
         const text = skip > 0 ? item.run.text.slice(skip) : item.run.text;
         if (text) {
-            spans.add(item.box.textStart + skip, text.length);
+            spans.add(item.start + skip, text.length, item.control ? null : item.box);
             runs.push(skip > 0 ? { ...item.run, text } : item.run);
         }
         skip = 0;
     }
     return { runs, spans, nextIndex: i };
 }
+/** A text a line may break after where its block wraps: one that ends in
+ *  white space, which a no-break space a `nowrap` element holds is not. */
+const BREAKS_AFTER = /[ \t\n]$/;
 /** Move `(index, offset)` forward by `consumed` code units of text. */
 function advance(items, index, offset, consumed) {
     let i = index;
@@ -618,8 +2962,9 @@ function advance(items, index, offset, consumed) {
 /**
  * One space's advance in a run's style, measured as the difference between
  * `x x` and `xx` — ntk strips a lone trailing space from a line, so it
- * cannot be measured directly. Cached per font manager per style; the
- * measurement itself hits ntk's shaping memo.
+ * cannot be measured directly — plus the run's letter spacing, which a
+ * space takes as every other character does. Cached per font manager per
+ * face; the measurement itself hits ntk's shaping memo.
  */
 const SPACE_ADVANCE = new WeakMap();
 function spaceAdvance(fonts, run) {
@@ -628,10 +2973,11 @@ function spaceAdvance(fonts, run) {
         cache = new Map();
         SPACE_ADVANCE.set(fonts, cache);
     }
+    const spacing = run.letterSpacing ?? 0;
     const key = `${run.family}|${run.size}|${run.weight}|${run.style}`;
     const hit = cache.get(key);
     if (hit !== undefined)
-        return hit;
+        return hit + spacing;
     const style = {
         family: run.family,
         size: run.size,
@@ -643,7 +2989,110 @@ function spaceAdvance(fonts, run) {
     if (cache.size > 64)
         cache.clear();
     cache.set(key, advance);
-    return advance;
+    return advance + spacing;
+}
+/** Whether the runs' joined text has a forced break just before a
+ *  code-unit offset — a line's end, which an engine counts the break in. */
+function breakBefore(runs, offset) {
+    let at = 0;
+    for (const run of runs) {
+        const next = at + run.text.length;
+        if (offset - 1 < next)
+            return run.text.charCodeAt(offset - 1 - at) === 10;
+        at = next;
+    }
+    return false;
+}
+/**
+ * The white space a text engine strips from a line's end, as a pattern for
+ * the end of a run: spaces and tabs, and the no-break space too where the
+ * engine strips that — ntk to 8.12.9 and CoreText through @windowkit/appkit
+ * 0.15.0 do, where CSS measures it (sidorares/ntk#395, windowkit/appkit#83).
+ * Asked of the engine once per font manager, because what the line adds back
+ * has to be what the engine took: added back after an engine that kept it, a
+ * no-break space before an image counted twice.
+ */
+const HUNG = new WeakMap();
+export function hungSpaces(fonts, run) {
+    let hung = HUNG.get(fonts);
+    if (!hung) {
+        const style = { family: run.family, size: run.size };
+        const width = (text) => fonts.layout([{ ...style, text }], style, {}).lines[0]?.width ?? 0;
+        hung = width('x\u00A0') > width('x') ? /[ \t]+$/ : /[ \t\u00A0]+$/;
+        HUNG.set(fonts, hung);
+    }
+    return hung;
+}
+/**
+ * A clamped paragraph with an ellipsis at the end of its last line (CSS
+ * Overflow 4, 4.2): its text up to where that line breaks in the room the
+ * ellipsis leaves it — at a soft wrap opportunity, so the words that do
+ * not fit beside the ellipsis go to the lines the clamp hides, and inside
+ * a word only where the line has no other — and the ellipsis after it, in
+ * the block's own style. The engine's own ellipsis cuts inside the last
+ * word, as `text-overflow` does.
+ */
+function ellipsized(fonts, items, runs, base, options, layout, width, style) {
+    const mark = runFor('\u2026', style);
+    const room = width - fonts.layout([mark], base, {}).width;
+    const last = layout.lines[layout.lines.length - 1];
+    let end = last.end;
+    if (last.width > room) {
+        const probe = fonts.layout(sliceRuns(runs, last.start, last.end), base, {
+            ...options,
+            maxWidth: Math.max(0, room),
+            maxLines: 1,
+            overflow: 'clip',
+            overflowWrap: 'break-word',
+        });
+        end = last.start + (probe.lines[0]?.end ?? 0);
+    }
+    // the text to the break, less the white space the line ends in — an
+    // empty line keeps the break before it, and is the ellipsis alone
+    const line = sliceRuns(runs, last.start, end);
+    let trailing = 0;
+    for (let i = line.length - 1; i >= 0; i -= 1) {
+        const text = line[i].text;
+        const trimmed = text.replace(/[ \t\n\r\f]+$/, '').length;
+        trailing += text.length - trimmed;
+        if (trimmed)
+            break;
+    }
+    const kept = sliceRuns(runs, 0, end - trailing);
+    // and the spans to match, the ellipsis no text of the document's
+    const spans = new SpanMap();
+    let at = items.length ? items[0].start : 0;
+    let left = 0;
+    for (const run of kept)
+        left += run.text.length;
+    for (const item of items) {
+        if (left <= 0)
+            break;
+        const length = Math.min(item.run.text.length, left);
+        spans.add(item.start, length, item.control ? null : item.box);
+        left -= length;
+        at = item.start + length;
+    }
+    spans.add(at, 1, null);
+    kept.push(mark);
+    return { layout: fonts.layout(kept, base, options), runs: kept, spans };
+}
+/** The runs' text from one code-unit offset into their joined text to
+ *  another, each piece in its own run's style. */
+function sliceRuns(runs, from, to) {
+    const out = [];
+    let at = 0;
+    for (const run of runs) {
+        const next = at + run.text.length;
+        if (next > from && at < to) {
+            const text = run.text.slice(Math.max(0, from - at), to - at);
+            out.push(text === run.text ? run : { ...run, text });
+        }
+        at = next;
+        if (at >= to)
+            break;
+    }
+    return out;
 }
 /** Whether anything but whitespace lies past a code-unit offset into the
  *  runs' joined text — "did `maxLines` drop content", for a layout that
@@ -652,7 +3101,8 @@ function inkBeyond(runs, offset) {
     let at = 0;
     for (const run of runs) {
         const next = at + run.text.length;
-        if (next > offset && /\S/.test(run.text.slice(Math.max(0, offset - at)))) {
+        if (next > offset &&
+            /[^ \t\n\r\f]/.test(run.text.slice(Math.max(0, offset - at)))) {
             return true;
         }
         at = next;
@@ -663,18 +3113,419 @@ function inkBeyond(runs, offset) {
 function wraps(style) {
     return style.whiteSpace !== 'nowrap' && style.whiteSpace !== 'pre';
 }
-function alignFor(style) {
-    // ntk has no justification; `start` is closer than a silent left on an RTL
-    // paragraph, and closer than a ragged-right lie about what was drawn.
+/** How much of a line's unused room goes before it: 0 for a line set flush
+ *  left, 1 flush right, ½ centred. `start` and `end` follow the direction;
+ *  `justify` is set as `start`, as `alignFor` sets it. */
+/** How far into the room a line an alignment sets goes: 0 at the left, 1
+ *  at the right; `justify` at the start, since a line not justified is
+ *  set there. */
+function alignShift(align, rtl) {
+    switch (align) {
+        case 'center':
+            return 0.5;
+        case 'right':
+            return 1;
+        case 'left':
+            return 0;
+        case 'end':
+            return rtl ? 0 : 1;
+        default:
+            return rtl ? 1 : 0;
+    }
+}
+/** The blocks whose lines hold text a box's background shows through. */
+export const CLIPPED_TEXT = new WeakSet();
+/** How each of those blocks' layouts was made, to make it again. */
+const RECORDED = new WeakMap();
+const RECORDERS = new WeakMap();
+const INKLESS = new WeakMap();
+/** The fonts, noting how each layout they make was made. One recorder a
+ *  fonts object, so what is kept per fonts object is kept for it too. */
+function recording(fonts) {
+    let recorder = RECORDERS.get(fonts);
+    if (!recorder) {
+        recorder = {
+            layout(content, style, options) {
+                const layout = fonts.layout(content, style, options);
+                RECORDED.set(layout, { fonts, content, style, options });
+                return layout;
+            },
+            match: (family, style) => fonts.match(family, style),
+        };
+        RECORDERS.set(fonts, recorder);
+    }
+    return recorder;
+}
+/**
+ * A layout of the same text with no ink of its own, which an engine draws
+ * in the context's fill — a gradient's, for text a background shows
+ * through; the same runs, so the same glyphs where the first put them.
+ * Null for a layout that was not recorded.
+ */
+export function inklessLayout(layout) {
+    let inkless = INKLESS.get(layout);
+    if (inkless !== undefined)
+        return inkless;
+    const made = RECORDED.get(layout);
+    inkless = made
+        ? made.fonts.layout(made.content.map((run) => ({ ...run, color: undefined })), { ...made.style, color: undefined }, made.options)
+        : null;
+    INKLESS.set(layout, inkless);
+    return inkless;
+}
+/** Whether any of a block's text is text a background shows through. */
+function clipsText(block, items) {
+    for (const item of items) {
+        if (item.kind === 'text' && !item.control && clipBoxOf(item.box, block)) {
+            return true;
+        }
+    }
+    return false;
+}
+/** The box whose background a text box's glyphs show: the nearest element
+ *  box from it up to the block its lines are in with `background-clip:
+ *  text`, or null. */
+export function clipBoxOf(box, block) {
+    for (let at = box; at; at = at.parent) {
+        if (at.kind !== 'text' && at.style.backgroundClipText)
+            return at;
+        if (at === block)
+            break;
+    }
+    return null;
+}
+/** The most lines `text-wrap: balance` evens out, as in Chrome: a heading,
+ *  a caption, a pull quote — not a paragraph, whose last line is its own. */
+const BALANCE_LINES = 6;
+/**
+ * The narrowest width a paragraph's text breaks into no more lines than
+ * `layout` has (CSS Text 4, 6.2), found by halving the width between the
+ * least that could hold them — their widths over their number — and the
+ * width it was laid out at. The engine breaks the lines, so each step
+ * asks it; eight steps come to within a pixel of the answer for a heading
+ * across a page.
+ */
+function balancedWidth(fonts, runs, base, options, width, layout) {
+    const count = layout.lines.length;
+    let total = 0;
+    for (const line of layout.lines)
+        total += line.width;
+    let lo = total / count;
+    let hi = width;
+    for (let step = 0; step < 8 && hi - lo > 1; step += 1) {
+        const mid = (lo + hi) / 2;
+        const probe = fonts.layout(runs, base, { ...options, maxWidth: mid });
+        if (probe.lines.length <= count)
+            hi = mid;
+        else
+            lo = mid;
+    }
+    return Math.ceil(hi);
+}
+/**
+ * Where `text-align` puts the lines of a layout that was given no width to
+ * align them in — text that does not wrap, which has no `maxWidth` — as how
+ * far each moves: the engine aligns those lines within the widest of them,
+ * which for a single line is no alignment at all, so a centred `<td
+ * nowrap>` or a `white-space: nowrap` button label was set flush left. A
+ * line too long for its box is set at its start, overflowing its end (CSS
+ * Text 3, 7.1), which is its left in a right-to-left paragraph, as in
+ * Blink. Null where every line is already where it belongs: flush left in
+ * a left-to-right paragraph, or measured for a width it has not been given.
+ */
+/** How the lines of a layout made with no width to fill are placed in
+ *  the room: each is its text's last or a forced break's, and takes
+ *  `text-align-last`, but where `last` is false — a balanced paragraph's,
+ *  laid out narrower than its room. */
+function unwrappedPlacer(style, width, last = true) {
+    const rtl = style.direction === 'rtl';
+    const shift = alignShift(last ? lastAlignOf(style) : style.textAlign, rtl);
+    if ((shift === 0 && !rtl) || !Number.isFinite(width))
+        return null;
+    return (line) => {
+        const free = width - line.width;
+        return (free >= 0 ? free * shift : rtl ? free : 0) - line.x;
+    };
+}
+/**
+ * The spacing a space is given to be laid out as one that may be spaced
+ * apart, too little to move a glyph. It is not nothing, because neither
+ * engine measures a space that is a spaced run of its own as it measures
+ * the same space inside its run: ntk shapes each run apart, so the kerning
+ * pair a space made with the letter beside it is gone (Arial's `A` and
+ * `T` have them), and CoreText spaces a glyph with its kerning attribute,
+ * which takes the place of the font's pairs. A line justified from a
+ * measure of its spaces as they were came out wider than its box and
+ * broke a word early: on macOS, in Helvetica, half of a paragraph did.
+ */
+const HAIR = 1e-6;
+/** The runs with each space a run of its own, spaced a hair apart. */
+function spacedApart(runs) {
+    const out = [];
+    for (const run of runs) {
+        const text = run.text;
+        let piece = 0;
+        for (let at = 0; at < text.length; at += 1) {
+            const c = text.charCodeAt(at);
+            if (c !== 0x20 && c !== 0xa0)
+                continue;
+            if (at > piece)
+                out.push({ ...run, text: text.slice(piece, at) });
+            out.push({
+                ...run,
+                text: text[at],
+                letterSpacing: (run.letterSpacing ?? 0) + HAIR,
+            });
+            piece = at + 1;
+        }
+        if (piece === 0)
+            out.push(run);
+        else if (piece < text.length)
+            out.push({ ...run, text: text.slice(piece) });
+    }
+    return out;
+}
+/**
+ * `text-align: justify` (CSS Text 3, 7.4), as neither engine has it: the
+ * paragraph's runs again, with each space inside a line that is to be
+ * justified widened by its share of what the line leaves of `width` — the
+ * `letter-spacing` a `word-spacing` is drawn with — so the same breaks fill
+ * their lines. A line that is the paragraph's last, or that a forced break
+ * ends, is not justified, nor one with no space inside it; the spaces a
+ * line ends on hang, and take no share. `skip` is the offsets of spaces
+ * that are no word separators — an inline box's edge laid out as a spacer
+ * (`layoutSpaced`) — which take no share either. Null where no line is
+ * justified.
+ */
+function justifiedRuns(runs, layout, width, rest = true, last = false, skip) {
+    const text = runs.map((run) => run.text).join('');
+    // each space's extra, by its offset in the paragraph
+    const extra = new Map();
+    const lines = layout.lines;
+    for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        let end = line.end;
+        // the paragraph's last line, or one a forced break ends, is
+        // `text-align-last`'s to justify
+        const ends = i === lines.length - 1 || text[end - 1] === '\n' || text[end] === '\n';
+        if (!(ends ? last : rest))
+            continue;
+        while (end > line.start &&
+            (text[end - 1] === ' ' ||
+                text[end - 1] === '\u00a0' ||
+                !!skip?.has(end - 1)))
+            end -= 1;
+        const spaces = [];
+        for (let at = line.start; at < end; at += 1) {
+            if ((text[at] === ' ' || text[at] === '\u00a0') && !skip?.has(at)) {
+                spaces.push(at);
+            }
+        }
+        // a hair short, so that the engine breaks where it did
+        const slack = width - line.width - 0.01;
+        if (!spaces.length || !(slack > 0))
+            continue;
+        for (const at of spaces)
+            extra.set(at, slack / spaces.length);
+    }
+    return extra.size ? widenedAt(runs, extra) : null;
+}
+/** The runs with the character at each offset of `extra` a run of its
+ *  own, spaced that much more. */
+function widenedAt(runs, extra) {
+    const text = runs.map((run) => run.text).join('');
+    const out = [];
+    let from = 0;
+    for (const run of runs) {
+        const end = from + run.text.length;
+        let piece = from;
+        for (let at = from; at < end; at += 1) {
+            const add = extra.get(at);
+            if (add === undefined)
+                continue;
+            if (at > piece)
+                out.push({ ...run, text: text.slice(piece, at) });
+            out.push({
+                ...run,
+                text: text[at],
+                letterSpacing: (run.letterSpacing ?? 0) + add,
+            });
+            piece = at + 1;
+        }
+        if (end > piece)
+            out.push({ ...run, text: text.slice(piece, end) });
+        from = end;
+    }
+    return out;
+}
+/** A word separator, as justification spaces them out (CSS Text 3, 7.4):
+ *  a space, or a no-break one. */
+function isSeparator(code) {
+    return code === 0x20 || code === 0xa0;
+}
+/**
+ * A line made a piece at a time — beside a float, around an inline-block,
+ * between an inline box's edges — justified where it is (CSS Text 3, 7.4):
+ * the room it leaves, `free`, shared out equally among its word
+ * separators, as `justifiedRuns` shares out a paragraph's. A space inside a
+ * piece of text takes its share as letter spacing, the piece laid out again
+ * with it; a space a piece ends on, with something after it on the line,
+ * takes it as room before what follows. The spaces the line ends on hang
+ * (7.3), whatever inline box closes after them, and take none. Whatever
+ * follows a share on the line moves over by it. How much wider the line
+ * is.
+ */
+function justifyLine(open, free, how) {
+    const order = open.order;
+    let lastContent = -1;
+    for (let i = order.length - 1; i >= 0; i -= 1) {
+        if (order[i].kind !== 'edge') {
+            lastContent = i;
+            break;
+        }
+    }
+    const plans = new Map();
+    let count = 0;
+    for (let i = 0; i < order.length; i += 1) {
+        const placed = order[i];
+        if (placed.kind !== 'text')
+            continue;
+        const text = placed.item;
+        // the runs it was laid out from, where they are still what is kept
+        // (a selection keeps its offsets in their place)
+        const kept = LAYOUT_RUNS.get(text.layout);
+        const runs = kept?.length && typeof kept[0] !== 'number' ? kept : null;
+        const line = text.layout.lines[text.layoutLine];
+        if (!runs || !line)
+            continue;
+        const all = runs.map((run) => run.text).join('');
+        let end = line.end;
+        while (end > line.start && isSeparator(all.charCodeAt(end - 1)))
+            end -= 1;
+        const inside = [];
+        for (let at = line.start; at < end; at += 1) {
+            if (isSeparator(all.charCodeAt(at)))
+                inside.push(at);
+        }
+        // the spaces it ends on, before what follows it on the line
+        let after = 0;
+        if (i < lastContent) {
+            for (let at = end; at < all.length; at += 1) {
+                if (!isSeparator(all.charCodeAt(at)))
+                    break;
+                after += 1;
+            }
+        }
+        count += inside.length + after;
+        plans.set(text, { runs, inside, after });
+    }
+    if (!count)
+        return 0;
+    const share = free / count;
+    let moved = 0;
+    for (const placed of order) {
+        if (placed.kind !== 'text') {
+            placed.item.x += moved;
+            continue;
+        }
+        const text = placed.item;
+        text.drawX += moved;
+        const plan = plans.get(text);
+        if (!plan)
+            continue;
+        if (plan.inside.length) {
+            const line = text.layout.lines[text.layoutLine];
+            const widened = widenedAt(plan.runs, new Map(plan.inside.map((at) => [at, share])));
+            // as wide as the piece is to be, and the piece alone: the text after
+            // it did not fit beside it before it was any wider
+            const layout = how.fonts.layout(widened, how.base, {
+                ...how.options,
+                maxWidth: line.width + plan.inside.length * share + 0.5,
+                maxLines: 1,
+            });
+            const first = layout.lines[0];
+            if (first && first.start === line.start && first.end === line.end) {
+                LAYOUT_RUNS.set(layout, widened);
+                text.layout = layout;
+                text.layoutLine = 0;
+                moved += first.width - line.width;
+            }
+        }
+        moved += plan.after * share;
+    }
+    return moved;
+}
+/** Which of a paragraph's lines are justified (CSS Text 3, 7.4): those
+ *  its end or a forced break does not end, where `text-align` is
+ *  `justify`, and those it does, where `text-align-last` is — neither
+ *  where the text does not wrap, nor under `text-justify: none`. */
+function justification(style) {
+    const on = wraps(style) && style.textJustify !== 'none';
+    return {
+        rest: on && style.textAlign === 'justify',
+        last: on && lastAlignOf(style) === 'justify',
+    };
+}
+/**
+ * A layout of `runs` whose justified lines fill `width`: measured as it
+ * will be drawn, its spaces spaced apart (`HAIR`), then laid out again with
+ * each space inside a justified line widened by its share
+ * (`justifiedRuns`), which keeps the lines where they broke. The layout
+ * that is given where no line is to be justified. Every path that lays a
+ * paragraph out as one layout justifies through this, so that a paragraph
+ * is justified whichever it took.
+ */
+function justifiedLayout(fonts, runs, base, options, layout, width, { rest, last }, skip) {
+    if (!Number.isFinite(width) ||
+        !((rest && layout.lines.length > 1) || (last && layout.lines.length > 0))) {
+        return { layout, runs };
+    }
+    const spaced = spacedApart(runs);
+    const measured = fonts.layout(spaced, base, options);
+    const justified = justifiedRuns(spaced, measured, width, rest, last, skip);
+    const out = justified ? fonts.layout(justified, base, options) : measured;
+    const outRuns = justified ?? spaced;
+    LAYOUT_RUNS.set(out, outRuns);
+    return { layout: out, runs: outRuns };
+}
+/** An alignment as the text engine takes it. It has no justification:
+ *  `start` is closer than a silent left on an RTL paragraph, and closer
+ *  than a ragged-right lie about what was drawn — justified lines are
+ *  spaced to fill their width before they get here (`justifiedRuns`). */
+function engineAlign(align) {
+    return align === 'justify' || align === 'auto' ? 'start' : align;
+}
+/** How the lines the text or a forced break ends are aligned (CSS Text 3,
+ *  7.2): `text-align-last`, or where that is `auto`, `text-align`, but
+ *  `justify`'s, which leaves them at the start. */
+function lastAlignOf(style) {
+    const last = style.textAlignLast;
+    if (last !== 'auto')
+        return last;
     return style.textAlign === 'justify' ? 'start' : style.textAlign;
 }
+/**
+ * The `text-indent` a block's first line takes: none where that line is
+ * not its element's first formatted line (CSS 2.1 16.1). An anonymous
+ * block's is only where the block is its parent's first child: the text
+ * after a `<div>` in a `<span>`, or after a paragraph in a `<div>`, starts
+ * a line of no indent.
+ */
+function blockIndent(block, width) {
+    if (!block.el && block.parent && block.parent.children[0] !== block) {
+        return 0;
+    }
+    return indentOf(block.style, width);
+}
 function indentOf(style, width) {
     const indent = style.textIndent;
     if (typeof indent === 'number')
         return indent;
     if (indent === 'auto')
         return 0;
-    return Number.isFinite(width) ? (indent.pct / 100) * width : 0;
+    // of zero where the width is not known yet, as when measuring the
+    // content's width: a `calc()` keeps its pixels (CSS Sizing 3 5.2.1)
+    return resolve(indent, Number.isFinite(width) ? width : 0);
 }
 /**
  * CSS's `line-height` expressed as ntk's multiplier.
@@ -684,8 +3535,14 @@ function indentOf(style, width) {
  * rather than passing the CSS number through is the difference between
  * `line-height: 1.5` meaning 1.5 × 16px and it meaning 1.5 × 19px, which is
  * a visibly looser document than the author asked for.
+ *
+ * `line-height: 0` is legal and means what it says — lines of no height,
+ * the glyphs overflowing evenly — and ntk's half-leading does exactly that
+ * with a multiplier of 0. The floor is a hair above it rather than the 0.1
+ * it was, which set such lines a tenth of a line apart: the Cocoa engine
+ * takes a zero multiple for none at all.
  */
-function lineHeightMultiplier(fonts, style) {
+export function lineHeightMultiplier(fonts, style) {
     if (style.lineHeight === 'normal')
         return 1;
     const target = style.lineHeightIsLength
@@ -694,25 +3551,369 @@ function lineHeightMultiplier(fonts, style) {
     const natural = naturalLineHeight(fonts, style);
     if (!natural)
         return 1;
-    return Math.max(0.1, target / natural);
+    return Math.max(1e-4, target / natural);
 }
+/**
+ * The font's natural line height in a style, which CSS's number form is
+ * converted against. Kept per font manager per style, like a space's
+ * advance: a pass asks once a paragraph — 8,800 times at 600 KB — and on
+ * CoreText every answer was a call to the native side. Found by the style
+ * object first, as `faceExtent` is: the paragraphs of a pass share their
+ * styles, and spelling a face into a string key for each was a millisecond
+ * of every pass over a long document.
+ */
+const NATURAL_LINE_HEIGHT = new WeakMap();
 function naturalLineHeight(fonts, style) {
+    let cache = NATURAL_LINE_HEIGHT.get(fonts);
+    if (!cache) {
+        cache = { byStyle: new WeakMap(), byFace: new Map() };
+        NATURAL_LINE_HEIGHT.set(fonts, cache);
+    }
+    const known = cache.byStyle.get(style);
+    if (known !== undefined)
+        return known;
+    const key = `${style.fontFamily}|${style.fontSize}|${style.fontWeight}|${style.fontStyle}`;
+    let height = cache.byFace.get(key);
+    if (height === undefined) {
+        try {
+            const font = fonts.match(style.fontFamily, {
+                size: style.fontSize,
+                weight: style.fontWeight,
+                style: style.fontStyle,
+            });
+            height = font.metrics(style.fontSize).lineHeight;
+        }
+        catch {
+            height = style.fontSize * 1.2;
+        }
+        if (cache.byFace.size > 64)
+            cache.byFace.clear();
+        cache.byFace.set(key, height);
+    }
+    cache.byStyle.set(style, height);
+    return height;
+}
+/**
+ * A block's strut: the ascent and descent of a line of nothing in its face,
+ * the half-leading its `line-height` adds shared above and below, as the
+ * text engines set a line (CSS 2.1 10.8.1).
+ */
+export function strutOf(fonts, style) {
+    // text set at no size takes no room, and CoreText reads a size of 0 as
+    // its default twelve points
+    if (!(style.fontSize > 0))
+        return NO_EXTENT;
+    const face = faceExtent(fonts, style);
+    const target = style.lineHeight === 'normal'
+        ? naturalLineHeight(fonts, style)
+        : style.lineHeightIsLength
+            ? style.lineHeight
+            : style.lineHeight * style.fontSize;
+    const half = (target - face.ascent - face.descent) / 2;
+    return { ascent: face.ascent + half, descent: face.descent + half };
+}
+/**
+ * The raises `vertical-align` gives a paragraph's inline boxes (CSS 2.1
+ * 10.8.1): each from its parent's baseline, so a box inside a raised box is
+ * raised with it. `sub` and `super` by a fifth and a third of the parent's
+ * font size and a pixel, as browsers set them; `text-top` and `text-bottom`
+ * to the edges of the parent's font; `middle` by its middle to half the
+ * parent's x-height above its baseline; a length by itself and a
+ * percentage of the box's own line height. Worked out once a box a pass.
+ */
+class Lifts {
+    fonts;
+    block;
+    styleOf;
+    _boxes = new Map();
+    constructor(fonts, block, 
+    /** A box's style on the lines these are for: its own, or the one it
+     *  has on a first line (`firstLineSetting`). */
+    styleOf = ownStyle) {
+        this.fonts = fonts;
+        this.block = block;
+        this.styleOf = styleOf;
+    }
+    /** Where a text goes, or null for one that is on the line's baseline and
+     *  in no box with a line height of its own. */
+    of(text) {
+        const owner = text.spans.boxAt?.(text.layoutStart);
+        const parent = owner?.parent;
+        if (!owner || !parent || parent.kind !== 'inline')
+            return null;
+        const { raise, edge, lead } = this._box(parent);
+        if (!raise && !edge && !lead)
+            return null;
+        // the room of every box whose text is in it: no raised box starts or
+        // ends inside a fragment, but one it holds may be set larger
+        const own = { ...strutOf(this.fonts, this.styleOf(owner)) };
+        // and of the inline boxes around it, each about its own baseline: each
+        // is on the line with its line height, which the text's may not reach.
+        // Not only where one sets a line height of its own: a raised `<sup>`
+        // holding a smaller `<a>` — every footnote mark — is as tall on the
+        // line as its own font and line height make it (CSS 2.1 10.8)
+        if (lead || raise) {
+            for (let at = parent; at?.kind === 'inline'; at = at.parent) {
+                const box = this._box(at);
+                const room = strutOf(this.fonts, this.styleOf(at));
+                own.ascent = Math.max(own.ascent, room.ascent + box.raise - raise);
+                own.descent = Math.max(own.descent, room.descent - box.raise + raise);
+                if (box.edge === at)
+                    break;
+            }
+        }
+        const natural = text.layout.lines[text.layoutLine];
+        let seen = this.styleOf(owner);
+        for (const run of natural?.runs ?? []) {
+            const at = text.spans.boxAt?.(run.start);
+            const style = at && this.styleOf(at);
+            if (!style || style === seen)
+                continue;
+            seen = style;
+            const room = strutOf(this.fonts, style);
+            own.ascent = Math.max(own.ascent, room.ascent);
+            own.descent = Math.max(own.descent, room.descent);
+        }
+        let to = null;
+        if (edge) {
+            const room = strutOf(this.fonts, this.styleOf(edge));
+            to = {
+                box: edge,
+                to: this.styleOf(edge).verticalAlign === 'top' ? 'top' : 'bottom',
+                ascent: room.ascent,
+                descent: room.descent,
+            };
+        }
+        return { raise, ascent: own.ascent, descent: own.descent, edge: to };
+    }
+    /** Where an inline box's own room is about the line's baseline — its
+     *  face at its line height, raised as it is — or null for one on the
+     *  baseline, or one the line's edge sets. */
+    ofBox(box) {
+        const { raise, edge, lead } = this._box(box);
+        if (edge)
+            return null;
+        if (!raise && !lead && !tallerStrut(this.fonts, this.block, box)) {
+            return null;
+        }
+        const room = strutOf(this.fonts, this.styleOf(box));
+        return { raise, ascent: room.ascent, descent: room.descent };
+    }
+    /** The `top` or `bottom` box a box is in, itself included, and how far
+     *  its baseline is raised from that box's; null outside one. */
+    edgeOf(box) {
+        const lift = this._box(box);
+        return lift.edge ? { edge: lift.edge, raise: lift.raise } : null;
+    }
+    _box(box) {
+        if (box.kind !== 'inline' || !box.parent)
+            return NO_LIFT;
+        const known = this._boxes.get(box);
+        if (known)
+            return known;
+        const va = this.styleOf(box).verticalAlign;
+        const own = ownsLeading(this.fonts, this.block, this.styleOf(box));
+        let lift;
+        if (va === 'top' || va === 'bottom') {
+            // what is in it is raised from its baseline, which the line's edge
+            // sets, whatever is around it
+            lift = { raise: 0, edge: box, lead: own };
+        }
+        else {
+            const up = this._box(box.parent);
+            lift = {
+                raise: up.raise + this._own(box, box.parent),
+                edge: up.edge,
+                lead: own || up.lead,
+            };
+            if (lift.raise && !lift.edge)
+                BOX_RAISES.set(box, lift.raise);
+        }
+        this._boxes.set(box, lift);
+        return lift;
+    }
+    /** How far a box's own `vertical-align` raises it from its parent's
+     *  baseline. */
+    _own(box, parent) {
+        const va = this.styleOf(box).verticalAlign;
+        const size = this.styleOf(parent).fontSize;
+        switch (va) {
+            case 'baseline':
+            case 'top':
+            case 'bottom':
+                return 0;
+            case 'sub':
+                return -(size / 5 + size / 16);
+            case 'super':
+                return size / 3 + size / 16;
+            case 'text-top':
+                return (faceExtent(this.fonts, this.styleOf(parent)).ascent -
+                    strutOf(this.fonts, this.styleOf(box)).ascent);
+            case 'text-bottom':
+                return (strutOf(this.fonts, this.styleOf(box)).descent -
+                    faceExtent(this.fonts, this.styleOf(parent)).descent);
+            case 'middle': {
+                const own = strutOf(this.fonts, this.styleOf(box));
+                return (xHeightOf(this.fonts, this.styleOf(parent)) / 2 -
+                    (own.ascent - own.descent) / 2);
+            }
+            default:
+                return typeof va === 'number'
+                    ? va
+                    : resolve(va, lineHeightOf(this.fonts, this.styleOf(box)));
+        }
+    }
+}
+const ownStyle = (box) => box.style;
+const NO_LIFT = { raise: 0, edge: null, lead: false };
+/**
+ * Whether an inline box's own line height sets its line otherwise than the
+ * one a paragraph's layout gives its text. That layout sets every run at
+ * the block's line height, as a multiple of the run's font's natural one;
+ * CSS gives each inline box its own, and the line box holds them all (CSS
+ * 2.1 10.8.1). So a box whose own is more makes its line taller, and a box
+ * whose own is less makes it shorter than the multiple does, where the
+ * multiple is more than the block's line height too: a larger face under
+ * a `line-height` length, which every inline box inherits as that length —
+ * `font: 11px/15px` on the body and a 14px heading run inline, which the
+ * multiple set 19px tall on a line CSS makes 16.5. One whose own is less
+ * but which the block's line height holds anyway, a `<code>` in a font
+ * with taller natural lines, is left to the one layout: its lines come out
+ * the same, and the line at a time costs a long document dear.
+ *
+ * Asked of every inline box in every paragraph, so it has to cost nothing
+ * for the ones that are nothing: a box with its block's line height, family
+ * and size is past at once, and any other answer is kept on its style.
+ */
+function ownsLeading(fonts, block, style) {
+    // a bold or an italic face keeps its family's line metrics, and a
+    // paragraph is thick with <strong>, <em> and <a>
+    if (style.lineHeight === block.lineHeight &&
+        style.lineHeightIsLength === block.lineHeightIsLength &&
+        style.fontSize === block.fontSize &&
+        style.fontFamily === block.fontFamily) {
+        return false;
+    }
+    const known = LEADS.get(style);
+    if (known && known.block === block && known.fonts === fonts) {
+        return known.own;
+    }
+    const multiple = lineHeightMultiplier(fonts, block) * naturalLineHeight(fonts, style);
+    const height = lineHeightOf(fonts, style);
+    const own = height > multiple + 0.5 ||
+        multiple > Math.max(height, lineHeightOf(fonts, block)) + 0.5;
+    LEADS.set(style, { fonts, block, own });
+    return own;
+}
+/** Whether a text is in an inline box that owns its leading
+ *  (`ownsLeading`), below the block it is laid out in. */
+function inBoxOwningLeading(fonts, block, text) {
+    for (let at = text.parent; at && at !== block; at = at.parent) {
+        if (at.kind !== 'inline')
+            break;
+        if (ownsLeading(fonts, block.style, at.style))
+            return true;
+    }
+    return false;
+}
+const LEADS = new WeakMap();
+/**
+ * Whether an inline box with no text is taller on its line than the
+ * paragraph's own line height: what it holds there, which the engine,
+ * which lays out text, gives no room (CSS 2.1 10.8). A box with text is
+ * given its face's room with the text, at the paragraph's leading, which
+ * `ownsLeading` compares its own line height with; asked of one with none,
+ * the border of an empty `<span>` in a large face was drawn over the text
+ * above its line, which was as short as the paragraph's. Not asked of a
+ * box with text, which the one-layout paths lay out whole: a padded
+ * `<code>` in a paragraph would have been laid out a line at a time.
+ */
+function tallerStrut(fonts, block, box) {
+    if (box.subtreeTextEnd > box.subtreeTextStart)
+        return false;
+    const style = box.style;
+    if (style.fontSize === block.fontSize &&
+        style.lineHeight === block.lineHeight) {
+        return false;
+    }
+    const own = strutOf(fonts, style);
+    const theirs = strutOf(fonts, block);
+    return own.ascent + own.descent > theirs.ascent + theirs.descent + 0.5;
+}
+/** A style's line height in pixels. */
+function lineHeightOf(fonts, style) {
+    if (style.lineHeight === 'normal')
+        return naturalLineHeight(fonts, style);
+    return style.lineHeightIsLength
+        ? style.lineHeight
+        : style.lineHeight * style.fontSize;
+}
+/**
+ * A style's x-height, where its font says, or half its size, as `ex` takes
+ * it (CSS 2.1 4.3.2). A face whose OS/2 table is older than version 2 —
+ * DejaVu's — states none, and the engine's answer is then NaN, which is a
+ * number: taken for one, it put an image set `middle` nowhere at all.
+ */
+function xHeightOf(fonts, style) {
     try {
-        const font = fonts.match(style.fontFamily, {
+        const metrics = fonts
+            .match(style.fontFamily, {
             size: style.fontSize,
             weight: style.fontWeight,
             style: style.fontStyle,
-        });
-        return font.metrics(style.fontSize).lineHeight;
+        })
+            .metrics(style.fontSize);
+        const x = metrics.xHeight;
+        if (typeof x === 'number' && x > 0)
+            return x;
     }
     catch {
-        return style.fontSize * 1.2;
+        // no font to ask
+    }
+    return style.fontSize / 2;
+}
+/** Whether a line has nothing on it yet. */
+function isEmpty(open) {
+    return open.x === open.indent && !open.texts.length && !open.atomics.length;
+}
+/** Where a line at `y` next has more room, in the block's own space: the
+ *  nearest bottom edge of a float beside it, or null when none is. */
+function belowFloats(options, y, height) {
+    const edge = options.floats?.nextEdgeBelow(options.startY + y, height);
+    return edge == null ? null : Math.max(y + 1, edge - options.startY);
+}
+/**
+ * Whether a line's first word did not fit its room: the line runs past the
+ * room — a line's width leaves out the white space it ends on, which hangs,
+ * so this is the word, kept whole where `overflow-wrap` says so — or it
+ * ends inside a word — between two letters or digits, where no break is
+ * allowed, so only a line too narrow for the word put one there. Ideographs
+ * and kana break between any two, and are not counted as a word's letters.
+ */
+function tooNarrow(runs, end, width, room) {
+    let at = 0;
+    let before = '';
+    let after = '';
+    for (const run of runs) {
+        const text = run.text;
+        if (end > at && end <= at + text.length)
+            before = text[end - at - 1];
+        if (end >= at && end < at + text.length)
+            after = text[end - at];
+        at += text.length;
     }
+    if (WORD_CHAR.test(before) && WORD_CHAR.test(after))
+        return true;
+    return width > room + 0.5 && before !== '';
 }
+const WORD_CHAR = /^(?![\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}])[\p{L}\p{N}\p{M}]$/u;
 function bandAt(options, y, height) {
     if (!options.floats)
         return { left: 0, right: options.width };
-    const band = options.floats.bandAt(options.startY + y, height);
+    // Floats narrow the block's own line, where they reach into it; the
+    // formatting context's edges are not this block's, and a block wider than
+    // its context — a fixed width in a narrow body — keeps its lines whole.
+    const band = options.floats.bandAt(options.startY + y, height, options.originX, options.originX + options.width);
     return {
         left: Math.max(0, band.left - options.originX),
         right: Math.min(options.width, band.right - options.originX),