domotion-svg 0.2.2 → 0.3.2

package/src/render/text.ts

@@ -13,6 +13,74 @@ import type { CapturedElement, TextSegment } from "../capture/types.js";
 function r(n: number): string { return Number(n.toFixed(1)).toString(); }
 function esc(s: string): string { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"); }
 
+/**
+ * Emit `<line>` markup for each non-zero side border on a pseudo-element box.
+ * Used for non-uniform pseudo borders (e.g. Slashdot's `.carouselHeading::after`
+ * with a bare `border-bottom`) where the surrounding `<rect>` already painted
+ * the box's fill/radius but its `stroke` shorthand can't represent a single-
+ * side border. Returns "" when the box has no per-side borders.
+ */
+function renderPseudoBoxPerSideBorders(pb: NonNullable<TextSegment["pseudoBox"]>): string {
+  const lines: string[] = [];
+  // Stroke at the centre of the border-side, so half-width insets are
+  // applied to the rect's edges to keep the stroke pixel-aligned with what
+  // CSS paints (CSS paints borders inset to the box's outer edges, with the
+  // stroke centre offset by half the border width from the rect edge).
+  const x2 = pb.x + pb.width;
+  const y2 = pb.y + pb.height;
+  if (pb.borT != null && pb.borT > 0 && pb.borderTopColor != null) {
+    const cy = pb.y + pb.borT / 2;
+    lines.push(`<line x1="${r(pb.x)}" y1="${r(cy)}" x2="${r(x2)}" y2="${r(cy)}" stroke="${esc(pb.borderTopColor)}" stroke-width="${r(pb.borT)}"/>`);
+  }
+  if (pb.borR != null && pb.borR > 0 && pb.borderRightColor != null) {
+    const cx = x2 - pb.borR / 2;
+    lines.push(`<line x1="${r(cx)}" y1="${r(pb.y)}" x2="${r(cx)}" y2="${r(y2)}" stroke="${esc(pb.borderRightColor)}" stroke-width="${r(pb.borR)}"/>`);
+  }
+  if (pb.borB != null && pb.borB > 0 && pb.borderBottomColor != null) {
+    const cy = y2 - pb.borB / 2;
+    lines.push(`<line x1="${r(pb.x)}" y1="${r(cy)}" x2="${r(x2)}" y2="${r(cy)}" stroke="${esc(pb.borderBottomColor)}" stroke-width="${r(pb.borB)}"/>`);
+  }
+  if (pb.borL != null && pb.borL > 0 && pb.borderLeftColor != null) {
+    const cx = pb.x + pb.borL / 2;
+    lines.push(`<line x1="${r(cx)}" y1="${r(pb.y)}" x2="${r(cx)}" y2="${r(y2)}" stroke="${esc(pb.borderLeftColor)}" stroke-width="${r(pb.borL)}"/>`);
+  }
+  return lines.join("");
+}
+
+/**
+ * DM-783: parse a resolved `transform-origin` string (`"50px 50px"`,
+ * `"50px 50px 0px"`) into an `(ox, oy)` pair in px relative to the pseudoBox's
+ * top-left. Chrome's getComputedStyle always returns px values (never
+ * keywords like "left top" or "%"), so we just split + parseFloat. The
+ * 3rd Z component is ignored — we only paint 2D. Falls back to the box
+ * center when the value is missing or unparseable, matching Chrome's
+ * `50% 50%` default.
+ */
+function parsePseudoTransformOrigin(originCss: string | undefined, width: number, height: number): { ox: number; oy: number } {
+  const center = { ox: width / 2, oy: height / 2 };
+  if (originCss == null || originCss === "") return center;
+  const parts = originCss.split(/\s+/).map((p) => parseFloat(p));
+  if (parts.length < 2 || !Number.isFinite(parts[0]) || !Number.isFinite(parts[1])) return center;
+  return { ox: parts[0], oy: parts[1] };
+}
+
+/**
+ * DM-783: when the pseudoBox carries a `transform`, wrap `inner` in a
+ * `<g transform="…">` that pre-bakes the rotation/scale around the captured
+ * `transform-origin` — `translate(tx,ty) <css-transform> translate(-tx,-ty)`
+ * where `(tx, ty)` is the origin in viewport coords. SVG accepts the CSS
+ * matrix() / rotate() / scale() / translate() / skew() forms unchanged
+ * (column-major convention matches), so `pb.transform` pastes in verbatim.
+ * Returns `inner` unwrapped when no transform was captured.
+ */
+function pseudoBoxTransformWrap(pb: NonNullable<TextSegment["pseudoBox"]>, inner: string): string {
+  if (pb.transform == null || pb.transform === "" || pb.transform === "none") return inner;
+  const { ox, oy } = parsePseudoTransformOrigin(pb.transformOrigin, pb.width, pb.height);
+  const tx = pb.x + ox;
+  const ty = pb.y + oy;
+  return `<g transform="translate(${r(tx)} ${r(ty)}) ${pb.transform} translate(${r(-tx)} ${r(-ty)})">${inner}</g>`;
+}
+
 /**
  * Replace any UTF-16 code units flagged with `suppressGlyph` in the segment's
  * raster overlays with U+200B (zero-width space). The path renderer emits no
@@ -21,18 +89,58 @@ function esc(s: string): string { return s.replace(/&/g, "&amp;").replace(/</g,
  * Used for ::first-letter drop caps (DM-439) where the body-size path glyph
  * would otherwise show through behind the styled rasterized big letter.
  */
+// DM-719: pull `-webkit-text-stroke-width / -color` + `paint-order` off the
+// element styles into the trio of args `renderTextAsPath` expects. Returns
+// `{ width: 0 }` when no stroke is set so the renderer keeps the unstroked
+// fast path.
+function textStrokeParams(styles: { webkitTextStrokeWidth?: string; webkitTextStrokeColor?: string; paintOrder?: string }): { width: number; color: string; paintOrder: string } {
+  const widthCss = styles.webkitTextStrokeWidth;
+  if (widthCss == null || widthCss === "" || widthCss === "0px" || widthCss === "0") {
+    return { width: 0, color: "", paintOrder: "" };
+  }
+  const width = parseFloat(widthCss);
+  if (!Number.isFinite(width) || width <= 0) {
+    return { width: 0, color: "", paintOrder: "" };
+  }
+  return {
+    width,
+    color: styles.webkitTextStrokeColor ?? "currentColor",
+    paintOrder: styles.paintOrder ?? "",
+  };
+}
+
 function suppressGlyphChars(text: string, seg: TextSegment | undefined): string {
-  if (seg?.rasterGlyphs == null) return text;
+  // DM-692: Chrome paints a visible hyphen at line-break points marked by
+  // a soft-hyphen (U+00AD); SHYs not at the break paint nothing. Our
+  // capture's per-char Range loop keeps EVERY SHY in the captured line
+  // text (the height check at the line-break-pos doesn't zero them out),
+  // so we have to disambiguate at render time: ONLY the trailing SHY of a
+  // line is the visible hyphen — substitute with U+002D. Every other SHY
+  // gets U+200B (zero-width space) so it preserves UTF-16 indexing for
+  // xOffsets/rasterGlyphs but produces no glyph and no advance.
+  const SHY = String.fromCharCode(0x00AD);
+  const ZWSP = String.fromCharCode(0x200B);
+  let normalized = text;
+  if (text.indexOf(SHY) >= 0) {
+    const lastNonWs = normalized.replace(/\s+$/, "").length - 1;
+    let out = "";
+    for (let i = 0; i < normalized.length; i++) {
+      const ch = normalized[i];
+      if (ch === SHY) out += (i === lastNonWs ? "-" : ZWSP);
+      else out += ch;
+    }
+    normalized = out;
+  }
+  if (seg?.rasterGlyphs == null) return normalized;
   const suppress = seg.rasterGlyphs.filter((g) => g.suppressGlyph === true);
-  if (suppress.length === 0) return text;
+  if (suppress.length === 0) return normalized;
   // text is a UTF-16 string; charIndex is a UTF-16 position. U+200B is one
   // UTF-16 unit so the substitution preserves text length and xOffsets
   // alignment.
-  const ZWSP = String.fromCharCode(0x200B);
   let out = "";
-  for (let i = 0; i < text.length; i++) {
+  for (let i = 0; i < normalized.length; i++) {
     const drop = suppress.some((g) => g.charIndex === i);
-    out += drop ? ZWSP : text[i];
+    out += drop ? ZWSP : normalized[i];
   }
   return out;
 }
@@ -67,7 +175,19 @@ export function rasterGlyphOverlays(seg: TextSegment, fallbackFontSize: number,
     // squished tall line-box rects horizontally — flag emoji and other
     // raster glyphs rendered visibly larger than Chrome's actual paint
     // (DM-401 / DM-411 / DM-414).
-    out.push(`<image href="${g.dataUri}" x="${r(g.rect.x)}" y="${r(g.rect.y)}" width="${r(g.rect.width)}" height="${r(g.rect.height)}" preserveAspectRatio="none" clip-path="url(#${clipId})"/>`);
+    // DM-823: floated `::first-letter` drop caps (`float: left; font-size: Nem;
+    // initial-letter: N M`) paint OUTSIDE their parent paragraph's box —
+    // Chrome's float layout naturally extends the W / B / T above and to the
+    // left of the `<p>` border-box. Capture marks these per-char rasters with
+    // `suppressGlyph: true` so the underlying path glyph isn't double-emitted
+    // (DM-439). Use that same flag here as a signal to OMIT the parent's
+    // overflow-clip on the raster `<image>`: the parent's clip rect is the
+    // `<p>`'s own bounds, which clips off the top portion of the drop cap
+    // exactly where the float overflows. For non-drop-cap raster glyphs
+    // (emoji in the middle of text) the parent clip is still desirable.
+    const skipClip = g.suppressGlyph === true;
+    const clipAttr = skipClip ? "" : ` clip-path="url(#${clipId})"`;
+    out.push(`<image href="${g.dataUri}" x="${r(g.rect.x)}" y="${r(g.rect.y)}" width="${r(g.rect.width)}" height="${r(g.rect.height)}" preserveAspectRatio="none"${clipAttr}/>`);
   }
   return out.join("");
 }
@@ -110,11 +230,13 @@ function renderTextDecoration(
   const has = (k: string) => textDecorationLine.includes(k);
   const dash = (thick: number) => style === "dashed" ? ` stroke-dasharray="${thick * 2} ${thick * 2}"`
     : style === "dotted" ? ` stroke-dasharray="${thick} ${thick}"` : "";
-  // Skip-ink applies only to solid + double underlines per Chromium
-  // (`decoration_line_painter.cc::Paint` short-circuits on dashed / dotted /
-  // wavy). We compute gaps once if any underline emit needs them.
+  // Skip-ink applies to solid + double + wavy underlines per Chromium's
+  // current behaviour (`decoration_line_painter.cc::Paint`; verified against
+  // Chrome's painted output for the 20-deep-wavy-underline-descenders
+  // fixture — DM-814). Dashed / dotted still short-circuit. We compute gaps
+  // once if any underline emit needs them.
   const skipInkActive = (skipInk == null || skipInk === "auto") && runText != null && runText !== ""
-    && (style == null || style === "solid" || style === "double" || style === "");
+    && (style == null || style === "solid" || style === "double" || style === "wavy" || style === "");
   // Compute X-range gaps where the underline rect crosses glyph ink. Returned
   // gaps are run-relative (0 = segX); subSegments() splits the underline span
   // around them.
@@ -170,15 +292,63 @@ function renderTextDecoration(
       const tc = explicitThickness ? Math.max(1, t) : Math.max(1, fontSize / 10);
       const wavelength = 1 + 2 * Math.round(2 * tc + 0.5);
       const cpDist = 0.5 + Math.round(3 * tc + 0.5);
-      let d = `M ${r(segX)} ${r(y)}`;
-      let x = segX;
-      while (x < segX + segWidth) {
-        const nx = Math.min(x + wavelength, segX + segWidth);
-        const cpX = x + wavelength / 2;
-        d += ` C ${r(cpX)} ${r(y + cpDist)} ${r(cpX)} ${r(y - cpDist)} ${r(nx)} ${r(y)}`;
-        x = nx;
+      // DM-830: re-probed against native Chromium (`tools/probe-wavy-geom5.mjs`)
+      // at fs={12, 16, 24, 36} × thickness={1, 2, 3, 4, 6}, measuring wave
+      // centre-y and peak amplitude against the descender-less 'm' baseline.
+      // Two findings differed from the earlier DM-446 calibration:
+      //
+      //  (1) Chrome paints amplitude `~0.278 × cpDist` (was 0.289). Across the
+      //      sample matrix: t=1→1.25, t=2→2.00, t=3→3.00, t=4→3.75, t=6→5.50
+      //      — Chrome's `cpDist`-to-amplitude ratio is consistently 0.27-0.28,
+      //      NOT the cubic-Bezier-geometric 0.289 = √3/(2π/n) factor we'd
+      //      derived analytically. Either Chrome uses a different
+      //      bezier-flatness setting or its wavy is actually a different
+      //      curve family at the painted scale.
+      //
+      //  (2) Wave centre-y is INDEPENDENT of fontSize (the previous formula
+      //      `y + 2 * amplitude` produced wave-y identical across font sizes
+      //      because `y = baseline + 1.5×t` itself was thickness-only; the
+      //      empirical pattern just confirms this). Centre-y DOES depend on
+      //      thickness: yCenter - baseline ≈ 2 + t/2 + amplitude. This is
+      //      consistent with "the wave's TOP edge sits exactly at the solid-
+      //      underline BOTTOM edge, leaving descender region clear" — where
+      //      Chrome's auto solid underline at thickness `t` paints at
+      //      baseline + 2 - t/2 to baseline + 2 + t/2.
+      //
+      // `y` passed into `emitLine` already equals `baseline + 1.5×t + extra`
+      // (the extra is the author's text-underline-offset). The new formula
+      // `yWave = y + amp + 2 - t` algebraically reduces to
+      // `baseline + 2 + 0.5×t + amp + extra`, matching the probed wave centre.
+      // For uniform text-underline-offset = 0, errors stay ≤ 0.4 px across
+      // the probed thickness range.
+      const waveAmplitude = 0.278 * cpDist;
+      const yWave = y + waveAmplitude + 2 - tc;
+      // DM-814: skip-ink for wavy. Compute gaps using the wave's full
+      // vertical extent (2*amplitude + stroke thickness) so a descender that
+      // pokes into the wave's PEAK or TROUGH zones breaks the wave, not just
+      // descenders that cross the centerline. Then emit one wave path per
+      // non-gap sub-segment. Each sub-segment's wave starts at phase 0 at
+      // its own x0 — adjacent segments aren't strictly phase-coherent with a
+      // hypothetical continuous wave, but the descender gap is usually wider
+      // than the discontinuity which makes the visual indistinguishable from
+      // Chrome's per-glyph break style.
+      const bandThickness = 2 * waveAmplitude + tc;
+      const wavyGaps = isUnderline ? computeGapsAt(yWave - baselineY, bandThickness) : [];
+      const subs = subSegments(wavyGaps);
+      const parts: string[] = [];
+      for (const { x0: sx0, x1: sx1 } of subs) {
+        if (sx1 - sx0 < 0.5) continue;
+        let d = `M ${r(sx0)} ${r(yWave)}`;
+        let x = sx0;
+        while (x < sx1) {
+          const nx = Math.min(x + wavelength, sx1);
+          const cpX = x + wavelength / 2;
+          d += ` C ${r(cpX)} ${r(yWave + cpDist)} ${r(cpX)} ${r(yWave - cpDist)} ${r(nx)} ${r(yWave)}`;
+          x = nx;
+        }
+        parts.push(`<path d="${d}" fill="none" stroke="${decorationColor}" stroke-width="${r(tc)}"/>`);
       }
-      return `<path d="${d}" fill="none" stroke="${decorationColor}" stroke-width="${r(tc)}"/>`;
+      return parts.join("");
     }
     if (style === "double") {
       // Double: two parallel lines. Per Chromium's `decoration_line_painter
@@ -279,6 +449,13 @@ interface RenderTextOpts {
    *  false, path-mode text renders without a clip-path so default
    *  `overflow: visible` text can spill past the box edge as Chrome paints. */
   overflowClip?: boolean;
+  /** DM-782: emit the pseudoBox's `background-image` (gradient / url() layers)
+   *  as SVG paint server defs + a covering `<rect>` per layer. Returned
+   *  markup is the rect string(s), inserted BEFORE the glyph emit so the
+   *  gradient paints under the text. Caller (main render loop) owns
+   *  `defsParts` / `clipIdx` and provides this closure; standalone callers
+   *  (unit tests) pass undefined and the gradient layers are skipped. */
+  emitPseudoBoxBgLayers?: (pb: { x: number; y: number; width: number; height: number; backgroundImage: string; borderRadius?: number }) => string;
 }
 
 /**
@@ -386,10 +563,64 @@ function mergeFeatureLists(a: string[] | undefined, b: string[] | undefined): st
   return out;
 }
 
+/**
+ * DM-680: anisotropic-ancestor scale correction. When the element sits inside
+ * a `transform: scale(sx, sy)` with sx ≠ sy, the capture script already
+ * folded the geometric mean of (sx, sy) into fontSize / fontAscent / fontDescent
+ * — that produces correct glyph metrics for the uniform / isotropic case but
+ * leaves an axis ratio still to apply (Chrome paints glyphs into post-transform
+ * device space, where width scales by sx and height by sy independently). Wrap
+ * the text emission in a per-axis correction `<g transform=...>` pivoted around
+ * the text origin so the net visual scale is exactly (sx, sy).
+ *
+ * DM-822: callers that emit per-char positions FROM CAPTURED xOffsets must
+ * also call `anisotropicCorrectionXOffsets` to pre-divide those xOffsets by
+ * (cx, cy). The captured xOffsets are post-transform (= native_x × sx)
+ * already; without the pre-division, the wrap's outer scale multiplies them
+ * a second time and inter-glyph spacing comes out 1.5×–2× too wide on
+ * fixtures like `21-deep-anisotropic-scale`'s `scale(1.6, 0.7)` box. The
+ * per-axis (cx, cy) factors are `sx/geo` and `sy/geo` so that geo×cx == sx
+ * exactly; dividing xOffsetsRel by cx (which is what the wrap is about to
+ * multiply by) is the exact inverse and leaves the post-wrap glyph
+ * positions equal to the captured xOffsets.
+ */
+function getAnisotropicCorrectionFactors(el: { cumScaleX?: number; cumScaleY?: number }): { cx: number; cy: number } | null {
+  const sx = el.cumScaleX;
+  const sy = el.cumScaleY;
+  if (sx == null || sy == null || sx === sy) return null;
+  const geo = Math.sqrt(sx * sy);
+  if (geo === 0) return null;
+  const cx = sx / geo;
+  const cy = sy / geo;
+  if (Math.abs(cx - 1) < 1e-4 && Math.abs(cy - 1) < 1e-4) return null;
+  return { cx, cy };
+}
+
+function anisotropicCorrectionXOffsets(el: { cumScaleX?: number; cumScaleY?: number }, xOffsetsRel: number[] | undefined): number[] | undefined {
+  if (xOffsetsRel == null) return xOffsetsRel;
+  const f = getAnisotropicCorrectionFactors(el);
+  if (f == null) return xOffsetsRel;
+  // xOffsetsRel is in user-space, relative to the text origin (the wrap's
+  // pivot). Dividing by cx pre-shrinks the inter-glyph spacing so that the
+  // wrap's scale(cx, cy) multiplies it back to the captured xOffsets.
+  return xOffsetsRel.map((v) => v / f.cx);
+}
+
+function anisotropicCorrectionWrap(el: { cumScaleX?: number; cumScaleY?: number; textLeft?: number; textTop?: number; x: number; y: number }, body: string): string {
+  const f = getAnisotropicCorrectionFactors(el);
+  if (f == null) return body;
+  // Pivot around the text origin so the correction stretches glyphs in place
+  // rather than translating the whole block.
+  const px = el.textLeft ?? el.x;
+  const py = el.textTop ?? el.y;
+  return `<g transform="translate(${r(px)} ${r(py)}) scale(${r(f.cx)} ${r(f.cy)}) translate(${r(-px)} ${r(-py)})">${body}</g>`;
+}
+
 /**
  * Render a single-line text element.
  */
 export function renderSingleLineText(opts: RenderTextOpts): string {
+  const _ts = textStrokeParams(opts.el.styles);
   const { el, clipId, fillColor } = opts;
   // Raster fallback (DM-626 follow-up to DM-583): when the only segment
   // is a pseudo whose codepoints fontkit can't shape (e.g. icon-font
@@ -422,7 +653,9 @@ export function renderSingleLineText(opts: RenderTextOpts): string {
   const dir = el.styles.direction === "rtl" ? "rtl" : "ltr";
   const reordered = applyBidi(pathTextRaw, xOffsetsRelRaw, dir);
   const pathText = reordered.text;
-  const xOffsetsRel = reordered.xOffsets;
+  // DM-822: pre-divide xOffsetsRel by cx when an anisotropic correction
+  // wrap will multiply positions on emit. No-op for uniform-scale text.
+  const xOffsetsRel = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
   const features = mergeFeatureLists(
     resolveCapsFeatures(singleSeg?.fontVariant, el.styles.fontVariantCaps),
     parseFontFeatureSettings(el.styles.fontFeatureSettings),
@@ -441,6 +674,12 @@ export function renderSingleLineText(opts: RenderTextOpts): string {
   // DM-513: pseudo-element font-family override (e.g. icon font on
   // `[class^="icon-"]:before { font-family: "sdicon" }`).
   const segFontFamily = singleSeg?.fontFamily ?? fontFamily;
+  // Pseudo-element font-style override (Slashdot's `.carouselHeading::after`
+  // is italic on a non-italic host). The multi-segment path already did the
+  // `seg.fontStyle ?? el.styles.fontStyle` fallback below; the single-segment
+  // path was reading host fontStyle exclusively, so a pseudo's italic was
+  // silently swallowed.
+  const segFontStyle = singleSeg?.fontStyle ?? el.styles.fontStyle;
   // DM-507: when the single segment is a pseudo with its own paint box
   // (background-color / border-radius / border), emit a <rect> behind the
   // glyphs. Same as the multi-segment path; without this the badge / pill
@@ -448,12 +687,26 @@ export function renderSingleLineText(opts: RenderTextOpts): string {
   const singleSegBoxMarkup = (singleSeg?.pseudoBox != null) ? (() => {
     const pb = singleSeg.pseudoBox!;
     const fillAttr = pb.backgroundColor != null ? ` fill="${esc(pb.backgroundColor)}"` : ` fill="none"`;
-    const rxAttr = pb.borderRadius != null && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}" ry="${r(pb.borderRadius)}"` : "";
+    // Clamp the pseudo's border-radius to half the SHORTER side so a pill
+    // (e.g. `border-radius: 100px` on a 90×40 button) renders as a capsule
+    // — flat top/bottom + fully-rounded ends — instead of an ellipse with
+    // rx and ry capped independently. Mirrors the inset() clip-path fix
+    // (CSS Backgrounds 3 §5.5 uniform-scale rule) for the pseudo-box path.
+    const clampedBR = pb.borderRadius != null && pb.borderRadius > 0
+      ? Math.min(pb.borderRadius, pb.width / 2, pb.height / 2) : 0;
+    const rxAttr = clampedBR > 0 ? ` rx="${r(clampedBR)}" ry="${r(clampedBR)}"` : "";
     const strokeAttr = pb.borderWidth != null && pb.borderWidth > 0 && pb.borderColor != null
       ? ` stroke="${esc(pb.borderColor)}" stroke-width="${r(pb.borderWidth)}"` : "";
-    return `<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>`;
+    // DM-782: gradient/url() background-image layers paint BETWEEN the flat
+    // bg-color (bottom) and the text glyphs (top). Caller threads defsParts
+    // + clipIdx through `emitPseudoBoxBgLayers`; when that closure is absent
+    // (standalone callers / unit tests) we just skip the gradient layers.
+    const bgImageMarkup = (pb.backgroundImage != null && pb.backgroundImage !== "none" && pb.backgroundImage !== "" && opts.emitPseudoBoxBgLayers != null)
+      ? opts.emitPseudoBoxBgLayers({ x: pb.x, y: pb.y, width: pb.width, height: pb.height, backgroundImage: pb.backgroundImage, borderRadius: clampedBR > 0 ? clampedBR : undefined })
+      : "";
+    return `<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>${bgImageMarkup}${renderPseudoBoxPerSideBorders(pb)}`;
   })() : "";
-  const result = renderTextAsPath(pathText, tl, tt, segFontSize, segFontFamily, segFontWeight, segColor, undefined, el.textWidth, xOffsetsRel, el.styles.fontStyle, segAscent, features, el.styles.lang, variationSettings);
+  const result = renderTextAsPath(pathText, tl, tt, segFontSize, segFontFamily, segFontWeight, segColor, undefined, el.textWidth, xOffsetsRel, segFontStyle, segAscent, features, el.styles.lang, variationSettings, _ts.width, _ts.color, _ts.paintOrder);
   if (result != null) {
     const decoColor = (el.styles.textDecorationColor && el.styles.textDecorationColor !== "currentcolor")
       ? el.styles.textDecorationColor : segColor;
@@ -472,10 +725,18 @@ export function renderSingleLineText(opts: RenderTextOpts): string {
     // lets text extend past the box edge, so the unconditional clip from
     // an earlier draft over-cut text on `word-wrap: break-word` paragraphs
     // whose last char measured a fraction of a px past `el.x + el.width`.
+    //
+    // DM-783: when the pseudo carries a CSS `transform`, wrap box + glyphs +
+    // decoration + raster overlay together so the rotation/scale pivots
+    // around the captured `transform-origin` and the text rotates WITH the
+    // box (e.g. a `::after { transform: rotate(-15deg) }` rotated pill keeps
+    // its label aligned to the pill, not the host's baseline).
+    const inner = `${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}`;
+    const transformed = (singleSeg?.pseudoBox != null) ? pseudoBoxTransformWrap(singleSeg.pseudoBox, inner) : inner;
     if (opts.overflowClip) {
-      return `<g clip-path="url(#${clipId})">${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}</g>`;
+      return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${transformed}</g>`);
     }
-    return `${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}`;
+    return anisotropicCorrectionWrap(el, transformed);
   }
 
   // DM-490 / DM-500: when the text is entirely Private Use Area codepoints
@@ -514,6 +775,7 @@ export function renderSingleLineText(opts: RenderTextOpts): string {
  * Render multi-segment text (mixed content like: <p>Text <code>x</code> more</p>).
  */
 export function renderMultiSegmentText(opts: RenderTextOpts, segments: TextSegment[]): string {
+  const _ts = textStrokeParams(opts.el.styles);
   const { el, clipId, fillColor } = opts;
   const elFontSize = parseFloat(el.styles.fontSize) || 14;
   const fontFamily = el.styles.fontFamily;
@@ -542,13 +804,33 @@ export function renderMultiSegmentText(opts: RenderTextOpts, segments: TextSegme
     // background-color or border-radius (badges / pills / chips) need a
     // <rect> behind the text glyphs. Captured at CAPTURE_SCRIPT time once
     // seg.x/y is in its final viewport-relative position; we just emit it.
+    //
+    // DM-783: per-segment buffer so a pseudo's `transform` wraps box + glyphs
+    // + decoration + raster overlay together (the rotation/scale must pivot
+    // around the pseudo's box, not the host's baseline). Non-pseudo segments
+    // — and pseudos without a transform — flush straight into `parts` with no
+    // wrapping, preserving the prior emit order byte-for-byte.
+    const segParts: string[] = [];
     if (seg.pseudoBox != null) {
       const pb = seg.pseudoBox;
       const fillAttr = pb.backgroundColor != null ? ` fill="${esc(pb.backgroundColor)}"` : ` fill="none"`;
-      const rxAttr = pb.borderRadius != null && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}" ry="${r(pb.borderRadius)}"` : "";
+      // Clamp the pseudo's border-radius to half the SHORTER side so a pill
+    // (e.g. `border-radius: 100px` on a 90×40 button) renders as a capsule
+    // — flat top/bottom + fully-rounded ends — instead of an ellipse with
+    // rx and ry capped independently. Mirrors the inset() clip-path fix
+    // (CSS Backgrounds 3 §5.5 uniform-scale rule) for the pseudo-box path.
+    const clampedBR = pb.borderRadius != null && pb.borderRadius > 0
+      ? Math.min(pb.borderRadius, pb.width / 2, pb.height / 2) : 0;
+    const rxAttr = clampedBR > 0 ? ` rx="${r(clampedBR)}" ry="${r(clampedBR)}"` : "";
       const strokeAttr = pb.borderWidth != null && pb.borderWidth > 0 && pb.borderColor != null
         ? ` stroke="${esc(pb.borderColor)}" stroke-width="${r(pb.borderWidth)}"` : "";
-      parts.push(`<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>`);
+      // DM-782: gradient/url() background-image layers paint between flat
+      // bg-color (bottom) and text glyphs (top). See `RenderTextOpts.
+      // emitPseudoBoxBgLayers` for the closure-injection rationale.
+      const bgImageMarkup = (pb.backgroundImage != null && pb.backgroundImage !== "none" && pb.backgroundImage !== "" && opts.emitPseudoBoxBgLayers != null)
+        ? opts.emitPseudoBoxBgLayers({ x: pb.x, y: pb.y, width: pb.width, height: pb.height, backgroundImage: pb.backgroundImage, borderRadius: clampedBR > 0 ? clampedBR : undefined })
+        : "";
+      segParts.push(`<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>${bgImageMarkup}${renderPseudoBoxPerSideBorders(pb)}`);
     }
     // Per-segment overrides from ::before / ::after pseudos (color, fontSize,
     // fontWeight). Fall back to the element's styles when the segment has no
@@ -576,42 +858,61 @@ export function renderMultiSegmentText(opts: RenderTextOpts, segments: TextSegme
     // text anchors glyphs at the exact Chromium-measured positions.
     const xOffsetsRelRaw = seg.xOffsets != null ? seg.xOffsets.map((v) => v - seg.x) : undefined;
     const reordered = applyBidi(suppressGlyphChars(seg.text, seg), xOffsetsRelRaw, dir);
+    // DM-822: anisotropic correction — see `anisotropicCorrectionXOffsets`.
+    const segXOffsets = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
     const segAscent = seg.fontAscent ?? el.fontAscent;
-    const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, segFontFamily, segFontWeight, segColor, undefined, undefined, reordered.xOffsets, segFontStyle, segAscent, segFeatures, el.styles.lang, elVariationSettings);
-    if (result != null) { parts.push(result); }
-    else if (!isAllPrivateUseArea(seg.text)) {
+    const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, segFontFamily, segFontWeight, segColor, undefined, undefined, segXOffsets, segFontStyle, segAscent, segFeatures, el.styles.lang, elVariationSettings, _ts.width, _ts.color, _ts.paintOrder);
+    if (result != null) { segParts.push(result); }
+    else if (!isAllPrivateUseArea(seg.text) && reordered.text.replace(/[\s​]/g, "") !== "") {
       // Fallback to CSS <text> if path rendering fails. DM-490 / DM-500: when
       // the segment text is entirely Private Use Area (icon-font codepoints
       // we couldn't resolve to a real glyph), suppress the <text> fallback
       // too — Chromium's UA fallback paints the same notdef tofu we already
       // suppressed at the path level, defeating the point.
+      // DM-779: same logic for `::first-letter` drop caps — when every glyph
+      // in the segment was a `suppressGlyph` rasterGlyph target (e.g. the
+      // floated drop-cap letter sitting on its own line), `reordered.text`
+      // collapses to all-ZWSP and the raster overlay paints the visible
+      // glyph; emitting `seg.text` in the `<text>` fallback would paint a
+      // duplicate body-size copy of the letter behind the raster.
       const ff = segFontFamily.replace(/"/g, "'");
       const baseStyle = `font-family:${ff};font-size:${r(segFontSize)}px;font-weight:${segFontWeight};font-kerning:normal;font-optical-sizing:auto;`;
       const sy = seg.y + seg.height / 2;
-      parts.push(`<text x="${r(seg.x)}" y="${r(sy)}" dominant-baseline="central" fill="${segColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(seg.text)}</text>`);
+      segParts.push(`<text x="${r(seg.x)}" y="${r(sy)}" dominant-baseline="central" fill="${segColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(seg.text)}</text>`);
     }
     const segDecoBaselineY = Math.round(seg.y + (segAscent ?? segFontSize));
     const decoMarkup = renderTextDecoration(decoLine, decoColor, decoStyle, seg.x, segDecoBaselineY, seg.width, segFontSize, segFontFamily, segFontWeight, el.styles.fontStyle, el.styles.textDecorationThickness, el.styles.textUnderlineOffset, reordered.text, el.styles.textDecorationSkipInk, segFeatures);
-    if (decoMarkup !== "") parts.push(decoMarkup);
+    if (decoMarkup !== "") segParts.push(decoMarkup);
     // Per-char raster overlays (SK-1090). Emoji inline with path-rendered
     // text get their actual Chrome-painted pixels stamped over the position.
     const rasterOverlay = rasterGlyphOverlays(seg, segFontSize, clipId);
-    if (rasterOverlay !== "") parts.push(rasterOverlay);
+    if (rasterOverlay !== "") segParts.push(rasterOverlay);
+    // DM-783: when the segment's pseudo carries a CSS transform, wrap the
+    // accumulated box + glyphs + decoration + raster overlay so all four
+    // rotate together around the captured transform-origin. No-op for non-
+    // pseudo segments (`seg.pseudoBox == null`) and for pseudos without a
+    // transform — both flush through unchanged.
+    if (seg.pseudoBox != null && seg.pseudoBox.transform != null && seg.pseudoBox.transform !== "" && seg.pseudoBox.transform !== "none") {
+      parts.push(pseudoBoxTransformWrap(seg.pseudoBox, segParts.join("")));
+    } else {
+      for (const sp of segParts) parts.push(sp);
+    }
   }
 
   // Wrap the multi-segment output in the element's clip-path only when the
   // element actually overflow-clips (DM-305) — see comment in
   // renderSingleLineText for why an unconditional clip is wrong.
   if (opts.overflowClip) {
-    return `<g clip-path="url(#${clipId})">${parts.join("\n")}</g>`;
+    return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${parts.join("\n")}</g>`);
   }
-  return parts.join("\n");
+  return anisotropicCorrectionWrap(el, parts.join("\n"));
 }
 
 /**
  * Render multi-line text (pre blocks).
  */
 export function renderMultiLineText(opts: RenderTextOpts): string {
+  const _ts = textStrokeParams(opts.el.styles);
   const { el, clipId, fillColor } = opts;
   const fontSize = parseFloat(el.styles.fontSize) || 14;
   const fontFamily = el.styles.fontFamily;
@@ -640,11 +941,13 @@ export function renderMultiLineText(opts: RenderTextOpts): string {
     for (const seg of el.textSegments) {
       const xOffsetsRelRaw = seg.xOffsets != null ? seg.xOffsets.map((v) => v - seg.x) : undefined;
       const reordered = applyBidi(suppressGlyphChars(seg.text, seg), xOffsetsRelRaw, dir);
+      // DM-822: anisotropic correction — see `anisotropicCorrectionXOffsets`.
+      const segXOffsets = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
       const segFontSize = seg.fontSize ?? fontSize;
       const segFontWeight = seg.fontWeight ?? fontWeight;
       const segColor = seg.color ?? fillColor;
       const segAscent = seg.fontAscent ?? el.fontAscent;
-      const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, fontFamily, segFontWeight, segColor, undefined, undefined, reordered.xOffsets, el.styles.fontStyle, segAscent, ffsFeatures, el.styles.lang, fvsAxes);
+      const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, fontFamily, segFontWeight, segColor, undefined, undefined, segXOffsets, el.styles.fontStyle, segAscent, ffsFeatures, el.styles.lang, fvsAxes, _ts.width, _ts.color, _ts.paintOrder);
       if (result != null) parts.push(`  ${result}`);
     }
   } else {
@@ -653,18 +956,19 @@ export function renderMultiLineText(opts: RenderTextOpts): string {
       const line = lines[li];
       if (line === "") continue;
       const lineY = startY + li * lineHeight;
-      const result = renderTextAsPath(line, startX, lineY, fontSize, fontFamily, fontWeight, fillColor, undefined, undefined, undefined, el.styles.fontStyle, el.fontAscent, ffsFeatures, el.styles.lang, fvsAxes);
+      const result = renderTextAsPath(line, startX, lineY, fontSize, fontFamily, fontWeight, fillColor, undefined, undefined, undefined, el.styles.fontStyle, el.fontAscent, ffsFeatures, el.styles.lang, fvsAxes, _ts.width, _ts.color, _ts.paintOrder);
       if (result != null) parts.push(`  ${result}`);
     }
   }
   parts.push("</g>");
-  return parts.join("\n");
+  return anisotropicCorrectionWrap(el, parts.join("\n"));
 }
 
 /**
  * Render input/textarea text.
  */
 export function renderInputText(opts: RenderTextOpts): string {
+  const _ts = textStrokeParams(opts.el.styles);
   const { el, clipId, fillColor } = opts;
   // Textarea content was rasterized via page.screenshot (SK-1108) — stamp the
   // PNG at the content rect and skip the path pipeline. This bypasses our
@@ -696,12 +1000,12 @@ export function renderInputText(opts: RenderTextOpts): string {
     ? el.inputXOffsets.map((v) => v - textX) : undefined;
   const inputFeatures = parseFontFeatureSettings(el.styles.fontFeatureSettings);
   const inputAxes = parseFontVariationSettings(el.styles.fontVariationSettings);
-  const result = renderTextAsPath(el.text, textX, tt, fontSize, fontFamily, textFontWeight, textColor, undefined, undefined, xOffsetsRel, textFontStyle, el.fontAscent, inputFeatures, el.styles.lang, inputAxes);
+  const result = renderTextAsPath(el.text, textX, tt, fontSize, fontFamily, textFontWeight, textColor, undefined, undefined, xOffsetsRel, textFontStyle, el.fontAscent, inputFeatures, el.styles.lang, inputAxes, _ts.width, _ts.color, _ts.paintOrder);
   // Clip the path-rendered text to the input's content rect so values that
   // overflow the visible width (common on readonly inputs with long text or
   // any input narrower than its value) are truncated like Chrome paints
   // them, not extending past the right border. DM-245.
-  if (result != null) return `<g clip-path="url(#${clipId})">${result}</g>`;
+  if (result != null) return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${result}</g>`);
 
   // Fallback to CSS <text> if path rendering fails
   const textY = (el.textTop != null && el.textHeight != null && el.textHeight > 0)
@@ -709,5 +1013,5 @@ export function renderInputText(opts: RenderTextOpts): string {
   const ff = fontFamily.replace(/"/g, "'");
   const baseStyle = `font-family:${ff};font-size:${r(fontSize)}px;font-weight:${fontWeight};font-kerning:normal;font-optical-sizing:auto;`;
 
-  return `<text x="${r(textX)}" y="${r(textY)}" dominant-baseline="central" fill="${textColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(el.text)}</text>`;
+  return anisotropicCorrectionWrap(el, `<text x="${r(textX)}" y="${r(textY)}" dominant-baseline="central" fill="${textColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(el.text)}</text>`);
 }