render-tag 0.1.2 → 0.1.3

package/lib/layout.js

@@ -2,70 +2,19 @@
 // Set by buildLayoutTree() based on the useDomMeasurements option.
 let _useDomMeasurements = true;
 let _debug;
-// ─── DOM-based line width measurement ──────────────────────────────────
-/**
- * Reusable hidden DOM element for measuring mixed-font line widths.
- * Only used when canvas measureText precision is insufficient
- * (mixed fonts near the wrap boundary).
- */
-let _measureContainer = null;
-let _measureSpanPool = [];
-function getMeasureContainer() {
-    if (_measureContainer && _measureContainer.parentNode)
-        return _measureContainer;
-    _measureContainer = document.createElement('div');
-    _measureContainer.style.cssText =
-        'position:absolute;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap;height:auto;width:auto;';
-    document.body.appendChild(_measureContainer);
-    return _measureContainer;
-}
-function getMeasureSpan(index) {
-    if (!_measureSpanPool[index]) {
-        _measureSpanPool[index] = document.createElement('span');
-    }
-    return _measureSpanPool[index];
-}
-/**
- * Measure the exact width of a sequence of styled words using the DOM.
- * This is the ground truth — the browser's own text layout engine handles
- * kerning, shaping, and sub-pixel positioning across font boundaries.
- *
- * Only called when canvas measureText suggests a line is near the wrap
- * boundary and fonts are mixed (different weight/style/family on the line).
- */
-let _domMeasureCount = 0;
-function measureLineWidthViaDom(words) {
-    _domMeasureCount++;
-    const container = getMeasureContainer();
-    const textWords = words.filter(w => w.text && w.text !== '\n');
-    if (textWords.length === 0)
-        return 0;
-    // Build spans — group consecutive words with the same font
-    let spanIdx = 0;
-    let lastFont = '';
-    for (const word of textWords) {
-        const font = buildCanvasFont(word.style);
-        if (font !== lastFont || spanIdx === 0) {
-            const span = getMeasureSpan(spanIdx);
-            span.style.font = font;
-            span.textContent = word.text;
-            if (!span.parentNode)
-                container.appendChild(span);
-            lastFont = font;
-            spanIdx++;
-        }
-        else {
-            // Same font as previous span — append text
-            _measureSpanPool[spanIdx - 1].textContent += word.text;
-        }
-    }
-    // Hide unused spans
-    for (let i = spanIdx; i < _measureSpanPool.length; i++) {
-        if (_measureSpanPool[i].parentNode) {
-            _measureSpanPool[i].textContent = '';
-        }
-    }
-    return container.getBoundingClientRect().width;
+// ─── measureText width cache ──────────────────────────────────────────
+// Caches ctx.measureText(text).width keyed by "font\0text".
+// Cleared at the start of each buildLayoutTree() call.
+const _measureCache = new Map();
+function cachedMeasureWidth(ctx, text) {
+    // ctx.font must already be set by caller
+    const key = ctx.font + '\0' + text;
+    const cached = _measureCache.get(key);
+    if (cached !== undefined)
+        return cached;
+    const w = ctx.measureText(text).width;
+    _measureCache.set(key, w);
+    return w;
 }
 /**
  * Check if a line has mixed fonts (different fontFamily/fontSize/fontWeight/fontStyle).
@@ -91,9 +40,14 @@ function applyFont(ctx, style) {
     ctx.fontKerning = style.fontKerning === 'none' ? 'none' : 'normal';
 }
 /**
- * Build a canvas font string from resolved style.
+ * Build a canvas font string from resolved style. Results are cached.
  */
+const _fontStringCache = new Map();
 export function buildCanvasFont(style) {
+    const key = `${style.fontStyle}|${style.fontWeight}|${style.fontSize}|${style.fontFamily}`;
+    const cached = _fontStringCache.get(key);
+    if (cached)
+        return cached;
     const parts = [];
     if (style.fontStyle !== 'normal')
         parts.push(style.fontStyle);
@@ -101,7 +55,9 @@ export function buildCanvasFont(style) {
         parts.push(String(style.fontWeight));
     parts.push(`${style.fontSize}px`);
     parts.push(style.fontFamily);
-    return parts.join(' ');
+    const result = parts.join(' ');
+    _fontStringCache.set(key, result);
+    return result;
 }
 /**
  * Cache for DOM-measured line heights.
@@ -175,22 +131,18 @@ function getLineHeight(ctx, style, useBulletProbe = false) {
         const font = buildCanvasFont(style);
         return measureDomLineHeight(font, 'normal', useBulletProbe);
     }
-    // Canvas-only fallback for "normal" line-height: use font metrics
-    ctx.font = buildCanvasFont(style);
-    const metrics = ctx.measureText('M');
-    const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
-    const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
-    return (ascent + descent) * 1.2;
+    // Canvas-only fallback for "normal" line-height: use font bounding box
+    // fontBoundingBoxAscent + fontBoundingBoxDescent already represents the
+    // full line box height, no multiplier needed.
+    const { ascent, descent } = getFontMetrics(ctx, style);
+    return ascent + descent;
 }
 /**
  * Compute the baseline Y offset within a line.
  * Uses the Konva approach: center (ascent - descent) within lineHeight.
  */
 function computeBaselineY(ctx, style, lineHeight) {
-    ctx.font = buildCanvasFont(style);
-    const metrics = ctx.measureText('M');
-    const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
-    const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+    const { ascent, descent } = getFontMetrics(ctx, style);
     return (ascent - descent) / 2 + lineHeight / 2;
 }
 function applyTextTransform(text, transform) {
@@ -210,9 +162,38 @@ function isInline(node) {
 function hasOnlyInlineChildren(node) {
     return node.children.length > 0 && node.children.every(isInline);
 }
-function isTransparent(color) {
+export function isTransparent(color) {
     return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
 }
+/**
+ * Get font ascent and descent metrics. Results are cached per font string.
+ */
+const _fontMetricsCache = new Map();
+export function getFontMetrics(ctx, style) {
+    const font = buildCanvasFont(style);
+    const cached = _fontMetricsCache.get(font);
+    if (cached)
+        return cached;
+    ctx.font = font;
+    const m = ctx.measureText('M');
+    const ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
+    const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+    const result = { ascent, descent };
+    _fontMetricsCache.set(font, result);
+    return result;
+}
+/**
+ * Check if two styles have the same text rendering properties.
+ */
+function sameTextStyle(a, b) {
+    return a.fontFamily === b.fontFamily &&
+        a.fontSize === b.fontSize &&
+        a.fontWeight === b.fontWeight &&
+        a.fontStyle === b.fontStyle &&
+        a.color === b.color &&
+        a.textDecorationLine === b.textDecorationLine &&
+        a.backgroundColor === b.backgroundColor;
+}
 function hasVisibleBoxStyles(style) {
     if (!isTransparent(style.backgroundColor))
         return true;
@@ -306,15 +287,17 @@ function getSegmenter() {
 /**
  * Tokenize a single string into words based on whitespace mode.
  */
-function tokenizeString(ctx, text, run, allWords) {
-    // Split on zero-width spaces and soft hyphens (break opportunities)
+function tokenizeString(ctx, text, run, allWords, cumState) {
+    // Split on zero-width spaces and soft hyphens (break opportunities).
+    // Pass cumulative state through so pieces are measured as one text run
+    // (preserving kerning accuracy across break points).
     if (text.includes('\u200B') || text.includes('\u00AD')) {
-        // Split but keep delimiters to distinguish soft hyphens from zero-width spaces
         const parts = text.split(/(\u200B|\u00AD)/);
+        // Share cumulative state across all sub-parts for accurate measurement
+        const sharedState = cumState ?? { cumText: '', cumWidth: 0 };
         let nextIsSoftHyphen = false;
         for (const part of parts) {
             if (part === '\u00AD') {
-                // Mark the PREVIOUS word as a soft-hyphen break point
                 nextIsSoftHyphen = true;
                 continue;
             }
@@ -323,15 +306,12 @@ function tokenizeString(ctx, text, run, allWords) {
                 continue;
             }
             const prevLen = allWords.length;
-            tokenizeString(ctx, part, run, allWords);
-            // If the previous delimiter was a soft hyphen, mark the word
-            // just before this part as having a soft-hyphen break opportunity
+            tokenizeString(ctx, part, run, allWords, sharedState);
             if (nextIsSoftHyphen && prevLen > 0) {
                 allWords[prevLen - 1].isSoftHyphenBreak = true;
             }
             nextIsSoftHyphen = false;
         }
-        // If the text ends with a soft hyphen, mark the last word
         if (nextIsSoftHyphen && allWords.length > 0) {
             allWords[allWords.length - 1].isSoftHyphenBreak = true;
         }
@@ -343,7 +323,7 @@ function tokenizeString(ctx, text, run, allWords) {
     if (isPreserve) {
         // Split on spaces and tabs, keeping delimiters
         const words = text.split(/( +|\t)/);
-        const tabStopInterval = ctx.measureText(' ').width * 8; // CSS default: 8 spaces
+        const tabStopInterval = cachedMeasureWidth(ctx, ' ') * 8; // CSS default: 8 spaces
         for (const w of words) {
             if (w === '')
                 continue;
@@ -362,7 +342,7 @@ function tokenizeString(ctx, text, run, allWords) {
             const isSpace = /^ +$/.test(w);
             allWords.push({
                 text: w,
-                width: ctx.measureText(w).width,
+                width: cachedMeasureWidth(ctx, w),
                 style: run.style,
                 isSpace,
                 boxStyle: run.boxStyle,
@@ -373,9 +353,11 @@ function tokenizeString(ctx, text, run, allWords) {
         // Split on whitespace but NOT on non-breaking spaces (\u00A0)
         const words = text.split(/([ \t\n\r\f\v]+)/);
         // Use cumulative measurement to avoid rounding error accumulation
-        // within a single text run.
-        let cumText = '';
-        let cumWidth = 0;
+        // within a single text run. When cumState is provided (from \u200B/\u00AD
+        // split), continue from the previous cumulative position to preserve
+        // kerning accuracy across break points.
+        let cumText = cumState?.cumText ?? '';
+        let cumWidth = cumState?.cumWidth ?? 0;
         for (const w of words) {
             if (w === '')
                 continue;
@@ -384,9 +366,10 @@ function tokenizeString(ctx, text, run, allWords) {
                 const prevCum = cumWidth;
                 cumText += ' ';
                 cumWidth = ctx.measureText(cumText).width;
+                const spaceWidth = cumWidth - prevCum + (run.style.wordSpacing || 0);
                 allWords.push({
                     text: ' ',
-                    width: cumWidth - prevCum,
+                    width: spaceWidth,
                     style: run.style,
                     isSpace: true,
                     boxStyle: run.boxStyle,
@@ -417,7 +400,7 @@ function tokenizeString(ctx, text, run, allWords) {
             cumText += w;
             cumWidth = ctx.measureText(cumText).width;
             let width = cumWidth - prevCum;
-            const directWidth = ctx.measureText(w).width;
+            const directWidth = cachedMeasureWidth(ctx, w);
             if (_debug) {
                 _debug({
                     type: 'measure-word',
@@ -433,6 +416,11 @@ function tokenizeString(ctx, text, run, allWords) {
                 boxStyle: run.boxStyle,
             });
         }
+        // Propagate cumulative state back to caller (for \u200B/\u00AD splits)
+        if (cumState) {
+            cumState.cumText = cumText;
+            cumState.cumWidth = cumWidth;
+        }
     }
 }
 /**
@@ -458,7 +446,7 @@ function tokenizeRuns(ctx, runs) {
             ctx.letterSpacing = run.style.letterSpacing > 0 ? `${run.style.letterSpacing}px` : '0px';
             const text = applyTextTransform(run.text, run.style.textTransform);
             const s = run.style;
-            const textWidth = ctx.measureText(text).width;
+            const textWidth = cachedMeasureWidth(ctx, text);
             const totalWidth = s.marginLeft + s.borderLeftWidth + s.paddingLeft +
                 textWidth + s.paddingRight + s.borderRightWidth + s.marginRight;
             allWords.push({
@@ -535,14 +523,15 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
         (word.style.overflowWrap === 'break-word' || word.style.wordBreak === 'break-all');
     if (!hasCJK && !needsBreak)
         return [word];
-    // Split into characters
+    // 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.
     ctx.font = buildCanvasFont(word.style);
     const chars = [...word.text];
     const pieces = [];
     let current = '';
     let currentWidth = 0;
     for (const char of chars) {
-        const charWidth = ctx.measureText(char).width;
         // CJK chars always get their own word for wrapping
         if (isCJK(char)) {
             if (current) {
@@ -550,17 +539,22 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
                 current = '';
                 currentWidth = 0;
             }
+            const charWidth = cachedMeasureWidth(ctx, char);
             pieces.push({ ...word, text: char, width: charWidth });
             continue;
         }
+        // Use cumulative measurement: measure the growing string, not individual chars
+        const candidateText = current + char;
+        const candidateWidth = cachedMeasureWidth(ctx, candidateText);
         // For break-word: break when adding this char would exceed container
-        if (needsBreak && currentWidth + charWidth > contentWidth && current) {
+        if (needsBreak && candidateWidth > contentWidth && current) {
             pieces.push({ ...word, text: current, width: currentWidth });
-            current = '';
-            currentWidth = 0;
+            current = char;
+            currentWidth = cachedMeasureWidth(ctx, char);
+            continue;
         }
-        current += char;
-        currentWidth += charWidth;
+        current = candidateText;
+        currentWidth = candidateWidth;
     }
     if (current) {
         pieces.push({ ...word, text: current, width: currentWidth });
@@ -589,7 +583,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
             const lastWord = currentLine.words[currentLine.words.length - 1];
             if (lastWord.isSoftHyphenBreak) {
                 applyFont(ctx, lastWord.style);
-                const hyphenWidth = ctx.measureText('-').width;
+                const hyphenWidth = cachedMeasureWidth(ctx, '-');
                 currentLine.words.push({
                     text: '-',
                     width: hyphenWidth,
@@ -665,13 +659,47 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 if (overflow < 1 && !hasMixedFonts([...currentLine.words, piece])) {
                     applyFont(ctx, piece.style);
                     const fullText = currentLine.words.map(w => w.text).join('') + piece.text;
-                    const fullWidth = ctx.measureText(fullText).width;
+                    const fullWidth = cachedMeasureWidth(ctx, fullText);
                     // Allow tiny sub-pixel overflow — canvas measureText and DOM
                     // text layout can differ by fractions of a pixel.
                     if (fullWidth <= contentWidth + 0.1) {
                         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(/(?<=-)/);
+                    if (parts.length > 1) {
+                        applyFont(ctx, piece.style);
+                        let fitted = '';
+                        let fittedWidth = 0;
+                        let partIdx = 0;
+                        const available = contentWidth - 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('');
@@ -688,28 +716,6 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
             // Skip leading spaces after soft wraps, but preserve after hard breaks (\n)
             if (piece.isSpace && currentLine.words.length === 0 && !afterHardBreak)
                 continue;
-            // Reverse check: canvas says it fits, but with mixed fonts near boundary,
-            // DOM might say it doesn't fit. Verify before committing.
-            // Only check when line is >80% full to avoid excessive DOM measurements.
-            if (_useDomMeasurements && !piece.isSpace && currentLine.words.length > 0 &&
-                currentLine.totalWidth > contentWidth * 0.8) {
-                const remaining = contentWidth - (currentLine.totalWidth + piece.width);
-                if (remaining >= 0 && remaining < 5 && hasMixedFonts(currentLine.words)) {
-                    const candidateWords = [...currentLine.words, piece];
-                    const domWidth = measureLineWidthViaDom(candidateWords);
-                    if (domWidth > contentWidth) {
-                        if (_debug) {
-                            _debug({
-                                type: 'line-wrap',
-                                message: `REVERSE WRAP: "${piece.text}" canvas says fits (remaining=${remaining.toFixed(2)}) but DOM says overflow (domWidth=${domWidth.toFixed(2)})`,
-                                data: { text: piece.text, remaining, domWidth, contentWidth },
-                            });
-                        }
-                        pushLine(true);
-                        afterHardBreak = false;
-                    }
-                }
-            }
             // Tab: snap to next tab stop based on current position
             let pieceWidth = piece.width;
             if (piece.isTab) {
@@ -719,6 +725,48 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 pieceWidth = nextStop - currentPos;
                 piece.width = pieceWidth;
             }
+            // Hyphen break on a fresh line when word still too wide.
+            if (currentLine.words.length === 0 && pieceWidth > contentWidth &&
+                !piece.isSpace && piece.text.includes('-')) {
+                const subParts = piece.text.split(/(?<=-)/);
+                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 > contentWidth) {
+                            // 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);
@@ -775,82 +823,8 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         else if (isRTL) {
             curX = x + contentWidth - line.totalWidth;
         }
-        // Two-pass: first collect inline background boxes, then text.
-        // This ensures backgrounds are rendered before (behind) text.
-        // Pass 1: find inline background box regions
-        {
-            let scanX = curX;
-            let boxStartX = scanX;
-            let currentBoxStyle;
-            let boxHasText = false; // track if region has visible text (not just padding/spaces)
-            const emitBox = (style, startX, endX) => {
-                // Don't emit background box if this line segment has no visible text
-                // (e.g. only a boxOpen padding marker + trailing space before wrap)
-                if (!boxHasText)
-                    return;
-                ctx.font = buildCanvasFont(style);
-                const metrics = ctx.measureText('Mgy');
-                const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
-                const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
-                const emHeight = ascent + descent;
-                const boxHeight = emHeight + style.paddingTop + style.paddingBottom
-                    + style.borderTopWidth + style.borderBottomWidth;
-                // For inline-block: position with margin offset. For regular inline: center.
-                let boxY;
-                if (style.display === 'inline-block') {
-                    boxY = curY + style.marginTop;
-                }
-                else {
-                    boxY = curY + (lineHeight - boxHeight) / 2;
-                }
-                results.push({
-                    type: 'box',
-                    style,
-                    x: startX,
-                    y: boxY,
-                    width: endX - startX,
-                    height: boxHeight,
-                    tagName: 'span',
-                    children: [],
-                });
-            };
-            for (const word of line.words) {
-                // Atomic inline-block: emit box with margin offset
-                if (word.boxOpen && word.boxClose && word.text) {
-                    if (currentBoxStyle) {
-                        emitBox(currentBoxStyle, boxStartX, scanX);
-                        currentBoxStyle = undefined;
-                        boxHasText = false;
-                    }
-                    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;
-                    boxHasText = true;
-                    emitBox(s, boxX, boxX + boxW);
-                    boxHasText = false;
-                    scanX += word.width;
-                    continue;
-                }
-                if (word.boxStyle !== currentBoxStyle) {
-                    if (currentBoxStyle) {
-                        emitBox(currentBoxStyle, boxStartX, scanX);
-                    }
-                    currentBoxStyle = word.boxStyle;
-                    boxStartX = scanX;
-                    boxHasText = false;
-                }
-                // Track if we've seen actual text content (not spaces or empty padding markers)
-                if (word.text && !word.isSpace) {
-                    boxHasText = true;
-                }
-                scanX += word.width + (word.isSpace ? justifyExtraPerSpace : 0);
-            }
-            if (currentBoxStyle) {
-                emitBox(currentBoxStyle, boxStartX, scanX);
-            }
-        }
+        // 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.
@@ -862,10 +836,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             const va = word.style.verticalAlign;
             if (va === 'super' || va === 'sub')
                 continue; // skip sub/sup for baseline calc
-            ctx.font = buildCanvasFont(word.style);
-            const m = ctx.measureText('M');
-            const a = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
-            const d = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+            const { ascent: a, descent: d } = getFontMetrics(ctx, word.style);
             if (a > maxAscent)
                 maxAscent = a;
             if (d > maxDescent)
@@ -876,24 +847,24 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             for (const word of line.words) {
                 if (word.text === '')
                     continue;
-                ctx.font = buildCanvasFont(word.style);
-                const m = ctx.measureText('M');
-                maxAscent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
-                maxDescent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+                const { ascent, descent } = getFontMetrics(ctx, word.style);
+                maxAscent = ascent;
+                maxDescent = descent;
                 break;
             }
         }
         // Center the text block (ascent + descent) within the lineHeight
         const textBlockHeight = maxAscent + maxDescent;
         let lineBaselineY = curY + (lineHeight - textBlockHeight) / 2 + maxAscent;
+        // Compute parent font size for sub/sup positioning (used in expansion + text emit)
+        const lineNormalWords = line.words.filter(w => w.text !== '' && w.style.verticalAlign !== 'super' && w.style.verticalAlign !== 'sub');
+        const parentFontSize = lineNormalWords.length > 0
+            ? Math.max(...lineNormalWords.map(w => w.style.fontSize)) : 0;
         // Expand line height if sub/sup extends beyond the line box.
         // Browsers grow the line box to fit all content, but keep
         // the normal text baseline position unchanged.
         let effectiveLineHeight = lineHeight;
         {
-            const lineNormalWords = line.words.filter(w => w.text !== '' && w.style.verticalAlign !== 'super' && w.style.verticalAlign !== 'sub');
-            const parentFontSize = lineNormalWords.length > 0
-                ? Math.max(...lineNormalWords.map(w => w.style.fontSize)) : 0;
             let minTop = curY;
             let maxBottom = curY + lineHeight;
             for (const word of line.words) {
@@ -904,10 +875,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     continue;
                 if (parentFontSize === 0)
                     break;
-                ctx.font = buildCanvasFont(word.style);
-                const m = ctx.measureText('M');
-                const wAscent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
-                const wDescent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+                const { ascent: wAscent, descent: wDescent } = getFontMetrics(ctx, word.style);
                 let shiftedBaseline = lineBaselineY;
                 if (va === 'super') {
                     shiftedBaseline -= parentFontSize * 0.4;
@@ -924,113 +892,196 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             }
             effectiveLineHeight = maxBottom - minTop;
         }
-        // Pass 2: emit text
-        // For RTL lines with uniform style, emit as a single text node
-        // so the canvas can handle BiDi glyph shaping and connected letters.
+        // 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);
+            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;
+            }
+            results.push({
+                type: 'box', style, x: bx, y: boxY, width: bw, height: boxHeight,
+                tagName: 'span', children: [],
+            });
+        };
+        // LTR: emit inline background boxes (Pass 1) before text.
+        if (!isRTL) {
+            let scanX = curX;
+            let boxStartX = scanX;
+            let currentBoxStyle;
+            let boxHasText = false;
+            for (const word of line.words) {
+                if (word.boxOpen && word.boxClose && word.text) {
+                    if (currentBoxStyle) {
+                        if (boxHasText)
+                            emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+                        currentBoxStyle = undefined;
+                        boxHasText = false;
+                    }
+                    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;
+                    scanX += word.width;
+                    continue;
+                }
+                if (word.boxStyle !== currentBoxStyle) {
+                    if (currentBoxStyle && boxHasText) {
+                        emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+                    }
+                    currentBoxStyle = word.boxStyle;
+                    boxStartX = scanX;
+                    boxHasText = false;
+                }
+                if (word.text && !word.isSpace)
+                    boxHasText = true;
+                scanX += word.width + (word.isSpace ? justifyExtraPerSpace : 0);
+            }
+            if (currentBoxStyle && boxHasText) {
+                emitInlineBox(currentBoxStyle, boxStartX, scanX - boxStartX);
+            }
+        }
+        // Emit text nodes.
         const textWords = line.words.filter(w => w.text !== '');
-        const allSameStyle = textWords.length > 0 && textWords.every(w => w.style.fontFamily === textWords[0].style.fontFamily &&
-            w.style.fontSize === textWords[0].style.fontSize &&
-            w.style.fontWeight === textWords[0].style.fontWeight &&
-            w.style.fontStyle === textWords[0].style.fontStyle &&
-            w.style.color === textWords[0].style.color);
+        const allSameStyle = textWords.length > 0 && textWords.every(w => sameTextStyle(w.style, textWords[0].style));
         if (isRTL) {
-            // RTL: render words right-to-left
-            // Join consecutive words with same style into groups for proper glyph shaping
-            let rtlX = curX + line.totalWidth; // start from right edge
             const groups = [];
             let currentGroup = null;
+            let pendingPad = 0;
             for (const word of line.words) {
                 if (word.text === '') {
-                    // Padding marker — flush current group and add spacing
+                    // Padding marker — accumulate for the next group boundary
                     if (currentGroup) {
                         groups.push(currentGroup);
                         currentGroup = null;
                     }
-                    rtlX -= word.width;
+                    pendingPad += word.width;
                     continue;
                 }
-                if (currentGroup &&
-                    currentGroup.style.fontFamily === word.style.fontFamily &&
-                    currentGroup.style.fontSize === word.style.fontSize &&
-                    currentGroup.style.fontWeight === word.style.fontWeight &&
-                    currentGroup.style.fontStyle === word.style.fontStyle &&
-                    currentGroup.style.color === word.style.color) {
+                if (currentGroup && sameTextStyle(currentGroup.style, word.style)) {
                     currentGroup.text += word.text;
                     currentGroup.width += word.width;
                 }
                 else {
                     if (currentGroup)
                         groups.push(currentGroup);
-                    currentGroup = { text: word.text, style: word.style, width: word.width };
+                    currentGroup = { text: word.text, style: word.style, width: word.width, boxStyle: word.boxStyle, x: 0, padBefore: pendingPad };
+                    pendingPad = 0;
                 }
             }
             if (currentGroup)
                 groups.push(currentGroup);
-            // Emit groups right-to-left
+            // Compute positions right-to-left: group-level measureText for accuracy,
+            // with padding markers creating spacing between groups.
+            let rtlX = curX + line.totalWidth;
             for (const group of groups) {
-                ctx.font = buildCanvasFont(group.style);
-                const measuredWidth = ctx.measureText(group.text).width;
+                rtlX -= group.padBefore; // spacing from padding markers
+                applyFont(ctx, group.style);
+                const measuredWidth = cachedMeasureWidth(ctx, group.text);
                 rtlX -= measuredWidth;
+                group.x = rtlX;
+                group.width = measuredWidth;
+            }
+            // Emit inline boxes first (behind text).
+            // Include padding/border from boxStyle in box dimensions.
+            for (const group of groups) {
+                if (group.boxStyle && hasVisibleBoxStyles(group.boxStyle)) {
+                    const bs = group.boxStyle;
+                    const padLeft = bs.paddingLeft + bs.borderLeftWidth;
+                    const padRight = bs.paddingRight + bs.borderRightWidth;
+                    emitInlineBox(bs, group.x - padLeft, group.width + padLeft + padRight);
+                }
+            }
+            // Emit text groups
+            for (const group of groups) {
                 results.push({
                     type: 'text',
                     text: group.text,
-                    x: rtlX + measuredWidth, // x = right edge for RTL textAlign
+                    x: group.x + group.width, // x = right edge for RTL textAlign
                     y: lineBaselineY,
-                    width: measuredWidth,
+                    width: group.width,
                     style: { ...group.style, direction: 'rtl' },
                 });
             }
         }
         else {
-            // LTR: word by word
-            for (const word of line.words) {
-                if (word.text === '') {
-                    curX += word.width;
-                    continue;
-                }
-                // Atomic inline-block: position text inside the box (after margin + padding)
-                if (word.boxOpen && word.boxClose) {
-                    const s = word.style;
-                    const textX = curX + s.marginLeft + s.borderLeftWidth + s.paddingLeft;
+            // LTR with mixed BiDi scripts: emit the entire line as one fillText call
+            // so the canvas engine handles BiDi reordering (Arabic/Hebrew in LTR).
+            // Only do this when the line contains RTL characters — pure LTR lines
+            // are more accurate with word-by-word positioning.
+            const lineText = line.words.map(w => w.text).join('');
+            const hasBidiMix = allSameStyle && /[\u0590-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(lineText) &&
+                !line.words.some(w => w.boxOpen || w.boxClose ||
+                    w.style.verticalAlign === 'super' || w.style.verticalAlign === 'sub');
+            if (hasBidiMix) {
+                applyFont(ctx, textWords[0].style);
+                const measuredWidth = cachedMeasureWidth(ctx, lineText);
+                results.push({
+                    type: 'text',
+                    text: lineText,
+                    x: curX,
+                    y: lineBaselineY,
+                    width: measuredWidth,
+                    style: textWords[0].style,
+                });
+            }
+            else {
+                // Mixed styles: word by word
+                for (const word of line.words) {
+                    if (word.text === '') {
+                        curX += word.width;
+                        continue;
+                    }
+                    // Atomic inline-block: position text inside the box (after margin + padding)
+                    if (word.boxOpen && word.boxClose) {
+                        const s = word.style;
+                        const textX = curX + s.marginLeft + s.borderLeftWidth + s.paddingLeft;
+                        results.push({
+                            type: 'text',
+                            text: word.text,
+                            x: textX,
+                            y: lineBaselineY,
+                            width: cachedMeasureWidth(ctx, word.text),
+                            style: word.style,
+                        });
+                        curX += word.width;
+                        continue;
+                    }
+                    // Adjust baseline for vertical-align
+                    let baselineY = lineBaselineY;
+                    const va = word.style.verticalAlign;
+                    if (va === 'super' || va === 'sub') {
+                        const pfs = parentFontSize || word.style.fontSize;
+                        if (va === 'super') {
+                            baselineY -= pfs * 0.4;
+                        }
+                        else {
+                            baselineY += pfs * 0.26;
+                        }
+                    }
+                    const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
                     results.push({
                         type: 'text',
                         text: word.text,
-                        x: textX,
-                        y: lineBaselineY,
-                        width: ctx.measureText(word.text).width,
+                        x: curX,
+                        y: baselineY,
+                        width: effectiveWidth,
                         style: word.style,
                     });
-                    curX += word.width;
-                    continue;
-                }
-                // Adjust baseline for vertical-align
-                let baselineY = lineBaselineY;
-                const va = word.style.verticalAlign;
-                if (va === 'super' || va === 'sub') {
-                    // Find parent font size (the normal-sized text on this line)
-                    const normalWords = textWords.filter(w => w.style.verticalAlign !== 'super' && w.style.verticalAlign !== 'sub');
-                    const parentFontSize = normalWords.length > 0
-                        ? Math.max(...normalWords.map(w => w.style.fontSize))
-                        : word.style.fontSize;
-                    if (va === 'super') {
-                        // Chrome raises super baseline by ~0.4em of parent font size
-                        baselineY -= parentFontSize * 0.4;
-                    }
-                    else {
-                        // Chrome lowers sub baseline by ~0.26em of parent font size
-                        baselineY += parentFontSize * 0.26;
-                    }
+                    curX += effectiveWidth;
                 }
-                const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
-                results.push({
-                    type: 'text',
-                    text: word.text,
-                    x: curX,
-                    y: baselineY,
-                    width: effectiveWidth,
-                    style: word.style,
-                });
-                curX += effectiveWidth;
             }
         }
         curY += effectiveLineHeight;
@@ -1309,19 +1360,39 @@ function addListMarker(ctx, box, node) {
     const lineHeight = getLineHeight(ctx, style);
     const baselineY = box.y + style.borderTopWidth + style.paddingTop +
         computeBaselineY(ctx, style, lineHeight);
-    const markerWidth = ctx.measureText(node.listMarker).width;
-    // Content starts at box.x + borderLeft + paddingLeft
-    // Place marker right-aligned within the padding area, with a small gap before content
-    const contentStartX = box.x + style.borderLeftWidth + style.paddingLeft;
+    const markerWidth = cachedMeasureWidth(ctx, node.listMarker);
     const gap = style.fontSize * 0.15; // small gap between marker and content
-    const markerX = contentStartX - markerWidth - gap;
+    const isRTL = style.direction === 'rtl';
+    let markerX;
+    let markerDirection = 'ltr';
+    if (isRTL) {
+        // RTL: marker in the parent's right padding area (outside the li box).
+        const boxRightEdge = box.x + box.width;
+        // Numbered markers ("1.") need RTL direction to display as ".1".
+        // With textAlign='right', x is the right edge — so add markerWidth.
+        // Bullet markers (•, ○, ■) stay LTR — they're symmetric.
+        const isNumbered = /\d/.test(node.listMarker);
+        if (isNumbered) {
+            markerDirection = 'rtl';
+            markerX = boxRightEdge + gap + markerWidth;
+        }
+        else {
+            markerX = boxRightEdge + gap;
+        }
+    }
+    else {
+        // LTR: marker in the parent's left padding area (outside the li box).
+        // Right-aligned within the padding, with a gap before content.
+        const contentStartX = box.x + style.borderLeftWidth + style.paddingLeft;
+        markerX = contentStartX - markerWidth - gap;
+    }
     box.children.unshift({
         type: 'text',
         text: node.listMarker,
         x: markerX,
         y: baselineY,
         width: markerWidth,
-        style: { ...style, textDecorationLine: 'none', fontWeight: 400, fontStyle: 'normal' },
+        style: { ...style, textDecorationLine: 'none', fontWeight: 400, fontStyle: 'normal', direction: markerDirection },
     });
 }
 // ─── Main entry ────────────────────────────────────────────────────────
@@ -1329,13 +1400,14 @@ function addListMarker(ctx, box, node) {
  * Build the layout tree from the styled tree using pure canvas measurement.
  * No DOM measurements used — all positions computed from CSS values + canvas.measureText.
  */
-export function getDomMeasureCount() { return _domMeasureCount; }
-export function resetDomMeasureCount() { _domMeasureCount = 0; }
 export function buildLayoutTree(ctx, styledTree, containerWidth, useDomMeasurements = true, debug) {
     _useDomMeasurements = useDomMeasurements;
     _debug = debug;
-    // Clear line height cache — fonts may have loaded since last call
+    // Clear caches — fonts may have loaded since last call
     _lineHeightCache.clear();
+    _fontMetricsCache.clear();
+    _fontStringCache.clear();
+    _measureCache.clear();
     // The styledTree root is our container div — layout its children as a block flow
     const { box, height } = layoutBlock(ctx, styledTree, 0, 0, containerWidth);
     // Add list markers post-layout