@remotion/web-renderer 4.0.388 → 4.0.390

package/dist/compose.js

@@ -1,7 +1,14 @@
 import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
+import { handleTextNode } from './drawing/text/handle-text-node';
+import { turnSvgIntoDrawable } from './drawing/turn-svg-into-drawable';
 export const compose = async (element, context) => {
     const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
         if (node instanceof Element) {
+            // SVG does have children, but we process SVG elements in its
+            // entirety
+            if (node.parentElement instanceof SVGSVGElement) {
+                return NodeFilter.FILTER_REJECT;
+            }
             const computedStyle = getComputedStyle(node);
             return computedStyle.display === 'none'
                 ? NodeFilter.FILTER_REJECT
@@ -12,7 +19,25 @@ export const compose = async (element, context) => {
     while (treeWalker.nextNode()) {
         const node = treeWalker.currentNode;
         if (node instanceof HTMLElement || node instanceof SVGElement) {
-            await drawElementToCanvas({ element: node, context });
+            await drawElementToCanvas({
+                element: node,
+                context,
+                draw: async (dimensions) => {
+                    const drawable = await (node instanceof SVGSVGElement
+                        ? turnSvgIntoDrawable(node)
+                        : node instanceof HTMLImageElement
+                            ? node
+                            : node instanceof HTMLCanvasElement
+                                ? node
+                                : null);
+                    if (drawable) {
+                        context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+                    }
+                },
+            });
+        }
+        else if (node instanceof Text) {
+            await handleTextNode(node, context);
         }
     }
 };

package/dist/drawing/calculate-transforms.d.ts

@@ -7,4 +7,5 @@ export declare const calculateTransforms: (element: HTMLElement | SVGElement) =>
         y: number;
     };
     opacity: number;
+    computedStyle: CSSStyleDeclaration;
 };

package/dist/drawing/calculate-transforms.js

@@ -22,6 +22,7 @@ export const calculateTransforms = (element) => {
     const transforms = [];
     const toReset = [];
     let opacity = 1;
+    let elementComputedStyle = null;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
         // Multiply opacity values from element and all parents
@@ -29,6 +30,9 @@ export const calculateTransforms = (element) => {
         if (parentOpacity && parentOpacity !== '') {
             opacity *= parseFloat(parentOpacity);
         }
+        if (parent === element) {
+            elementComputedStyle = computedStyle;
+        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -67,6 +71,9 @@ export const calculateTransforms = (element) => {
             .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
         totalMatrix.multiplySelf(transformMatrix);
     }
+    if (!elementComputedStyle) {
+        throw new Error('Element computed style not found');
+    }
     return {
         dimensions,
         totalMatrix,
@@ -77,5 +84,6 @@ export const calculateTransforms = (element) => {
         },
         nativeTransformOrigin,
         opacity,
+        computedStyle: elementComputedStyle,
     };
 };

package/dist/drawing/draw-element-to-canvas.d.ts

@@ -1,4 +1,5 @@
-export declare const drawElementToCanvas: ({ element, context, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
+    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
 }) => Promise<void>;

package/dist/drawing/draw-element-to-canvas.js

@@ -3,9 +3,8 @@ import { calculateTransforms } from './calculate-transforms';
 import { drawBorder } from './draw-border';
 import { setOpacity } from './opacity';
 import { setTransform } from './transform';
-import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
-export const drawElementToCanvas = async ({ element, context, }) => {
-    const { totalMatrix, reset, dimensions, opacity } = calculateTransforms(element);
+export const drawElementToCanvas = async ({ element, context, draw, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
         return;
@@ -14,7 +13,6 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         reset();
         return;
     }
-    const computedStyle = getComputedStyle(element);
     const background = computedStyle.backgroundColor;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
@@ -37,13 +35,6 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         ctx: context,
         opacity,
     });
-    const drawable = element instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(element)
-        : element instanceof HTMLImageElement
-            ? element
-            : element instanceof HTMLCanvasElement
-                ? element
-                : null;
     if (background &&
         background !== 'transparent' &&
         !(background.startsWith('rgba') &&
@@ -53,9 +44,7 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
         context.fillStyle = originalFillStyle;
     }
-    if (drawable) {
-        context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    }
+    await draw(dimensions, computedStyle);
     drawBorder({
         ctx: context,
         x: dimensions.left,

package/dist/drawing/text/find-line-breaks.text.d.ts

@@ -0,0 +1,5 @@
+export declare function findLineBreaks(span: HTMLSpanElement, rtl: boolean): Array<{
+    text: string;
+    offsetTop: number;
+    offsetHorizontal: number;
+}>;

package/dist/drawing/text/find-line-breaks.text.js

@@ -0,0 +1,67 @@
+import { getCollapsedText } from './get-collapsed-text';
+export function findLineBreaks(span, rtl) {
+    const textNode = span.childNodes[0];
+    const originalText = textNode.textContent;
+    const originalRect = span.getBoundingClientRect();
+    const computedStyle = getComputedStyle(span);
+    const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
+    const segments = segmenter.segment(originalText);
+    const words = Array.from(segments).map((s) => s.segment);
+    const lines = [];
+    let currentLine = '';
+    let testText = '';
+    let previousRect = originalRect;
+    textNode.textContent = '';
+    for (let i = 0; i < words.length; i += 1) {
+        const word = words[i];
+        testText += word;
+        let wordsToAdd = word;
+        while (typeof words[i + 1] !== 'undefined' && words[i + 1].trim() === '') {
+            testText += words[i + 1];
+            wordsToAdd += words[i + 1];
+            i++;
+        }
+        previousRect = span.getBoundingClientRect();
+        textNode.textContent = testText;
+        const collapsedText = getCollapsedText(span);
+        textNode.textContent = collapsedText;
+        const rect = span.getBoundingClientRect();
+        const currentHeight = rect.height;
+        // If height changed significantly, we had a line break
+        if (previousRect &&
+            previousRect.height !== 0 &&
+            Math.abs(currentHeight - previousRect.height) > 2) {
+            const offsetHorizontal = rtl
+                ? previousRect.right - originalRect.right
+                : previousRect.left - originalRect.left;
+            const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
+            lines.push({
+                text: shouldCollapse ? currentLine.trim() : currentLine,
+                offsetTop: currentHeight - previousRect.height,
+                offsetHorizontal,
+            });
+            currentLine = wordsToAdd;
+        }
+        else {
+            currentLine += wordsToAdd;
+        }
+    }
+    // Add the last line
+    if (currentLine) {
+        textNode.textContent = testText;
+        const rects = span.getClientRects();
+        const rect = span.getBoundingClientRect();
+        const lastRect = rects[rects.length - 1];
+        const offsetHorizontal = rtl
+            ? lastRect.right - originalRect.right
+            : lastRect.left - originalRect.left;
+        lines.push({
+            text: currentLine,
+            offsetTop: rect.height - previousRect.height,
+            offsetHorizontal,
+        });
+    }
+    // Reset to original text
+    textNode.textContent = originalText;
+    return lines;
+}

package/dist/drawing/text/get-collapsed-text.d.ts

@@ -0,0 +1 @@
+export declare const getCollapsedText: (span: HTMLSpanElement) => string;

package/dist/drawing/text/get-collapsed-text.js

@@ -0,0 +1,46 @@
+export const getCollapsedText = (span) => {
+    const textNode = span.firstChild;
+    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+        throw new Error('Span must contain a single text node');
+    }
+    const originalText = textNode.textContent || '';
+    let collapsedText = originalText;
+    // Helper to measure width
+    const measureWidth = (text) => {
+        textNode.textContent = text;
+        return span.getBoundingClientRect().width;
+    };
+    const originalWidth = measureWidth(originalText);
+    // Test leading whitespace
+    if (/^\s/.test(collapsedText)) {
+        const trimmedLeading = collapsedText.replace(/^\s+/, '');
+        const newWidth = measureWidth(trimmedLeading);
+        if (newWidth === originalWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedLeading;
+        }
+    }
+    // Test trailing whitespace (on current collapsed text)
+    if (/\s$/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const trimmedTrailing = collapsedText.replace(/\s+$/, '');
+        const newWidth = measureWidth(trimmedTrailing);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedTrailing;
+        }
+    }
+    // Test internal duplicate whitespace (on current collapsed text)
+    if (/\s\s/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const collapsedInternal = collapsedText.replace(/\s\s+/g, ' ');
+        const newWidth = measureWidth(collapsedInternal);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = collapsedInternal;
+        }
+    }
+    // Restore original text
+    textNode.textContent = originalText;
+    return collapsedText;
+};

package/dist/drawing/text/handle-text-node.d.ts

@@ -0,0 +1 @@
+export declare const handleTextNode: (node: Text, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/text/handle-text-node.js

@@ -0,0 +1,81 @@
+// Supported:
+// - fontFamily
+// - fontSize
+// - fontWeight
+// - color
+// - lineHeight
+// - direction
+// - letterSpacing
+// - textTransform
+// Not supported:
+// - writingMode
+// - textDecoration
+import { Internals } from 'remotion';
+import { drawElementToCanvas } from '../draw-element-to-canvas';
+import { findLineBreaks } from './find-line-breaks.text';
+import { getCollapsedText } from './get-collapsed-text';
+const applyTextTransform = (text, transform) => {
+    if (transform === 'uppercase') {
+        return text.toUpperCase();
+    }
+    if (transform === 'lowercase') {
+        return text.toLowerCase();
+    }
+    if (transform === 'capitalize') {
+        return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    return text;
+};
+export const handleTextNode = async (node, context) => {
+    const span = document.createElement('span');
+    const parent = node.parentNode;
+    if (!parent) {
+        throw new Error('Text node has no parent');
+    }
+    parent.insertBefore(span, node);
+    span.appendChild(node);
+    await drawElementToCanvas({
+        context,
+        element: span,
+        draw(rect, style) {
+            const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = style;
+            const isVertical = writingMode !== 'horizontal-tb';
+            if (isVertical) {
+                // TODO: Only warn once per render.
+                Internals.Log.warn({
+                    logLevel: 'warn',
+                    tag: '@remotion/web-renderer',
+                }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+                return;
+            }
+            context.save();
+            context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+            context.fillStyle = color;
+            context.letterSpacing = letterSpacing;
+            const fontSizePx = parseFloat(fontSize);
+            // TODO: This is not necessarily correct, need to create text and measure to know for sure
+            const lineHeightPx = lineHeight === 'normal' ? 1.2 * fontSizePx : parseFloat(lineHeight);
+            const baselineOffset = (lineHeightPx - fontSizePx) / 2;
+            const isRTL = direction === 'rtl';
+            context.textAlign = isRTL ? 'right' : 'left';
+            context.textBaseline = 'top';
+            const originalText = span.textContent;
+            const collapsedText = getCollapsedText(span);
+            const transformedText = applyTextTransform(collapsedText, textTransform);
+            span.textContent = transformedText;
+            // For RTL text, fill from the right edge instead of left
+            const xPosition = isRTL ? rect.right : rect.left;
+            const lines = findLineBreaks(span, isRTL);
+            let offsetTop = 0;
+            for (const line of lines) {
+                context.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+                offsetTop += line.offsetTop;
+            }
+            span.textContent = originalText;
+            context.restore();
+        },
+    });
+    // Undo the layout manipulation
+    parent.insertBefore(node, span);
+    parent.removeChild(span);
+};

package/dist/esm/index.mjs

@@ -8259,7 +8259,7 @@ class Output {
  */
 
 // src/render-media-on-web.tsx
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 
 // src/add-sample.ts
 var addVideoSampleAndCloseFrame = async (frameToEncode, videoSampleSource) => {
@@ -8826,12 +8826,16 @@ var calculateTransforms = (element) => {
   const transforms = [];
   const toReset = [];
   let opacity = 1;
+  let elementComputedStyle = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
     const parentOpacity = computedStyle.opacity;
     if (parentOpacity && parentOpacity !== "") {
       opacity *= parseFloat(parentOpacity);
     }
+    if (parent === element) {
+      elementComputedStyle = computedStyle;
+    }
     if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
       const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
       const matrix = new DOMMatrix(toParse);
@@ -8864,6 +8868,9 @@ var calculateTransforms = (element) => {
     const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(transform.matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
     totalMatrix.multiplySelf(transformMatrix);
   }
+  if (!elementComputedStyle) {
+    throw new Error("Element computed style not found");
+  }
   return {
     dimensions,
     totalMatrix,
@@ -8873,7 +8880,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity
+    opacity,
+    computedStyle: elementComputedStyle
   };
 };
 
@@ -8987,46 +8995,13 @@ var setTransform = ({
   };
 };
 
-// src/drawing/turn-svg-into-drawable.ts
-var turnSvgIntoDrawable = (svg) => {
-  const originalTransform = svg.style.transform;
-  const originalTransformOrigin = svg.style.transformOrigin;
-  const originalMarginLeft = svg.style.marginLeft;
-  const originalMarginRight = svg.style.marginRight;
-  const originalMarginTop = svg.style.marginTop;
-  const originalMarginBottom = svg.style.marginBottom;
-  svg.style.transform = "none";
-  svg.style.transformOrigin = "";
-  svg.style.marginLeft = "0";
-  svg.style.marginRight = "0";
-  svg.style.marginTop = "0";
-  svg.style.marginBottom = "0";
-  const svgData = new XMLSerializer().serializeToString(svg);
-  svg.style.marginLeft = originalMarginLeft;
-  svg.style.marginRight = originalMarginRight;
-  svg.style.marginTop = originalMarginTop;
-  svg.style.marginBottom = originalMarginBottom;
-  svg.style.transform = originalTransform;
-  svg.style.transformOrigin = originalTransformOrigin;
-  return new Promise((resolve, reject) => {
-    const image = new Image;
-    const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
-    image.onload = function() {
-      resolve(image);
-    };
-    image.onerror = () => {
-      reject(new Error("Failed to convert SVG to image"));
-    };
-    image.src = url2;
-  });
-};
-
 // src/drawing/draw-element-to-canvas.ts
 var drawElementToCanvas = async ({
   element,
-  context
+  context,
+  draw
 }) => {
-  const { totalMatrix, reset, dimensions, opacity } = calculateTransforms(element);
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
   if (opacity === 0) {
     reset();
     return;
@@ -9035,7 +9010,6 @@ var drawElementToCanvas = async ({
     reset();
     return;
   }
-  const computedStyle = getComputedStyle(element);
   const background = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -9058,16 +9032,13 @@ var drawElementToCanvas = async ({
     ctx: context,
     opacity
   });
-  const drawable = element instanceof SVGSVGElement ? await turnSvgIntoDrawable(element) : element instanceof HTMLImageElement ? element : element instanceof HTMLCanvasElement ? element : null;
   if (background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background;
     context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
     context.fillStyle = originalFillStyle;
   }
-  if (drawable) {
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  }
+  await draw(dimensions, computedStyle);
   drawBorder({
     ctx: context,
     x: dimensions.left,
@@ -9083,10 +9054,221 @@ var drawElementToCanvas = async ({
   reset();
 };
 
+// src/drawing/text/handle-text-node.ts
+import { Internals as Internals3 } from "remotion";
+
+// src/drawing/text/get-collapsed-text.ts
+var getCollapsedText = (span) => {
+  const textNode = span.firstChild;
+  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+    throw new Error("Span must contain a single text node");
+  }
+  const originalText = textNode.textContent || "";
+  let collapsedText = originalText;
+  const measureWidth = (text) => {
+    textNode.textContent = text;
+    return span.getBoundingClientRect().width;
+  };
+  const originalWidth = measureWidth(originalText);
+  if (/^\s/.test(collapsedText)) {
+    const trimmedLeading = collapsedText.replace(/^\s+/, "");
+    const newWidth = measureWidth(trimmedLeading);
+    if (newWidth === originalWidth) {
+      collapsedText = trimmedLeading;
+    }
+  }
+  if (/\s$/.test(collapsedText)) {
+    const currentWidth = measureWidth(collapsedText);
+    const trimmedTrailing = collapsedText.replace(/\s+$/, "");
+    const newWidth = measureWidth(trimmedTrailing);
+    if (newWidth === currentWidth) {
+      collapsedText = trimmedTrailing;
+    }
+  }
+  if (/\s\s/.test(collapsedText)) {
+    const currentWidth = measureWidth(collapsedText);
+    const collapsedInternal = collapsedText.replace(/\s\s+/g, " ");
+    const newWidth = measureWidth(collapsedInternal);
+    if (newWidth === currentWidth) {
+      collapsedText = collapsedInternal;
+    }
+  }
+  textNode.textContent = originalText;
+  return collapsedText;
+};
+
+// src/drawing/text/find-line-breaks.text.ts
+function findLineBreaks(span, rtl) {
+  const textNode = span.childNodes[0];
+  const originalText = textNode.textContent;
+  const originalRect = span.getBoundingClientRect();
+  const computedStyle = getComputedStyle(span);
+  const segmenter = new Intl.Segmenter("en", { granularity: "word" });
+  const segments = segmenter.segment(originalText);
+  const words = Array.from(segments).map((s) => s.segment);
+  const lines = [];
+  let currentLine = "";
+  let testText = "";
+  let previousRect = originalRect;
+  textNode.textContent = "";
+  for (let i = 0;i < words.length; i += 1) {
+    const word = words[i];
+    testText += word;
+    let wordsToAdd = word;
+    while (typeof words[i + 1] !== "undefined" && words[i + 1].trim() === "") {
+      testText += words[i + 1];
+      wordsToAdd += words[i + 1];
+      i++;
+    }
+    previousRect = span.getBoundingClientRect();
+    textNode.textContent = testText;
+    const collapsedText = getCollapsedText(span);
+    textNode.textContent = collapsedText;
+    const rect = span.getBoundingClientRect();
+    const currentHeight = rect.height;
+    if (previousRect && previousRect.height !== 0 && Math.abs(currentHeight - previousRect.height) > 2) {
+      const offsetHorizontal = rtl ? previousRect.right - originalRect.right : previousRect.left - originalRect.left;
+      const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes("preserve");
+      lines.push({
+        text: shouldCollapse ? currentLine.trim() : currentLine,
+        offsetTop: currentHeight - previousRect.height,
+        offsetHorizontal
+      });
+      currentLine = wordsToAdd;
+    } else {
+      currentLine += wordsToAdd;
+    }
+  }
+  if (currentLine) {
+    textNode.textContent = testText;
+    const rects = span.getClientRects();
+    const rect = span.getBoundingClientRect();
+    const lastRect = rects[rects.length - 1];
+    const offsetHorizontal = rtl ? lastRect.right - originalRect.right : lastRect.left - originalRect.left;
+    lines.push({
+      text: currentLine,
+      offsetTop: rect.height - previousRect.height,
+      offsetHorizontal
+    });
+  }
+  textNode.textContent = originalText;
+  return lines;
+}
+
+// src/drawing/text/handle-text-node.ts
+var applyTextTransform = (text, transform) => {
+  if (transform === "uppercase") {
+    return text.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return text.toLowerCase();
+  }
+  if (transform === "capitalize") {
+    return text.replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return text;
+};
+var handleTextNode = async (node, context) => {
+  const span = document.createElement("span");
+  const parent = node.parentNode;
+  if (!parent) {
+    throw new Error("Text node has no parent");
+  }
+  parent.insertBefore(span, node);
+  span.appendChild(node);
+  await drawElementToCanvas({
+    context,
+    element: span,
+    draw(rect, style) {
+      const {
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        lineHeight,
+        direction,
+        writingMode,
+        letterSpacing,
+        textTransform
+      } = style;
+      const isVertical = writingMode !== "horizontal-tb";
+      if (isVertical) {
+        Internals3.Log.warn({
+          logLevel: "warn",
+          tag: "@remotion/web-renderer"
+        }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+        return;
+      }
+      context.save();
+      context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+      context.fillStyle = color;
+      context.letterSpacing = letterSpacing;
+      const fontSizePx = parseFloat(fontSize);
+      const lineHeightPx = lineHeight === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight);
+      const baselineOffset = (lineHeightPx - fontSizePx) / 2;
+      const isRTL = direction === "rtl";
+      context.textAlign = isRTL ? "right" : "left";
+      context.textBaseline = "top";
+      const originalText = span.textContent;
+      const collapsedText = getCollapsedText(span);
+      const transformedText = applyTextTransform(collapsedText, textTransform);
+      span.textContent = transformedText;
+      const xPosition = isRTL ? rect.right : rect.left;
+      const lines = findLineBreaks(span, isRTL);
+      let offsetTop = 0;
+      for (const line of lines) {
+        context.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+        offsetTop += line.offsetTop;
+      }
+      span.textContent = originalText;
+      context.restore();
+    }
+  });
+  parent.insertBefore(node, span);
+  parent.removeChild(span);
+};
+
+// src/drawing/turn-svg-into-drawable.ts
+var turnSvgIntoDrawable = (svg) => {
+  const originalTransform = svg.style.transform;
+  const originalTransformOrigin = svg.style.transformOrigin;
+  const originalMarginLeft = svg.style.marginLeft;
+  const originalMarginRight = svg.style.marginRight;
+  const originalMarginTop = svg.style.marginTop;
+  const originalMarginBottom = svg.style.marginBottom;
+  svg.style.transform = "none";
+  svg.style.transformOrigin = "";
+  svg.style.marginLeft = "0";
+  svg.style.marginRight = "0";
+  svg.style.marginTop = "0";
+  svg.style.marginBottom = "0";
+  const svgData = new XMLSerializer().serializeToString(svg);
+  svg.style.marginLeft = originalMarginLeft;
+  svg.style.marginRight = originalMarginRight;
+  svg.style.marginTop = originalMarginTop;
+  svg.style.marginBottom = originalMarginBottom;
+  svg.style.transform = originalTransform;
+  svg.style.transformOrigin = originalTransformOrigin;
+  return new Promise((resolve, reject) => {
+    const image = new Image;
+    const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
+    image.onload = function() {
+      resolve(image);
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to convert SVG to image"));
+    };
+    image.src = url2;
+  });
+};
+
 // src/compose.ts
 var compose = async (element, context) => {
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
     if (node instanceof Element) {
+      if (node.parentElement instanceof SVGSVGElement) {
+        return NodeFilter.FILTER_REJECT;
+      }
       const computedStyle = getComputedStyle(node);
       return computedStyle.display === "none" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
     }
@@ -9095,7 +9277,18 @@ var compose = async (element, context) => {
   while (treeWalker.nextNode()) {
     const node = treeWalker.currentNode;
     if (node instanceof HTMLElement || node instanceof SVGElement) {
-      await drawElementToCanvas({ element: node, context });
+      await drawElementToCanvas({
+        element: node,
+        context,
+        draw: async (dimensions) => {
+          const drawable = await (node instanceof SVGSVGElement ? turnSvgIntoDrawable(node) : node instanceof HTMLImageElement ? node : node instanceof HTMLCanvasElement ? node : null);
+          if (drawable) {
+            context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+          }
+        }
+      });
+    } else if (node instanceof Text) {
+      await handleTextNode(node, context);
     }
   }
 };
@@ -9256,7 +9449,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
   }
-  const resolved = await Internals3.resolveVideoConfig({
+  const resolved = await Internals4.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -9445,7 +9638,7 @@ var renderMediaOnWeb = (options) => {
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals4
+  Internals as Internals5
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -9459,7 +9652,7 @@ async function internalRenderStillOnWeb({
   signal,
   onArtifact
 }) {
-  const resolved = await Internals4.resolveVideoConfig({
+  const resolved = await Internals5.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.388",
+	"version": "4.0.390",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.388",
+		"remotion": "4.0.390",
 		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.388",
-		"@remotion/player": "4.0.388",
-		"@remotion/media": "4.0.388",
+		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/player": "4.0.390",
+		"@remotion/media": "4.0.390",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",

package/dist/calculate-transforms.d.ts

@@ -1,9 +0,0 @@
-export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
-    dimensions: DOMRect;
-    totalMatrix: DOMMatrix;
-    reset: () => void;
-    nativeTransformOrigin: {
-        x: number;
-        y: number;
-    };
-};

package/dist/calculate-transforms.js

@@ -1,74 +0,0 @@
-import { parseTransformOrigin } from './parse-transform-origin';
-const getInternalTransformOrigin = (transform) => {
-    var _a;
-    const centerX = transform.boundingClientRect.width / 2;
-    const centerY = transform.boundingClientRect.height / 2;
-    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
-        x: centerX,
-        y: centerY,
-    };
-    return origin;
-};
-const getGlobalTransformOrigin = (transform) => {
-    const { x: originX, y: originY } = getInternalTransformOrigin(transform);
-    return {
-        x: originX + transform.boundingClientRect.left,
-        y: originY + transform.boundingClientRect.top,
-    };
-};
-export const calculateTransforms = (element) => {
-    // Compute the cumulative transform by traversing parent nodes
-    let parent = element;
-    const transforms = [];
-    const toReset = [];
-    while (parent) {
-        const computedStyle = getComputedStyle(parent);
-        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
-            parent === element) {
-            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
-                ? undefined
-                : computedStyle.transform;
-            const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
-            parent.style.transform = 'none';
-            transforms.push({
-                matrix,
-                rect: parent,
-                transformOrigin: computedStyle.transformOrigin,
-                boundingClientRect: null,
-            });
-            const parentRef = parent;
-            toReset.push(() => {
-                parentRef.style.transform = transform;
-            });
-        }
-        parent = parent.parentElement;
-    }
-    for (const transform of transforms) {
-        transform.boundingClientRect = transform.rect.getBoundingClientRect();
-    }
-    const dimensions = transforms[0].boundingClientRect;
-    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-    const totalMatrix = new DOMMatrix();
-    for (const transform of transforms.slice().reverse()) {
-        if (!transform.boundingClientRect) {
-            throw new Error('Bounding client rect not found');
-        }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
-    }
-    return {
-        dimensions,
-        totalMatrix,
-        reset: () => {
-            for (const reset of toReset) {
-                reset();
-            }
-        },
-        nativeTransformOrigin,
-    };
-};

package/dist/composable.d.ts

@@ -1,10 +0,0 @@
-export type Composable = {
-    type: 'canvas';
-    element: HTMLCanvasElement;
-} | {
-    type: 'svg';
-    element: SVGSVGElement;
-} | {
-    type: 'img';
-    element: HTMLImageElement;
-};

package/dist/composable.js

@@ -1 +0,0 @@
-export {};

package/dist/compose-canvas.d.ts

@@ -1 +0,0 @@
-export declare const composeCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/compose-canvas.js

@@ -1,12 +0,0 @@
-import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
-export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
-    context.setTransform(totalMatrix);
-    const drawable = canvas instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(canvas)
-        : canvas;
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    context.setTransform(new DOMMatrix());
-    reset();
-};

package/dist/compose-svg.d.ts

@@ -1 +0,0 @@
-export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/compose-svg.js

@@ -1,34 +0,0 @@
-export const turnSvgIntoDrawable = (svg) => {
-    const originalTransform = svg.style.transform;
-    const originalTransformOrigin = svg.style.transformOrigin;
-    const originalMarginLeft = svg.style.marginLeft;
-    const originalMarginRight = svg.style.marginRight;
-    const originalMarginTop = svg.style.marginTop;
-    const originalMarginBottom = svg.style.marginBottom;
-    svg.style.transform = 'none';
-    svg.style.transformOrigin = '';
-    // Margins were already included in the positioning calculation,
-    // so we need to remove them to avoid double counting.
-    svg.style.marginLeft = '0';
-    svg.style.marginRight = '0';
-    svg.style.marginTop = '0';
-    svg.style.marginBottom = '0';
-    const svgData = new XMLSerializer().serializeToString(svg);
-    svg.style.marginLeft = originalMarginLeft;
-    svg.style.marginRight = originalMarginRight;
-    svg.style.marginTop = originalMarginTop;
-    svg.style.marginBottom = originalMarginBottom;
-    svg.style.transform = originalTransform;
-    svg.style.transformOrigin = originalTransformOrigin;
-    return new Promise((resolve, reject) => {
-        const image = new Image();
-        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
-        image.onload = function () {
-            resolve(image);
-        };
-        image.onerror = () => {
-            reject(new Error('Failed to convert SVG to image'));
-        };
-        image.src = url;
-    });
-};

package/dist/find-capturable-elements.d.ts

@@ -1,2 +0,0 @@
-import type { Composable } from './composable';
-export declare const findCapturableElements: (element: HTMLDivElement) => Composable[];

package/dist/find-capturable-elements.js

@@ -1,28 +0,0 @@
-export const findCapturableElements = (element) => {
-    const canvasAndSvgElements = element.querySelectorAll('svg,canvas,img');
-    const composables = [];
-    Array.from(canvasAndSvgElements).forEach((capturableElement) => {
-        if (capturableElement.tagName.toLocaleLowerCase() === 'canvas') {
-            const canvas = capturableElement;
-            composables.push({
-                type: 'canvas',
-                element: canvas,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'svg') {
-            const svg = capturableElement;
-            composables.push({
-                type: 'svg',
-                element: svg,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
-            const img = capturableElement;
-            composables.push({
-                type: 'img',
-                element: img,
-            });
-        }
-    });
-    return composables;
-};

package/dist/parse-transform-origin.d.ts

@@ -1,4 +0,0 @@
-export declare const parseTransformOrigin: (transformOrigin: string) => {
-    x: number;
-    y: number;
-} | null;

package/dist/parse-transform-origin.js

@@ -1,7 +0,0 @@
-export const parseTransformOrigin = (transformOrigin) => {
-    if (transformOrigin.trim() === '') {
-        return null;
-    }
-    const [x, y] = transformOrigin.split(' ');
-    return { x: parseFloat(x), y: parseFloat(y) };
-};