@react-x11/components 0.10.0 → 0.12.0

package/dist/html/layout/inline.js

@@ -29,11 +29,22 @@
 // *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 bidiModule from 'bidi-js';
 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 { BOX_RAISES, LINE_BOX_RAISES, PADDED_FACES, isOffset, letteredAfter, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, transformInPlace, } from './boxes.js';
 import { tableGrid } from './grid.js';
+/** How a paragraph's lines are fitted to their width, and measured: as a
+ *  browser fits them (`FontsLike`'s `fit`). */
+const PARAGRAPH_FIT = 'items';
+/** How far past the room a line's content may reach and still fit it: a
+ *  64th of a pixel, the epsilon Blink's line breaker adds to the width it
+ *  fits to (`LineBreaker::AvailableWidthToFit`), and the one the engine
+ *  fits a paragraph's lines with. A line composed a piece at a time asks
+ *  the same question of each piece, and half a pixel let a word run a
+ *  third of one past the line a browser breaks before it. */
+const FIT_SLACK = 1 / 64;
 /**
  * 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
@@ -46,6 +57,20 @@ import { tableGrid } from './grid.js';
  */
 const LAYOUT_RUNS = new WeakMap();
 const WIDEST_WORD = new WeakMap();
+/**
+ * A fragment of text that runs on from the text before it on its line, with
+ * no place to break between the two — only inline boxes' edges, or a float
+ * — and how wide those edges are: a word across a `<span>` with padding is
+ * in two fragments, and as wide as both and the padding between. What
+ * `joinsBefore` answers, for a min-content bound (`block.ts`'s `wordBound`)
+ * that would have the word no wider than either fragment's widest.
+ */
+const JOINS = new WeakMap();
+/** The edges a fragment of text runs on across from the text before it on
+ *  its line, or undefined where it does not run on from it (`JOINS`). */
+export function joinsBefore(text) {
+    return JOINS.get(text);
+}
 /**
  * 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
@@ -68,7 +93,10 @@ export function widestWord(fonts, layout, measured = true) {
     const words = fonts.layout(held.map((run) => ({
         ...run,
         text: run.text.replace(/[ \t\u200b]+/g, '\n'),
-    })), {}, {});
+    })), {}, 
+    // measured as the lines are fitted, or a word across two elements is
+    // read narrower than it fits
+    { fit: PARAGRAPH_FIT });
     widest = 0;
     for (const line of words.lines)
         widest = Math.max(widest, line.width);
@@ -246,6 +274,8 @@ function linesOf(block, options, items, floatCount) {
         CLIPPED_TEXT.add(block);
         fonts = recording(fonts);
     }
+    // small capitals the face does not have, made of its capitals
+    synthesizeSmallCaps(items, fonts);
     if (wraps(block.style))
         holdNoWrap(items, block);
     // one walk for what few paragraphs have: text that casts a shadow, and a
@@ -253,12 +283,17 @@ function linesOf(block, options, items, floatCount) {
     // searched for one where it cannot be
     let tabbed = false;
     let shadowed = false;
+    // and text that keeps its spaces where its lines wrap, whose spaces a
+    // line may end on (`hangPreserved`)
+    let keepsSpaces = false;
     for (const item of items) {
         if (item.kind !== 'text' || item.control)
             continue;
         const style = item.box.style;
         if (style.textShadow)
             shadowed = true;
+        if (style.whiteSpace === 'pre-wrap')
+            keepsSpaces = true;
         if (!tabbed &&
             (style.whiteSpace === 'pre' || style.whiteSpace === 'pre-wrap') &&
             item.run.text.includes('\t')) {
@@ -293,6 +328,8 @@ function linesOf(block, options, items, floatCount) {
         firstLineColour(items, options.firstLine);
     const style = block.style;
     const wrapWords = overflowWrapOf(style, items);
+    // a line may break between any two letters, an edge between them or not
+    const breaksAnywhere = style.wordBreak === 'break-all' || style.lineBreakAnywhere;
     const base = {
         family: style.fontFamily,
         size: style.fontSize,
@@ -353,23 +390,33 @@ function linesOf(block, options, items, floatCount) {
     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;
+    // and where one layout makes a line shorter than the strut, its text all
+    // smaller than the block's, the lines are made a piece at a time too,
+    // where every line holds it (`shortOfStrut`)
+    const strut = fonts ? strutOf(fonts, style) : null;
+    // and the first line holds what it is handed besides: a marker's room
+    const firstStrut = withRoom(strut, options.firstStrut);
+    let strutted = false;
     // 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)
+        const laid = layoutSpaced(items, base, style, options.width, lineHeightMul, align, fonts, keepsSpaces);
+        if (laid && !shortOfStrut(laid.lines, strut, firstStrut))
             return laid;
+        if (laid)
+            strutted = true;
     }
     // 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 &&
+    fast: if (!hasAtomics &&
         !hasEdges &&
         !raised &&
         !floated &&
         !indent &&
         !alignedApart &&
-        !restyled) {
+        !restyled &&
+        !strutted) {
         // no atomics and no edges, so everything is text
         const textItems = items;
         let total = 0;
@@ -390,12 +437,16 @@ function linesOf(block, options, items, floatCount) {
         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 });
+            return layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts, { chars: Infinity, hardLines: 1, cut }, keepsSpaces);
         }
         if (perLine)
             cut = null;
         if (total > CHUNK_TRIGGER_CHARS && hasNewline && !hasControls(items)) {
-            return layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts);
+            const chunked = layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts, CHUNKS, keepsSpaces);
+            if (!shortOfStrut(chunked.lines, strut, firstStrut))
+                return chunked;
+            strutted = true;
+            break fast;
         }
         let runs = [];
         let spans = new SpanMap();
@@ -414,10 +465,19 @@ function linesOf(block, options, items, floatCount) {
             align: justifyRest && !justifyLast ? engineAlign(lastAlign) : align,
             direction: style.direction,
             overflowWrap: cutWrap(style, cut, wrapWords),
+            fit: PARAGRAPH_FIT,
             ...cut,
         };
         let layout = fonts.layout(runs, base, layoutOptions);
         LAYOUT_RUNS.set(layout, runs);
+        const held = keepsSpaces
+            ? holdAtBreaks(layout, runs, spans, fonts, layoutOptions.maxWidth ?? options.width, !cut)
+            : null;
+        if (held) {
+            runs = held;
+            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
@@ -464,11 +524,22 @@ function linesOf(block, options, items, floatCount) {
             : balanced
                 ? unwrappedPlacer(style, options.width, false)
                 : null);
+        if (keepsSpaces)
+            hangLines(lines, 0, runs, fonts, rtl);
+        // a clamp and a cut are the one layout's to make
+        if (!clamp && !cut && shortOfStrut(lines, strut, firstStrut)) {
+            strutted = true;
+            break fast;
+        }
         return clampCut
             ? { lines, height: layout.height, width: widest, cut: true }
             : { lines, height: layout.height, width: widest };
     }
     // --- the general case: line at a time -------------------------------------
+    // the paragraph's bidi levels, where anything in it can be reordered: a
+    // line is laid out a piece at a time here, and its pieces are ordered by
+    // them (`levelPieces`)
+    const paraBidi = fonts ? paragraphBidi(block, items, rtl) : null;
     const lines = [];
     let widest = 0;
     let y = 0;
@@ -509,7 +580,6 @@ function linesOf(block, options, items, floatCount) {
         }
         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`).
@@ -530,6 +600,7 @@ function linesOf(block, options, items, floatCount) {
                 align: 'left',
                 direction: style.direction,
                 overflowWrap: wrapWords,
+                fit: PARAGRAPH_FIT,
             },
         }
         : null;
@@ -541,14 +612,24 @@ function linesOf(block, options, items, floatCount) {
      *  which `text-align-last` aligns. */
     const close = (last = false) => {
         const onFirst = lineOne !== null && !lines.length;
+        const levels = paraBidi
+            ? {
+                bidi: paraBidi,
+                fonts: fonts,
+                base: onFirst ? lineOne.base : base,
+                lineHeight: onFirst ? lineOne.lineHeight : lineHeightMul,
+            }
+            : null;
         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)
+        (height) => bandAt(options, y, Math.max(height, guess)), last || !wraps(style) ? lastShift : restShift, rtl, lines.length
+            ? strut
+            : withRoom(onFirst ? lineOne.strut : strut, options.firstStrut), onFirst ? lineOne.lifts : lifts, (last || !wraps(style) ? justify.last : justify.rest)
             ? onFirst
                 ? lineOne.justify
                 : lineJustify
-            : null);
+            : null, levels);
         if (!line) {
             open = openLine(0);
             placeDeferred();
@@ -668,7 +749,12 @@ function linesOf(block, options, items, floatCount) {
             if (raise)
                 placed.raise = raise;
             open.atomics.push(placed);
-            open.order.push({ kind: 'atomic', at: open.x, item: placed });
+            open.order.push({
+                kind: 'atomic',
+                at: open.x,
+                item: placed,
+                ...(paraBidi ? { para: paraBidi.starts[index] } : null),
+            });
             open.x += outer;
             open.hang = 0;
             open.left = room.left;
@@ -702,13 +788,17 @@ function linesOf(block, options, items, floatCount) {
         // `text-align-last` sets it apart)
         const tailIsPlain = !alignedApart &&
             !onFirst &&
+            !strutted &&
             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);
+            !(options.floats?.intersects(options.startY + y, Infinity) ?? false) &&
+            // and ordered alone as the paragraph orders it
+            (!paraBidi ||
+                orderedAlone(paraBidi, segment, paraBidi.starts[index] + offset, rtl));
         if (tailIsPlain) {
             const tailOptions = {
                 maxWidth: wraps(style) ? Math.max(1, available) : undefined,
@@ -716,42 +806,63 @@ function linesOf(block, options, items, floatCount) {
                 align,
                 direction: style.direction,
                 overflowWrap: wrapWords,
+                fit: PARAGRAPH_FIT,
             };
-            let layout = fonts.layout(segment.runs, base, tailOptions);
-            LAYOUT_RUNS.set(layout, segment.runs);
+            let tailRuns = segment.runs;
+            let layout = fonts.layout(tailRuns, base, tailOptions);
+            LAYOUT_RUNS.set(layout, tailRuns);
+            const held = keepsSpaces
+                ? holdAtBreaks(layout, tailRuns, segment.spans, fonts, tailOptions.maxWidth ?? options.width, true)
+                : null;
+            if (held) {
+                tailRuns = held;
+                layout = fonts.layout(tailRuns, base, tailOptions);
+                LAYOUT_RUNS.set(layout, tailRuns);
+            }
             // 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;
+            layout = justifiedLayout(fonts, tailRuns, base, tailOptions, layout, Math.max(1, available), justify).layout;
+            const tail = [];
+            const lift = layoutLift(layout);
             for (let i = 0; i < layout.lines.length; i += 1) {
                 const natural = layout.lines[i];
                 const text = {
                     layout,
                     layoutLine: i,
                     drawX: band.left,
-                    drawY: y,
+                    drawY: y - lift,
                     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({
+                tail.push({
                     x: band.left + natural.x,
                     y: y + natural.y,
                     width: natural.width,
                     height: natural.height,
-                    baseline: natural.baseline - natural.y,
+                    baseline: natural.baseline - natural.y - lift,
                     texts: [text],
                     textStart: text.textStart,
                     textEnd: text.textEnd,
                     atomics: [],
                 });
-                widest = Math.max(widest, natural.width);
             }
-            y += layout.height;
-            index = segment.nextIndex;
-            offset = 0;
-            continue;
+            if (keepsSpaces)
+                hangLines(tail, 0, tailRuns, fonts, rtl);
+            // or a line at a time, where one of them is shorter than the strut
+            if (!shortOfStrut(tail, strut, lines.length ? null : firstStrut)) {
+                for (const line of tail) {
+                    lines.push(line);
+                    widest = Math.max(widest, line.width);
+                }
+                y += layout.height;
+                index = segment.nextIndex;
+                offset = 0;
+                continue;
+            }
+            strutted = true;
         }
         // One line: `maxLines: 1` cuts the layout at the first break and its
         // `truncated` flag answers "did the segment wrap" — so a line costs one
@@ -770,27 +881,72 @@ function linesOf(block, options, items, floatCount) {
             !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);
-        const first = fragment.lines[0];
+        const lineHeight = onFirst ? lineOne.lineHeight : lineHeightMul;
+        let fragment = fragmentLayout(fonts, segment.runs, lineBase, style, lineHeight, wrapWords, room - tied);
+        let first = fragment.lines[0];
         if (!first) {
             index = segment.nextIndex;
             offset = 0;
             continue;
         }
+        // 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. 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.
+        let wrapped = breakBefore(segment.runs, first.end) ||
+            (fragment.truncated ?? inkBeyond(segment.runs, first.end));
+        // An inline box's edge is no place to break a line (CSS Text 3, 5.1):
+        // where the segment runs to its end on this line, its last word runs on
+        // past it, through the edges after it, into the text they stand before
+        // — `ab<span style="padding: 0 4px">cd</span>` is one word, as it is
+        // without the padding. Where the line may break at that text after all,
+        // the edges that close boxes are still the word's, as a box's end goes
+        // with the content it closes, and it is the ones that open a box that
+        // go with what follows. The line holds the word and all of that or none
+        // of it, so where it does not fit, the line breaks at the last place in
+        // the segment it may break, and the word goes to the next line whole.
+        // Where the segment has no such place, the word is the line's first,
+        // and is measured with what it runs into (below). A word that ends in
+        // white space hangs it, and its edges after it with it.
+        let glued = 0;
+        if (!wrapped &&
+            wraps(style) &&
+            lineItems[segment.nextIndex]?.kind === 'edge' &&
+            !BREAKS_AFTER.test(segment.runs[segment.runs.length - 1].text) &&
+            // none of it matters where the most it could come to fits: most
+            // edges are nowhere near a line's end
+            first.width + unbreakableBound(lineItems, segment.nextIndex) >
+                room + FIT_SLACK) {
+            const after = textAfterEdges(lineItems, segment.nextIndex);
+            glued =
+                after &&
+                    !breaksBetween(fonts, lineBase, segment.runs, runsLength(segment.runs), after, breaksAnywhere)
+                    ? unbreakableAfter(lineItems, segment.nextIndex, style, fonts, lineBase)
+                    : closingEdges(lineItems, segment.nextIndex);
+        }
+        if (glued > 0 && first.width + glued > room + FIT_SLACK) {
+            // the last place it may break: laid out a hair narrower than it is,
+            // which the rest of the segment fits, not in the room the word
+            // leaves, where it broke after its first word if the word and what
+            // it runs into are wider than the line
+            const earlier = fragmentLayout(fonts, segment.runs, lineBase, style, lineHeight, wrapWords, first.width - 0.5);
+            const line = earlier.lines[0];
+            // and not inside a word that `overflow-wrap` cut to fit: that is for
+            // a word no line holds, and the word and what it runs into may fit
+            // the next line
+            if (line && line.end < first.end && !insideWord(segment.runs, line.end)) {
+                fragment = earlier;
+                first = line;
+                wrapped = true;
+                glued = 0;
+            }
+        }
+        // the first word, with what it runs into past the segment
+        const word = first.width + glued;
         // 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
@@ -799,7 +955,7 @@ function linesOf(block, options, items, floatCount) {
         // 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)) {
+            tooNarrow(segment.runs, first.end, word, room)) {
             const below = belowFloats(options, y, guess);
             if (below !== null) {
                 y = below;
@@ -808,27 +964,37 @@ function linesOf(block, options, items, floatCount) {
         }
         // 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.
+        // line, rather than the edge being left at this one's end — where the
+        // line may break there at all. The edge is no place to break (CSS Text
+        // 3, 5.1), so that is where the line may break between what it ends on
+        // and the word: after white space or an atomic, or where the text
+        // engine breaks the two run together (`breaksBetween`). `ab<span
+        // style="padding: 0 4px">cd</span>` is one word, and a line too narrow
+        // for it runs past its end, as it does for the word without the
+        // padding; broken before the span, a float's min-content width was a
+        // letter wide, and it came out as wide as its room.
+        // 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)
+                ? tooNarrow(segment.runs, first.end, word, room) &&
+                    breaksAfterLine(open, style, fonts, lineBase, segment.runs, breaksAnywhere)
                 : 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)))) {
+                    (word > room + FIT_SLACK ||
+                        tooNarrow(segment.runs, first.end, word, room)))) {
             close();
             continue;
         }
         placePending(band.left);
+        const joins = joinsOnto(open, segment.runs, first.start);
         const placed = {
             layout: fragment,
             layoutLine: 0,
@@ -841,26 +1007,35 @@ function linesOf(block, options, items, floatCount) {
             spans: segment.spans,
         };
         segment.spans.giveGaps(placed, first.start, first.end);
+        if (joins !== undefined)
+            JOINS.set(placed, joins);
         open.texts.push(placed);
         open.order.push({
             kind: 'text',
             at: open.x,
             item: placed,
             reads: readingOf(segment.runs, first.start, first.end),
+            ...(paraBidi
+                ? {
+                    from: {
+                        para: paraBidi.starts[index] + offset,
+                        runs: segment.runs,
+                        spans: segment.spans,
+                    },
+                }
+                : null),
         });
         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. 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));
+        // the spaces `pre-wrap` keeps that it ends on, which the engine hung
+        const hung = keepsSpaces
+            ? hangPreserved(placed, segment.runs, runStarts(segment.runs), fonts, rtl)
+            : NOTHING_HUNG;
+        /** Before a forced break, the ones that fit take room (4.1.3). */
+        const holdHung = () => {
+            open.x += Math.min(hung.total, Math.max(0, available - open.x));
+        };
         if (!wrapped) {
             // It fitted: the cursor stays on this line for whatever comes next.
             //
@@ -874,7 +1049,11 @@ function linesOf(block, options, items, floatCount) {
                 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;
+                    // through the bidi controls after them, which take no room: the
+                    // engine strips the spaces before one as well
+                    const text = segment.runs[i].text.replace(ENDING_CONTROLS, '');
+                    if (!text)
+                        continue;
                     const m = hung.exec(text);
                     if (!m)
                         break;
@@ -884,18 +1063,29 @@ function linesOf(block, options, items, floatCount) {
                 }
                 if (trailing) {
                     // and noted: if what follows goes to the next line after all,
-                    // these spaces end this one, where CSS removes them (16.6.1)
+                    // these spaces end this one, where CSS removes them (16.6.1).
+                    // As wide as the engine says they make its line where the line
+                    // goes on, which a layout that fits as a browser does rounds with
+                    // the text they end, once (`advance`): the text rounded up to a
+                    // 64th and the spaces added after it came to more
                     open.hang =
-                        spaceAdvance(fonts, segment.runs[segment.runs.length - 1]) *
-                            trailing.length;
+                        first.advance !== undefined
+                            ? first.advance - first.width
+                            : spaceAdvance(fonts, segment.runs[segment.runs.length - 1]) *
+                                trailing.length;
                     open.x += open.hang;
                 }
             }
+            else if (hung.total)
+                holdHung();
             index = segment.nextIndex;
             offset = 0;
             continue;
         }
-        close(breakBefore(segment.runs, first.end));
+        const forced = breakBefore(segment.runs, first.end);
+        if (forced && hung.total)
+            holdHung();
+        close(forced);
         const advanced = advance(items, index, offset, first.end);
         index = advanced.index;
         offset = advanced.offset;
@@ -912,6 +1102,27 @@ function linesOf(block, options, items, floatCount) {
     return { lines, height: y, width: widest, floatRow };
 }
 const EMPTY = { lines: [], height: 0, width: 0 };
+/** The first line of a segment's text in a width, as the line at a time
+ *  lays one out (`linesOf`). */
+function fragmentLayout(fonts, runs, base, style, lineHeight, overflowWrap, width) {
+    const laid = fonts.layout(runs, base, {
+        maxWidth: wraps(style) ? Math.max(1, width) : undefined,
+        lineHeight,
+        // 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,
+        fit: PARAGRAPH_FIT,
+        maxLines: 1,
+    });
+    LAYOUT_RUNS.set(laid, runs);
+    return laid;
+}
 /**
  * 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
@@ -1019,9 +1230,9 @@ function spacersHold(style, items) {
  * (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) {
+function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts, keepsSpaces) {
     const wrapWords = overflowWrapOf(style, items);
-    const runs = [];
+    let runs = [];
     const spans = new SpanMap();
     const spacers = [];
     let doc = 0;
@@ -1050,12 +1261,22 @@ function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts) {
         align,
         direction: style.direction,
         overflowWrap: wrapWords,
+        fit: PARAGRAPH_FIT,
     };
     let layout = fonts.layout(runs, base, layoutOptions);
     LAYOUT_RUNS.set(layout, runs);
+    const held = keepsSpaces
+        ? holdAtBreaks(layout, runs, spans, fonts, width, true)
+        : null;
+    if (held) {
+        runs = held;
+        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);
+    const lift = layoutLift(layout);
     let offsets = null;
     const lines = [];
     let widest = 0;
@@ -1086,7 +1307,7 @@ function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts) {
             layout,
             layoutLine: i,
             drawX: dx,
-            drawY: 0,
+            drawY: -lift,
             textStart: spans.documentAt(natural.start),
             textEnd: spans.documentAt(natural.end),
             layoutStart: natural.start,
@@ -1098,7 +1319,7 @@ function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts) {
             y: natural.y,
             width: natural.width,
             height: natural.height,
-            baseline: natural.baseline - natural.y,
+            baseline: natural.baseline - natural.y - lift,
             texts: [text],
             textStart: text.textStart,
             textEnd: text.textEnd,
@@ -1107,6 +1328,8 @@ function layoutSpaced(items, base, style, width, lineHeightMul, align, fonts) {
         });
         widest = Math.max(widest, natural.width);
     }
+    if (keepsSpaces)
+        hangLines(lines, 0, runs, fonts, style.direction === 'rtl');
     return { lines, height: layout.height, width: widest };
 }
 /** The code point a code-unit offset into a layout's text starts. */
@@ -1151,6 +1374,7 @@ export function layoutOffsetOf(text, doc, end = false) {
  *  `place` says; returns the widest. */
 function emitLayout(layout, spans, xOff, yOff, lines, place = null) {
     let widest = 0;
+    const lift = layoutLift(layout);
     for (let i = 0; i < layout.lines.length; i += 1) {
         const natural = layout.lines[i];
         const dx = place ? place(natural) : 0;
@@ -1158,7 +1382,7 @@ function emitLayout(layout, spans, xOff, yOff, lines, place = null) {
             layout,
             layoutLine: i,
             drawX: xOff + dx,
-            drawY: yOff,
+            drawY: yOff - lift,
             textStart: spans.documentAt(natural.start),
             textEnd: spans.documentAt(natural.end),
             layoutStart: natural.start,
@@ -1170,7 +1394,7 @@ function emitLayout(layout, spans, xOff, yOff, lines, place = null) {
             y: yOff + natural.y,
             width: natural.width,
             height: natural.height,
-            baseline: natural.baseline - natural.y,
+            baseline: natural.baseline - natural.y - lift,
             texts: [text],
             textStart: text.textStart,
             textEnd: text.textEnd,
@@ -1206,7 +1430,7 @@ const CHUNKS = {
  * 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, chunking = CHUNKS) {
+function layoutChunked(items, base, style, width, lineHeightMul, align, fonts, chunking = CHUNKS, keepsSpaces = false) {
     const wrapWords = overflowWrapOf(style, items);
     const lines = [];
     let widest = 0;
@@ -1217,7 +1441,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts, c
     let hardLines = 0;
     const { cut } = chunking;
     const place = wraps(style) || cut ? null : unwrappedPlacer(style, width);
-    const flush = () => {
+    const flush = (last = false) => {
         if (!chunkRuns.length)
             return;
         const chunkOptions = {
@@ -1226,14 +1450,27 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts, c
             align,
             direction: style.direction,
             overflowWrap: cutWrap(style, cut, wrapWords),
+            fit: PARAGRAPH_FIT,
             ...cut,
         };
         let layout = fonts.layout(chunkRuns, base, chunkOptions);
         LAYOUT_RUNS.set(layout, chunkRuns);
+        const held = keepsSpaces
+            ? holdAtBreaks(layout, chunkRuns, chunkSpans, fonts, chunkOptions.maxWidth ?? width, last && !cut)
+            : null;
+        if (held) {
+            chunkRuns = held;
+            layout = fonts.layout(chunkRuns, base, chunkOptions);
+            LAYOUT_RUNS.set(layout, chunkRuns);
+        }
         // 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;
+        const from = lines.length;
         widest = Math.max(widest, emitLayout(layout, chunkSpans, 0, y, lines, place));
+        if (keepsSpaces) {
+            hangLines(lines, from, chunkRuns, fonts, style.direction === 'rtl');
+        }
         y += layout.height;
         chunkRuns = [];
         chunkSpans = new SpanMap();
@@ -1293,7 +1530,7 @@ function layoutChunked(items, base, style, width, lineHeightMul, align, fonts, c
             text = text.slice(cut);
         }
     }
-    flush();
+    flush(true);
     return { lines, height: y, width: widest };
 }
 function openLine(indent) {
@@ -1314,6 +1551,250 @@ function breaksAtEnd(open, style) {
     return (wraps(style) &&
         (open.hang > 0 || open.order[open.order.length - 1]?.kind === 'atomic'));
 }
+/**
+ * Whether a line may break before an inline box's opening edge, between
+ * what the line has got to and `next`, the text after the edge: after an
+ * atomic, or after the white space the line ends on, as `breaksAtEnd`
+ * says, or where the text engine breaks the line's last text and `next`
+ * run together (`breaksBetween`). An edge on the way is no place to break
+ * of its own (CSS Text 3, 5.1), and a line with no text or atomic on it
+ * yet has none to hold on to.
+ */
+function breaksAfterLine(open, style, fonts, base, next, anywhere) {
+    if (!wraps(style))
+        return false;
+    if (open.hang > 0)
+        return true;
+    for (let i = open.order.length - 1; i >= 0; i -= 1) {
+        const placed = open.order[i];
+        if (placed.kind === 'edge')
+            continue;
+        if (placed.kind === 'atomic')
+            return true;
+        const text = placed.item;
+        const runs = LAYOUT_RUNS.get(text.layout);
+        if (!runs || (runs.length > 0 && typeof runs[0] === 'number'))
+            return true;
+        const end = text.layout.lines[text.layoutLine].end;
+        return breaksBetween(fonts, base, runs, end, next, anywhere);
+    }
+    return true;
+}
+/**
+ * How wide the edges are between the text the open line ends on and text
+ * starting at `start` in `runs`, where the one runs on into the other
+ * (`JOINS`): neither is white space at the join, and no atomic, which has a
+ * break before and after it, is between them. Undefined where they do not
+ * join, or the line has no text yet. Letters on either side are taken to
+ * join whatever they are, which may count an ideograph's join that the
+ * engine would break at: it makes the bound it is for a larger one, never a
+ * smaller.
+ */
+function joinsOnto(open, runs, start) {
+    if (open.hang > 0)
+        return undefined;
+    const next = charAt(runs, start);
+    if (next === '' || SPACE.test(next))
+        return undefined;
+    let edges = 0;
+    for (let i = open.order.length - 1; i >= 0; i -= 1) {
+        const placed = open.order[i];
+        if (placed.kind === 'edge') {
+            edges += placed.item.width;
+            continue;
+        }
+        if (placed.kind === 'atomic')
+            return undefined;
+        const text = placed.item;
+        const before = LAYOUT_RUNS.get(text.layout);
+        if (!before || (before.length > 0 && typeof before[0] === 'number')) {
+            return undefined;
+        }
+        const last = charAt(before, text.layout.lines[text.layoutLine].end - 1);
+        return last === '' || SPACE.test(last) ? undefined : edges;
+    }
+    return undefined;
+}
+/**
+ * Whether a line may break between two texts an inline box's edge stands
+ * between — the text of `before` up to the code unit `end`, and `after` —
+ * which is where it may break them run together, the edge being no place
+ * to break (CSS Text 3, 5.1). After white space, and not before it, where
+ * the break is after that white space instead (UAX #14, LB7). Never between
+ * two letters or digits of the alphabets whose words break only at spaces,
+ * which is every edge in running text, and needs no asking. Anything else
+ * — a hyphen, a dash, an ideograph or kana, a bracket, a slash — is asked
+ * of the text engine: the two words, laid out at no width, break at every
+ * place a line may, which is UAX #14 as the `linebreak` package has it on
+ * both backends — ntk breaks every line with it, and react-x11's CoreText
+ * engine a text at no width. So an edge after a hyphen, or between two
+ * ideographs, is a place to break exactly where the same text with no edge
+ * in it is one; a list of classes here would be a third opinion.
+ *
+ * Counted, not located: the words run together break into as many pieces
+ * as the two apart where they break between them, and one fewer where the
+ * last piece of the one runs on into the first of the other. The line
+ * offsets are no answer, as they are not the text's on every backend: the
+ * CoreText engine lays out a copy with a line break put in at each place,
+ * and its offsets are that copy's.
+ */
+function breaksBetween(fonts, base, before, end, after, anywhere) {
+    const last = charAt(before, end - 1);
+    const next = charAt(after, 0);
+    // nothing to hold the two together
+    if (last === '' || next === '')
+        return true;
+    if (SPACE.test(last))
+        return true;
+    if (SPACE.test(next))
+        return false;
+    if (anywhere)
+        return true;
+    if (HOLDS.test(last) && HOLDS.test(next))
+        return false;
+    if (NO_BREAK_AFTER.test(last) || NO_BREAK_BEFORE.test(next))
+        return false;
+    const tail = sliceRuns(before, lastSpace(before, end) + 1, end);
+    const head = sliceRuns(after, 0, firstSpace(after));
+    const pieces = (runs) => fonts.layout(runs, base, {
+        maxWidth: MIN_CONTENT_WIDTH,
+        overflowWrap: 'normal',
+    }).lines.length;
+    return pieces([...tail, ...head]) === pieces(tail) + pieces(head);
+}
+/** The width a text is laid out at to break it at every place it may
+ *  break: none — at a pixel, CoreText breaks inside words (`block.ts`'s
+ *  `MIN_CONTENT_PROBE`). */
+const MIN_CONTENT_WIDTH = 0;
+/** White space a line breaks after. */
+const SPACE = /^[ \t\n]$/;
+/** Letters and digits of the Latin, Greek and Cyrillic alphabets, and the
+ *  marks on them: no line breaks between two of these (UAX #14, LB9, LB23,
+ *  LB25, LB28). */
+const HOLDS = /^[\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Nd}\p{M}]$/u;
+/** What no line breaks after, whatever follows: an opening bracket, a
+ *  straight quote and a no-break space (UAX #14, LB12, LB14, LB19). */
+const NO_BREAK_AFTER = /^[([{"'\u00a0]$/;
+/** What no line breaks before, whatever precedes: a closing bracket, a
+ *  stop, a comma, a colon, `!`, `?`, `/` and a straight quote (UAX #14,
+ *  LB13, LB19) — the punctuation after a link or a `<code>`, which needs
+ *  no asking either. */
+const NO_BREAK_BEFORE = /^[)\]},.;:!?/"']$/;
+/** The code unit at an offset into runs' joined text, or '' outside it. */
+function charAt(runs, at) {
+    if (at < 0)
+        return '';
+    let from = 0;
+    for (const run of runs) {
+        const next = from + run.text.length;
+        if (at < next)
+            return run.text[at - from];
+        from = next;
+    }
+    return '';
+}
+/** Where the last white space before a code-unit offset is, or -1. */
+function lastSpace(runs, end) {
+    let found = -1;
+    let from = 0;
+    for (const run of runs) {
+        if (from >= end)
+            break;
+        const text = run.text.slice(0, end - from);
+        const at = Math.max(text.lastIndexOf(' '), text.lastIndexOf('\t'), text.lastIndexOf('\n'));
+        if (at >= 0)
+            found = from + at;
+        from += run.text.length;
+    }
+    return found;
+}
+/** Where the first white space in runs' joined text is, or its length. */
+function firstSpace(runs) {
+    let from = 0;
+    for (const run of runs) {
+        const at = run.text.search(/[ \t\n]/);
+        if (at >= 0)
+            return from + at;
+        from += run.text.length;
+    }
+    return from;
+}
+function runsLength(runs) {
+    let length = 0;
+    for (const run of runs)
+        length += run.text.length;
+    return length;
+}
+/**
+ * The text inline boxes' edges from `from` on stand before, up to its first
+ * white space: what the text before the edges runs on into. Null where an
+ * atomic comes first, which has a break before it, or nothing does.
+ */
+function textAfterEdges(items, from) {
+    const runs = [];
+    for (let i = from; i < items.length; i += 1) {
+        const item = items[i];
+        if (item.kind === 'edge' || item.kind === 'float')
+            continue;
+        if (item.kind === 'atomic')
+            break;
+        const text = item.run.text;
+        const stop = text.search(/[ \t\n]/);
+        if (stop < 0) {
+            runs.push(item.run);
+            continue;
+        }
+        runs.push({ ...item.run, text: text.slice(0, stop + 1) });
+        break;
+    }
+    return runs.length ? runs : null;
+}
+/**
+ * The most `unbreakableAfter` could come to, with no layout: the edges on
+ * the way, and the text up to its first white space at half again its size
+ * a character, which no glyph a document sets words in is wider than, and
+ * its letter spacing (`longestWord`'s estimate).
+ */
+function unbreakableBound(items, from) {
+    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 += Math.max(0, item.width);
+            continue;
+        }
+        if (item.kind === 'atomic')
+            break;
+        const run = item.run;
+        const stop = run.text.search(/[ \t\n]/);
+        const per = (run.size ?? 16) * 1.5 + Math.max(0, run.letterSpacing ?? 0);
+        width += (stop < 0 ? run.text.length : stop) * per;
+        if (stop >= 0)
+            break;
+    }
+    return width;
+}
+/** How wide the edges from `from` on are that close inline boxes, up to
+ *  one that opens a box or anything but an edge or a float. */
+function closingEdges(items, from) {
+    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' || item.side !== 'end')
+            break;
+        width += item.width;
+    }
+    return width;
+}
+/** Whether a code-unit offset into runs' joined text is between two
+ *  letters or digits: inside a word, where only `overflow-wrap` breaks. */
+function insideWord(runs, at) {
+    return (WORD_CHAR.test(charAt(runs, at - 1)) && WORD_CHAR.test(charAt(runs, at)));
+}
 /**
  * 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 —
@@ -1349,7 +1830,9 @@ function unbreakableAfter(items, from, style, fonts, base) {
             runs.push({ ...item.run, text: text.slice(0, stop) });
         break;
     }
-    return runs.length ? width + fonts.layout(runs, base, {}).width : width;
+    return runs.length
+        ? width + fonts.layout(runs, base, { fit: PARAGRAPH_FIT }).width
+        : width;
 }
 /**
  * Close a line: its height and baseline from what is on it, then where it
@@ -1357,11 +1840,16 @@ function unbreakableAfter(items, from, style, fonts, base) {
  * 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) {
+function finishLine(open, y, bandFor, shift, rtl, strut, lifts = null, justify = null, 
+/** The paragraph's bidi levels, where it has them (`ParagraphBidi`). */
+levels = null) {
     if (!open.texts.length && !open.atomics.length && !open.edges.length) {
         return null;
     }
-    const reordered = open.order.some((p) => needsOrdering(p, rtl));
+    const reordered = levels
+        ? levelPieces(open, levels) ||
+            open.order.some((p) => p.kind === 'edge' && needsOrdering(p, rtl))
+        : 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
@@ -1404,7 +1892,9 @@ function finishLine(open, y, bandFor, shift, rtl, strut, lifts = null, justify =
             continue;
         }
         const natural = open.texts[i].layout.lines[open.texts[i].layoutLine];
-        const own = natural.baseline - natural.y;
+        // with its leading shared as the strut's is: it is drawn on the line's
+        // baseline, wherever its engine put its own
+        const own = lineAscent(natural);
         ascent = Math.max(ascent, own);
         descent = Math.max(descent, natural.height - own);
     }
@@ -1570,10 +2060,8 @@ function finishLine(open, y, bandFor, shift, rtl, strut, lifts = null, justify =
  * 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).
+ * a level: the paragraph's own, where it has them (`levelPieces`), and
+ * otherwise the one it reads at (`readingLevels`).
  *
  * 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
@@ -1592,28 +2080,16 @@ function reorderLine(open, rtl) {
     for (let i = 0; i < n; i += 1)
         if (order[i].kind !== 'edge')
             content.push(i);
-    const strong = content.map((i) => {
+    // UAX #9's levels where the paragraph's are known (`levelPieces`), each
+    // piece at one of them; its reading otherwise
+    const given = content.map((i) => {
         const p = order[i];
-        if (p.kind !== 'text' || p.reads === null)
-            return null;
-        return p.reads === 'mixed' ? rtl : p.reads === 'rtl';
+        return p.kind === 'edge' ? undefined : p.level;
     });
-    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 levels = given.every((level) => level !== undefined)
+        ? given
+        : readingLevels(order, content, rtl);
+    const isRtl = levels.map((level) => (level & 1) === 1);
     const visual = content.map((_, k) => k);
     for (let level = Math.max(0, ...levels); level >= 1; level -= 1) {
         for (let a = 0; a < visual.length;) {
@@ -1688,6 +2164,9 @@ function reorderLine(open, rtl) {
             if (isRtl[k] && natural)
                 dx += Math.max(0, room - natural.width);
             piece.item.drawX += dx;
+            // and the spaces it hung are on the side of it its room is left on
+            if (piece.item.hung)
+                placeHung(piece.item, isRtl[k]);
         }
         else {
             piece.item.x += dx;
@@ -1695,6 +2174,399 @@ function reorderLine(open, rtl) {
         x += room;
     }
 }
+/**
+ * The levels of a line's pieces from which way each reads, where the
+ * paragraph's are not known: 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). R is level 1 in either paragraph;
+ * L is 0 in a left-to-right one and 2 in a right-to-left one.
+ */
+function readingLevels(order, content, rtl) {
+    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;
+    };
+    return strong.map((r, k) => {
+        const reads = r ?? (strongAt(k, -1) === strongAt(k, 1) ? strongAt(k, -1) : rtl);
+        return reads ? 1 : rtl ? 2 : 0;
+    });
+}
+let BIDI = null;
+/** bidi-js, made the first time a paragraph needs it. Its declarations
+ *  give a CommonJS module a default export, which NodeNext reads as the
+ *  module object; Node and a bundler both hand over its factory. */
+function bidiJs() {
+    if (!BIDI) {
+        const factory = bidiModule;
+        BIDI = (typeof factory === 'function' ? factory : factory.default)();
+    }
+    return BIDI;
+}
+/** A paragraph's levels, or null where nothing in it can be reordered:
+ *  it reads left to right, and holds no right-to-left letter and no bidi
+ *  control. Kept on its block, and resolved again only where its text is
+ *  not what it was: a pass at another width has the same. */
+function paragraphBidi(block, items, rtl) {
+    let reorders = rtl;
+    for (let i = 0; !reorders && i < items.length; i += 1) {
+        const item = items[i];
+        if (item.kind === 'text' && REORDERS.test(item.run.text))
+            reorders = true;
+    }
+    if (!reorders)
+        return null;
+    const starts = [];
+    let text = '';
+    for (const item of items) {
+        starts.push(text.length);
+        if (item.kind === 'text')
+            text += item.run.text;
+        else if (item.kind === 'atomic')
+            text += '\ufffc';
+    }
+    const base = rtl ? 1 : 0;
+    const kept = PARAGRAPH_BIDI.get(block);
+    if (kept && kept.text === text && kept.base === base) {
+        return { ...kept, starts };
+    }
+    const { levels } = bidiJs().getEmbeddingLevels(text, rtl ? 'rtl' : 'ltr');
+    const explicit = EXPLICIT.test(text);
+    const bidi = { text, levels, explicit, base, starts };
+    PARAGRAPH_BIDI.set(block, bidi);
+    return bidi;
+}
+const PARAGRAPH_BIDI = new WeakMap();
+/** The explicit embeddings, overrides and isolates. */
+const EXPLICIT = /[\u202a-\u202e\u2066-\u2069]/;
+/** The explicit embeddings, overrides and isolates a text ends on. */
+const ENDING_CONTROLS = /[\u202a-\u202e\u2066-\u2069]+$/;
+/** Whether a character is one X9 removes, or an isolate: a bidi control,
+ *  or a boundary neutral such as a zero-width space or a soft hyphen. */
+function isControl(c) {
+    return ((c >= 0x202a && c <= 0x202e) ||
+        (c >= 0x2066 && c <= 0x2069) ||
+        (c >= 0x200b && c <= 0x200d) ||
+        (c >= 0x2060 && c <= 0x2064) ||
+        c === 0xad ||
+        c === 0xfeff ||
+        c === 0x180e);
+}
+/** The paired brackets UAX #9 resolves together (N0), which may pair
+ *  across a piece's end. */
+const BRACKETS = /[()[\]{}\u0f3a-\u0f3d\u169b\u169c\u2045\u2046\u207d\u207e\u208d\u208e\u2308-\u230b\u2329\u232a\u2768-\u2775\u27c5\u27c6\u27e6-\u27ef\u2983-\u2998\u29d8-\u29db\u29fc\u29fd\u2e22-\u2e29\u3008-\u3011\u3014-\u301b\ufe59-\ufe5e\uff08\uff09\uff3b\uff3d\uff5b\uff5d\uff5f\uff60\uff62\uff63]/;
+/** The strong types, which nothing around them resolves again. */
+const STRONG = new Set(['L', 'R', 'AL']);
+/** What UAX #9 L1 puts back at the paragraph's level where a line ends on
+ *  it: white space, the isolates, and what X9 removed. */
+const TRAILING = new Set([
+    'WS',
+    'S',
+    'B',
+    'LRI',
+    'RLI',
+    'FSI',
+    'PDI',
+    'BN',
+    'LRE',
+    'RLE',
+    'LRO',
+    'RLO',
+    'PDF',
+]);
+/** A segment's text, and its levels as the engine resolves them, laid out
+ *  alone in the paragraph's direction. */
+const ALONE = new WeakMap();
+function aloneLevels(runs, rtl) {
+    let alone = ALONE.get(runs);
+    if (!alone) {
+        const text = runs.map((run) => run.text).join('');
+        const { levels } = bidiJs().getEmbeddingLevels(text, rtl ? 'rtl' : 'ltr');
+        alone = { text, levels };
+        ALONE.set(runs, alone);
+    }
+    return alone;
+}
+/** Whether the text from a segment on, laid out alone, is ordered as the
+ *  paragraph orders it: every letter at the level it has there. */
+function orderedAlone(bidi, segment, para, rtl) {
+    const { text, levels } = aloneLevels(segment.runs, rtl);
+    for (let at = 0; at < levels.length; at += 1) {
+        if (segment.spans.isGap(at))
+            continue;
+        if (levels[at] === bidi.levels[para + at])
+            continue;
+        if (!isControl(text.charCodeAt(at)))
+            return false;
+    }
+    return true;
+}
+/**
+ * Give each piece on a line its level, and answer whether the line is to be
+ * put in visual order at all. A piece's letters have the paragraph's levels,
+ * with the white space the line ends on back at the paragraph's (L1). A
+ * fragment was laid out alone and ordered inside itself by the engine: it
+ * is kept whole where the engine's levels for it are the paragraph's and it
+ * begins and ends at its lowest one, so that nothing of another piece comes
+ * between its letters (L2), and it is the line's at that level. It is split
+ * otherwise, a layout to each run of its letters at one level, held in that
+ * level's direction by an override; the controls in it, which take no
+ * room, are left out. An atomic is at its replacement character's level.
+ */
+function levelPieces(open, line) {
+    const { bidi } = line;
+    let start = Infinity;
+    let end = -Infinity;
+    for (const p of open.order) {
+        if (p.kind === 'text' && p.from) {
+            const natural = p.item.layout.lines[p.item.layoutLine];
+            if (!natural)
+                continue;
+            start = Math.min(start, p.from.para + natural.start);
+            end = Math.max(end, p.from.para + natural.end);
+        }
+        else if (p.kind === 'atomic' && p.para !== undefined) {
+            start = Math.min(start, p.para);
+            end = Math.max(end, p.para + 1);
+        }
+    }
+    // an element's edges alone are ordered as the paragraph reads
+    if (!(end > start))
+        return bidi.base > 0;
+    const levels = bidi.levels.slice(start, end);
+    const js = bidiJs();
+    for (let i = end - 1; i >= start; i -= 1) {
+        if (!TRAILING.has(js.getBidiCharTypeName(bidi.text[i])))
+            break;
+        levels[i - start] = bidi.base;
+    }
+    const levelAt = (at) => levels[at - start];
+    let off = false;
+    const order = [];
+    const texts = [];
+    for (const p of open.order) {
+        if (p.kind === 'edge') {
+            order.push(p);
+            continue;
+        }
+        if (p.kind === 'atomic') {
+            p.level = p.para === undefined ? bidi.base : levelAt(p.para);
+            off ||= p.level > 0;
+            order.push(p);
+            continue;
+        }
+        for (const piece of levelled(p, levelAt, line)) {
+            off ||= piece.level > 0;
+            order.push(piece);
+            texts.push(piece.item);
+        }
+    }
+    open.order = order;
+    open.texts = texts;
+    return off;
+}
+/** A fragment of a line as the pieces it is ordered in (`levelPieces`). */
+function levelled(p, levelAt, line) {
+    const text = p.item;
+    const natural = text.layout.lines[text.layoutLine];
+    const base = line.bidi.base;
+    if (!p.from || !natural)
+        return [{ ...p, level: base }];
+    const { para, runs, spans } = p.from;
+    const paragraph = line.bidi.text;
+    // A bidi control takes no room and has no level of its own, whether
+    // `unicode-bidi` stands for it or the document holds it: X9 removes it,
+    // and bidi-js gives it the level of what is before it, which may be
+    // another piece's. It is no end of a piece, nor of a run of one level.
+    const quiet = (at) => spans.isGap(at) || isControl(paragraph.charCodeAt(para + at));
+    let lowest = Infinity;
+    let first = -1;
+    let last = -1;
+    for (let at = natural.start; at < natural.end; at += 1) {
+        if (quiet(at))
+            continue;
+        if (first < 0)
+            first = at;
+        last = at;
+        lowest = Math.min(lowest, levelAt(para + at));
+    }
+    if (first < 0)
+        return [{ ...p, level: base }];
+    if (levelAt(para + first) === lowest &&
+        levelAt(para + last) === lowest &&
+        (plainlyLevelled(line.bidi, p.from, first, last, levelAt) ||
+            laidAsLevelled(p.from, natural, levelAt, base))) {
+        return [{ ...p, level: lowest }];
+    }
+    const starts = runStarts(runs);
+    const out = [];
+    let at = p.at;
+    let lastRuns = [];
+    /** Where each piece is in the fragment's segment. */
+    const ranges = [];
+    const piece = (from, to, level) => {
+        // its letters, each run's with where it is in the document and whose
+        // text it is
+        const letters = [];
+        let points = 0;
+        for (let k = runIndexAt(starts, from); k < runs.length; k += 1) {
+            const runStart = starts[k];
+            if (runStart >= to)
+                break;
+            const a = Math.max(from, runStart);
+            const b = Math.min(to, runStart + runs[k].text.length);
+            if (b <= a || spans.isGap(a))
+                continue;
+            const slice = runs[k].text.slice(a - runStart, b - runStart);
+            letters.push({
+                run: slice === runs[k].text ? runs[k] : { ...runs[k], text: slice },
+                doc: spans.documentAt(a),
+                box: spans.boxAt(a),
+            });
+            points += codeUnitOffsets(slice).length - 1;
+        }
+        if (!letters.length)
+            return;
+        const head = letters[0];
+        const tail = letters[letters.length - 1];
+        const docStart = head.doc;
+        const docEnd = tail.doc + tail.run.text.length;
+        const face = (run, control) => ({
+            text: control,
+            family: run.family,
+            size: run.size,
+            weight: run.weight,
+            style: run.style,
+        });
+        const rtl = (level & 1) === 1;
+        const laidRuns = [face(head.run, rtl ? '\u202e' : '\u202d')];
+        const laidSpans = new SpanMap();
+        laidSpans.add(docStart, 1, head.box, true);
+        for (const { run, doc, box } of letters) {
+            laidSpans.add(doc, run.text.length, box);
+            laidRuns.push(run);
+        }
+        laidRuns.push(face(tail.run, '\u202c'));
+        laidSpans.add(docEnd, 1, tail.box, true);
+        const layout = line.fonts.layout(laidRuns, line.base, {
+            lineHeight: line.lineHeight,
+            align: 'left',
+            direction: rtl ? 'rtl' : 'ltr',
+            fit: PARAGRAPH_FIT,
+        });
+        LAYOUT_RUNS.set(layout, laidRuns);
+        lastRuns = laidRuns;
+        const laid = layout.lines[0];
+        const item = {
+            layout,
+            layoutLine: 0,
+            drawX: text.drawX + (at - p.at),
+            drawY: 0,
+            textStart: docStart,
+            textEnd: docEnd,
+            layoutStart: laid ? laid.start : 0,
+            spans: laidSpans,
+        };
+        laidSpans.giveGaps(item, 0, laidSpans.laidOut);
+        out.push({ kind: 'text', at, item, reads: null, level });
+        ranges.push([from, to]);
+        // the room it takes, its white space at its end with it, which the
+        // engine hangs past the layout's width: from caret to caret
+        const extent = Math.abs(layout.caretPosition(1 + points).x - layout.caretPosition(1).x);
+        at += Math.max(laid?.width ?? 0, extent);
+    };
+    let from = first;
+    let level = levelAt(para + first);
+    let prev = first;
+    for (let o = first + 1; o <= last; o += 1) {
+        if (quiet(o))
+            continue;
+        const l = levelAt(para + o);
+        if (l !== level) {
+            piece(from, prev + 1, level);
+            from = o;
+            level = l;
+        }
+        prev = o;
+    }
+    piece(from, last + 1, level);
+    if (!out.length)
+        return [{ ...p, level: base }];
+    // a word across two of the pieces runs on from one to the next, with no
+    // edge between, as the fragment ran on from the text before it (`JOINS`)
+    const joins = JOINS.get(text);
+    if (joins !== undefined)
+        JOINS.set(out[0].item, joins);
+    for (let k = 1; k < out.length; k += 1) {
+        const before = paragraph[para + ranges[k - 1][1] - 1];
+        const after = paragraph[para + ranges[k][0]];
+        if (!SPACE.test(before) && !SPACE.test(after))
+            JOINS.set(out[k].item, 0);
+    }
+    // the spaces `pre-wrap` keeps that the fragment ended on are its last
+    // piece's, which the engine hangs as it hung them (`hangPreserved`)
+    const tail = out[out.length - 1];
+    if (text.hung) {
+        const rtl = (tail.level & 1) === 1;
+        hangPreserved(tail.item, lastRuns, runStarts(lastRuns), line.fonts, rtl);
+    }
+    return out;
+}
+/**
+ * Whether the engine, laying a fragment out alone, must have given its
+ * letters the paragraph's levels, without resolving them to see: in a
+ * paragraph of no explicit embedding, a stretch that begins and ends with a
+ * strong letter and pairs no bracket is resolved inside itself, whatever is
+ * around it (W1 to W7, N1 and N2 look no further than the strong letters
+ * either side). The white space it ends on is the paragraph's level to the
+ * engine, whose line ends there (L1), and has to be to the line.
+ */
+function plainlyLevelled(bidi, from, first, last, levelAt) {
+    if (bidi.explicit)
+        return false;
+    const text = bidi.text;
+    const js = bidiJs();
+    let end = last;
+    while (end > first &&
+        TRAILING.has(js.getBidiCharTypeName(text[from.para + end]))) {
+        if (levelAt(from.para + end) !== bidi.base)
+            return false;
+        end -= 1;
+    }
+    return (STRONG.has(js.getBidiCharTypeName(text[from.para + first])) &&
+        STRONG.has(js.getBidiCharTypeName(text[from.para + end])) &&
+        !BRACKETS.test(text.slice(from.para + first, from.para + end + 1)));
+}
+/** Whether the engine, laying a fragment out alone, gave its letters the
+ *  levels the paragraph gives them: with its line's end white space back
+ *  at the paragraph's level (L1), as the engine's own line ends there. */
+function laidAsLevelled(from, natural, levelAt, base) {
+    const { text, levels } = aloneLevels(from.runs, base === 1);
+    const js = bidiJs();
+    const quiet = (at) => from.spans.isGap(at) || isControl(text.charCodeAt(at));
+    let hung = natural.end;
+    while (hung > natural.start &&
+        TRAILING.has(js.getBidiCharTypeName(text[hung - 1]))) {
+        hung -= 1;
+    }
+    for (let at = natural.start; at < natural.end; at += 1) {
+        if (quiet(at))
+            continue;
+        const alone = at >= hung ? base : levels[at];
+        if (alone !== levelAt(from.para + at))
+            return false;
+    }
+    return true;
+}
 /** 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
@@ -1812,7 +2684,14 @@ function atomicRaise(fonts, box, parent) {
 function atomicBaseline(box) {
     const bottom = box.height + box.marginTop + box.marginBottom;
     if (box.kind === 'replaced' ||
-        scrolls(box.style) ||
+        // a box that clips sits on its bottom margin edge, for legacy reasons
+        // that stop at block containers (CSS Box Alignment 3, 9.2) — and an
+        // inline table, as browsers keep it: an inline flex box that clips
+        // sits on its first item's, as it does unclipped. A MediaWiki button
+        // is an `overflow: hidden` inline flex box of one icon, and stood its
+        // whole height on the baseline, the line under it the strut's descent
+        // taller
+        (scrolls(box.style) && box.kind !== 'flex') ||
         // layout containment keeps its baseline in (CSS Containment 2, 3.3)
         box.style.contain & CONTAIN_LAYOUT) {
         return bottom;
@@ -1945,7 +2824,11 @@ function childBaseline(child, inside) {
     if (child.outOfFlow || child.isFloat || child.kind === 'replaced') {
         return null;
     }
-    if (scrolls(child.style)) {
+    // the legacy rule is a block container's last baseline alone (CSS Box
+    // Alignment 3, 9.2): its first is its first line's, clipped or not
+    if (inside === lastBaselineIn &&
+        child.kind !== 'flex' &&
+        scrolls(child.style)) {
         return child.y + child.height + child.marginBottom;
     }
     return inside(child);
@@ -2308,7 +3191,12 @@ function wordSpaced(out, box, run, spacing) {
             run: {
                 ...run,
                 text: text.slice(from, to),
-                ...(extra ? { letterSpacing: (run.letterSpacing ?? 0) + extra } : null),
+                ...(extra
+                    ? {
+                        letterSpacing: (run.letterSpacing ?? 0) + extra,
+                        kernAcross: true,
+                    }
+                    : null),
             },
             box,
             length: to - from,
@@ -2354,6 +3242,11 @@ function inlineEdges(box, width, fonts) {
         }
     }
     box.decoration = inlineDecoration(fonts, box, s);
+    if (!box.decoration && fonts && (box.padTop > 0 || box.padBottom > 0)) {
+        PADDED_FACES.set(box, faceExtent(fonts, s));
+    }
+    else
+        PADDED_FACES.delete(box);
     const left = box.marginLeft + box.borderLeft + box.padLeft;
     const right = box.padRight + box.borderRight + box.marginRight;
     return s.direction === 'rtl' ? [right, left] : [left, right];
@@ -2365,7 +3258,12 @@ function inlineEdges(box, width, fonts) {
  * a pointer move that gives a link a background (`HtmlViewNode`).
  */
 export function inlineDecoration(fonts, box, s) {
+    // a background is a colour, a gradient or an image: a span a gradient
+    // underlines, a highlighter's, was painted only where it had a border
     const decorated = !isTransparent(s.backgroundColor) ||
+        s.backgroundGradient !== null ||
+        s.backgroundImage !== null ||
+        s.backgroundImages !== null ||
         box.borderTop + box.borderRight + box.borderBottom + box.borderLeft > 0 ||
         s.outlineStyle !== 'none';
     return !decorated ? null : fonts ? faceExtent(fonts, s) : NO_EXTENT;
@@ -2434,10 +3332,27 @@ function firstLineSetting(block, items, how, fonts, strut, justify) {
     const of = (box) => box === block || !box.parent
         ? style
         : styleOnFirstLine(box, of(box.parent), how.styler);
+    // and in its `text-transform` where the line has one of its own, which
+    // the boxes' text was not made with: a word carried from one run into
+    // the next, as the box builder carries it (`letteredAfter`)
+    let lettered = false;
     const restyled = items.map((item) => {
+        if (item.kind === 'atomic')
+            lettered = false;
         if (item.kind !== 'text')
             return item;
-        const run = restyledRun(item.run, item.box.style, of(item.box));
+        const own = item.box.style;
+        const on = of(item.box);
+        let run = restyledRun(item.run, own, on);
+        const transform = on.textTransform;
+        if (!item.control &&
+            transform !== own.textTransform &&
+            transform !== 'none') {
+            const text = transformInPlace(run.text, transform, lettered);
+            if (text !== run.text)
+                run = { ...run, text };
+        }
+        lettered = letteredAfter(run.text, lettered);
         return run === item.run ? item : { ...item, run };
     });
     const lineHeight = lineHeightMultiplier(fonts, style);
@@ -2761,6 +3676,180 @@ function heldText(box) {
     return held;
 }
 const HELD = new WeakMap();
+/**
+ * Whether a line one layout made is shorter about its baseline than the
+ * block's strut. Every line box starts with the strut, the block's font at
+ * its line height (CSS 2.1 10.8.1), and a layout has none: it makes a line
+ * as tall as the text on it, at the block's line height as a multiple of
+ * each face's natural one. So a line of `<small>` text alone came out as
+ * short as the small text, and overlapped what followed. A paragraph with
+ * such a line is made a line at a time instead, where `finishLine` puts
+ * the strut on every line; one whose lines all hold text of the block's
+ * own face is kept as it was laid out.
+ */
+function shortOfStrut(lines, strut, 
+/** The first line's, where it holds more: a marker's room. */
+first = null) {
+    for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        const holds = i === 0 && first ? first : strut;
+        if (!holds)
+            continue;
+        // its room as the strut's is worked out, whichever baseline the layout
+        // it is drawn with could keep (`layoutLift`)
+        const text = line.texts.length === 1 ? line.texts[0] : null;
+        const natural = text?.layout.lines[text.layoutLine];
+        const ascent = natural ? lineAscent(natural) : line.baseline;
+        if (ascent < holds.ascent - 0.5 ||
+            line.height - ascent < holds.descent - 0.5) {
+            return true;
+        }
+    }
+    return false;
+}
+/** A strut with room besides it about the same baseline, or the strut
+ *  where there is none. */
+function withRoom(strut, room) {
+    if (!room)
+        return strut;
+    if (!strut)
+        return room;
+    return {
+        ascent: Math.max(strut.ascent, room.ascent),
+        descent: Math.max(strut.descent, room.descent),
+    };
+}
+/** The share of the size a synthesized small capital is set at, rounded to
+ *  a whole pixel as Blink rounds it (`SimpleFontData`'s scaled font data):
+ *  CSS Fonts 4 (6.2) leaves the size to the user agent. */
+const SMALL_CAPS_SCALE = 0.7;
+/**
+ * Small capitals a face does not have, made of its capitals set smaller
+ * (CSS Fonts 4, 6.2): where `font-variant-caps` asks for `smcp` — or
+ * `c2sc` too, for `all-small-caps` — and the face does not answer it,
+ * each letter that would be a small capital is its capital at 70% of the
+ * size, in a run of its own: a lower-case letter, and for `all-small-caps`
+ * the rest of the text too. Under `small-caps` what has no case — a space,
+ * a digit, a mark of punctuation — keeps its size, as Blink keeps it. Only
+ * a letter whose capital is one character is made one, so every offset
+ * holds.
+ */
+function synthesizeSmallCaps(items, fonts) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind !== 'text' || item.control)
+            continue;
+        // `font-variant-caps`'s, which is synthesized where the face has none;
+        // not `font-feature-settings`', which asks for the feature as it is
+        const caps = item.box.style.fontVariantCaps;
+        const features = item.run.features;
+        if (!caps.includes('smcp') || !features?.smcp)
+            continue;
+        const all = caps.includes('c2sc');
+        if (hasSmallCaps(fonts, item.run, all))
+            continue;
+        const pieces = smallCapsPieces(item, all, withoutCaps(features));
+        if (!pieces)
+            continue;
+        items.splice(i, 1, ...pieces);
+        i += pieces.length - 1;
+    }
+}
+/** A text item cut where its letters turn to synthesized small capitals
+ *  and back, or null where none does. */
+function smallCapsPieces(item, all, features) {
+    const text = item.run.text;
+    const pieces = [];
+    let from = 0;
+    let small = false;
+    let capitals = '';
+    const cut = (to) => {
+        if (to === from)
+            return;
+        const run = small
+            ? {
+                ...item.run,
+                text: capitals,
+                size: Math.round((item.run.size ?? 16) * SMALL_CAPS_SCALE),
+            }
+            : { ...item.run, text: text.slice(from, to) };
+        if (small) {
+            if (features)
+                run.features = features;
+            else
+                delete run.features;
+        }
+        pieces.push({ ...item, run, start: item.start + from, length: to - from });
+        from = to;
+        capitals = '';
+    };
+    let any = false;
+    for (let at = 0; at < text.length;) {
+        const ch = String.fromCodePoint(text.codePointAt(at));
+        const upper = ch.toUpperCase();
+        // everything, for `all-small-caps`: its spaces are small too
+        const becomes = (all || upper !== ch) && upper.length === ch.length;
+        if (becomes !== small) {
+            cut(at);
+            small = becomes;
+        }
+        if (becomes) {
+            capitals += upper;
+            any = true;
+        }
+        at += ch.length;
+    }
+    cut(text.length);
+    return any ? pieces : null;
+}
+/** Features without the small capitals a synthesis stands in for, one
+ *  object for each set, as `featuresOf` keeps them. */
+function withoutCaps(features) {
+    let kept = WITHOUT_CAPS.get(features);
+    if (kept === undefined) {
+        const out = {};
+        for (const [tag, value] of Object.entries(features)) {
+            if (tag !== 'smcp' && tag !== 'c2sc')
+                out[tag] = value;
+        }
+        kept = Object.keys(out).length ? out : null;
+        WITHOUT_CAPS.set(features, kept);
+    }
+    return kept;
+}
+const WITHOUT_CAPS = new WeakMap();
+/**
+ * Whether a run's face has small capitals of its own — and capitals to
+ * small capitals, for `all-small-caps`: the alphabet set with the feature
+ * and without it comes out another width where it does. Asked of the
+ * engine's layout rather than of the font's tables, which a CoreText face
+ * does not hand over. Kept per face.
+ */
+function hasSmallCaps(fonts, run, all) {
+    let known = SMALL_CAPS.get(fonts);
+    if (!known)
+        SMALL_CAPS.set(fonts, (known = new Map()));
+    const key = `${run.family}|${run.weight}|${run.style}|${all}`;
+    let has = known.get(key);
+    if (has === undefined) {
+        const face = {
+            family: run.family,
+            weight: run.weight,
+            style: run.style,
+            size: 16,
+        };
+        const width = (text, features) => fonts.layout([{ text, ...face, ...(features ? { features } : null) }], face, {}).width;
+        const lower = 'abcdefghijklmnopqrstuvwxyz';
+        has = Math.abs(width(lower, { smcp: 1 }) - width(lower, null)) > 0.01;
+        if (has && all) {
+            const upper = lower.toUpperCase();
+            has = Math.abs(width(upper, { c2sc: 1 }) - width(upper, null)) > 0.01;
+        }
+        known.set(key, has);
+    }
+    return has;
+}
+const SMALL_CAPS = 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
@@ -2872,11 +3961,15 @@ class SpanMap {
      *  a spacer, a bidi control. */
     _gaps = null;
     laidOut = 0;
-    add(documentStart, length, box = null) {
+    add(documentStart, length, box = null, 
+    /** No text of the document's, though a box's: a bidi control a
+     *  level's layout is wrapped in (`levelPieces`), which answers for
+     *  the element around it. */
+    gap = box === null) {
         this._laid.push(this.laidOut);
         this._doc.push(documentStart);
         this._boxes.push(box);
-        if (!box) {
+        if (gap) {
             this._gaps ??= [];
             for (let i = 0; i < length; i += 1)
                 this._gaps.push(this.laidOut + i);
@@ -2893,6 +3986,23 @@ class SpanMap {
         if (gaps.length)
             text.gaps = gaps;
     }
+    /** Whether an offset in the laid-out text is no text of the
+     *  document's: a spacer, a bidi control. */
+    isGap(offset) {
+        const gaps = this._gaps;
+        if (!gaps)
+            return false;
+        let lo = 0;
+        let hi = gaps.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (gaps[mid] < offset)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        return gaps[lo] === offset;
+    }
     /** The text box whose text an offset in the laid-out text is. */
     boxAt(offset) {
         const i = this._entryAt(offset);
@@ -3023,6 +4133,165 @@ export function hungSpaces(fonts, run) {
     }
     return hung;
 }
+/** Where each run starts in their joined text. */
+function runStarts(runs) {
+    const starts = [];
+    let at = 0;
+    for (const run of runs) {
+        starts.push(at);
+        at += run.text.length;
+    }
+    return starts;
+}
+/** The run a code-unit offset in the runs' joined text falls in. */
+function runIndexAt(starts, offset) {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (starts[mid] <= offset)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return lo;
+}
+/**
+ * The spaces `pre-wrap` keeps that a line ends on (CSS Text 3, 4.1.3), in
+ * logical order and each with its advance, and whether a forced break
+ * follows them. An engine strips a line's trailing white space, which is
+ * right for the collapsible spaces CSS removes there, and wrong for these.
+ */
+function keptAtEnd(natural, runs, starts, spans, fonts) {
+    const boxAt = spans.boxAt;
+    if (!boxAt || !runs.length)
+        return { found: null, forced: false };
+    const charAt = (offset) => {
+        const k = runIndexAt(starts, offset);
+        return runs[k].text.charCodeAt(offset - starts[k]);
+    };
+    let end = natural.end;
+    let forced = false;
+    if (end > natural.start && charAt(end - 1) === 10) {
+        forced = true;
+        end -= 1;
+    }
+    let found = null;
+    let kept = false;
+    for (let at = end - 1; at >= natural.start; at -= 1) {
+        const c = charAt(at);
+        if (isControl(c))
+            continue;
+        if (c !== 0x20)
+            break;
+        // a collapsible space after the last kept one is removed (4.1.3), and
+        // one before a kept one hangs with it
+        const keeps = boxAt.call(spans, at)?.style.whiteSpace === 'pre-wrap';
+        if (!keeps && !kept)
+            continue;
+        kept = true;
+        const run = runs[runIndexAt(starts, at)];
+        (found ??= []).push({ at, x: 0, width: spaceAdvance(fonts, run) });
+    }
+    found?.reverse();
+    return { found, forced };
+}
+/**
+ * The spaces `pre-wrap` keeps that a text's line ends on, which the engine
+ * hung (`keptAtEnd`): past the line's end, to its left where the layout
+ * reads right to left, and their inline box's, whose background and border
+ * cover them, as a browser draws them. Noted on the text (`LineText.hung`),
+ * and their advance answered, with whether a forced break follows them.
+ */
+function hangPreserved(text, runs, starts, fonts, rtl) {
+    const natural = text.layout.lines[text.layoutLine];
+    if (!natural)
+        return { total: 0, forced: false };
+    const { found, forced } = keptAtEnd(natural, runs, starts, text.spans, fonts);
+    if (!found)
+        return { total: 0, forced };
+    text.hung = found;
+    placeHung(text, rtl);
+    let total = 0;
+    for (const space of found)
+        total += space.width;
+    return { total, forced };
+}
+const NOTHING_HUNG = { total: 0, forced: false };
+/** Put a text's hung spaces beside its line's end, logical order outward:
+ *  to the right of its glyphs, or to their left. */
+function placeHung(text, left) {
+    const natural = text.layout.lines[text.layoutLine];
+    if (!text.hung || !natural)
+        return;
+    let x = left ? natural.x : natural.x + natural.width;
+    for (const space of text.hung) {
+        if (left)
+            x -= space.width;
+        space.x = x;
+        if (!left)
+            x += space.width;
+    }
+}
+/**
+ * The runs of a layout with the spaces `pre-wrap` keeps before a forced
+ * break held where they fit (`keptAtEnd`) — a kept newline, or the block's
+ * end after the last line where `ends` — or null where none are. They hang
+ * there only where they do not fit (CSS Text 3, 4.1.3), so they take room,
+ * which the engine gives them when they are handed over as no-break
+ * spaces, as `pre`'s are (`heldText`): it measures them, and aligns the
+ * line with them. Laid out again, the lines break where they did, since
+ * the spaces fit where they are. A line of a layout cannot be moved over
+ * for them afterwards: its lines are drawn in one draw, from one place.
+ */
+function holdAtBreaks(layout, runs, spans, fonts, width, ends) {
+    const starts = runStarts(runs);
+    let held = null;
+    const lines = layout.lines;
+    for (let i = 0; i < lines.length; i += 1) {
+        const natural = lines[i];
+        const { found, forced } = keptAtEnd(natural, runs, starts, spans, fonts);
+        if (!found || !(forced || (ends && i === lines.length - 1)))
+            continue;
+        let free = width - natural.width;
+        for (const space of found) {
+            if (space.width > free + 0.01)
+                break;
+            free -= space.width;
+            (held ??= []).push(space.at);
+        }
+    }
+    if (!held)
+        return null;
+    held.sort((a, b) => a - b);
+    const out = runs.slice();
+    let next = 0;
+    for (let k = 0; k < runs.length && next < held.length; k += 1) {
+        const start = starts[k];
+        const end = start + runs[k].text.length;
+        if (held[next] >= end)
+            continue;
+        const chars = runs[k].text.split('');
+        while (next < held.length && held[next] < end) {
+            chars[held[next] - start] = '\u00a0';
+            next += 1;
+        }
+        out[k] = { ...runs[k], text: chars.join('') };
+    }
+    return out;
+}
+/** The spaces `pre-wrap` keeps that the lines one layout made hung at
+ *  their ends (`hangPreserved`), noted on each line's text. */
+function hangLines(lines, from, runs, fonts, rtl) {
+    let starts = null;
+    for (let i = from; i < lines.length; i += 1) {
+        const text = lines[i].texts[0];
+        if (!text)
+            continue;
+        starts ??= runStarts(runs);
+        hangPreserved(text, runs, starts, fonts, rtl);
+    }
+}
 /**
  * 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
@@ -3249,14 +4518,17 @@ function unwrappedPlacer(style, width, last = true) {
 }
 /**
  * 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.
+ * apart, too little to move a glyph. It is not nothing, because CoreText
+ * does not measure a space that is a spaced run of its own as it measures
+ * the same space inside its run: it 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.
+ * ntk keeps the pairs a spaced space makes with the letters beside it
+ * (Arial's space and `T`, its `L` and space) where the run is marked
+ * `kernAcross` — spacing that justifies a line is in addition to kerning
+ * (CSS Text 3, 7.2) — so there the measure is the unjustified line's, as
+ * a browser's is.
  */
 const HAIR = 1e-6;
 /** The runs with each space a run of its own, spaced a hair apart. */
@@ -3275,6 +4547,7 @@ function spacedApart(runs) {
                 ...run,
                 text: text[at],
                 letterSpacing: (run.letterSpacing ?? 0) + HAIR,
+                kernAcross: true,
             });
             piece = at + 1;
         }
@@ -3349,6 +4622,7 @@ function widenedAt(runs, extra) {
                 ...run,
                 text: text[at],
                 letterSpacing: (run.letterSpacing ?? 0) + add,
+                kernAcross: true,
             });
             piece = at + 1;
         }
@@ -3595,8 +4869,8 @@ function naturalLineHeight(fonts, style) {
 }
 /**
  * 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).
+ * the leading its `line-height` adds shared above and below as
+ * `ascentOnLine` shares it (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
@@ -3609,8 +4883,57 @@ export function strutOf(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 };
+    const ascent = ascentOnLine(face.ascent, face.descent, target);
+    return { ascent, descent: target - ascent };
+}
+/**
+ * How far above its baseline an inline box's room on a line reaches: its
+ * face's ascent and half its leading (CSS 2.1 10.8.1, CSS Inline 3 5.3),
+ * rounded down to a whole pixel, the rest of the leading going below.
+ *
+ * The spec's halves are exact, and where one is not a whole pixel which
+ * side of the grid the text lands on is the user agent's. Blink rounds the
+ * half above down (`CalculateLeadingSpace`, core/layout/inline/
+ * line_utils.cc): a 13px Arial on an 18px line has 1px of leading over its
+ * 15 and 2px under. Split evenly, that box reached half a pixel above the
+ * 12px strut beside it, whose 4px of leading divides, and every such line
+ * came out 18.5px tall.
+ */
+export function ascentOnLine(ascent, descent, height) {
+    return ascent + Math.floor((height - ascent - descent) / 2 + 1e-6);
+}
+/**
+ * How far above its baseline a text engine's line reaches, its leading
+ * shared as `ascentOnLine` shares it. The engines split it evenly (the
+ * contract every text engine owes, a baseline `(height - ascent -
+ * descent) / 2 + ascent` down), so a line on its own sits up to a pixel
+ * lower than a browser's; one that did not say how tall its face is keeps
+ * the engine's.
+ */
+function lineAscent(natural) {
+    const { ascent, descent } = natural;
+    if (!Number.isFinite(ascent) || !Number.isFinite(descent)) {
+        return natural.baseline - natural.y;
+    }
+    return ascentOnLine(ascent, descent, natural.height);
+}
+/**
+ * How far up a layout drawn whole moves for each of its lines' baselines
+ * to be where `lineAscent` puts it. A layout is drawn in one batch, from
+ * one origin, so it moves by one amount or not at all: where its lines
+ * would move by different amounts — a face of other metrics on one — it
+ * keeps the engine's baselines, which are less than a pixel out.
+ */
+function layoutLift(layout) {
+    let lift = NaN;
+    for (const natural of layout.lines) {
+        const own = natural.baseline - natural.y - lineAscent(natural);
+        if (Number.isNaN(lift))
+            lift = own;
+        else if (Math.abs(own - lift) > 1e-6)
+            return 0;
+    }
+    return Number.isNaN(lift) ? 0 : lift;
 }
 /**
  * The raises `vertical-align` gives a paragraph's inline boxes (CSS 2.1
@@ -3786,12 +5109,18 @@ const NO_LIFT = { raise: 0, edge: null, lead: false };
  * 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>
+    // the block's own face is past at once. A bold or an italic one is not:
+    // a paragraph is thick with <strong>, <em> and <a>, and most families'
+    // faces share their line metrics, but not every one's — Helvetica Neue
+    // Bold reaches 0.975em above its baseline to the regular's 0.952, and
+    // Blink, which rounds each to a whole pixel, sets a 12px bold word on a
+    // 19.2px line a pixel taller. It is measured once for its style, below.
     if (style.lineHeight === block.lineHeight &&
         style.lineHeightIsLength === block.lineHeightIsLength &&
         style.fontSize === block.fontSize &&
-        style.fontFamily === block.fontFamily) {
+        style.fontFamily === block.fontFamily &&
+        style.fontWeight === block.fontWeight &&
+        style.fontStyle === block.fontStyle) {
         return false;
     }
     const known = LEADS.get(style);
@@ -3904,7 +5233,7 @@ function tooNarrow(runs, end, width, room) {
     }
     if (WORD_CHAR.test(before) && WORD_CHAR.test(after))
         return true;
-    return width > room + 0.5 && before !== '';
+    return width > room + FIT_SLACK && 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) {