render-tag 0.1.10 → 0.1.12

package/lib/layout.js

@@ -10,8 +10,9 @@ let _lines = [];
 // 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;
+    // ctx.font and ctx.letterSpacing must already be set by caller.
+    // letterSpacing is part of the key because it changes measured width.
+    const key = ctx.font + '\0' + (ctx.letterSpacing || '') + '\0' + text;
     const cached = _measureCache.get(key);
     if (cached !== undefined)
         return cached;
@@ -42,18 +43,30 @@ export function applyFont(ctx, style) {
     ctx.font = buildCanvasFont(style);
     ctx.fontKerning = style.fontKerning === 'none' ? 'none' : 'normal';
 }
+/** Format a letter-spacing value (px) as a canvas `ctx.letterSpacing` string. */
+function formatLetterSpacing(value) {
+    // Negative letter-spacing is valid and narrows text — Chrome applies it per
+    // character (trailing included). Clamping it to 0 measured text wider than
+    // the browser renders it, causing earlier/extra line wraps. Guard against
+    // non-finite values (undefined/NaN), which would produce an invalid
+    // "undefinedpx"/"NaNpx" string that canvas silently ignores.
+    return Number.isFinite(value) && value !== 0 ? `${value}px` : '0px';
+}
 /**
  * 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 key = `${style.fontStyle}|${style.fontVariantCaps}|${style.fontWeight}|${style.fontSize}|${style.fontFamily}`;
     const cached = _fontStringCache.get(key);
     if (cached)
         return cached;
     const parts = [];
+    // CSS font shorthand order: style, variant, weight, size, family.
     if (style.fontStyle !== 'normal')
         parts.push(style.fontStyle);
+    if (style.fontVariantCaps === 'small-caps')
+        parts.push('small-caps');
     if (style.fontWeight !== 400)
         parts.push(String(style.fontWeight));
     parts.push(`${style.fontSize}px`);
@@ -152,7 +165,9 @@ function applyTextTransform(text, transform) {
     switch (transform) {
         case 'uppercase': return text.toUpperCase();
         case 'lowercase': return text.toLowerCase();
-        case 'capitalize': return text.replace(/(^|[\s\p{P}])(\p{L})/gu, (_, p, c) => p + c.toUpperCase());
+        // Capitalize the first letter of each word. A mid-word apostrophe is NOT a
+        // word boundary (UAX#29), so "o'clock" → "O'clock", not "O'Clock".
+        case 'capitalize': return text.replace(/(^|[\s\p{P}])(\p{L})/gu, (m, p, c) => p === "'" || p === '’' ? m : p + c.toUpperCase());
         default: return text;
     }
 }
@@ -185,6 +200,39 @@ export function getFontMetrics(ctx, style) {
     _fontMetricsCache.set(font, result);
     return result;
 }
+/**
+ * Baseline shift (canvas pixels, positive = downward) for a vertical-align
+ * value, applied on top of the line baseline. Returns 0 for 'baseline' and for
+ * the line-box-relative keywords 'top'/'bottom' — those need a second layout
+ * 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
+ *  - 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) {
+    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;
+        default: {
+            // baseline / top / bottom / '' all parseFloat to NaN → 0 (callers gate
+            // on isShiftedVAlign, so those never actually reach here).
+            const n = parseFloat(va);
+            if (!Number.isFinite(n))
+                return 0;
+            return va.endsWith('%') ? -(n / 100) * lineHeight : -n;
+        }
+    }
+}
+/** True when a vertical-align value moves content off the baseline. */
+function isShiftedVAlign(va) {
+    return va !== 'baseline' && va !== 'top' && va !== 'bottom' && va !== '';
+}
 /**
  * Check if two styles have the same text rendering properties.
  */
@@ -320,6 +368,13 @@ function collectTextRuns(node) {
             });
             return;
         }
+        // unicode-bidi: bidi-override (e.g. <bdo dir="rtl">) forces visual order.
+        // For an RTL override, reverse both the characters of each descendant run
+        // and the order of the runs, so the subtree renders right-to-left.
+        const ub = n.style.unicodeBidi;
+        const overrideRtl = (ub === 'bidi-override' || ub === 'isolate-override') &&
+            n.style.direction === 'rtl';
+        const overrideStart = runs.length;
         if (hasHorizSpacing) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxOpen: n.style });
         }
@@ -329,6 +384,20 @@ function collectTextRuns(node) {
         if (hasHorizSpacing) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxClose: n.style });
         }
+        if (overrideRtl && runs.length > overrideStart) {
+            const seg = runs.splice(overrideStart);
+            for (const r of seg) {
+                if (r.text) {
+                    r.text = [...r.text].reverse().join('');
+                    // The glyphs are now in visual (reversed) order, so render them
+                    // left-to-right; otherwise renderText would right-anchor x and the
+                    // LTR emission (which set x as the left edge) would misposition them.
+                    r.style = { ...r.style, direction: 'ltr' };
+                }
+            }
+            seg.reverse();
+            runs.push(...seg);
+        }
     }
     for (const child of node.children) {
         walk(child);
@@ -432,8 +501,16 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
         }
     }
     else {
-        // Split on whitespace but NOT on non-breaking spaces (\u00A0)
-        const words = text.split(/([ \t\n\r\f\v]+)/);
+        // Split on whitespace but NOT on non-breaking spaces (\u00A0).
+        // Then add a break opportunity AFTER "?" inside an otherwise-unbreakable
+        // token (the URL query delimiter): Chrome wraps "\u2026/q3?" | "lang=ar&\u2026"
+        // even with overflow-wrap:normal. It does NOT break at "/", "&", "=", "."
+        // 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.
+        const words = text
+            .split(/([ \t\n\r\f\v]+)/)
+            .flatMap((w) => /^[ \t\n\r\f\v]+$/.test(w) ? [w] : w.split(/(?<=\?)(?=.)/));
         // 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
@@ -525,7 +602,7 @@ function tokenizeRuns(ctx, runs) {
         // Must check before boxOpen/boxClose handlers since atomic has both set.
         if (run.boxOpen && run.boxClose && run.text) {
             applyFont(ctx, run.style);
-            ctx.letterSpacing = run.style.letterSpacing > 0 ? `${run.style.letterSpacing}px` : '0px';
+            ctx.letterSpacing = formatLetterSpacing(run.style.letterSpacing);
             const text = applyTextTransform(run.text, run.style.textTransform);
             const s = run.style;
             const textWidth = cachedMeasureWidth(ctx, text);
@@ -558,8 +635,33 @@ function tokenizeRuns(ctx, runs) {
             continue;
         }
         applyFont(ctx, run.style);
-        ctx.letterSpacing = run.style.letterSpacing > 0 ? `${run.style.letterSpacing}px` : '0px';
+        ctx.letterSpacing = formatLetterSpacing(run.style.letterSpacing);
         const text = applyTextTransform(run.text, run.style.textTransform);
+        // Mark the first word produced from `startLen` as having no soft-wrap
+        // opportunity before it when it directly abuts real text from a previous
+        // run (adjacent inline elements with no whitespace between them). The
+        // preceding word must be actual text — not a space, newline, empty
+        // box-padding marker, or box edge — so a whitespace/padding boundary still
+        // allows a break.
+        const markGlue = (startLen) => {
+            const first = allWords[startLen];
+            if (!first || first.isSpace || !first.text || first.text === '\n')
+                return;
+            const prev = allWords[startLen - 1];
+            if (!prev || prev.isSpace || !prev.text.trim() ||
+                prev.boxOpen || prev.boxClose)
+                return;
+            // CJK and segmenter-driven scripts (Thai/Khmer/…) have break
+            // opportunities between characters regardless of element boundaries, so
+            // an element edge between them is NOT a no-break point. Only glue when
+            // both sides are ordinary (Latin-like) text with no intrinsic break.
+            const firstChar = [...first.text][0];
+            const prevChar = [...prev.text][prev.text.length - 1];
+            if (isCJK(firstChar) || isCJK(prevChar) ||
+                needsSegmenter(first.text) || needsSegmenter(prev.text))
+                return;
+            first.noBreakBefore = true;
+        };
         // Handle explicit newlines (from <br> or pre-wrap) — always force line break
         if (text.includes('\n')) {
             const parts = text.split('\n');
@@ -568,12 +670,16 @@ function tokenizeRuns(ctx, runs) {
                     allWords.push({ text: '\n', width: 0, style: run.style, isSpace: false, boxStyle: run.boxStyle });
                 }
                 if (parts[i]) {
+                    const startLen = allWords.length;
                     tokenizeString(ctx, parts[i], run, allWords);
+                    markGlue(startLen);
                 }
             }
         }
         else {
+            const startLen = allWords.length;
             tokenizeString(ctx, text, run, allWords);
+            markGlue(startLen);
         }
     }
     return allWords;
@@ -593,27 +699,78 @@ function isCJK(char) {
         (code >= 0x20000 && code <= 0x2A6DF) // CJK Extension B
     );
 }
+let _graphemeSegmenter;
+function getGraphemeSegmenter() {
+    if (_graphemeSegmenter)
+        return _graphemeSegmenter;
+    if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+        _graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+        return _graphemeSegmenter;
+    }
+    return null;
+}
+const EMOJI_PICTOGRAPHIC = /\p{Extended_Pictographic}/u;
 /**
- * Break a word into character-level pieces if it contains CJK or if
+ * Is this grapheme cluster an emoji that creates a line-break opportunity?
+ * Restricted to emoji-presentation clusters (emoji planes, regional-indicator
+ * flags, and ZWJ/VS16 sequences) so plain text symbols like ©/®/™ — which are
+ * Extended_Pictographic but render as text and do NOT break — are excluded.
+ */
+function isEmojiCluster(s) {
+    for (const ch of s) {
+        const cp = ch.codePointAt(0);
+        if (cp >= 0x1f000)
+            return true; // emoji planes (incl. regional indicators)
+    }
+    if (s.includes('\u200D') || s.includes('\uFE0F')) {
+        return EMOJI_PICTOGRAPHIC.test(s); // ZWJ sequence or VS16 emoji presentation
+    }
+    return false;
+}
+/**
+ * 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.
  */
 function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
     // Check if word has CJK characters — always break at character level
     const hasCJK = [...word.text].some(isCJK);
+    // 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();
     // 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 && !needsBreak)
+    if (!hasCJK && !hasEmoji && !needsBreak)
         return [word];
     // 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];
+    // Re-assert letter-spacing: tokenizeRuns may have left ctx at a later run's
+    // value, but break points must use THIS word's letter-spacing.
+    ctx.letterSpacing = formatLetterSpacing(word.style.letterSpacing);
+    // When the word contains emoji, iterate by GRAPHEME cluster so multi-codepoint
+    // emoji (ZWJ families, skin tones, flags) are never split mid-cluster.
+    const seg = hasEmoji ? getGraphemeSegmenter() : null;
+    const chars = seg
+        ? [...seg.segment(word.text)].map((s) => s.segment)
+        : [...word.text];
     const pieces = [];
     let current = '';
     let currentWidth = 0;
     for (const char of chars) {
+        // Emoji clusters each get their own word — a break opportunity between
+        // adjacent emoji, matching the browser line breaker.
+        if (hasEmoji && isEmojiCluster(char)) {
+            if (current) {
+                pieces.push({ ...word, text: current, width: currentWidth });
+                current = '';
+                currentWidth = 0;
+            }
+            pieces.push({ ...word, text: char, width: cachedMeasureWidth(ctx, char) });
+            continue;
+        }
         // CJK chars always get their own word for wrapping
         if (isCJK(char)) {
             if (current) {
@@ -643,6 +800,8 @@ function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
     }
     return pieces;
 }
+/** Punctuation that cannot start a line — stays with the preceding word. */
+const TRAILING_PUNCT = /^[,.\;:!?\)\]\}'"»›]+$/;
 /**
  * Flow words into lines that fit within contentWidth.
  * Handles: word wrapping, nowrap, break-word, CJK character wrapping.
@@ -701,7 +860,8 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
         currentLine = { words: [], totalWidth: 0, lineHeight: 0 };
     }
     let afterHardBreak = true; // start of content is like after a hard break
-    for (const word of words) {
+    for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
+        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') {
@@ -734,17 +894,80 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
         const pieces = (!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;
+            }
+            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 &&
-                /^[,.\;:!?\)\]\}'"»›]+$/.test(piece.text) &&
+                TRAILING_PUNCT.test(piece.text) &&
                 currentLine.words.length > 0 &&
                 !currentLine.words[currentLine.words.length - 1].isSpace;
+            // A word that abuts the previous run with no whitespace has no soft-wrap
+            // 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;
+            // 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];
+                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)
+                        : [next];
+                    headExtra = np[0].width;
+                }
+            }
+            // A soft-hyphen break point draws a visible '-' when the line breaks
+            // right after this piece. Chrome only allows a break there if the prefix
+            // PLUS the hyphen fits, so reserve the hyphen advance in the overflow
+            // test — otherwise we pack one extra segment and the appended hyphen
+            // overflows the line (breaking one segment later than the browser).
+            let shReserve = 0;
+            if (piece.isSoftHyphenBreak) {
+                applyFont(ctx, piece.style);
+                ctx.letterSpacing = formatLetterSpacing(piece.style.letterSpacing);
+                shReserve = cachedMeasureWidth(ctx, '-');
+            }
             // Would this piece overflow?
-            if (!piece.isSpace && !isTrailingPunct && currentLine.words.length > 0 &&
-                currentLine.totalWidth + piece.width > effWidth()) {
-                const overflow = currentLine.totalWidth + piece.width - effWidth();
+            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();
                 // 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.
@@ -753,11 +976,23 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 let reallyOverflows = true;
                 if (overflow < 1 && !hasMixedFonts([...currentLine.words, piece])) {
                     applyFont(ctx, piece.style);
-                    const fullText = currentLine.words.map(w => w.text).join('') + piece.text;
-                    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 <= effWidth() + 0.1) {
+                    const fullText = currentLine.words.map(w => w.text).join('') + piece.text +
+                        (piece.isSoftHyphenBreak ? '-' : '');
+                    // Empty-text words carry non-glyph advance (inline padding/border
+                    // 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)
+                        if (!w.text)
+                            markerWidth += w.width;
+                    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).
+                    if (fullWidth <= effWidth() + 0.02) {
                         reallyOverflows = false;
                     }
                 }
@@ -765,7 +1000,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
                 // 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(/(?<=-)/);
+                    const parts = piece.text.split(/(?<=-)(?!\d)|(?<=[^\d]-)/);
                     if (parts.length > 1) {
                         applyFont(ctx, piece.style);
                         let fitted = '';
@@ -826,7 +1061,7 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
             // 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(/(?<=-)/);
+                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
@@ -951,19 +1186,27 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         // wrap at letter boundaries (no break-word/break-all), where centering
         // would put glyphs at negative x. Sub-pixel tolerance avoids switching
         // to start for rounding noise on lines that visually fit.
+        // Start edge differs by direction. LTR lines start at the left (x+indent).
+        // RTL lines are anchored at the right, inset from the content's right edge
+        // by text-indent — and lineMaxWidth already subtracts indent, so the RTL
+        // right edge is x+lineMaxWidth. `align` here is physically resolved
+        // (start/end → left/right via resolveDir), so RTL with align==='left'
+        // (explicit left, or end) correctly falls through to left alignment.
         const overflows = line.totalWidth > lineMaxWidth + 0.5;
         let curX = x + indent;
         if (overflows) {
-            curX = isRTL ? x + indent + lineMaxWidth - line.totalWidth : x + indent;
+            // Overflow fallback: pin to the start edge (CSS Text 3 §7.1).
+            curX = isRTL ? x + lineMaxWidth - line.totalWidth : x + indent;
         }
         else if (align === 'center') {
             curX = x + indent + (lineMaxWidth - line.totalWidth) / 2;
         }
-        else if (align === 'right' || (align !== 'justify' && isRTL)) {
-            curX = x + indent + lineMaxWidth - line.totalWidth;
+        else if (align === 'right') {
+            curX = (isRTL ? x + lineMaxWidth : x + indent + lineMaxWidth) - line.totalWidth;
         }
-        else if (isRTL) {
-            curX = x + indent + lineMaxWidth - line.totalWidth;
+        else if (align === 'justify' && isRTL) {
+            // RTL justify: anchor the right edge at the inset start; spaces expand left.
+            curX = x + lineMaxWidth - line.totalWidth;
         }
         // Snapshot the line's left edge before LTR emission advances curX.
         const lineLeftX = curX;
@@ -977,16 +1220,17 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         for (const word of line.words) {
             if (word.text === '')
                 continue;
-            const va = word.style.verticalAlign;
-            if (va === 'super' || va === 'sub')
-                continue; // skip sub/sup for baseline calc
+            // 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 sub/sup words on the line, use the first word's metrics
+        // 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 === '')
@@ -1000,31 +1244,27 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         // 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');
+        // 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 sub/sup extends beyond the line box.
-        // Browsers grow the line box to fit all content, but keep
-        // the normal text baseline position unchanged.
+        // 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 (va !== 'super' && va !== 'sub')
+            if (!isShiftedVAlign(va))
                 continue;
             if (parentFontSize === 0)
                 break;
             const { ascent: wAscent, descent: wDescent } = getFontMetrics(ctx, word.style);
-            let shiftedBaseline = lineBaselineY;
-            if (va === 'super') {
-                shiftedBaseline -= parentFontSize * 0.4;
-            }
-            else {
-                shiftedBaseline += parentFontSize * 0.26;
-            }
+            const shiftedBaseline = lineBaselineY +
+                verticalAlignShift(va, wAscent, wDescent, parentFontSize, maxAscent, maxDescent, lineHeight);
             const wordTop = shiftedBaseline - wAscent;
             const wordBottom = shiftedBaseline + wDescent;
             if (wordTop < lineTop)
@@ -1111,6 +1351,19 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     pendingPad += word.width;
                     continue;
                 }
+                if (word.isSpace && justifyExtraPerSpace > 0) {
+                    // Justify only: break the shaping group at the space and fold the
+                    // expansion into the inter-group advance so the line fills the width.
+                    // (Arabic does not join across spaces, so this is shaping-safe.)
+                    // When not justifying, spaces stay merged into the group text below
+                    // so the canvas BiDi engine can reorder embedded LTR runs/numbers.
+                    if (currentGroup) {
+                        groups.push(currentGroup);
+                        currentGroup = null;
+                    }
+                    pendingPad += word.width + justifyExtraPerSpace;
+                    continue;
+                }
                 if (currentGroup && sameTextStyle(currentGroup.style, word.style)) {
                     currentGroup.text += word.text;
                     currentGroup.width += word.width;
@@ -1169,13 +1422,20 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             if (hasBidiMix) {
                 applyFont(ctx, textWords[0].style);
                 const measuredWidth = cachedMeasureWidth(ctx, lineText);
+                // This line belongs to an LTR block (we're in the !isRTL branch), so it
+                // must be painted with an LTR base direction even when its first word is
+                // RTL (an RTL span that wrapped onto this line). Without forcing LTR the
+                // node inherits the first word's direction:'rtl' and the paint path
+                // right-aligns the whole line at the left edge (x=curX), drawing it
+                // off-screen. The canvas BiDi engine still reorders the embedded
+                // Arabic/Hebrew runs within the LTR line.
                 results.push({
                     type: 'text',
                     text: lineText,
                     x: curX,
                     y: lineBaselineY,
                     width: measuredWidth,
-                    style: textWords[0].style,
+                    style: { ...textWords[0].style, direction: 'ltr' },
                 });
             }
             else {
@@ -1203,14 +1463,10 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     // Adjust baseline for vertical-align
                     let baselineY = lineBaselineY;
                     const va = word.style.verticalAlign;
-                    if (va === 'super' || va === 'sub') {
+                    if (isShiftedVAlign(va)) {
                         const pfs = parentFontSize || word.style.fontSize;
-                        if (va === 'super') {
-                            baselineY -= pfs * 0.4;
-                        }
-                        else {
-                            baselineY += pfs * 0.26;
-                        }
+                        const { ascent: wA, descent: wD } = getFontMetrics(ctx, word.style);
+                        baselineY += verticalAlignShift(va, wA, wD, pfs, maxAscent, maxDescent, lineHeight);
                     }
                     const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
                     results.push({