@react-x11/components 0.10.0 → 0.12.0

package/src/html/layout/inline.ts

@@ -30,6 +30,9 @@
 // (`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 type { Bidi } from 'bidi-js';
+
 import { codePointAtOffset, codeUnitOffsets } from '../../internal/text.js';
 import type { TextRun } from '../../richtext/index.js';
 import type { ComputedStyle } from '../css/style.js';
@@ -42,10 +45,13 @@ import { inkColor, isTransparent, resolve } from '../css/values.js';
 import {
   BOX_RAISES,
   LINE_BOX_RAISES,
+  PADDED_FACES,
   isOffset,
+  letteredAfter,
   SHADOWED_TEXT,
   SHIFTED_LINES,
   TEXT_RAISES,
+  transformInPlace,
 } from './boxes.js';
 import type {
   AtomicPlacement,
@@ -60,6 +66,18 @@ import type {
 import type { FloatContext } from './floats.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' as const;
+
+/** 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 slice of ntk's font manager this needs. Structural, as everywhere. */
 export interface FontsLike {
   layout(
@@ -80,6 +98,13 @@ export interface FontsLike {
       /** Whether soft wraps are made at all: false is a line to each
        *  forced break, cut at `maxWidth` where `overflow` says so. ntk's. */
       wrap?: boolean;
+      /** `'items'` fits a line as a browser does, each run's part of it
+       *  rounded up to a 64th of a pixel before it is added, as Blink
+       *  rounds an element's text on a line up to a LayoutUnit — and
+       *  reports a line as wide as that, so a box as wide as its text
+       *  holds it. What a paragraph's lines are laid out with; ntk's, from
+       *  8.16.1, which an engine without it leaves at the advances' sum. */
+      fit?: 'items';
     },
   ): TextLayoutLike;
   match(
@@ -108,6 +133,22 @@ const LAYOUT_RUNS = new WeakMap<TextLayoutLike, TextRun[] | number[]>();
 
 const WIDEST_WORD = new WeakMap<TextLayoutLike, number>();
 
+/**
+ * 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<LineText, number>();
+
+/** 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: LineText): number | undefined {
+  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
@@ -135,7 +176,9 @@ export function widestWord(
       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);
@@ -300,6 +343,9 @@ export interface InlineOptions {
    * — which the line is found in, a piece at a time (CSS 2.1 5.12.1).
    */
   firstLineStyle?: { style: ComputedStyle; styler: FirstLineStyler };
+  /** Room the first line has to hold about its baseline besides the
+   *  strut's: a list item's marker (`MARKER_ROOM`). */
+  firstStrut?: InlineDecoration;
   /** Whether any box in the document paints its background through its
    *  text (`BoxTree.clipText`). */
   clipText?: boolean;
@@ -431,16 +477,22 @@ function linesOf(
     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
   // tab, which only a `white-space` that keeps it leaves — so no text is
   // searched for one where it cannot be
   let tabbed = false;
   let shadowed = false;
+  // 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') &&
@@ -475,6 +527,9 @@ function linesOf(
 
   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,
@@ -537,6 +592,13 @@ function linesOf(
     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`);
@@ -550,20 +612,23 @@ function linesOf(
       lineHeightMul,
       align,
       fonts,
+      keepsSpaces,
     );
-    if (laid) return laid;
+    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 (
+  fast: if (
     !hasAtomics &&
     !hasEdges &&
     !raised &&
     !floated &&
     !indent &&
     !alignedApart &&
-    !restyled
+    !restyled &&
+    !strutted
   ) {
     // no atomics and no edges, so everything is text
     const textItems = items as Extract<Item, { kind: 'text' }>[];
@@ -592,11 +657,12 @@ function linesOf(
         align,
         fonts,
         { chars: Infinity, hardLines: 1, cut },
+        keepsSpaces,
       );
     }
     if (perLine) cut = null;
     if (total > CHUNK_TRIGGER_CHARS && hasNewline && !hasControls(items)) {
-      return layoutChunked(
+      const chunked = layoutChunked(
         textItems,
         base,
         style,
@@ -604,7 +670,12 @@ function linesOf(
         lineHeightMul,
         align,
         fonts,
+        CHUNKS,
+        keepsSpaces,
       );
+      if (!shortOfStrut(chunked.lines, strut, firstStrut)) return chunked;
+      strutted = true;
+      break fast;
     }
     let runs: TextRun[] = [];
     let spans = new SpanMap();
@@ -627,10 +698,26 @@ function linesOf(
       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
@@ -705,12 +792,22 @@ function linesOf(
           ? 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: LineBox[] = [];
   let widest = 0;
   let y = 0;
@@ -751,7 +848,6 @@ function linesOf(
     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`).
@@ -773,6 +869,7 @@ function linesOf(
             align: 'left',
             direction: style.direction,
             overflowWrap: wrapWords,
+            fit: PARAGRAPH_FIT,
           },
         }
       : null;
@@ -791,6 +888,14 @@ function linesOf(
    *  which `text-align-last` aligns. */
   const close = (last = false): void => {
     const onFirst = lineOne !== null && !lines.length;
+    const levels: LineLevels | null = paraBidi
+      ? {
+          bidi: paraBidi,
+          fonts: fonts!,
+          base: onFirst ? lineOne.base : base,
+          lineHeight: onFirst ? lineOne.lineHeight : lineHeightMul,
+        }
+      : null;
     const line = finishLine(
       open,
       y,
@@ -799,13 +904,16 @@ function linesOf(
       (height) => bandAt(options, y, Math.max(height, guess)),
       last || !wraps(style) ? lastShift : restShift,
       rtl,
-      onFirst ? lineOne.strut : strut,
+      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,
+      levels,
     );
     if (!line) {
       open = openLine(0);
@@ -933,7 +1041,12 @@ function linesOf(
       const raise = atomicRaise(fonts, box, (box.parent ?? block).style);
       if (raise) placed.raise = raise;
       open.atomics.push(placed);
-      open.order.push({ kind: 'atomic', at: open.x, item: placed });
+      open.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;
@@ -970,13 +1083,17 @@ function linesOf(
     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,
@@ -984,50 +1101,77 @@ function linesOf(
         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,
+        tailRuns,
         base,
         tailOptions,
         layout,
         Math.max(1, available),
         justify,
       ).layout;
+      const tail: LineBox[] = [];
+      const lift = layoutLift(layout);
       for (let i = 0; i < layout.lines.length; i += 1) {
         const natural = layout.lines[i];
         const text: LineText = {
           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
@@ -1048,27 +1192,104 @@ function linesOf(
       !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
@@ -1078,7 +1299,7 @@ function linesOf(
     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) {
@@ -1088,30 +1309,47 @@ function linesOf(
     }
     // 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: LineText = {
       layout: fragment,
       layoutLine: 0,
@@ -1124,28 +1362,35 @@ function linesOf(
       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;
+    // 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 = (): void => {
+      open.x += Math.min(hung.total, Math.max(0, available - open.x));
+    };
 
-    // 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));
     if (!wrapped) {
       // It fitted: the cursor stays on this line for whatever comes next.
       //
@@ -1159,7 +1404,10 @@ function linesOf(
         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;
           trailing = m[0] + trailing;
@@ -1167,18 +1415,26 @@ function linesOf(
         }
         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;
@@ -1201,6 +1457,36 @@ function linesOf(
 
 const EMPTY: InlineResult = { 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: FontsLike,
+  runs: TextRun[],
+  base: Record<string, unknown>,
+  style: ComputedStyle,
+  lineHeight: number,
+  overflowWrap: 'normal' | 'break-word',
+  width: number,
+): TextLayoutLike {
+  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
@@ -1327,9 +1613,10 @@ function layoutSpaced(
   lineHeightMul: number,
   align: string,
   fonts: FontsLike,
+  keepsSpaces: boolean,
 ): InlineResult | null {
   const wrapWords = overflowWrapOf(style, items);
-  const runs: TextRun[] = [];
+  let runs: TextRun[] = [];
   const spans = new SpanMap();
   const spacers: { at: number; edge: Extract<Item, { kind: 'edge' }> }[] = [];
   let doc = 0;
@@ -1360,9 +1647,18 @@ function layoutSpaced(
     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,
@@ -1375,6 +1671,7 @@ function layoutSpaced(
     new Set(spacers.map((spacer) => spacer.at)),
   ).layout;
   const place = wraps(style) ? null : unwrappedPlacer(style, width);
+  const lift = layoutLift(layout);
   let offsets: number[] | null = null;
   const lines: LineBox[] = [];
   let widest = 0;
@@ -1405,7 +1702,7 @@ function layoutSpaced(
       layout,
       layoutLine: i,
       drawX: dx,
-      drawY: 0,
+      drawY: -lift,
       textStart: spans.documentAt(natural.start),
       textEnd: spans.documentAt(natural.end),
       layoutStart: natural.start,
@@ -1417,7 +1714,7 @@ function layoutSpaced(
       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,
@@ -1426,6 +1723,7 @@ function layoutSpaced(
     });
     widest = Math.max(widest, natural.width);
   }
+  if (keepsSpaces) hangLines(lines, 0, runs, fonts, style.direction === 'rtl');
   return { lines, height: layout.height, width: widest };
 }
 
@@ -1479,6 +1777,7 @@ function emitLayout(
   place: LinePlacer | null = null,
 ): number {
   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;
@@ -1486,7 +1785,7 @@ function emitLayout(
       layout,
       layoutLine: i,
       drawX: xOff + dx,
-      drawY: yOff,
+      drawY: yOff - lift,
       textStart: spans.documentAt(natural.start),
       textEnd: spans.documentAt(natural.end),
       layoutStart: natural.start,
@@ -1498,7 +1797,7 @@ function emitLayout(
       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,
@@ -1554,6 +1853,7 @@ function layoutChunked(
   align: string,
   fonts: FontsLike,
   chunking: Chunking = CHUNKS,
+  keepsSpaces = false,
 ): InlineResult {
   const wrapWords = overflowWrapOf(style, items);
   const lines: LineBox[] = [];
@@ -1567,7 +1867,7 @@ function layoutChunked(
 
   const { cut } = chunking;
   const place = wraps(style) || cut ? null : unwrappedPlacer(style, width);
-  const flush = (): void => {
+  const flush = (last = false): void => {
     if (!chunkRuns.length) return;
     const chunkOptions = {
       maxWidth: wraps(style) || cut ? width : undefined,
@@ -1575,10 +1875,26 @@ function layoutChunked(
       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(
@@ -1590,10 +1906,14 @@ function layoutChunked(
       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();
@@ -1658,7 +1978,7 @@ function layoutChunked(
       text = text.slice(cut);
     }
   }
-  flush();
+  flush(true);
   return { lines, height: y, width: widest };
 }
 
@@ -1683,8 +2003,26 @@ interface OpenLine {
 }
 
 type Placed =
-  | { kind: 'text'; at: number; item: LineText; reads: Reading }
-  | { kind: 'atomic'; at: number; item: AtomicPlacement }
+  | {
+      kind: 'text';
+      at: number;
+      item: LineText;
+      reads: Reading;
+      /** Where the text was laid out from, in a paragraph with bidi levels
+       *  (`ParagraphBidi`): its segment's place in the paragraph's text,
+       *  runs and spans, which `levelPieces` splits it by. */
+      from?: { para: number; runs: TextRun[]; spans: SpanMap };
+      /** Its UAX #9 level, once `levelPieces` has found it one. */
+      level?: number;
+    }
+  | {
+      kind: 'atomic';
+      at: number;
+      item: AtomicPlacement;
+      /** Its object replacement character's place in the paragraph. */
+      para?: number;
+      level?: number;
+    }
   | { kind: 'edge'; at: number; item: EdgePlacement };
 
 /** Which way a fragment's letters read: all one way, both, or neither —
@@ -1713,6 +2051,271 @@ function breaksAtEnd(open: OpenLine, style: ComputedStyle): boolean {
   );
 }
 
+/**
+ * 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: OpenLine,
+  style: ComputedStyle,
+  fonts: FontsLike,
+  base: Record<string, unknown>,
+  next: readonly TextRun[],
+  anywhere: boolean,
+): boolean {
+  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 as TextRun[], 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: OpenLine,
+  runs: readonly TextRun[],
+  start: number,
+): number | undefined {
+  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 as TextRun[],
+      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: FontsLike,
+  base: Record<string, unknown>,
+  before: readonly TextRun[],
+  end: number,
+  after: readonly TextRun[],
+  anywhere: boolean,
+): boolean {
+  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: TextRun[]): number =>
+    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: readonly TextRun[], at: number): string {
+  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: readonly TextRun[], end: number): number {
+  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: readonly TextRun[]): number {
+  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: readonly TextRun[]): number {
+  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: readonly Item[],
+  from: number,
+): TextRun[] | null {
+  const runs: TextRun[] = [];
+  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: readonly Item[], from: number): number {
+  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: readonly Item[], from: number): number {
+  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: readonly TextRun[], at: number): boolean {
+  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 —
@@ -1751,7 +2354,9 @@ function unbreakableAfter(
     if (stop > 0) 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;
 }
 
 /**
@@ -1769,11 +2374,16 @@ function finishLine(
   strut: InlineDecoration | null,
   lifts: Lifts | null = null,
   justify: LineJustify | null = null,
+  /** The paragraph's bidi levels, where it has them (`ParagraphBidi`). */
+  levels: LineLevels | null = null,
 ): LineBox | 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
   // height, so a line of images alone is still as tall as `line-height`
@@ -1822,7 +2432,9 @@ function finishLine(
       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);
   }
@@ -1979,10 +2591,8 @@ function finishLine(
  * 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
@@ -1998,25 +2608,16 @@ function reorderLine(open: OpenLine, rtl: boolean): void {
   if (!n) return;
   const content: number[] = [];
   for (let i = 0; i < n; i += 1) if (order[i].kind !== 'edge') content.push(i);
-  const strong = content.map((i): boolean | null => {
+  // 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';
-  });
-  const strongAt = (from: number, step: number): boolean => {
-    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;
+    return p.kind === 'edge' ? undefined : p.level;
   });
-  // 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 as number[])
+    : 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;) {
@@ -2087,6 +2688,8 @@ function reorderLine(open: OpenLine, rtl: boolean): void {
       const k = content.indexOf(i);
       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;
     }
@@ -2094,6 +2697,473 @@ function reorderLine(open: OpenLine, rtl: boolean): void {
   }
 }
 
+/**
+ * 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: Placed[],
+  content: number[],
+  rtl: boolean,
+): number[] {
+  const strong = content.map((i): boolean | null => {
+    const p = order[i];
+    if (p.kind !== 'text' || p.reads === null) return null;
+    return p.reads === 'mixed' ? rtl : p.reads === 'rtl';
+  });
+  const strongAt = (from: number, step: number): boolean => {
+    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;
+  });
+}
+
+/**
+ * A paragraph's UAX #9 levels, for its lines made a piece at a time. The
+ * engine resolves bidi over what it is handed, which on such a line is a
+ * piece: an embedding or an override opened on one side of an inline box's
+ * edge or an atomic and closed on the other was resolved on each side
+ * apart, and a neutral at a piece's edge took the paragraph's direction
+ * wherever it sat (#149). So they are resolved here, once, over the
+ * paragraph's text as its layouts see it — the controls `unicode-bidi`
+ * stands for among it, and an object replacement character for each
+ * atomic, as CSS Writing Modes 3 has one taken (2.4.2) — by bidi-js, which
+ * is what ntk's own layout resolves them with.
+ */
+interface ParagraphBidi {
+  text: string;
+  levels: Uint8Array;
+  /** Whether it holds an explicit embedding, override or isolate, which
+   *  a piece laid out alone may be outside of. */
+  explicit: boolean;
+  /** The paragraph's own level: 1 where it reads right to left. */
+  base: number;
+  /** Where each item's text starts in `text`, by the item's index. */
+  starts: number[];
+}
+
+/** What a line's pieces are ordered by (`levelPieces`): the paragraph's
+ *  levels, and the fonts, font and line height a piece is laid out again
+ *  in where it is split. */
+interface LineLevels {
+  bidi: ParagraphBidi;
+  fonts: FontsLike;
+  base: Record<string, unknown>;
+  lineHeight: number;
+}
+
+type TextPlaced = Extract<Placed, { kind: 'text' }>;
+
+let BIDI: Bidi | null = 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(): Bidi {
+  if (!BIDI) {
+    const factory = bidiModule as unknown as
+      (() => Bidi) | { default: () => Bidi };
+    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: Box,
+  items: Item[],
+  rtl: boolean,
+): ParagraphBidi | null {
+  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: number[] = [];
+  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<Box, ParagraphBidi>();
+
+/** 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: number): boolean {
+  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<TextRun[], { text: string; levels: Uint8Array }>();
+
+function aloneLevels(
+  runs: TextRun[],
+  rtl: boolean,
+): { text: string; levels: Uint8Array } {
+  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: ParagraphBidi,
+  segment: Segment,
+  para: number,
+  rtl: boolean,
+): boolean {
+  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: OpenLine, line: LineLevels): boolean {
+  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: number): number => levels[at - start];
+  let off = false;
+  const order: Placed[] = [];
+  const texts: LineText[] = [];
+  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: TextPlaced,
+  levelAt: (at: number) => number,
+  line: LineLevels,
+): TextPlaced[] {
+  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: number): boolean =>
+    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: TextPlaced[] = [];
+  let at = p.at;
+  let lastRuns: TextRun[] = [];
+  /** Where each piece is in the fragment's segment. */
+  const ranges: [number, number][] = [];
+  const piece = (from: number, to: number, level: number): void => {
+    // its letters, each run's with where it is in the document and whose
+    // text it is
+    const letters: { run: TextRun; doc: number; box: Box | null }[] = [];
+    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: TextRun, control: string): TextRun => ({
+      text: control,
+      family: run.family,
+      size: run.size,
+      weight: run.weight,
+      style: run.style,
+    });
+    const rtl = (level & 1) === 1;
+    const laidRuns: TextRun[] = [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: LineText = {
+      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: ParagraphBidi,
+  from: NonNullable<TextPlaced['from']>,
+  first: number,
+  last: number,
+  levelAt: (at: number) => number,
+): boolean {
+  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: NonNullable<TextPlaced['from']>,
+  natural: TextLayoutLike['lines'][number],
+  levelAt: (at: number) => number,
+  base: number,
+): boolean {
+  const { text, levels } = aloneLevels(from.runs, base === 1);
+  const js = bidiJs();
+  const quiet = (at: number): boolean =>
+    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
@@ -2221,7 +3291,14 @@ function atomicBaseline(box: Box): number {
   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
   ) {
@@ -2356,7 +3433,13 @@ function childBaseline(
   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);
@@ -2781,7 +3864,12 @@ function wordSpaced(
       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,
@@ -2832,6 +3920,9 @@ function inlineEdges(
     }
   }
   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];
@@ -2848,8 +3939,13 @@ export function inlineDecoration(
   box: Box,
   s: ComputedStyle,
 ): InlineDecoration | null {
+  // 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;
@@ -2952,9 +4048,26 @@ function firstLineSetting(
     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): 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);
@@ -3307,6 +4420,199 @@ function heldText(box: Box): string {
 
 const HELD = new WeakMap<Box, string>();
 
+/**
+ * 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: readonly LineBox[],
+  strut: InlineDecoration | null,
+  /** The first line's, where it holds more: a marker's room. */
+  first: InlineDecoration | null = null,
+): boolean {
+  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: InlineDecoration | null,
+  room: InlineDecoration | undefined,
+): InlineDecoration | null {
+  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: Item[], fonts: FontsLike): void {
+  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: Extract<Item, { kind: 'text' }>,
+  all: boolean,
+  features: Readonly<Record<string, number>> | null,
+): Extract<Item, { kind: 'text' }>[] | null {
+  const text = item.run.text;
+  const pieces: Extract<Item, { kind: 'text' }>[] = [];
+  let from = 0;
+  let small = false;
+  let capitals = '';
+  const cut = (to: number): void => {
+    if (to === from) return;
+    const run: TextRun = 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: Readonly<Record<string, number>>,
+): Readonly<Record<string, number>> | null {
+  let kept = WITHOUT_CAPS.get(features);
+  if (kept === undefined) {
+    const out: Record<string, number> = {};
+    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<
+  Readonly<Record<string, number>>,
+  Readonly<Record<string, number>> | null
+>();
+
+/**
+ * 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: FontsLike, run: TextRun, all: boolean): boolean {
+  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: string, features: Record<string, number> | null) =>
+      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<FontsLike, Map<string, boolean>>();
+
 /**
  * The OpenType features a style's text is shaped with: the `font-variant`
  * longhands' and `font-kerning`'s, then `font-feature-settings`, which has
@@ -3428,11 +4734,19 @@ class SpanMap {
   private _gaps: number[] | null = null;
   laidOut = 0;
 
-  add(documentStart: number, length: number, box: Box | null = null): void {
+  add(
+    documentStart: number,
+    length: number,
+    box: Box | null = 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,
+  ): void {
     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);
     }
@@ -3448,6 +4762,21 @@ 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: number): boolean {
+    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: number): Box | null {
     const i = this._entryAt(offset);
@@ -3593,6 +4922,183 @@ export function hungSpaces(fonts: FontsLike, run: TextRun): RegExp {
   return hung;
 }
 
+/** Where each run starts in their joined text. */
+function runStarts(runs: TextRun[]): number[] {
+  const starts: number[] = [];
+  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: number[], offset: number): number {
+  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: TextLayoutLike['lines'][number],
+  runs: TextRun[],
+  starts: number[],
+  spans: LineText['spans'],
+  fonts: FontsLike,
+): { found: HungSpace[] | null; forced: boolean } {
+  const boxAt = spans.boxAt;
+  if (!boxAt || !runs.length) return { found: null, forced: false };
+  const charAt = (offset: number): number => {
+    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: HungSpace[] | null = 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 };
+}
+
+type HungSpace = NonNullable<LineText['hung']>[number];
+
+/**
+ * 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: LineText,
+  runs: TextRun[],
+  starts: number[],
+  fonts: FontsLike,
+  rtl: boolean,
+): { total: number; forced: boolean } {
+  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: LineText, left: boolean): void {
+  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: TextLayoutLike,
+  runs: TextRun[],
+  spans: SpanMap,
+  fonts: FontsLike,
+  width: number,
+  ends: boolean,
+): TextRun[] | null {
+  const starts = runStarts(runs);
+  let held: number[] | null = 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: LineBox[],
+  from: number,
+  runs: TextRun[],
+  fonts: FontsLike,
+  rtl: boolean,
+): void {
+  let starts: number[] | null = 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
@@ -3867,14 +5373,17 @@ function unwrappedPlacer(
 
 /**
  * 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;
 
@@ -3892,6 +5401,7 @@ function spacedApart(runs: TextRun[]): TextRun[] {
         ...run,
         text: text[at],
         letterSpacing: (run.letterSpacing ?? 0) + HAIR,
+        kernAcross: true,
       });
       piece = at + 1;
     }
@@ -3971,6 +5481,7 @@ function widenedAt(runs: TextRun[], extra: Map<number, number>): TextRun[] {
         ...run,
         text: text[at],
         letterSpacing: (run.letterSpacing ?? 0) + add,
+        kernAcross: true,
       });
       piece = at + 1;
     }
@@ -4248,8 +5759,8 @@ function naturalLineHeight(fonts: FontsLike, style: ComputedStyle): number {
 
 /**
  * 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: FontsLike,
@@ -4265,8 +5776,62 @@ export function strutOf(
       : style.lineHeightIsLength
         ? (style.lineHeight as number)
         : (style.lineHeight as number) * 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: number,
+  descent: number,
+  height: number,
+): number {
+  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: TextLayoutLike['lines'][number]): number {
+  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: TextLayoutLike): number {
+  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;
 }
 
 /** Where a text `vertical-align` raised goes on its line. */
@@ -4471,13 +6036,19 @@ function ownsLeading(
   block: ComputedStyle,
   style: ComputedStyle,
 ): boolean {
-  // 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;
   }
@@ -4615,7 +6186,7 @@ function tooNarrow(
     at += text.length;
   }
   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 =