domotion-svg 0.2.2 → 0.3.2

package/dist/capture/script/walker/text-segments.js

@@ -138,6 +138,57 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
         const flFsRaw = parseFloat(flStyle.fontSize) || 0;
         const firstLetterStyled = flFsRaw > 0 && Math.abs(flFsRaw - elFsRaw) > 0.5;
         let firstCharSeen = false;
+        // DM-747 / DM-791: MathML `<mi>` with a single token character is
+        // automatically painted with the Mathematical Italic alphabet (the
+        // mathvariant=italic mapping from MathML 4 / Core). Chrome paints
+        // `<mi>a</mi>` using U+1D44E (𝑎), `<mi>α</mi>` using U+1D6FC (𝛼), etc.
+        // The computed `font-style` stays `normal` and `font-family` stays
+        // `math`, so we can't detect this through CSS — we apply the mapping
+        // ourselves at capture time so the downstream text-shaping pipeline
+        // picks up the right glyphs from whatever math font the system has.
+        const elTag = el.tagName != null ? el.tagName.toLowerCase() : '';
+        const _miText = (el.textContent || '').trim();
+        const mathItalicizeMi = elTag === 'mi'
+            && [..._miText].length === 1
+            && /^[a-zA-ZΑ-ΩΆΈΉΊΌΎΏα-ωϐϑϕϖϗϰϱϵ∂∇]$/u.test(_miText);
+        const mathItalicChar = (ch) => {
+            const code = ch.codePointAt(0);
+            if (code == null)
+                return ch;
+            // Latin Mathematical Italic Capital A..Z = U+1D434..U+1D44D.
+            if (code >= 0x41 && code <= 0x5A)
+                return String.fromCodePoint(0x1D434 + (code - 0x41));
+            // Latin Mathematical Italic Small a..z = U+1D44E..U+1D467, except
+            // U+1D455 ("h") is reserved — Chrome paints U+210E (ℎ, PLANCK CONSTANT).
+            if (code >= 0x61 && code <= 0x7A) {
+                if (code === 0x68)
+                    return 'ℎ';
+                return String.fromCodePoint(0x1D44E + (code - 0x61));
+            }
+            // Greek Mathematical Italic Capital Α..Ω = U+1D6E2..U+1D6FA.
+            // The block is dense: 25 codepoints for Α (U+0391) through Ω (U+03A9),
+            // skipping nothing in the source range.
+            if (code >= 0x0391 && code <= 0x03A9)
+                return String.fromCodePoint(0x1D6E2 + (code - 0x0391));
+            // Greek Mathematical Italic Small α..ω = U+1D6FC..U+1D71B.
+            // U+03C2 (final sigma ς) maps to the regular U+1D70D position; the
+            // block is contiguous.
+            if (code >= 0x03B1 && code <= 0x03C9)
+                return String.fromCodePoint(0x1D6FC + (code - 0x03B1));
+            // Greek symbol variants — these alternate forms get their own italic
+            // codepoints at the tail of the lowercase Greek block.
+            switch (code) {
+                case 0x2202: return String.fromCodePoint(0x1D715); // ∂ → italic partial differential
+                case 0x03F5: return String.fromCodePoint(0x1D716); // ϵ (lunate) → italic epsilon symbol
+                case 0x03D1: return String.fromCodePoint(0x1D717); // ϑ (theta sym) → italic theta symbol
+                case 0x03F0: return String.fromCodePoint(0x1D718); // ϰ (kappa sym) → italic kappa symbol
+                case 0x03D5: return String.fromCodePoint(0x1D719); // ϕ (phi sym) → italic phi symbol
+                case 0x03F1: return String.fromCodePoint(0x1D71A); // ϱ (rho sym) → italic rho symbol
+                case 0x03D6: return String.fromCodePoint(0x1D71B); // ϖ (pi sym) → italic pi symbol
+                case 0x2207: return String.fromCodePoint(0x1D6FB); // ∇ (nabla) → italic nabla (upper-block tail)
+                default: return ch;
+            }
+        };
         for (const node of el.childNodes) {
             if (node.nodeType !== Node.TEXT_NODE)
                 continue;
@@ -152,7 +203,13 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                 raw = raw.replace(/\b\p{L}/gu, (ch) => ch.toUpperCase());
             if (!raw.trim())
                 continue;
-            text += raw.trim() + ' ';
+            // DM-747: when `<mi>` math-italic substitution applies, the element's
+            // aggregate `text` field should carry the substituted codepoint too —
+            // it's used for aria-label / accessibility and matches the painted
+            // glyph. The per-character ranges still measure against the original
+            // textContent (see below).
+            const rawForText = mathItalicizeMi ? mathItalicChar(raw.trim()) : raw.trim();
+            text += rawForText + ' ';
             // Group characters by their laid-out line (matching rect.top).
             const lines = [];
             let cur = null;
@@ -169,7 +226,15 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                     i += step - 1;
                     continue;
                 }
-                const ch = raw.slice(i, i + step);
+                let ch = raw.slice(i, i + step);
+                // DM-747: see `mathItalicizeMi` block above — apply the mathvariant=
+                // italic substitution AFTER the Range-based measurement so the Range
+                // offsets stay valid against the original textContent (`a`, 1 code
+                // unit) while the captured glyph string carries the surrogate-pair
+                // math-italic codepoint (`𝑎`, 2 code units) that the downstream
+                // shaping pipeline picks up.
+                if (mathItalicizeMi)
+                    ch = mathItalicChar(ch);
                 const charRec = { ch, left: cr.left, top: cr.top, right: cr.right, bottom: cr.bottom };
                 if (cur == null || Math.abs(cr.top - cur.top) > 1) {
                     if (cur != null)
@@ -250,13 +315,42 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                     if (isFirstLetter)
                         firstCharSeen = true;
                     if ((cp != null && needsRaster(cp, nextCp)) || isFirstLetter) {
+                        // DM-823: for floated ::first-letter drop caps (initial-letter:
+                        // N M), `Range.getBoundingClientRect()` returns the line-box of
+                        // the first character in the NORMAL flow — but Chrome paints the
+                        // float at a much larger box (~N × parent-line-height tall). The
+                        // bitmap captured at the Range rect gets vertically truncated,
+                        // visible as a clipped W / B / T drop cap in the rendered SVG.
+                        // Expand the rasterRect downward by the difference between
+                        // (N × parent-line-height) and the natural-flow Range height so
+                        // the screenshot includes the full painted glyph. Width stays
+                        // unchanged — Chrome's drop cap matches the natural-flow
+                        // first-char width.
+                        let rasterTop = cRec.top - vp.y;
+                        let rasterHeight = cRec.bottom - cRec.top;
+                        if (isFirstLetter) {
+                            const ilRaw = flStyle.initialLetter || flStyle.webkitInitialLetter || '';
+                            const ilN = parseFloat(ilRaw);
+                            const parentLineHeight = parseFloat(cs.lineHeight);
+                            if (Number.isFinite(ilN) && ilN > 1 && Number.isFinite(parentLineHeight) && parentLineHeight > 0) {
+                                const expectedHeight = ilN * parentLineHeight;
+                                if (expectedHeight > rasterHeight) {
+                                    // Extend downward only — Chrome aligns the cap-top at the
+                                    // first line's cap-height position; extra space the
+                                    // expansion captures past the actual ink is empty (will
+                                    // raster as transparent, with `omitBackground: true`) and
+                                    // doesn't paint anything visible.
+                                    rasterHeight = expectedHeight;
+                                }
+                            }
+                        }
                         rasterGlyphs.push({
                             charIndex: utf16Idx,
                             rect: {
                                 x: cRec.left - vp.x,
-                                y: cRec.top - vp.y,
+                                y: rasterTop,
                                 width: cRec.right - cRec.left,
-                                height: cRec.bottom - cRec.top,
+                                height: rasterHeight,
                             },
                             // ::first-letter drop caps: suppress the path glyph so
                             // only the rasterized big letter paints (DM-439).

package/dist/capture/script/walker/transforms.d.ts

@@ -3,6 +3,7 @@ export declare const createTransformsHandler: () => {
     threadFrozenTransform: (cs: any, frozenTransform: any, _frozenTransformOrigin: any) => {
         transform: any;
         transformOrigin: any;
+        translateZ: number | undefined;
         transformCreatesSc: boolean;
     };
 };

package/dist/capture/script/walker/transforms.js

@@ -130,6 +130,22 @@ export const createTransformsHandler = () => {
             ? frozenTransform
             : 'none',
         transformOrigin: cs.transformOrigin,
+        // DM-751: extract `matrix3d` translateZ so the paint-order sort can
+        // honor 3D Z position when the parent element has
+        // `transform-style: preserve-3d` (which sorts children by Z in 3D
+        // space, not by z-index per CSS Transforms 2 §6). We can't represent
+        // perspective / actual 3D rendering in SVG; this is paint-order only.
+        translateZ: (function () {
+            const tt = cs.transform;
+            if (tt == null || tt === 'none' || tt === '')
+                return undefined;
+            const m3 = /^matrix3d\(([^)]+)\)/.exec(tt);
+            if (m3 == null)
+                return undefined;
+            const parts = m3[1].split(',').map((s) => parseFloat(s.trim()));
+            const tz = parts[14];
+            return Number.isFinite(tz) && tz !== 0 ? tz : undefined;
+        })(),
         // DM-587: separately flag elements that ORIGINALLY had a non-none
         // transform — even though we discard the value to suppress the wrap,
         // CSS Transforms 2 §4 says any non-none transform creates a stacking