@remotion/web-renderer 4.0.482 → 4.0.484

package/dist/drawing/text/text-decoration.d.ts

@@ -0,0 +1,27 @@
+type TextDecorationLine = 'underline' | 'overline' | 'line-through';
+export type TextDecoration = {
+    lines: TextDecorationLine[];
+    color: string;
+    thickness: number;
+};
+export declare const parseTextDecoration: ({ onlyBackgroundClipText, style, }: {
+    onlyBackgroundClipText: boolean;
+    style: CSSStyleDeclaration;
+}) => TextDecoration | null;
+export declare const getTextDecorations: ({ computedStyle, onlyBackgroundClipText, span, }: {
+    computedStyle: CSSStyleDeclaration;
+    onlyBackgroundClipText: boolean;
+    span: HTMLSpanElement;
+}) => TextDecoration[];
+export declare const drawTextDecoration: ({ contextToDraw, fontSizePx, measurements, parentRect, textDecorations, token, y, }: {
+    contextToDraw: OffscreenCanvasRenderingContext2D;
+    fontSizePx: number;
+    measurements: TextMetrics;
+    parentRect: DOMRect;
+    textDecorations: TextDecoration[];
+    token: {
+        rect: DOMRect;
+    };
+    y: number;
+}) => void;
+export {};

package/dist/esm/index.mjs

@@ -1629,7 +1629,7 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.marginBottom = "0";
   svg.style.fill = fill;
   svg.style.color = color;
-  const svgData = new XMLSerializer().serializeToString(svg);
+  const svgData = new XMLSerializer().serializeToString(svg).replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, "");
   svg.style.marginLeft = originalMarginLeft;
   svg.style.marginRight = originalMarginRight;
   svg.style.marginTop = originalMarginTop;
@@ -4123,6 +4123,126 @@ var parseTextShadow = (textShadowValue) => {
   return parseShadowValues(textShadowValue);
 };
 
+// src/drawing/text/text-decoration.ts
+var textDecorationLines = [
+  "underline",
+  "overline",
+  "line-through"
+];
+var currentColorValues = new Set(["currentcolor", "currentColor"]);
+var getDefaultTextDecorationThickness = (fontSizePx) => {
+  return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
+};
+var parseTextDecoration = ({
+  onlyBackgroundClipText,
+  style
+}) => {
+  const textDecorationStyle = style.getPropertyValue("text-decoration-style");
+  if (textDecorationStyle && textDecorationStyle !== "solid") {
+    return null;
+  }
+  const textDecorationLine = style.getPropertyValue("text-decoration-line");
+  const lineParts = textDecorationLine.split(/\s+/);
+  const lines = textDecorationLines.filter((line) => lineParts.includes(line));
+  if (lines.length === 0) {
+    return null;
+  }
+  const textDecorationThickness = style.getPropertyValue("text-decoration-thickness");
+  const thicknessValue = parseFloat(textDecorationThickness);
+  const thickness = Number.isFinite(thicknessValue) ? thicknessValue : getDefaultTextDecorationThickness(parseFloat(style.fontSize));
+  if (thickness <= 0) {
+    return null;
+  }
+  const textDecorationColor = style.getPropertyValue("text-decoration-color");
+  return {
+    lines,
+    color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style.color : textDecorationColor,
+    thickness
+  };
+};
+var getTextDecorations = ({
+  computedStyle,
+  onlyBackgroundClipText,
+  span
+}) => {
+  const decorations = [];
+  const spanDecoration = parseTextDecoration({
+    onlyBackgroundClipText,
+    style: computedStyle
+  });
+  if (spanDecoration) {
+    decorations.push(spanDecoration);
+  }
+  let parent = span.parentElement;
+  while (parent) {
+    const parentDecoration = parseTextDecoration({
+      onlyBackgroundClipText,
+      style: getComputedStyle(parent)
+    });
+    if (parentDecoration) {
+      decorations.push(parentDecoration);
+    }
+    parent = parent.parentElement;
+  }
+  return decorations;
+};
+var getTextDecorationY = ({
+  line,
+  measurements,
+  y,
+  thickness,
+  fontSizePx
+}) => {
+  const fontAscent = measurements.fontBoundingBoxAscent || measurements.actualBoundingBoxAscent || fontSizePx;
+  const fontDescent = measurements.fontBoundingBoxDescent || measurements.actualBoundingBoxDescent || fontSizePx * 0.2;
+  const actualAscent = measurements.actualBoundingBoxAscent || fontAscent;
+  if (line === "underline") {
+    return y + Math.max(thickness, fontDescent * 0.4);
+  }
+  if (line === "overline") {
+    return y - fontAscent + thickness / 2;
+  }
+  return y - actualAscent * 0.35;
+};
+var drawTextDecoration = ({
+  contextToDraw,
+  fontSizePx,
+  measurements,
+  parentRect,
+  textDecorations,
+  token,
+  y
+}) => {
+  if (textDecorations.length === 0) {
+    return;
+  }
+  const startX = token.rect.left - parentRect.x;
+  const endX = token.rect.right - parentRect.x;
+  if (endX <= startX) {
+    return;
+  }
+  contextToDraw.save();
+  contextToDraw.lineCap = "butt";
+  for (const textDecoration of textDecorations) {
+    contextToDraw.strokeStyle = textDecoration.color;
+    contextToDraw.lineWidth = textDecoration.thickness;
+    for (const line of textDecoration.lines) {
+      const lineY = getTextDecorationY({
+        line,
+        measurements,
+        y,
+        thickness: textDecoration.thickness,
+        fontSizePx
+      });
+      contextToDraw.beginPath();
+      contextToDraw.moveTo(startX, lineY);
+      contextToDraw.lineTo(endX, lineY);
+      contextToDraw.stroke();
+    }
+  }
+  contextToDraw.restore();
+};
+
 // src/drawing/text/draw-text.ts
 var drawText = ({
   span,
@@ -4174,6 +4294,11 @@ var drawText = ({
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     contextToDraw.wordSpacing = wordSpacing;
+    const textDecorations = getTextDecorations({
+      computedStyle,
+      onlyBackgroundClipText,
+      span
+    });
     const strokeWidth = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth > 0;
     if (hasStroke) {
@@ -4224,6 +4349,15 @@ var drawText = ({
         drawFill();
         drawStroke();
       }
+      drawTextDecoration({
+        contextToDraw,
+        fontSizePx,
+        measurements,
+        parentRect,
+        textDecorations,
+        token,
+        y
+      });
     }
     span.textContent = originalText;
     finishFilter();

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.482",
+	"version": "4.0.484",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,19 +22,19 @@
 		"@mediabunny/mp3-encoder": "1.47.0",
 		"@mediabunny/aac-encoder": "1.47.0",
 		"@mediabunny/flac-encoder": "1.47.0",
-		"@remotion/licensing": "4.0.482",
-		"remotion": "4.0.482",
+		"@remotion/licensing": "4.0.484",
+		"remotion": "4.0.484",
 		"mediabunny": "1.47.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.482",
-		"@remotion/paths": "4.0.482",
-		"@remotion/player": "4.0.482",
-		"@remotion/media": "4.0.482",
-		"@remotion/shapes": "4.0.482",
-		"@remotion/three": "4.0.482",
-		"@remotion/transitions": "4.0.482",
+		"@remotion/eslint-config-internal": "4.0.484",
+		"@remotion/paths": "4.0.484",
+		"@remotion/player": "4.0.484",
+		"@remotion/media": "4.0.484",
+		"@remotion/shapes": "4.0.484",
+		"@remotion/three": "4.0.484",
+		"@remotion/transitions": "4.0.484",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",