render-tag 0.1.29 → 0.1.31

package/README.md

@@ -198,6 +198,7 @@ li::marker { content: none; font-size: 0; line-height: 0; }
 
 - **Chrome-first.** When a rendering choice must favor one browser over another, Chrome wins.
 - **Cross-browser consistency over per-browser DOM fidelity.** Same canvas output in every browser, not pixel-matching each browser's quirks. Use `accuracy: 'balanced'` if you'd rather match each browser's own DOM rendering.
+- **The line-box baseline follows the engine's own rounding.** Blink floors half-leading + ascent onto a whole CSS pixel (`FontHeight::AddLeading`); Gecko and WebKit keep the exact value. render-tag does what the engine it runs in does, so canvas text lands on the baseline that browser's own DOM would use — which is what keeps a canvas render and a contenteditable overlay of the same text on one line. Safari is the closest fit rather than a match: its canvas metrics disagree with its own layout metrics, so no canvas-side rule reaches its DOM exactly. This is the one place per-browser fidelity wins over identical output.
 
 ## License
 

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import type { RenderConfig, RenderResult, LayoutConfig, LayoutResult, DrawConfig, LayoutLine, AnyCanvas } from './types.js';
 export type { RenderConfig, RenderResult, LayoutConfig, LayoutResult, DrawConfig, LayoutLine };
 export { setDOMParser, type DOMParserLike } from './dom.js';
+export { FLOORS_LINE_BASELINE } from './layout.js';
 /**
  * Compute layout for an HTML string without rendering.
  * Returns a reusable LayoutResult that can be drawn onto multiple targets via drawLayout().

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAE,UAAU,EACtC,UAAU,EAAE,SAAS,EACtB,MAAM,YAAY,CAAC;AAMpB,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAW5D;;;GAGG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CAgCzD;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,CAsCpE;AAID;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CA8BzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAE,UAAU,EACtC,UAAU,EAAE,SAAS,EACtB,MAAM,YAAY,CAAC;AAMpB,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAWnD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CAgCzD;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,CAsCpE;AAID;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CA8BzD"}

package/lib/index.js

@@ -3,6 +3,7 @@ import { resolveStylesFromCSS } from './css-resolver.js';
 import { buildLayoutTree } from './layout.js';
 import { renderNode } from './render.js';
 export { setDOMParser } from './dom.js';
+export { FLOORS_LINE_BASELINE } from './layout.js';
 import { createFallbackMeasureCtx } from './dom.js';
 // Default measurement context, created lazily and reused across layout()
 // calls — safe because font/letterSpacing state is set before every

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/layout.d.ts

@@ -4,6 +4,19 @@ import type { StyledNode, LayoutBox, ResolvedStyle, LayoutLine, DecorationEntry
  */
 export declare function applyFont(ctx: CanvasRenderingContext2D, style: ResolvedStyle): void;
 export declare function buildCanvasFont(style: ResolvedStyle): string;
+/**
+ * True where the engine floors a line's baseline onto a whole CSS pixel.
+ *
+ * Blink alone does (`FontHeight::AddLeading`). Gecko and WebKit both lay the
+ * exact half-leading out — measured over the whole 530-case corpus, giving
+ * Safari the Blink branch cost 214 wins against 223 losses (avg 7.50% ->
+ * 9.21%) where the exact value wins 48 against 3 (7.50% -> 6.52%).
+ *
+ * Public API: the parity suites expect per engine, and every renderer that has
+ * to place a baseline beside a render-tag canvas (@polotno/svg-export) must
+ * round the same way this does.
+ */
+export declare const FLOORS_LINE_BASELINE: boolean;
 export declare function isTransparent(color: string): boolean;
 export declare function getFontMetrics(ctx: CanvasRenderingContext2D, style: ResolvedStyle): {
     ascent: number;

package/lib/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,SAAS,EAAc,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AA4C5H;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CAGnF;AAgBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAc5D;AA8HD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAMD,wBAAgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAWvH;AAoCD,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAEnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,GAAG,OAAO,CAiBlF;AA4CD;;kFAEkF;AAClF,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAIzD;AAgrED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAM,EACtB,kBAAkB,UAAO,EACzB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,YAAY,EAAE,UAAU,KAAK,IAAI,GACvD;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAmD1D"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,SAAS,EAAc,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AA4C5H;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CAGnF;AAgBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAc5D;AAmHD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,SAAW,CAAC;AAmF7C,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAMD,wBAAgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAWvH;AA0DD,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAEnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,GAAG,OAAO,CAiBlF;AA4CD;;kFAEkF;AAClF,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAIzD;AA4tED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAM,EACtB,kBAAkB,UAAO,EACzB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,YAAY,EAAE,UAAU,KAAK,IAAI,GACvD;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAmD1D"}

package/lib/layout.js

@@ -157,12 +157,86 @@ function getLineHeight(ctx, style, useBulletProbe = false) {
     return ascent + descent;
 }
 /**
- * Compute the baseline Y offset within a line.
- * Uses the Konva approach: center (ascent - descent) within lineHeight.
+ * Which engine's line rules to follow. Only the UA string can say, because
+ * `accuracy: 'performance'` promises not to touch the DOM.
+ *
+ * Blink is the DEFAULT, and the other two are what we detect: a server-side
+ * render (no navigator, or jsdom) targets headless Chrome, so anything we
+ * cannot positively identify has to round the way Chrome does.
+ *
+ * - Gecko is the one engine that still sends a real `Gecko/<date>` product
+ *   token; Blink and WebKit carry only the "like Gecko" comment, no slash.
+ * - Safari is WebKit that says neither `Chrome/` nor `jsdom/`. jsdom borrows
+ *   WebKit's UA and would otherwise be mistaken for it.
+ * - `Chrome/` is matched with NO word boundary, because headless Chrome sends
+ *   `HeadlessChrome/`.
+ */
+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);
+const IS_BLINK = !IS_GECKO && !IS_SAFARI;
+/**
+ * True where the engine floors a line's baseline onto a whole CSS pixel.
+ *
+ * Blink alone does (`FontHeight::AddLeading`). Gecko and WebKit both lay the
+ * exact half-leading out — measured over the whole 530-case corpus, giving
+ * Safari the Blink branch cost 214 wins against 223 losses (avg 7.50% ->
+ * 9.21%) where the exact value wins 48 against 3 (7.50% -> 6.52%).
+ *
+ * Public API: the parity suites expect per engine, and every renderer that has
+ * to place a baseline beside a render-tag canvas (@polotno/svg-export) must
+ * round the same way this does.
+ */
+export const FLOORS_LINE_BASELINE = IS_BLINK;
+/**
+ * `super` and `sub` are engine constants, not CSS. Blink and WebKit share
+ * theirs (`fontSize/3 + 1`, `fontSize/5 + 1`); Gecko raises by 0.34em and
+ * lowers by 0.20em. This is a separate question from the baseline rounding
+ * above — Safari rounds like nobody and shifts like Blink.
+ */
+const BLINK_SUPER_SUB = !IS_GECKO;
+/**
+ * Baseline offset from the top of a line box, the way the engine places it.
+ *
+ * The CSS half-leading is `(lineHeight - (ascent + descent)) / 2`, and the
+ * baseline sits that far below the line top, plus the ascent. Blink FLOORS that
+ * sum to a whole CSS pixel (`FontHeight::AddLeading`), so its DOM text stands up
+ * to 1px HIGHER than the exact value. Gecko lays the exact value out in app
+ * units. WebKit floors on 80 of 90 measured size × line-height combinations and
+ * has no exact rule we can state, so it takes the Blink branch — the one that
+ * fits it best, not one it matches everywhere.
+ *
+ * So the rounding is the engine's, not a style choice: each browser's canvas
+ * lands on the baseline that browser's own DOM would use, which is what keeps a
+ * canvas render and a contenteditable overlay of the same text on one line.
+ */
+function lineBaselineOffset(lineHeight, ascent, descent) {
+    const exact = (lineHeight - (ascent + descent)) / 2 + ascent;
+    return FLOORS_LINE_BASELINE ? Math.floor(exact) : exact;
+}
+/**
+ * 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
+ * the line by the same six values.
+ */
+function inlineBlockExtra(bs) {
+    return {
+        top: bs.marginTop + bs.borderTopWidth + bs.paddingTop,
+        bottom: bs.paddingBottom + bs.borderBottomWidth + bs.marginBottom,
+    };
+}
+/**
+ * One box's half of a line: how far it reaches above its own baseline and how
+ * far below, over its OWN line-height. This is the inline box CSS 2.1 §10.8
+ * talks about — the font's content area plus its half-leading — not the bare
+ * font metrics. `vertical-align: text-top` and `text-bottom` align THIS box's
+ * edges, and the line box is the union of these over everything on the line.
  */
-function computeBaselineY(ctx, style, lineHeight) {
+function leadedBox(ctx, style, useBulletProbe = false) {
     const { ascent, descent } = getFontMetrics(ctx, style);
-    return (ascent - descent) / 2 + lineHeight / 2;
+    const lineHeight = getLineHeight(ctx, style, useBulletProbe);
+    const boxAscent = lineBaselineOffset(lineHeight, ascent, descent);
+    return { ascent: boxAscent, descent: lineHeight - boxAscent };
 }
 function applyTextTransform(text, transform) {
     switch (transform) {
@@ -210,25 +284,48 @@ export function getFontMetrics(ctx, style) {
  * pass (the box position depends on the final line box it helps size), so they
  * fall back to baseline rather than being approximated wrongly.
  *
- *  - super/sub        legacy fixed fractions of the parent font size
- *  - text-top/-bottom align the box's ascent/descent edge with the line's
+ *  - super/sub        the engine's own rule, measured off the DOM across
+ *                     8-56px × sans-serif/serif/monospace and fitting every
+ *                     point to within 0.06px (LayoutUnit's 1/64). Neither
+ *                     engine reads the font's metrics — the family does not
+ *                     move the number.
+ *  - text-top/-bottom the box's LEADED edge against the parent's CONTENT-area
+ *                     edge (bare ascent/descent, no leading). Taking the box's
+ *                     bare metrics instead costs 25px on a line holding both.
  *  - middle           box midpoint at parent baseline + half the x-height
  *  - <length>/<%>     raise (positive value) by the length / % of line-height
  */
-function verticalAlignShift(va, wAscent, wDescent, parentFontSize, maxAscent, maxDescent, lineHeight) {
+function verticalAlignShift(va, ctx, style, parentStyle, useBulletProbe) {
     switch (va) {
-        case 'super': return -parentFontSize * 0.4;
-        case 'sub': return parentFontSize * 0.26;
-        case 'text-top': return -(maxAscent - wAscent);
-        case 'text-bottom': return maxDescent - wDescent;
-        case 'middle': return -(parentFontSize * 0.25) - (wDescent - wAscent) / 2;
+        case 'super':
+            return BLINK_SUPER_SUB
+                ? -(parentStyle.fontSize / 3 + 1) : -parentStyle.fontSize * 0.34;
+        case 'sub':
+            return BLINK_SUPER_SUB
+                ? parentStyle.fontSize / 5 + 1 : parentStyle.fontSize * 0.2;
+        // Against the PARENT's content area (CSS 2.1 §10.8.1) — its bare
+        // ascent/descent, no leading. Measured against Chrome, taking the line's
+        // tallest box instead of the real parent put this 14px out.
+        case 'text-top':
+            return leadedBox(ctx, style, useBulletProbe).ascent - getFontMetrics(ctx, parentStyle).ascent;
+        case 'text-bottom':
+            return getFontMetrics(ctx, parentStyle).descent - leadedBox(ctx, style, useBulletProbe).descent;
+        case 'middle': {
+            const { ascent, descent } = getFontMetrics(ctx, style);
+            return -(parentStyle.fontSize * 0.25) - (descent - ascent) / 2;
+        }
         default: {
-            // baseline / top / bottom / '' all parseFloat to NaN → 0 (callers gate
-            // on isShiftedVAlign, so those never actually reach here).
+            // baseline / top / bottom / '' all parseFloat to NaN → 0, which is what
+            // an unshifted run wants — the line-box pass calls this for every word.
             const n = parseFloat(va);
             if (!Number.isFinite(n))
                 return 0;
-            return va.endsWith('%') ? -(n / 100) * lineHeight : -n;
+            // A percentage resolves against the ELEMENT's own line-height (CSS 2.1
+            // §10.8.1), not the line's. Measured against Chrome: the line's put the
+            // box 10px out on a line whose tallest run was not this one.
+            return va.endsWith('%')
+                ? -(n / 100) * getLineHeight(ctx, style, useBulletProbe)
+                : -n;
         }
     }
 }
@@ -351,6 +448,9 @@ function applyEllipsisToLine(ctx, line, maxWidth) {
         return;
     const lastStyle = line.words[styleIdx].style;
     const boxStyle = line.words[styleIdx].boxStyle;
+    // The ellipsis takes the trimmed run's style, so it has to take the parent
+    // that style's vertical-align measures against too.
+    const parentStyle = line.words[styleIdx].parentStyle;
     applyFont(ctx, lastStyle);
     // ALWAYS assign (don't gate on truthy) — otherwise a previous segment's
     // non-zero letter-spacing leaks into the ellipsis measurement.
@@ -386,6 +486,7 @@ function applyEllipsisToLine(ctx, line, maxWidth) {
         text: '…',
         width: ellipsisWidth,
         style: lastStyle,
+        parentStyle,
         isSpace: false,
         boxStyle,
     };
@@ -400,9 +501,15 @@ function applyEllipsisToLine(ctx, line, maxWidth) {
  */
 function collectTextRuns(node) {
     const runs = [];
-    function walk(n, boxStyle, clipStyle, strokeImageStyle) {
+    function walk(n, boxStyle, clipStyle, strokeImageStyle, parentStyle) {
         if (n.tagName === '#text' && n.textContent) {
-            runs.push({ text: n.textContent, style: n.style, boxStyle, clipStyle, strokeImageStyle });
+            // A #text node carries its parent ELEMENT's style, so the element that
+            // owns any vertical-align here is that parent — and what the shift
+            // measures against is ITS parent, which is the `parentStyle` handed to
+            // this element's walk.
+            runs.push({
+                text: n.textContent, style: n.style, parentStyle, boxStyle, clipStyle, strokeImageStyle,
+            });
             return;
         }
         const isInlineBlock = n.style.display === 'inline-block';
@@ -425,6 +532,7 @@ function collectTextRuns(node) {
             runs.push({
                 text: allText,
                 style: n.style,
+                parentStyle,
                 boxStyle: newBoxStyle,
                 clipStyle: newClipStyle,
                 strokeImageStyle: newStrokeImageStyle,
@@ -445,7 +553,11 @@ function collectTextRuns(node) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxOpen: n.style });
         }
         for (const child of n.children) {
-            walk(child, isBox ? newBoxStyle : boxStyle, newClipStyle, newStrokeImageStyle);
+            walk(child, isBox ? newBoxStyle : boxStyle, newClipStyle, newStrokeImageStyle, 
+            // An element child measures against this element; a text child's
+            // vertical-align belongs to this element, so it measures against what
+            // this element measures against.
+            child.tagName === '#text' ? parentStyle : n.style);
         }
         if (hasHorizSpacing) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxClose: n.style });
@@ -465,8 +577,9 @@ function collectTextRuns(node) {
             runs.push(...seg);
         }
     }
+    // The block itself is the parent every top-level run measures against.
     for (const child of node.children) {
-        walk(child);
+        walk(child, undefined, undefined, undefined, node.style);
     }
     return runs;
 }
@@ -550,6 +663,7 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                     text: '\t',
                     width: tabStopInterval, // placeholder — recalculated in flowWordsIntoLines
                     style: run.style,
+                    parentStyle: run.parentStyle,
                     isSpace: true,
                     isTab: true,
                     boxStyle: run.boxStyle,
@@ -563,6 +677,7 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                 text: w,
                 width: cachedMeasureWidth(ctx, w),
                 style: run.style,
+                parentStyle: run.parentStyle,
                 isSpace,
                 boxStyle: run.boxStyle,
                 clipStyle: run.clipStyle,
@@ -600,6 +715,7 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                     text: ' ',
                     width: spaceWidth,
                     style: run.style,
+                    parentStyle: run.parentStyle,
                     isSpace: true,
                     boxStyle: run.boxStyle,
                     clipStyle: run.clipStyle,
@@ -620,6 +736,7 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                             text: s,
                             width: cumWidth - prevCum,
                             style: run.style,
+                            parentStyle: run.parentStyle,
                             isSpace: false,
                             boxStyle: run.boxStyle,
                             clipStyle: run.clipStyle,
@@ -645,6 +762,7 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                 text: w,
                 width,
                 style: run.style,
+                parentStyle: run.parentStyle,
                 isSpace: false,
                 boxStyle: run.boxStyle,
                 clipStyle: run.clipStyle,
@@ -688,6 +806,7 @@ function tokenizeRuns(ctx, runs) {
                 text,
                 width: totalWidth,
                 style: run.style,
+                parentStyle: run.parentStyle,
                 isSpace: false,
                 boxStyle: run.boxStyle,
                 boxOpen: run.boxOpen,
@@ -962,6 +1081,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                     text: '-',
                     width: hyphenWidth,
                     style: lastWord.style,
+                    parentStyle: lastWord.parentStyle,
                     isSpace: false,
                     // The visible hyphen continues the broken word, so it inherits the
                     // word's clip/stroke-image declarer (else it paints transparent).
@@ -991,9 +1111,11 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
         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') {
-            const bs = word.boxStyle;
-            wordLineHeight = Math.max(wordLineHeight, wordLineHeight + bs.paddingTop + bs.paddingBottom + bs.marginTop + bs.marginBottom
-                + bs.borderTopWidth + bs.borderBottomWidth);
+            // 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.
+            const extra = inlineBlockExtra(word.boxStyle);
+            wordLineHeight += Math.max(0, extra.top + extra.bottom);
         }
         if (word.text === '\n') {
             if (currentLine.words.length === 0) {
@@ -1042,6 +1164,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                         cells.push({
                             ch,
                             style: words[j].style,
+                            parentStyle: words[j].parentStyle,
                             clipStyle: words[j].clipStyle,
                             strokeImageStyle: words[j].strokeImageStyle,
                         });
@@ -1076,6 +1199,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                             // word), so capturing it at the run start covers every push below.
                             const clipStyle = cs[i].clipStyle;
                             const strokeImageStyle = cs[i].strokeImageStyle;
+                            const parentStyle = cs[i].parentStyle;
                             applyFont(ctx, st);
                             ctx.letterSpacing = formatLetterSpacing(st.letterSpacing);
                             const lh = getLineHeight(ctx, st, useBulletProbe);
@@ -1088,7 +1212,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                                 if (chars && currentLine.totalWidth + candW > effWidth() &&
                                     (currentLine.words.length > 0 || cur)) {
                                     if (cur) {
-                                        currentLine.words.push({ text: cur, width: curW, style: st, isSpace: false, clipStyle, strokeImageStyle });
+                                        currentLine.words.push({ text: cur, width: curW, style: st, isSpace: false, parentStyle, clipStyle, strokeImageStyle });
                                         currentLine.totalWidth += curW;
                                         currentLine.lineHeight = Math.max(currentLine.lineHeight, lh);
                                     }
@@ -1104,7 +1228,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                                 i++;
                             }
                             if (cur) {
-                                currentLine.words.push({ text: cur, width: curW, style: st, isSpace: false, clipStyle, strokeImageStyle });
+                                currentLine.words.push({ text: cur, width: curW, style: st, isSpace: false, parentStyle, clipStyle, strokeImageStyle });
                                 currentLine.totalWidth += curW;
                                 currentLine.lineHeight = Math.max(currentLine.lineHeight, lh);
                                 afterHardBreak = false;
@@ -1458,7 +1582,9 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
     // only content is a SMALLER inline font sits on the strut baseline (lower in
     // the box), not centered in it. Seed each line's ascent/descent with the
     // block font's metrics so the baseline lands where the DOM puts it.
-    const strutMetrics = getFontMetrics(ctx, node.style);
+    // The block is the parent of any run with no inline ancestor, and the emit
+    // loop shadows `node` with the LayoutText it builds.
+    const blockStyle = node.style;
     let curY = y;
     for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
         const line = lines[lineIdx];
@@ -1466,7 +1592,6 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             curY += line.lineHeight;
             continue;
         }
-        const lineHeight = line.lineHeight;
         const isLastLine = lineIdx === lines.length - 1;
         const isFirstLine = lineIdx === 0;
         // Per-line alignment: lines ending at a forced break or the last line
@@ -1517,85 +1642,78 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         const lineLeftX = curX;
         // Inline background boxes and text are emitted after baseline computation
         // (below) so that emitInlineBox can use line-level metrics for alignment.
-        // Compute a single shared baseline for the entire line.
-        // Exclude sub/sup words — they sit above/below the baseline and
-        // shouldn't influence where the baseline is positioned. Seeded with the
-        // block strut (block font) so smaller-only lines align to the block
-        // baseline rather than centering in the taller strut line box.
-        let maxAscent = strutMetrics.ascent;
-        let maxDescent = strutMetrics.descent;
+        // The line box is the union of every box on it — strut, run, shifted run,
+        // inline-block — each carrying its own leading over its own line-height:
+        //   lineAscent = max(ascent - shift), lineDescent = max(descent + shift).
+        // One font, one line-height and no shift collapse that back to the plain
+        // half-leading every single-style line already had.
+        const strutBox = leadedBox(ctx, node.style, useBulletProbe);
+        let lineAscent = strutBox.ascent;
+        let lineDescent = strutBox.descent;
         for (const word of line.words) {
             if (word.text === '')
                 continue;
-            // Off-baseline content (sub/sup/middle/lengths/...) does not establish
-            // the line's baseline position — only baseline-aligned content does.
-            if (isShiftedVAlign(word.style.verticalAlign))
-                continue;
-            const { ascent: a, descent: d } = getFontMetrics(ctx, word.style);
-            if (a > maxAscent)
-                maxAscent = a;
-            if (d > maxDescent)
-                maxDescent = d;
-        }
-        // If only off-baseline words on the line, use the first word's metrics
-        if (maxAscent === 0) {
-            for (const word of line.words) {
-                if (word.text === '')
-                    continue;
-                const { ascent, descent } = getFontMetrics(ctx, word.style);
-                maxAscent = ascent;
-                maxDescent = descent;
-                break;
+            // A wrapper element with no text of its own — `<span lh:3><span>x</span>`
+            // — never becomes a Word, but it is still a box on the line and still
+            // brings its own line-height. Its run children carry it as `parentStyle`,
+            // so take it from there, AT ITS OWN SHIFT: added unshifted, a wrapper
+            // that carries a vertical-align and direct text enters the union twice
+            // at two different places, and the line spans both (measured 60px where
+            // the DOM has 40). With the shift it is idempotent — a wrapper with
+            // direct text contributes the identical box through its own run.
+            if (word.parentStyle) {
+                const parentBox = leadedBox(ctx, word.parentStyle, useBulletProbe);
+                const parentShift = verticalAlignShift(word.parentStyle.verticalAlign, ctx, word.parentStyle, blockStyle, useBulletProbe);
+                if (parentBox.ascent - parentShift > lineAscent) {
+                    lineAscent = parentBox.ascent - parentShift;
+                }
+                if (parentBox.descent + parentShift > lineDescent) {
+                    lineDescent = parentBox.descent + parentShift;
+                }
             }
-        }
-        // Center the text block (ascent + descent) within the lineHeight
-        const textBlockHeight = maxAscent + maxDescent;
-        let lineBaselineY = curY + (lineHeight - textBlockHeight) / 2 + maxAscent;
-        // Parent font size for vertical-align positioning (used in expansion + text
-        // emit) — the largest baseline-aligned font on the line.
-        const lineNormalWords = line.words.filter(w => w.text !== '' && !isShiftedVAlign(w.style.verticalAlign));
-        const parentFontSize = lineNormalWords.length > 0
-            ? Math.max(...lineNormalWords.map(w => w.style.fontSize)) : 0;
-        // Expand line height if vertically-shifted content extends beyond the line
-        // box. Browsers grow the line box to fit all content, but keep the normal
-        // text baseline position unchanged.
-        let lineTop = curY;
-        let lineBottom = curY + lineHeight;
-        for (const word of line.words) {
-            if (word.text === '')
-                continue;
-            const va = word.style.verticalAlign;
-            if (!isShiftedVAlign(va))
-                continue;
-            if (parentFontSize === 0)
-                break;
-            const { ascent: wAscent, descent: wDescent } = getFontMetrics(ctx, word.style);
-            const shiftedBaseline = lineBaselineY +
-                verticalAlignShift(va, wAscent, wDescent, parentFontSize, maxAscent, maxDescent, lineHeight);
-            const wordTop = shiftedBaseline - wAscent;
-            const wordBottom = shiftedBaseline + wDescent;
-            if (wordTop < lineTop)
-                lineTop = wordTop;
-            if (wordBottom > lineBottom)
-                lineBottom = wordBottom;
-        }
-        const effectiveLineHeight = lineBottom - lineTop;
+            const box = leadedBox(ctx, word.style, useBulletProbe);
+            // An inline-block joins the line as an ATOMIC box: its own content
+            // baseline with its margin box stacked around it. It takes the extra
+            // space, but no shift — the emit pass puts its content on the line
+            // 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) {
+                const extra = inlineBlockExtra(atomic);
+                box.ascent += extra.top;
+                box.descent += extra.bottom;
+            }
+            // A shift moves the box, not the line's baseline: positive is downward,
+            // so it lifts the box's demand on the ascent side and adds to the descent
+            // side. The parent-size fallback is the one the emit pass uses, so a line
+            // whose only content is shifted still sizes around it.
+            const shift = atomic ? 0 : verticalAlignShift(word.style.verticalAlign, ctx, word.style, word.parentStyle ?? blockStyle, useBulletProbe);
+            if (box.ascent - shift > lineAscent)
+                lineAscent = box.ascent - shift;
+            if (box.descent + shift > lineDescent)
+                lineDescent = box.descent + shift;
+        }
+        const lineBoxHeight = lineAscent + lineDescent;
+        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) => {
-            // Use the box's OWN font for height (not the line's largest font),
-            // but align vertically to the line's baseline.
-            const { ascent: boxAscent, descent: boxDescent } = getFontMetrics(ctx, style);
+            // 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
+            // y=6 h=29 where the DOM has y=4 h=33.2.
+            const { ascent: boxAscent, descent: boxDescent } = style.display === 'inline-block'
+                ? leadedBox(ctx, style, useBulletProbe)
+                : getFontMetrics(ctx, style);
             const padTop = style.paddingTop + style.borderTopWidth;
             const padBottom = style.paddingBottom + style.borderBottomWidth;
             const boxHeight = boxAscent + boxDescent + padTop + padBottom;
-            let boxY;
-            if (style.display === 'inline-block') {
-                boxY = curY + style.marginTop;
-            }
-            else {
-                boxY = lineBaselineY - boxAscent - padTop;
-            }
+            // Every inline box hangs off the line's baseline, an inline-block too:
+            // its content is emitted on that baseline, so a box pinned to the line
+            // 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;
             results.push({
                 type: 'box', style, x: bx, y: boxY, width: bw, height: boxHeight,
                 tagName: 'span', children: [],
@@ -1786,9 +1904,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     let baselineY = lineBaselineY;
                     const va = word.style.verticalAlign;
                     if (isShiftedVAlign(va)) {
-                        const pfs = parentFontSize || word.style.fontSize;
-                        const { ascent: wA, descent: wD } = getFontMetrics(ctx, word.style);
-                        baselineY += verticalAlignShift(va, wA, wD, pfs, maxAscent, maxDescent, lineHeight);
+                        baselineY += verticalAlignShift(va, ctx, word.style, word.parentStyle ?? blockStyle, useBulletProbe);
                     }
                     const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
                     const node = {
@@ -1822,14 +1938,15 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             text: line.words.map(w => w.text).join(''),
             bounds: {
                 x: lineLeftX,
-                // Use the actual visual top (may be < curY when a super pushes the
-                // line box upward) so the rect covers ascenders/super content.
-                y: lineTop,
+                // The line box starts at curY: shifted content grew the box through
+                // `lineAscent`/`lineDescent` above, so nothing on the line reaches
+                // outside it.
+                y: curY,
                 width: lineWidth,
-                height: effectiveLineHeight,
+                height: lineBoxHeight,
             },
         });
-        curY += effectiveLineHeight;
+        curY += lineBoxHeight;
     }
     assignInlineFragmentBoxes(ctx, results, clipRuns, (node, s, box) => {
         node.clip = {
@@ -2188,9 +2305,10 @@ function addListMarker(ctx, box, node) {
     const ms = node.markerStyle;
     const markerStyleObj = ms ? { ...style, ...ms } : style;
     ctx.font = buildCanvasFont(markerStyleObj);
-    const lineHeight = getLineHeight(ctx, style);
-    const baselineY = box.y + style.borderTopWidth + style.paddingTop +
-        computeBaselineY(ctx, style, lineHeight);
+    // ascent + descent is the li's line-height by construction, so one call
+    // gives both the marker's baseline and the box it reports.
+    const strut = leadedBox(ctx, style);
+    const baselineY = box.y + style.borderTopWidth + style.paddingTop + strut.ascent;
     const markerWidth = cachedMeasureWidth(ctx, node.listMarker);
     const isRTL = style.direction === 'rtl';
     const isBullet = BULLET_MARKERS.has(style.listStyleType);
@@ -2289,7 +2407,7 @@ function addListMarker(ctx, box, node) {
             x: markerLeftX,
             y: box.y + style.borderTopWidth + style.paddingTop,
             width: markerDrawWidth,
-            height: lineHeight,
+            height: strut.ascent + strut.descent,
         },
     });
 }