feat: update text properties to use dynamic font size limits and scaling

2 files changed, 20 insertions, 3 deletions

diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts
index 2cbf3d2a..bb79e086 100644
--- a/apps/web/src/services/renderer/nodes/text-node.ts
+++ b/apps/web/src/services/renderer/nodes/text-node.ts
@@ -1,9 +1,21 @@
 import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
 import type { TextElement } from "@/types/timeline";
+import { FONT_SIZE_SCALE_REFERENCE } from "@/constants/text-constants";
+
+function scaleFontSize({
+	fontSize,
+	canvasHeight,
+}: {
+	fontSize: number;
+	canvasHeight: number;
+}): number {
+	return fontSize * (canvasHeight / FONT_SIZE_SCALE_REFERENCE);
+}
 
 export type TextNodeParams = TextElement & {
 	canvasCenter: { x: number; y: number };
+	canvasHeight: number;
 	textBaseline?: CanvasTextBaseline;
 };
 
@@ -32,7 +44,11 @@ export class TextNode extends BaseNode<TextNodeParams> {
 
 		const fontWeight = this.params.fontWeight === "bold" ? "bold" : "normal";
 		const fontStyle = this.params.fontStyle === "italic" ? "italic" : "normal";
-		renderer.context.font = `${fontStyle} ${fontWeight} ${this.params.fontSize}px ${this.params.fontFamily}`;
+		const scaledFontSize = scaleFontSize({
+			fontSize: this.params.fontSize,
+			canvasHeight: this.params.canvasHeight,
+		});
+		renderer.context.font = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${this.params.fontFamily}`;
 		renderer.context.textAlign = this.params.textAlign;
 		renderer.context.textBaseline = this.params.textBaseline || "middle";
 		renderer.context.fillStyle = this.params.color;
@@ -43,9 +59,9 @@ export class TextNode extends BaseNode<TextNodeParams> {
 		if (this.params.backgroundColor) {
 			const metrics = renderer.context.measureText(this.params.content);
 			const ascent =
-				metrics.actualBoundingBoxAscent ?? this.params.fontSize * 0.8;
+				metrics.actualBoundingBoxAscent ?? scaledFontSize * 0.8;
 			const descent =
-				metrics.actualBoundingBoxDescent ?? this.params.fontSize * 0.2;
+				metrics.actualBoundingBoxDescent ?? scaledFontSize * 0.2;
 			const textW = metrics.width;
 			const textH = ascent + descent;
 			const padX = 8;
diff --git a/apps/web/src/services/renderer/scene-builder.ts b/apps/web/src/services/renderer/scene-builder.ts
index d5b189cd..5d33524e 100644
--- a/apps/web/src/services/renderer/scene-builder.ts
+++ b/apps/web/src/services/renderer/scene-builder.ts
@@ -85,6 +85,7 @@ export function buildScene(params: BuildSceneParams) {
 					new TextNode({
 						...element,
 						canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
+						canvasHeight: canvasSize.height,
 						textBaseline: "middle",
 					}),
 				);