render-tag 0.1.32 → 0.1.34

package/lib/layout.js

@@ -5,6 +5,8 @@ let _debug;
 // Lines emitted during layout. Reset at the start of buildLayoutTree();
 // layoutInlineContent appends one entry per committed line.
 let _lines = [];
+const _minContentCache = new Map();
+const _maxContentCache = new Map();
 // ─── measureText width cache ──────────────────────────────────────────
 // Caches ctx.measureText(text).width keyed by "font\0text".
 // Cleared at the start of each buildLayoutTree() call.
@@ -21,17 +23,21 @@ function cachedMeasureWidth(ctx, text) {
     return w;
 }
 /**
- * Check if a line has mixed fonts (different fontFamily/fontSize/fontWeight/fontStyle).
+ * Would every glyph on this line be measured under one canvas state? Only then
+ * can the line be re-measured as a single string. Keyed on what `applyFont`
+ * and `formatLetterSpacing` actually set, not on the raw declarations —
+ * `font-kerning: auto` and `normal` are one state on the canvas.
  */
-function hasMixedFonts(words) {
-    let font = '';
+function hasMixedTextMetrics(words) {
+    let metrics = '';
     for (const w of words) {
         if (!w.text || w.isSpace)
             continue;
-        const f = buildCanvasFont(w.style);
-        if (font && f !== font)
+        const key = `${buildCanvasFont(w.style)}|${formatLetterSpacing(w.style.letterSpacing)}` +
+            `|${canvasKerning(w.style)}`;
+        if (metrics && key !== metrics)
             return true;
-        font = f;
+        metrics = key;
     }
     return false;
 }
@@ -41,7 +47,11 @@ function hasMixedFonts(words) {
  */
 export function applyFont(ctx, style) {
     ctx.font = buildCanvasFont(style);
-    ctx.fontKerning = style.fontKerning === 'none' ? 'none' : 'normal';
+    ctx.fontKerning = canvasKerning(style);
+}
+/** The `ctx.fontKerning` value a style resolves to. */
+function canvasKerning(style) {
+    return style.fontKerning === 'none' ? 'none' : 'normal';
 }
 /** Format a letter-spacing value (px) as a canvas `ctx.letterSpacing` string. */
 function formatLetterSpacing(value) {
@@ -174,6 +184,10 @@ function getLineHeight(ctx, style, useBulletProbe = false) {
 const UA = typeof navigator === 'undefined' ? '' : navigator.userAgent;
 const IS_GECKO = /\bGecko\/\d/.test(UA);
 const IS_SAFARI = /AppleWebKit/.test(UA) && !/Chrome\/\d/.test(UA) && !/\bjsdom\//.test(UA);
+/** Blink (and server-side rendering, whose documented target is Blink) can
+ * paint ordinary LTR words as one shaped source run without moving its DOM
+ * raster. Gecko and WebKit keep the established word paint path. */
+export const BLINK_TEXT_RUN_SHAPING = !IS_GECKO && !IS_SAFARI;
 /**
  * True where the engine floors a line's baseline onto a whole CSS pixel.
  *
@@ -203,6 +217,31 @@ export function lineBaselineOffset(lineHeight, ascent, descent) {
     const exact = (lineHeight - (ascent + descent)) / 2 + ascent;
     return FLOORS_LINE_BASELINE ? Math.floor(exact) : exact;
 }
+/**
+ * Tab-stop metrics for a block, the way Chrome sizes them. Tab stops follow
+ * the BLOCK's style, not the inline run the tab sits in: the interval is
+ * tab-size(8) × the block font's space advance — measured with
+ * letter-spacing off — plus the block's letter- and word-spacing per stop
+ * (css-text-3 §tab-size), verified against the DOM (a tab inside a bold span
+ * still uses the regular-weight space). `halfSpace` carries Blink's skip
+ * rule: when the next stop is closer than half a space width, the tab
+ * advances to the stop after it (Font::TabWidth).
+ *
+ * Public API for the same reason as `lineBaselineOffset`: a renderer that
+ * re-flows text beside a render-tag canvas needs identical stops. Call it
+ * rather than restate it, or the two drift. Mutates ctx font state.
+ */
+export function tabStopMetrics(ctx, style) {
+    applyFont(ctx, style);
+    const prevLetterSpacing = ctx.letterSpacing;
+    ctx.letterSpacing = '0px';
+    const spaceWidth = cachedMeasureWidth(ctx, ' ');
+    ctx.letterSpacing = prevLetterSpacing;
+    return {
+        interval: (spaceWidth + (style.letterSpacing || 0) + (style.wordSpacing || 0)) * 8,
+        halfSpace: spaceWidth / 2,
+    };
+}
 /**
  * The vertical space an inline-block's margin box adds around its content, over
  * and above the font's own leading. Written once because the wrap pass grows
@@ -293,6 +332,15 @@ export function getFontMetrics(ctx, style) {
  */
 function verticalAlignShift(va, ctx, style, parentStyle, useBulletProbe) {
     switch (va) {
+        // Blink and WebKit share the fraction (Blink's inline_box_state.cc:
+        // fontSize/3 + 1 for super, /5 + 1 for sub, from the PARENT box's size,
+        // no font metric involved); Gecko raises by 0.34em and lowers by 0.2em.
+        // Deliberately NOT Blink's LayoutUnit arithmetic (snap the size to the
+        // 1/64px grid, truncate the division): that matches Chrome's DOM layout
+        // rects exactly (measured, 18/18 samples 10-100px vs float's <=0.0125px
+        // residual — and WebKit divides in plain float), but the shift also feeds
+        // the line-box union, and quantizing it REGRESSED the sub/sup pixel
+        // baselines 0.5-2% on every font variant. The screenshot is the oracle.
         case 'super':
             return BLINK_SUPER_SUB
                 ? -(parentStyle.fontSize / 3 + 1) : -parentStyle.fontSize * 0.34;
@@ -535,6 +583,7 @@ function collectTextRuns(node) {
                 // Store the full box info for atomic inline-block handling
                 boxOpen: n.style, // signals this is a boxed element
                 boxClose: n.style,
+                inlineBlock: n,
             });
             return;
         }
@@ -648,7 +697,9 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
         run.style.whiteSpace === 'break-spaces';
     if (isPreserve) {
         // Split on spaces and tabs, keeping delimiters
-        const words = text.split(/( +|\t)/);
+        const words = text
+            .split(/( +|\t)/)
+            .flatMap((word) => /^( +|\t)$/.test(word) ? [word] : splitHyphenated(word));
         const tabStopInterval = cachedMeasureWidth(ctx, ' ') * 8; // CSS default: 8 spaces
         for (const w of words) {
             if (w === '')
@@ -689,9 +740,19 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
         // or ":" (verified against the browser), so only "?" is split here. The
         // "?" stays with the preceding fragment; a trailing "?" (no follower) is
         // left intact. Fragments measure cumulatively so kerning stays accurate.
+        // The second alternative: a non-breaking space still permits a break
+        // BEFORE it when the preceding character is a hyphen or a break-after one
+        // (UAX #14 LB12a, `[^SP BA HY] x GL`). Measured against the DOM with
+        // `aaaaaaaaaa<c>\u00A0bbbbbbbbbb` at 120px/15px Open Sans: only "-",
+        // "|", "\u2013" and "\u2014" break there. Letters, "\u2026", ")", "\u00BB",
+        // "?", "/" and "," all keep the NBSP glued, so the set is exactly HY
+        // plus BA and nothing wider.
         const words = text
             .split(/([ \t\n\r\f\v]+)/)
-            .flatMap((w) => /^[ \t\n\r\f\v]+$/.test(w) ? [w] : w.split(/(?<=\?)(?=.)/));
+            .flatMap((w) => /^[ \t\n\r\f\v]+$/.test(w)
+            ? [w]
+            : w.split(/(?<=\?)(?=.)|(?<=[-|\u2013\u2014])(?=\u00A0)/))
+            .flatMap((word) => /^[ \t\n\r\f\v]+$/.test(word) ? [word] : splitHyphenated(word));
         // Use cumulative measurement to avoid rounding error accumulation
         // within a single text run. When cumState is provided (from \u200B/\u00AD
         // split), continue from the previous cumulative position to preserve
@@ -809,6 +870,7 @@ function tokenizeRuns(ctx, runs) {
                 boxClose: run.boxClose,
                 clipStyle: run.clipStyle,
                 strokeImageStyle: run.strokeImageStyle,
+                inlineBlock: run.inlineBlock,
             });
             continue;
         }
@@ -916,6 +978,13 @@ function graphemes(text) {
     return seg ? [...seg.segment(text)].map((s) => s.segment) : [...text];
 }
 const EMOJI_PICTOGRAPHIC = /\p{Extended_Pictographic}/u;
+/**
+ * Exactly the characters `isEmojiCluster` can answer `true` for: something in
+ * the emoji planes (regional-indicator flags included), a ZWJ, or a VS16. A
+ * word without one of these cannot contain an emoji cluster, so this skips
+ * grapheme segmentation for the overwhelming majority of words.
+ */
+const EMOJI_CANDIDATE = /[\u{1F000}-\u{10FFFF}\u200D\uFE0F]/u;
 /**
  * Is this grapheme cluster an emoji that creates a line-break opportunity?
  * Restricted to emoji-presentation clusters (emoji planes, regional-indicator
@@ -933,9 +1002,22 @@ function isEmojiCluster(s) {
     }
     return false;
 }
+/**
+ * Split after CSS hyphen break opportunities, preserving the hyphen. The
+ * two-character lookbehind cannot match at index 1, which is what keeps a
+ * leading hyphen attached to the word it starts.
+ */
+function splitHyphenated(text) {
+    return text.split(/(?<=[^]-)/).filter(Boolean);
+}
 /**
  * Break a word into character-level pieces if it contains CJK/emoji or if
  * overflow-wrap: break-word is set and the word is too wide.
+ *
+ * `emergency` distinguishes the two reasons. CJK and emoji carry their own
+ * break opportunities, so those splits are ordinary and fill the current line.
+ * `overflow-wrap: break-word` is a last resort, and the caller has to know
+ * which of the two it got.
  */
 function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
     // Check if word has CJK characters — always break at character level
@@ -943,38 +1025,20 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
     // Emoji form their own break opportunities (a run of emoji wraps between
     // clusters). Only meaningful when a grapheme segmenter is available so ZWJ
     // sequences / skin-tone / flag pairs stay intact.
-    const hasEmoji = EMOJI_PICTOGRAPHIC.test(word.text) && !!getGraphemeSegmenter();
+    const segmenter = getGraphemeSegmenter();
+    const hasEmoji = !!segmenter && EMOJI_CANDIDATE.test(word.text) &&
+        graphemes(word.text).some(isEmojiCluster);
     // Check if word needs break-word splitting — when it won't fit on a fresh line
     const needsBreak = word.width > contentWidth &&
         (word.style.overflowWrap === 'break-word' || word.style.wordBreak === 'break-all');
     if (!hasCJK && !hasEmoji && !needsBreak)
-        return [word];
-    // overflow-wrap:break-word is a LAST RESORT — the browser first uses any
-    // normal break opportunity inside the word (a hyphen) before breaking
-    // mid-character. So split a hyphenated word at its hyphens first and only
-    // char-break the segments that are themselves still too wide. (word-break:
-    // break-all genuinely allows breaking between any two characters, so it
-    // skips this and falls through to the char loop below.)
-    if (needsBreak && word.style.wordBreak !== 'break-all' &&
-        word.style.overflowWrap === 'break-word') {
-        const segTexts = word.text.split(/(?<=-)(?!\d)|(?<=[^\d]-)/).filter((s) => s.length);
-        if (segTexts.length > 1) {
-            ctx.font = buildCanvasFont(word.style);
-            ctx.letterSpacing = formatLetterSpacing(word.style.letterSpacing);
-            const out = [];
-            for (const segText of segTexts) {
-                const segWidth = cachedMeasureWidth(ctx, segText);
-                if (segWidth <= contentWidth) {
-                    out.push({ ...word, text: segText, width: segWidth });
-                }
-                else {
-                    // Segment still overflows — char-break just this segment.
-                    out.push(...breakWordIfNeeded(ctx, { ...word, text: segText, width: segWidth }, contentWidth, 0));
-                }
-            }
-            return out;
-        }
-    }
+        return { pieces: [word], emergency: false };
+    // `overflow-wrap: break-word` is the last-resort split; CJK/emoji breaks are
+    // ordinary opportunities that behave nothing like it at the line edge.
+    // `word-break: break-all` genuinely allows a break anywhere, so it is not an
+    // emergency either.
+    const emergency = needsBreak && !hasCJK && !hasEmoji &&
+        word.style.wordBreak !== 'break-all';
     // Split into characters using cumulative measurement for accuracy.
     // Measuring each char individually ignores kerning — the sum of individual
     // widths diverges from the true string width over many characters.
@@ -988,7 +1052,13 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
     const pieces = [];
     let current = '';
     let currentWidth = 0;
+    let measuredText = '';
+    let measuredWidth = 0;
+    let currentStartWidth = 0;
     for (const char of chars) {
+        const nextMeasuredText = measuredText + char;
+        const nextMeasuredWidth = cachedMeasureWidth(ctx, nextMeasuredText);
+        const charWidth = nextMeasuredWidth - measuredWidth;
         // Emoji clusters each get their own word — a break opportunity between
         // adjacent emoji, matching the browser line breaker.
         if (hasEmoji && isEmojiCluster(char)) {
@@ -997,7 +1067,10 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
                 current = '';
                 currentWidth = 0;
             }
-            pieces.push({ ...word, text: char, width: cachedMeasureWidth(ctx, char) });
+            pieces.push({ ...word, text: char, width: charWidth });
+            currentStartWidth = nextMeasuredWidth;
+            measuredText = nextMeasuredText;
+            measuredWidth = nextMeasuredWidth;
             continue;
         }
         // CJK chars always get their own word for wrapping
@@ -1007,30 +1080,64 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
                 current = '';
                 currentWidth = 0;
             }
-            const charWidth = cachedMeasureWidth(ctx, char);
             pieces.push({ ...word, text: char, width: charWidth });
+            currentStartWidth = nextMeasuredWidth;
+            measuredText = nextMeasuredText;
+            measuredWidth = nextMeasuredWidth;
             continue;
         }
         // Use cumulative measurement: measure the growing string, not individual chars
         const candidateText = current + char;
-        const candidateWidth = cachedMeasureWidth(ctx, candidateText);
+        const candidateWidth = nextMeasuredWidth - currentStartWidth;
         // For break-word: break when adding this char would exceed container
         if (needsBreak && candidateWidth > contentWidth && current) {
             pieces.push({ ...word, text: current, width: currentWidth });
             current = char;
-            currentWidth = cachedMeasureWidth(ctx, char);
+            currentWidth = charWidth;
+            currentStartWidth = measuredWidth;
+            measuredText = nextMeasuredText;
+            measuredWidth = nextMeasuredWidth;
             continue;
         }
         current = candidateText;
         currentWidth = candidateWidth;
+        measuredText = nextMeasuredText;
+        measuredWidth = nextMeasuredWidth;
     }
     if (current) {
         pieces.push({ ...word, text: current, width: currentWidth });
     }
-    return pieces;
+    return { pieces, emergency };
 }
 /** Punctuation that cannot start a line — stays with the preceding word. */
-const TRAILING_PUNCT = /^[,.\;:!?\)\]\}'"»›]+$/;
+const TRAILING_PUNCT = /^[,.\;:!?\)\]\}'"»›」』】〕〉》”、。・！），：；？၊-၏។-៖៘-៚]+$/;
+/** Punctuation that cannot end a line — stays with the following word. */
+const OPENING_PUNCT = /^[\(\[\{«‹“‘「『【〔〈《（]+$/;
+/**
+ * Total width of the content directly after `from` that cannot start a line:
+ * trailing punctuation (",.)]}…"), an inline span's right padding/border
+ * (empty boxClose markers), and a word continuation abutting across a run
+ * boundary with no soft-wrap opportunity (`noBreakBefore` — one word split
+ * across two inline spans with different font sizes). The browser includes all
+ * of it when deciding whether the preceding word fits, so the unit wraps
+ * together: if "Music Experie" doesn't leave room for the glued "nce", the
+ * whole word wraps as one. Stops at whitespace or the next breakable word.
+ */
+function gluedRunWidth(words, from) {
+    let total = 0;
+    for (let index = from; index < words.length; index++) {
+        const next = words[index];
+        if (next.isSpace || next.text === '\n')
+            break;
+        const isPunctuation = !!next.text && TRAILING_PUNCT.test(next.text);
+        const isClosingEdge = !next.text && !!next.boxClose;
+        const isContinuation = !!next.text && !!next.noBreakBefore;
+        if (!isPunctuation && !isClosingEdge && !isContinuation)
+            break;
+        total += next.width;
+    }
+    return total;
+}
 /**
  * Flow words into lines that fit within contentWidth.
  * Handles: word wrapping, nowrap, break-word, CJK character wrapping.
@@ -1106,7 +1213,10 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
         const word = words[wordIndex];
         let wordLineHeight = getLineHeight(ctx, word.style, useBulletProbe);
         // Inline-block elements expand line height with their vertical padding+margin
-        if (word.boxStyle && word.boxStyle.display === 'inline-block') {
+        if (word.inlineBlockLayout) {
+            wordLineHeight = Math.max(wordLineHeight, word.inlineBlockLayout.marginBoxHeight);
+        }
+        else if (word.boxStyle && word.boxStyle.display === 'inline-block') {
             // Clamped at 0: negative margins shrink the margin box, but the original
             // `Math.max(h, h + extra)` never let them shrink the LINE, and nothing
             // here is measuring a case that says they should.
@@ -1166,7 +1276,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                         });
                 const combinedText = cells.map((c) => c.ch).join('');
                 // Hyphen break opportunities (same rule as the single-word hyphen path).
-                const segTexts = combinedText.split(/(?<=-)(?!\d)|(?<=[^\d]-)/).filter((s) => s.length);
+                const segTexts = splitHyphenated(combinedText);
                 const hyphenMode = segTexts.length > 1;
                 const fitsLine = currentLine.totalWidth + combined <= effWidth();
                 // A hyphen is an ordinary break opportunity — intervene whenever the
@@ -1268,36 +1378,36 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
             }
         }
         // Break long words / CJK characters if needed
-        const pieces = (!word.isSpace && word.text.length > 1)
+        const broken = (!word.isSpace && word.text.length > 1)
             ? breakWordIfNeeded(ctx, word, effWidth(), currentLine.totalWidth)
-            : [word];
-        // Glued tail: content immediately after this word that cannot start a new
-        // line — trailing punctuation (",.)]}…"), an inline span's right
-        // padding/border (empty boxClose markers), and a word continuation that
-        // abuts this word across a run boundary with no soft-wrap opportunity
-        // (noBreakBefore — e.g. one word split across two inline spans with
-        // different font sizes). The browser includes all of it when deciding
-        // whether this word fits, so the unit wraps together: if "Music Experie"
-        // doesn't leave room for the glued "nce", the whole word wraps as one.
-        // Stops at whitespace or the next breakable word.
-        let gluedTailWidth = 0;
-        for (let j = wordIndex + 1; j < words.length; j++) {
-            const nw = words[j];
-            if (nw.isSpace || nw.text === '\n')
-                break;
-            const isPunct = !!nw.text && TRAILING_PUNCT.test(nw.text);
-            const isCloseMarker = !nw.text && !!nw.boxClose;
-            const isGluedCont = !!nw.text && !!nw.noBreakBefore;
-            if (isPunct || isCloseMarker || isGluedCont) {
-                gluedTailWidth += nw.width;
-                continue;
+            : { pieces: [word], emergency: false };
+        const pieces = broken.pieces;
+        // An emergency break is one taken inside a word that cannot fit on a fresh
+        // line. Native layout first takes the ordinary whitespace opportunity
+        // before that word; it does not pack the first emergency fragment into
+        // space left by the preceding word. Every other kind of split — CJK,
+        // emoji, hyphens, break-all — is a normal opportunity and fills first.
+        if (broken.emergency && currentLine.words.some((lineWord) => !lineWord.isSpace)) {
+            pushLine(true);
+            afterHardBreak = false;
+        }
+        const gluedTailWidth = gluedRunWidth(words, wordIndex + 1);
+        for (let pieceIndex = 0; pieceIndex < pieces.length; pieceIndex++) {
+            const piece = pieces[pieceIndex];
+            const isLastPiece = pieceIndex === pieces.length - 1;
+            // A trailing-punctuation piece produced by character splitting still
+            // belongs to the preceding character. Include it before deciding
+            // whether that character fits; appending it afterward can overflow the
+            // line (`…습니다.` must wrap as `다.`, never leave a hanging period).
+            let tail = isLastPiece ? gluedTailWidth : 0;
+            for (let tailIndex = pieceIndex + 1; tailIndex < pieces.length; tailIndex++) {
+                const trailing = pieces[tailIndex];
+                if (!trailing.text || !TRAILING_PUNCT.test(trailing.text))
+                    break;
+                tail += trailing.width;
+                if (tailIndex === pieces.length - 1)
+                    tail += gluedTailWidth;
             }
-            break;
-        }
-        for (const piece of pieces) {
-            const isLastPiece = piece === pieces[pieces.length - 1];
-            // Only the last piece of the word carries the glued tail.
-            const tail = isLastPiece ? gluedTailWidth : 0;
             // Trailing punctuation (e.g. comma after </span>) should not wrap
             // independently — browsers keep it with the preceding word.
             const isTrailingPunct = !piece.isSpace && piece.text.length > 0 &&
@@ -1308,26 +1418,52 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
             // opportunity before it — keep it with the preceding word like trailing
             // punctuation. Only the FIRST piece carries the flag; a break-word split
             // inside the word may still wrap mid-word.
-            const isGlued = piece === pieces[0] && piece.noBreakBefore &&
-                currentLine.words.length > 0 &&
-                !currentLine.words[currentLine.words.length - 1].isSpace;
+            const isGlued = currentLine.words.length > 0 &&
+                !currentLine.words[currentLine.words.length - 1].isSpace &&
+                ((piece === pieces[0] && piece.noBreakBefore) ||
+                    (!piece.text && !!piece.boxClose));
             // Leading inline padding/border (an empty boxOpen marker) must not be
             // stranded at the end of a line — it belongs with the span's following
             // content (CSS applies padding-left at the box's start). Include the next
             // content word's width in this marker's fit test so the two wrap together
             // and the left padding lands on the new line with the content.
             let headExtra = 0;
-            if (!piece.text && piece.boxOpen) {
-                const next = words[wordIndex + 1];
+            const isOpener = OPENING_PUNCT.test(piece.text);
+            if (isOpener && !isLastPiece) {
+                // An opener stranded mid-word by the per-character CJK split glues to
+                // its NEXT PIECE, not the next word: Chrome never ends a line with
+                // \u300C or \uFF08 (measured: \u6C34x5 + opener + \u6C34x7 at width
+                // 100 — the DOM wraps the opener down with its following character).
+                // The word-level branch below reads words[wordIndex + 1] and finds
+                // nothing mid-word, which left the bracket dangling at end of line.
+                headExtra = pieces[pieceIndex + 1].width;
+            }
+            else if ((!piece.text && piece.boxOpen) ||
+                (isOpener && gluedTailWidth === 0)) {
+                let nextIndex = wordIndex + 1;
+                // Opening punctuation can be followed by an inline box edge before
+                // its first glyph: `(<span>word</span>)`. Keep both the edge and that
+                // first breakable glyph on the same line as the punctuation.
+                while (nextIndex < words.length && !words[nextIndex].text && words[nextIndex].boxOpen) {
+                    headExtra += words[nextIndex].width;
+                    nextIndex++;
+                }
+                const next = words[nextIndex];
                 if (next && !next.isSpace && next.text) {
                     // Only the next word's first BREAKABLE unit must stay with the leading
                     // padding — the whole word for unbreakable Latin, but just the first
                     // character for CJK / break-word (which wrap per character). Using the
                     // whole word here would over-wrap a long CJK run that follows padding.
                     const np = next.text.length > 1
-                        ? breakWordIfNeeded(ctx, next, effWidth(), 0)
+                        ? breakWordIfNeeded(ctx, next, effWidth(), 0).pieces
                         : [next];
-                    headExtra = np[0].width;
+                    headExtra += np[0].width;
+                    if (np.length === 1) {
+                        // The first word's own inseparable tail is part of the same unit:
+                        // `(<span>p50</span>,` may break before `(` or after the comma,
+                        // never between the word, closing edge, and comma.
+                        headExtra += gluedRunWidth(words, nextIndex + 1);
+                    }
                 }
             }
             // A soft-hyphen break point draws a visible '-' when the line breaks
@@ -1341,17 +1477,28 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 ctx.letterSpacing = formatLetterSpacing(piece.style.letterSpacing);
                 shReserve = cachedMeasureWidth(ctx, '-');
             }
+            const candidateLineWidth = currentLine.totalWidth + piece.width +
+                shReserve + tail + headExtra;
             // Would this piece overflow?
             if (!piece.isSpace && !isTrailingPunct && !isGlued && currentLine.words.length > 0 &&
-                currentLine.totalWidth + piece.width + shReserve + tail + headExtra > effWidth()) {
-                const overflow = currentLine.totalWidth + piece.width + shReserve + tail + headExtra - effWidth();
+                candidateLineWidth > effWidth()) {
+                const overflow = candidateLineWidth - effWidth();
                 // For borderline cases (overflow < 1px), word-by-word delta
                 // accumulation may introduce rounding errors. Re-measure the
                 // full candidate line as a single string for accuracy.
                 // Only works for single-font lines — mixed fonts can't be
                 // measured as one string.
                 let reallyOverflows = true;
-                if (overflow < 1 && !hasMixedFonts([...currentLine.words, piece])) {
+                // A preserved tab's advance is position-dependent (tab stops), but
+                // measureText('\t') reports a flat control advance — the one-string
+                // re-measure would under-count the line by most of a tab stop and
+                // falsely keep the overflowing word. Cumulative widths already carry
+                // the true tab advance, so trust them on tab lines. (The piece itself
+                // is never a tab here: tab words are spaces, and this branch requires
+                // a non-space piece.)
+                if (overflow < 1 &&
+                    !currentLine.words.some((lineWord) => lineWord.isTab) &&
+                    !hasMixedTextMetrics([...currentLine.words, piece])) {
                     applyFont(ctx, piece.style);
                     const fullText = currentLine.words.map(w => w.text).join('') + piece.text +
                         (piece.isSoftHyphenBreak ? '-' : '');
@@ -1359,54 +1506,24 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                     // markers, inline-block margins) that measureText(fullText) misses —
                     // add them back so padded inline spans aren't under-measured.
                     let markerWidth = 0;
-                    for (const w of currentLine.words)
+                    for (const w of currentLine.words) {
                         if (!w.text)
                             markerWidth += w.width;
+                        else if (w.isSpace)
+                            markerWidth += w.style.wordSpacing;
+                    }
                     if (!piece.text)
                         markerWidth += piece.width;
-                    const fullWidth = cachedMeasureWidth(ctx, fullText) + markerWidth + tail + headExtra;
-                    // Allow only a hair of sub-pixel overflow. measureText matches the
-                    // browser's rendered width to ~0.01px, so a larger slack would keep
-                    // lines the browser actually wraps (packing one extra word per
-                    // borderline line and drifting the whole document's breaks).
+                    else if (piece.isSpace)
+                        markerWidth += piece.style.wordSpacing;
+                    const fullWidth = cachedMeasureWidth(ctx, fullText) + markerWidth + tail +
+                        headExtra;
+                    // Allow only a hair of sub-pixel overflow. A broader tolerance fixes
+                    // isolated knife-edges but packs extra words in ordinary paragraphs.
                     if (fullWidth <= effWidth() + 0.02) {
                         reallyOverflows = false;
                     }
                 }
-                // Hyphen break on current line: before wrapping the whole word,
-                // try fitting a hyphen prefix on the current line. Browsers prefer
-                // keeping content on the current line by splitting at hyphens.
-                if (reallyOverflows && piece.text.includes('-')) {
-                    const parts = piece.text.split(/(?<=-)(?!\d)|(?<=[^\d]-)/);
-                    if (parts.length > 1) {
-                        applyFont(ctx, piece.style);
-                        let fitted = '';
-                        let fittedWidth = 0;
-                        let partIdx = 0;
-                        const available = effWidth() - currentLine.totalWidth;
-                        for (; partIdx < parts.length; partIdx++) {
-                            const candidate = fitted + parts[partIdx];
-                            const candidateWidth = cachedMeasureWidth(ctx, candidate);
-                            if (candidateWidth > available)
-                                break;
-                            fitted = candidate;
-                            fittedWidth = candidateWidth;
-                        }
-                        if (partIdx > 0 && partIdx < parts.length) {
-                            currentLine.words.push({ ...piece, text: fitted, width: fittedWidth });
-                            currentLine.totalWidth += fittedWidth;
-                            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
-                            pushLine(true);
-                            afterHardBreak = false;
-                            const remainder = parts.slice(partIdx).join('');
-                            const remainderWidth = cachedMeasureWidth(ctx, remainder);
-                            currentLine.words.push({ ...piece, text: remainder, width: remainderWidth });
-                            currentLine.totalWidth += remainderWidth;
-                            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
-                            continue;
-                        }
-                    }
-                }
                 if (reallyOverflows) {
                     if (_debug) {
                         const lineText = currentLine.words.map(w => w.text).join('');
@@ -1440,48 +1557,6 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 pieceWidth = advance;
                 piece.width = pieceWidth;
             }
-            // Hyphen break on a fresh line when word still too wide.
-            if (currentLine.words.length === 0 && pieceWidth > effWidth() &&
-                !piece.isSpace && piece.text.includes('-')) {
-                const subParts = piece.text.split(/(?<=-)(?!\d)|(?<=[^\d]-)/);
-                if (subParts.length > 1) {
-                    applyFont(ctx, piece.style);
-                    // Inject sub-parts as individual pieces — they'll flow through
-                    // the normal overflow/wrap logic on subsequent iterations.
-                    const newPieces = subParts.filter(p => p).map(p => ({
-                        ...piece,
-                        text: p,
-                        width: cachedMeasureWidth(ctx, p),
-                    }));
-                    // Replace current piece with the sub-parts by splicing into the pieces array
-                    // Since we're iterating `pieces`, we push remaining sub-parts after the first
-                    // onto the current line normally, letting the overflow check handle wrapping.
-                    let first = true;
-                    for (const sp of newPieces) {
-                        if (first) {
-                            first = false;
-                            // First sub-part: add to current line (it fits since it's smaller)
-                            currentLine.words.push(sp);
-                            currentLine.totalWidth += sp.width;
-                            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
-                        }
-                        else if (currentLine.totalWidth + sp.width > effWidth()) {
-                            // Overflow: wrap to next line
-                            pushLine(true);
-                            afterHardBreak = false;
-                            currentLine.words.push(sp);
-                            currentLine.totalWidth += sp.width;
-                            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
-                        }
-                        else {
-                            currentLine.words.push(sp);
-                            currentLine.totalWidth += sp.width;
-                            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
-                        }
-                    }
-                    continue;
-                }
-            }
             currentLine.words.push(piece);
             currentLine.totalWidth += pieceWidth;
             currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
@@ -1492,12 +1567,51 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
     pushLine();
     return lines;
 }
+function prepareInlineBlocks(ctx, words, containingWidth, useBulletProbe) {
+    for (const word of words) {
+        const source = word.inlineBlock;
+        if (!source)
+            continue;
+        const s = source.style;
+        const margins = horizontalMargins(s);
+        const frame = horizontalFrame(s);
+        const preferredContent = Math.max(0, word.width - margins - frame);
+        // The source node IS the inner root: the inline formatting context reads
+        // only font, whiteSpace, direction, text-align/indent and line-clamp off
+        // it. Its box properties are applied here, by the caller, so there is
+        // nothing to zero out first.
+        const availableContent = Math.max(0, containingWidth - margins - frame);
+        let contentWidth = s.width > 0
+            ? Math.max(0, s.width - frame)
+            : Math.min(preferredContent, Math.max(minimumInlineContentWidth(ctx, source), availableContent));
+        if (s.minWidth !== null) {
+            contentWidth = Math.max(contentWidth, Math.max(0, s.minWidth - frame));
+        }
+        const inner = layoutInlineContent(ctx, source, 0, 0, contentWidth, useBulletProbe);
+        const contentHeight = inner.height || getLineHeight(ctx, s, useBulletProbe);
+        const lastBaseline = inner.lines.at(-1)?.y ??
+            leadedBox(ctx, s, useBulletProbe).ascent;
+        const extra = inlineBlockExtra(s);
+        const baselineOffset = extra.top + lastBaseline;
+        const marginBoxHeight = extra.top + contentHeight + extra.bottom;
+        word.width = margins + frame + contentWidth;
+        word.inlineBlockLayout = {
+            nodes: inner.nodes,
+            lines: inner.lines,
+            contentWidth,
+            contentHeight,
+            baselineOffset,
+            marginBoxHeight,
+        };
+    }
+}
 /**
  * Layout inline content: text wrapping + positioning using pure canvas measurement.
  * Returns layout nodes and the total height consumed.
  */
 function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = false, clamp) {
     const results = [];
+    const emittedLines = [];
     // Text nodes covered by an inline element declaring background-clip:text
     // (clipRuns) or --rt-text-stroke-image (strokeImageRuns), mapped to that
     // declaring element's style. A post-pass turns each per-line run of
@@ -1507,26 +1621,15 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
     if (clamp && (clamp.exhausted || clamp.remaining <= 0)) {
         // An ancestor's clamp already used its line budget — drop this content.
         clamp.exhausted = true;
-        return { nodes: results, height: 0 };
+        return { nodes: results, height: 0, lines: emittedLines };
     }
     const runs = collectTextRuns(node);
     if (runs.length === 0)
-        return { nodes: results, height: 0 };
+        return { nodes: results, height: 0, lines: emittedLines };
     const words = tokenizeRuns(ctx, runs);
+    prepareInlineBlocks(ctx, words, contentWidth, useBulletProbe);
     const textIndent = node.style.textIndent || 0;
-    // Tab stops follow the BLOCK's style, not the inline run the tab sits in:
-    // Chrome sizes the interval as tab-size(8) × the block font's space advance
-    // plus letter- and word-spacing (css-text-3 §tab-size) — verified against
-    // the DOM: a tab inside a bold span still uses the regular-weight space.
-    applyFont(ctx, node.style);
-    const prevLetterSpacing = ctx.letterSpacing;
-    ctx.letterSpacing = '0px';
-    const blockSpaceWidth = cachedMeasureWidth(ctx, ' ');
-    ctx.letterSpacing = prevLetterSpacing;
-    const tabMetrics = {
-        interval: (blockSpaceWidth + (node.style.letterSpacing || 0) + (node.style.wordSpacing || 0)) * 8,
-        halfSpace: blockSpaceWidth / 2,
-    };
+    const tabMetrics = tabStopMetrics(ctx, node.style);
     // The block's own font + line-height set the strut: the minimum height of
     // every line box, even a line holding only smaller inline content.
     const strutLineHeight = getLineHeight(ctx, node.style, useBulletProbe);
@@ -1675,7 +1778,12 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             // baseline and does not honour vertical-align on it, so shifting the box
             // here would grow the line one way while the paint went the other.
             const atomic = word.boxStyle?.display === 'inline-block' ? word.boxStyle : null;
-            if (atomic) {
+            if (word.inlineBlockLayout) {
+                const ib = word.inlineBlockLayout;
+                box.ascent = ib.baselineOffset;
+                box.descent = ib.marginBoxHeight - ib.baselineOffset;
+            }
+            else if (atomic) {
                 const extra = inlineBlockExtra(atomic);
                 box.ascent += extra.top;
                 box.descent += extra.bottom;
@@ -1686,7 +1794,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         const lineBaselineY = curY + lineAscent;
         // Emit inline background box using line-level baseline for vertical alignment.
         // Uses the line's ascent/descent (not the box's own font) so box aligns with text.
-        const emitInlineBox = (style, bx, bw) => {
+        const emitInlineBox = (style, bx, bw, textWord) => {
             // The box's OWN font decides its height, not the line's largest. An
             // inline-block's content box is its LINE-HEIGHT, though, not the bare
             // font metrics — measured against Chrome, bare metrics put it at
@@ -1702,7 +1810,20 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             // TOP instead detached from its own glyphs as soon as something taller
             // shared the line — measured, a background at y 4..33 around text whose
             // baseline was 46.
-            const boxY = lineBaselineY - boxAscent - padTop;
+            let baselineY = lineBaselineY;
+            // A vertical-align that moves the glyphs moves their band with them: the
+            // shift comes from the SAME call, on the SAME word, as the text emit
+            // below, so box and glyphs cannot drift apart. Computed independently
+            // they did — the band painted at the unshifted baseline under super/
+            // sub'd text. Inline-block stays put: the emit pass does not honour
+            // vertical-align on it (see the line-box union above).
+            if (textWord && style.display !== 'inline-block') {
+                const va = textWord.style.verticalAlign;
+                if (isShiftedVAlign(va)) {
+                    baselineY += verticalAlignShift(va, ctx, textWord.style, textWord.parentStyle ?? blockStyle, useBulletProbe);
+                }
+            }
+            const boxY = baselineY - boxAscent - padTop;
             results.push({
                 type: 'box', style, x: bx, y: boxY, width: bw, height: boxHeight,
                 tagName: 'span', children: [],
@@ -1713,39 +1834,56 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             let scanX = curX;
             let boxStartX = scanX;
             let currentBoxStyle;
-            let boxHasText = false;
+            // First text word of the open box group — its presence decides whether
+            // the group's band is emitted at all, and its style pair decides where
+            // the band's baseline sits (the same pair the text emit shifts by).
+            let boxTextWord;
             for (const word of line.words) {
                 if (word.boxOpen && word.boxClose && word.text) {
                     if (currentBoxStyle) {
-                        if (boxHasText)
-                            emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+                        if (boxTextWord)
+                            emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX, boxTextWord);
                         currentBoxStyle = undefined;
-                        boxHasText = false;
+                        boxTextWord = undefined;
                     }
                     const s = word.style;
-                    const textWidth = word.width - s.marginLeft - s.borderLeftWidth - s.paddingLeft
-                        - s.paddingRight - s.borderRightWidth - s.marginRight;
                     const boxX = scanX + s.marginLeft;
-                    const boxW = s.borderLeftWidth + s.paddingLeft + textWidth + s.paddingRight + s.borderRightWidth;
-                    emitInlineBox(s, boxX, boxW);
-                    boxHasText = false;
+                    if (word.inlineBlockLayout) {
+                        const ib = word.inlineBlockLayout;
+                        results.push({
+                            type: 'box', style: s, x: boxX,
+                            y: lineBaselineY - ib.baselineOffset + s.marginTop,
+                            width: s.borderLeftWidth + s.paddingLeft + ib.contentWidth +
+                                s.paddingRight + s.borderRightWidth,
+                            height: s.borderTopWidth + s.paddingTop + ib.contentHeight +
+                                s.paddingBottom + s.borderBottomWidth,
+                            tagName: 'span', children: [],
+                        });
+                    }
+                    else {
+                        const textWidth = word.width - horizontalMargins(s) - horizontalFrame(s);
+                        const boxW = s.borderLeftWidth + s.paddingLeft + textWidth +
+                            s.paddingRight + s.borderRightWidth;
+                        emitInlineBox(s, boxX, boxW, word);
+                    }
+                    boxTextWord = undefined;
                     scanX += word.width;
                     continue;
                 }
                 if (word.boxStyle !== currentBoxStyle) {
-                    if (currentBoxStyle && boxHasText) {
-                        emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+                    if (currentBoxStyle && boxTextWord) {
+                        emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX, boxTextWord);
                     }
                     currentBoxStyle = word.boxStyle;
                     boxStartX = scanX;
-                    boxHasText = false;
+                    boxTextWord = undefined;
                 }
                 if (word.text && !word.isSpace)
-                    boxHasText = true;
+                    boxTextWord ?? (boxTextWord = word);
                 scanX += word.width + (word.isSpace ? justifyExtraPerSpace : 0);
             }
-            if (currentBoxStyle && boxHasText) {
-                emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+            if (currentBoxStyle && boxTextWord) {
+                emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX, boxTextWord);
             }
         }
         // Emit text nodes.
@@ -1873,6 +2011,50 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     if (word.boxOpen && word.boxClose) {
                         const s = word.style;
                         const textX = curX + s.marginLeft + s.borderLeftWidth + s.paddingLeft;
+                        if (word.inlineBlockLayout) {
+                            const ib = word.inlineBlockLayout;
+                            const contentY = lineBaselineY - ib.baselineOffset + s.marginTop +
+                                s.borderTopWidth + s.paddingTop;
+                            const move = (layoutNode) => {
+                                layoutNode.x += textX;
+                                layoutNode.y += contentY;
+                                if (layoutNode.type === 'text') {
+                                    if (layoutNode.lineBaselineY !== undefined)
+                                        layoutNode.lineBaselineY += contentY;
+                                    if (layoutNode.clip) {
+                                        layoutNode.clip.x += textX;
+                                        layoutNode.clip.y += contentY;
+                                    }
+                                    if (layoutNode.strokeImage) {
+                                        layoutNode.strokeImage.x += textX;
+                                        layoutNode.strokeImage.y += contentY;
+                                    }
+                                }
+                                else {
+                                    for (const child of layoutNode.children)
+                                        move(child);
+                                }
+                            };
+                            for (const innerNode of ib.nodes) {
+                                move(innerNode);
+                                results.push(innerNode);
+                            }
+                            for (const innerLine of ib.lines.slice(0, -1)) {
+                                const translated = {
+                                    y: Math.round(innerLine.y + contentY),
+                                    text: innerLine.text,
+                                    bounds: {
+                                        x: innerLine.bounds.x + textX,
+                                        y: innerLine.bounds.y + contentY,
+                                        width: innerLine.bounds.width,
+                                        height: innerLine.bounds.height,
+                                    },
+                                };
+                                emittedLines.push(translated);
+                            }
+                            curX += word.width;
+                            continue;
+                        }
                         const node = {
                             type: 'text',
                             text: word.text,
@@ -1922,9 +2104,12 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         const lineWidth = align === 'justify' && justifyExtraPerSpace > 0
             ? lineMaxWidth
             : line.totalWidth;
-        _lines.push({
+        const emittedLine = {
             y: Math.round(lineBaselineY),
-            text: line.words.map(w => w.text).join(''),
+            // An inline-block's earlier rows were emitted as their own lines above,
+            // so this line carries only its LAST row — every glyph appears once,
+            // in order.
+            text: line.words.map((word) => word.inlineBlockLayout?.lines.at(-1)?.text ?? word.text).join(''),
             bounds: {
                 x: lineLeftX,
                 // The line box starts at curY — this is the CSS line box, which
@@ -1935,7 +2120,8 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                 width: lineWidth,
                 height: lineBoxHeight,
             },
-        });
+        };
+        emittedLines.push(emittedLine);
         curY += lineBoxHeight;
     }
     assignInlineFragmentBoxes(ctx, results, clipRuns, (node, s, box) => {
@@ -1948,7 +2134,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
     assignInlineFragmentBoxes(ctx, results, strokeImageRuns, (node, s, box) => {
         node.strokeImage = { image: s.webkitTextStrokeImage, ...box };
     });
-    return { nodes: results, height: curY - y };
+    return { nodes: results, height: curY - y, lines: emittedLines };
 }
 /**
  * Give each text run covered by an inline paint declarer (background-clip:text
@@ -2028,6 +2214,23 @@ function isBlock(node) {
         d === 'table-row' || d === 'table-cell' || d === 'table-row-group' ||
         d === 'table-header-group' || d === 'table-footer-group';
 }
+function allowsMarginCollapseThrough(node) {
+    const display = node.style.display;
+    return (display === 'block' || display === 'list-item') &&
+        (node.tagName === 'li' || node.tagName === 'ul' || node.tagName === 'ol' ||
+            node.tagName === 'dd' || node.tagName === 'dt');
+}
+function collapsibleMarginTop(node) {
+    const marginTop = node.style.marginTop;
+    if (!allowsMarginCollapseThrough(node) || node.style.paddingTop !== 0 ||
+        node.style.borderTopWidth !== 0) {
+        return marginTop;
+    }
+    const firstChild = node.children[0];
+    return firstChild && isBlock(firstChild)
+        ? collapseMargins(marginTop, collapsibleMarginTop(firstChild))
+        : marginTop;
+}
 /**
  * Layout a block-level element and all its children.
  * Returns the LayoutBox and total height consumed (including margins).
@@ -2098,7 +2301,8 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
     if (hasOnlyInlineChildren(node)) {
         // Inline formatting context
         const bulletProbe = node.tagName === 'li' && BULLET_MARKERS.has(style.listStyleType);
-        const { nodes, height } = layoutInlineContent(ctx, node, contentX, contentStartY, contentWidth, bulletProbe, clamp);
+        const { nodes, height, lines } = layoutInlineContent(ctx, node, contentX, contentStartY, contentWidth, bulletProbe, clamp);
+        _lines.push(...lines);
         box.children = nodes;
         box.height = borderTop + padTop + height + padBottom + borderBottom;
     }
@@ -2108,8 +2312,7 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
         let prevMarginBottom = 0;
         let hasContent = false; // tracks whether we've placed any content
         // Margin collapsing through parent: only for list elements.
-        const allowCollapseThrough = node.tagName === 'li' || node.tagName === 'ul' || node.tagName === 'ol' ||
-            node.tagName === 'dd' || node.tagName === 'dt';
+        const allowCollapseThrough = allowsMarginCollapseThrough(node);
         for (let ci = 0; ci < node.children.length; ci++) {
             const child = node.children[ci];
             // Line-clamp budget exhausted — everything below the cut is dropped,
@@ -2133,10 +2336,8 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
                     }
                 }
                 // Apply pending margin before inline content
-                if (prevMarginBottom > 0) {
-                    curY += prevMarginBottom;
-                    prevMarginBottom = 0;
-                }
+                curY += prevMarginBottom;
+                prevMarginBottom = 0;
                 const inlineGroup = {
                     element: null,
                     tagName: 'div',
@@ -2145,7 +2346,8 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
                     textContent: null,
                 };
                 const bulletProbe2 = node.tagName === 'li' && BULLET_MARKERS.has(style.listStyleType);
-                const { nodes, height } = layoutInlineContent(ctx, inlineGroup, contentX, curY, contentWidth, bulletProbe2, clamp);
+                const { nodes, height, lines } = layoutInlineContent(ctx, inlineGroup, contentX, curY, contentWidth, bulletProbe2, clamp);
+                _lines.push(...lines);
                 box.children.push(...nodes);
                 curY += height;
                 prevMarginBottom = 0;
@@ -2153,9 +2355,7 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
                 continue;
             }
             // Block child — collapse margins
-            const childMarginTop = child.style.marginTop;
-            // First child margin-top collapses through parent if parent has no top border/padding
-            // Only for elements that don't establish a new BFC (not root, not flex, not overflow)
+            const childMarginTop = collapsibleMarginTop(child);
             // First child margin-top collapses through parent if parent has no
             // top padding/border and doesn't establish a new BFC.
             if (!hasContent && padTop === 0 && borderTop === 0 && allowCollapseThrough) {
@@ -2175,16 +2375,18 @@ function layoutBlock(ctx, node, x, y, availableWidth, clamp) {
         // Last child's margin-bottom collapses through parent if no bottom border/padding.
         // Root container does NOT collapse last-child margin (it defines the content height).
         let marginBottomOut = style.marginBottom;
-        const canCollapseThrough = padBottom === 0 && borderBottom === 0 && allowCollapseThrough;
-        if (canCollapseThrough && prevMarginBottom > 0) {
+        const canCollapseThrough = padBottom === 0 && borderBottom === 0 &&
+            style.minHeight === 0 && allowCollapseThrough;
+        if (canCollapseThrough) {
             // Last child's margin passes through to become parent's effective margin-bottom
-            marginBottomOut = Math.max(style.marginBottom, prevMarginBottom);
+            marginBottomOut = collapseMargins(style.marginBottom, prevMarginBottom);
         }
         // Include last child's margin-bottom in parent height when it can't collapse through
         let contentEnd = curY - contentStartY;
-        if (!canCollapseThrough && prevMarginBottom > 0) {
+        if (!canCollapseThrough) {
             contentEnd += prevMarginBottom;
         }
+        contentEnd = Math.max(0, contentEnd);
         box.height = borderTop + padTop + contentEnd + padBottom + borderBottom;
         if (style.minHeight > 0)
             box.height = Math.max(box.height, style.minHeight);
@@ -2240,25 +2442,227 @@ function layoutTable(ctx, node, contentX, contentY, contentWidth) {
     return { children, height: curY - contentY };
 }
 // ─── Flex layout ───────────────────────────────────────────────────────
+const _anonymousFlexItems = new WeakMap();
+/**
+ * Bare text in a flex container is an anonymous flex item: a block box of its
+ * own, sized and placed like any other. Built once per text node, because the
+ * min- and max-content caches are keyed by node identity and sizing must ask
+ * about the very node the layout places.
+ */
+function anonymousFlexItem(text) {
+    let wrapper = _anonymousFlexItems.get(text);
+    if (!wrapper) {
+        wrapper = {
+            element: null,
+            tagName: 'div',
+            style: { ...text.style, display: 'block' },
+            children: [text],
+            textContent: null,
+        };
+        _anonymousFlexItems.set(text, wrapper);
+    }
+    return wrapper;
+}
+/**
+ * The children a flex container lays out. A bare text node is an anonymous
+ * flex item only when it has actual text — and min-content sizing has to agree
+ * with the layout about that, or an item is frozen at the wrong minimum.
+ */
+function flexItems(node) {
+    return node.children
+        .filter((child) => child.tagName !== '#text' || child.textContent?.trim())
+        .map((child) => child.tagName === '#text' ? anonymousFlexItem(child) : child);
+}
+function isFlexRow(style) {
+    return style.flexDirection === 'row' || style.flexDirection === '';
+}
+function horizontalFrame(style) {
+    return style.borderLeftWidth + style.paddingLeft +
+        style.paddingRight + style.borderRightWidth;
+}
+function horizontalMargins(style) {
+    return style.marginLeft + style.marginRight;
+}
+/**
+ * Minimum width of one inline formatting context. This is the longest unit
+ * between normal soft-wrap opportunities, measured with the same canvas
+ * context and tokenization as the actual line flow.
+ */
+function minimumInlineContentWidth(ctx, node) {
+    // `overflow-wrap:break-word` is deliberately ignored for min-content sizing
+    // by CSS. CJK/emoji and `word-break:break-all` still contribute their
+    // smallest legal pieces, so run the real line flow with only that
+    // last-resort mode disabled — at a width nothing fits in, every soft-wrap
+    // opportunity is taken and each line IS one unbreakable unit.
+    const words = tokenizeRuns(ctx, collectTextRuns(node)).map((word) => word.style.overflowWrap === 'break-word' && word.style.wordBreak !== 'break-all'
+        ? { ...word, style: { ...word.style, overflowWrap: 'normal' } }
+        : word);
+    const lines = flowWordsIntoLines(ctx, words, 0, node.style.whiteSpace);
+    return lines.reduce((widest, line) => Math.max(widest, line.totalWidth), 0);
+}
+/**
+ * Min-content contribution of a flex item, including its horizontal frame.
+ *
+ * Memoized for the render: a nested flex row asks for the minimum of its whole
+ * subtree, and so does every flex row above it, which otherwise costs
+ * O(depth x nodes). The answer depends only on the subtree and the font state,
+ * and `buildLayoutTree` clears the cache alongside the measurement caches.
+ */
+function minimumContentWidth(ctx, node) {
+    const memoized = _minContentCache.get(node);
+    if (memoized !== undefined)
+        return memoized;
+    const computed = computeMinimumContentWidth(ctx, node);
+    _minContentCache.set(node, computed);
+    return computed;
+}
+function computeMinimumContentWidth(ctx, node) {
+    const margins = horizontalMargins(node.style);
+    const frame = horizontalFrame(node.style);
+    // An explicit min-width disables the flex automatic min-content size.
+    if (node.style.minWidth !== null) {
+        return margins + Math.max(frame, node.style.minWidth);
+    }
+    let content = 0;
+    if (hasOnlyInlineChildren(node)) {
+        content = minimumInlineContentWidth(ctx, node);
+    }
+    else if (node.style.display === 'flex' && isFlexRow(node.style)) {
+        const children = flexItems(node);
+        content = children.reduce((sum, child) => sum + minimumContentWidth(ctx, child), 0) +
+            node.style.gap * Math.max(0, children.length - 1);
+    }
+    else {
+        for (const child of node.children) {
+            if (child.tagName !== '#text') {
+                content = Math.max(content, minimumContentWidth(ctx, child));
+            }
+        }
+    }
+    let borderBox = frame + content;
+    // A definite width caps the automatic minimum size in the flex algorithm.
+    if (node.style.width > 0)
+        borderBox = Math.min(borderBox, node.style.width);
+    return margins + borderBox;
+}
+/**
+ * Maximum width of one inline formatting context: the widest stretch between
+ * FORCED breaks. That is the same line flow every other caller uses, run at a
+ * width nothing can exceed — max-content does not get its own break rules.
+ */
+function maximumInlineContentWidth(ctx, node) {
+    const words = tokenizeRuns(ctx, collectTextRuns(node));
+    const lines = flowWordsIntoLines(ctx, words, Infinity, node.style.whiteSpace);
+    return lines.reduce((widest, line) => Math.max(widest, line.totalWidth), 0);
+}
+/**
+ * Max-content contribution of a flex item, including its horizontal frame and
+ * margins — the same outer currency `minimumContentWidth` reports and
+ * `layoutBlock` takes as its available width.
+ *
+ * Memoized for the same reason the minimum is: every flex row above an item
+ * asks for its whole subtree.
+ */
+function maximumContentWidth(ctx, node) {
+    const memoized = _maxContentCache.get(node);
+    if (memoized !== undefined)
+        return memoized;
+    const computed = computeMaximumContentWidth(ctx, node);
+    _maxContentCache.set(node, computed);
+    return computed;
+}
+function computeMaximumContentWidth(ctx, node) {
+    const margins = horizontalMargins(node.style);
+    // A definite width IS the max-content size.
+    if (node.style.width > 0)
+        return margins + node.style.width;
+    let content = 0;
+    if (hasOnlyInlineChildren(node)) {
+        content = maximumInlineContentWidth(ctx, node);
+    }
+    else if (node.style.display === 'flex' && isFlexRow(node.style)) {
+        const children = flexItems(node);
+        content = children.reduce((sum, child) => sum + maximumContentWidth(ctx, child), 0) +
+            node.style.gap * Math.max(0, children.length - 1);
+    }
+    else {
+        for (const child of node.children) {
+            if (child.tagName !== '#text') {
+                content = Math.max(content, maximumContentWidth(ctx, child));
+            }
+        }
+    }
+    return margins + horizontalFrame(node.style) + content;
+}
+/**
+ * Flex base size of one item, as an outer width. `flex-basis: auto` (the
+ * initial value, and what `flex-grow: 1` on its own leaves in place) resolves
+ * against the item's own content; `flex: 1` sets it to 0 so the item's content
+ * stops mattering and the row splits by grow factor alone.
+ */
+function flexBaseSize(ctx, node) {
+    return node.style.flexBasis !== null
+        ? horizontalMargins(node.style) + node.style.flexBasis
+        : maximumContentWidth(ctx, node);
+}
+/**
+ * CSS flexible length resolution (CSS Flexbox §9.7) over outer widths.
+ *
+ * Grow or shrink is decided once, for the whole line, by whether the items'
+ * hypothetical sizes fit. Each pass distributes the space the unfrozen items
+ * are still free to take, then freezes every item that landed under its
+ * automatic minimum — freeing one item changes every other item's share, so
+ * the pass repeats until nothing new is clamped.
+ */
+function resolveFlexibleLengths(styles, bases, minimums, available) {
+    const sizes = bases.map((base, index) => Math.max(base, minimums[index]));
+    const growing = sizes.reduce((sum, size) => sum + size, 0) < available;
+    const factor = (index) => growing ? styles[index].flexGrow : styles[index].flexShrink;
+    const frozen = sizes.map((size, index) => factor(index) === 0 || (!growing && bases[index] < size));
+    for (;;) {
+        const unfrozen = sizes.map((_, index) => index).filter((index) => !frozen[index]);
+        if (unfrozen.length === 0)
+            break;
+        const used = sizes.reduce((sum, size, index) => sum + (frozen[index] ? size : bases[index]), 0);
+        const remaining = available - used;
+        // Shrinking is weighted by base size, so a big item gives up more than a
+        // small one at the same shrink factor; growing is not.
+        const weights = unfrozen.map((index) => growing ? styles[index].flexGrow : styles[index].flexShrink * bases[index]);
+        const weightSum = weights.reduce((sum, weight) => sum + weight, 0);
+        if (weightSum <= 0)
+            break;
+        unfrozen.forEach((index, slot) => {
+            sizes[index] = bases[index] + remaining * weights[slot] / weightSum;
+        });
+        const violators = unfrozen.filter((index) => sizes[index] < minimums[index]);
+        if (violators.length === 0)
+            break;
+        for (const index of violators) {
+            sizes[index] = minimums[index];
+            frozen[index] = true;
+        }
+    }
+    return sizes;
+}
 function layoutFlex(ctx, node, contentX, contentY, contentWidth) {
     const style = node.style;
     const gap = style.gap;
     const children = [];
-    const flexChildren = node.children.filter(c => c.tagName !== '#text' || c.textContent?.trim());
+    const flexChildren = flexItems(node);
     if (flexChildren.length === 0)
         return { children, height: 0 };
-    if (style.flexDirection === 'row' || style.flexDirection === '') {
+    if (isFlexRow(style)) {
         // Row layout
         const totalGaps = gap * (flexChildren.length - 1);
-        const totalGrow = flexChildren.reduce((s, c) => s + (c.style.flexGrow || 0), 0);
-        const flexBasis = (contentWidth - totalGaps) / (totalGrow || flexChildren.length);
+        const available = Math.max(0, contentWidth - totalGaps);
+        // If the minima themselves do not fit, they overflow the container exactly
+        // as native flex items with min-width:auto do.
+        const widths = resolveFlexibleLengths(flexChildren.map((child) => child.style), flexChildren.map((child) => flexBaseSize(ctx, child)), flexChildren.map((child) => minimumContentWidth(ctx, child)), available);
         let curX = contentX;
         let maxHeight = 0;
-        for (const child of flexChildren) {
-            if (child.tagName === '#text')
-                continue;
-            const grow = child.style.flexGrow || (totalGrow === 0 ? 1 : 0);
-            const childWidth = flexBasis * grow;
+        for (let index = 0; index < flexChildren.length; index++) {
+            const child = flexChildren[index];
+            const childWidth = widths[index];
             const { box, height } = layoutBlock(ctx, child, curX, contentY, childWidth);
             children.push(box);
             maxHeight = Math.max(maxHeight, height);
@@ -2269,8 +2673,6 @@ function layoutFlex(ctx, node, contentX, contentY, contentWidth) {
     // Column layout (fallback)
     let curY = contentY;
     for (const child of flexChildren) {
-        if (child.tagName === '#text')
-            continue;
         const { box, height } = layoutBlock(ctx, child, contentX, curY, contentWidth);
         children.push(box);
         curY += height + gap;
@@ -2414,6 +2816,8 @@ export function buildLayoutTree(ctx, styledTree, containerWidth, useDomMeasureme
     _fontMetricsCache.clear();
     _fontStringCache.clear();
     _measureCache.clear();
+    _minContentCache.clear();
+    _maxContentCache.clear();
     _lines = [];
     // The styledTree root is our container div — layout its children as a block flow
     const { box, height } = layoutBlock(ctx, styledTree, 0, 0, containerWidth);
@@ -2426,11 +2830,13 @@ export function buildLayoutTree(ctx, styledTree, containerWidth, useDomMeasureme
     const lines = [];
     for (const candidate of sorted) {
         const last = lines[lines.length - 1];
-        // Tolerance keys off the candidate's line height (matches the legacy
-        // extractLines behavior). Using max(last, candidate) is symmetric but
-        // grows after each merge as last.bounds.height becomes the union — that
-        // leaks across rows in tight multi-column layouts.
-        const tolerance = candidate.bounds.height * 0.5;
+        // How far apart two baselines can sit and still be one visual row is
+        // bounded by the SHORTER of the two rows — the same rule the native DOM
+        // reference groups word rects by (`overlap / minH`). Using max() leaks
+        // across rows in tight multi-column layouts, and using the candidate's own
+        // height alone lets a line box that contains a tall atomic inline-block
+        // swallow the row above it.
+        const tolerance = Math.min(last?.bounds.height ?? Infinity, candidate.bounds.height) * 0.5;
         if (last && Math.abs(candidate.y - last.y) < tolerance) {
             // Cross-cell merge: insert a space separator so the text stays
             // readable when N cells of a table row collapse into one LayoutLine.