src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts

@@ -20,6 +20,7 @@ export function createCharacterComparison(
     fontA: () => { name: string; id: string },
     fontB: () => { name: string; id: string },
     weight: () => number,
+    size: () => number,
 ) {
     let lines = $state<LineData[]>([]);
     let containerWidth = $state(0);
@@ -48,7 +49,13 @@ export function createCharacterComparison(
      * Matches the Tailwind breakpoints used in the component.
      */
     function getFontSize() {
-        if (typeof window === 'undefined') return 64;
+        // const fontSize = size();
+        // if (fontSize) {
+        //     return fontSize;
+        // }
+        if (typeof window === 'undefined') {
+            return 64;
+        }
         return window.innerWidth >= 1024
             ? 112
             : window.innerWidth >= 768
@@ -80,6 +87,7 @@ export function createCharacterComparison(
         const ctx = measureCanvas.getContext('2d');
         if (!ctx) return;
 
+        const controlledFontSize = size();
         const fontSize = getFontSize();
         const currentWeight = weight(); // Get current weight
         const words = text().split(' ');
@@ -90,8 +98,20 @@ export function createCharacterComparison(
             if (words.length === 0) return;
             const lineText = words.join(' ');
             // Measure both fonts at the CURRENT weight
-            const widthA = measureText(ctx!, lineText, fontA().name, fontSize, currentWeight);
+            const widthA = measureText(
-            const widthB = measureText(ctx!, lineText, fontB().name, fontSize, currentWeight);
+                ctx!,
+                lineText,
+                fontA().name,
+                Math.min(fontSize, controlledFontSize),
+                currentWeight,
+            );
+            const widthB = measureText(
+                ctx!,
+                lineText,
+                fontB().name,
+                Math.min(fontSize, controlledFontSize),
+                currentWeight,
+            );
             const maxWidth = Math.max(widthA, widthB);
             newLines.push({ text: lineText, width: maxWidth });
         }
@@ -101,8 +121,20 @@ export function createCharacterComparison(
                 ? currentLineWords.join(' ') + ' ' + word
                 : word;
             // Measure with both fonts and use the wider one to prevent layout shifts
-            const widthA = measureText(ctx, testLine, fontA().name, fontSize, currentWeight);
+            const widthA = measureText(
-            const widthB = measureText(ctx, testLine, fontB().name, fontSize, currentWeight);
+                ctx,
+                testLine,
+                fontA().name,
+                Math.min(fontSize, controlledFontSize),
+                currentWeight,
+            );
+            const widthB = measureText(
+                ctx,
+                testLine,
+                fontB().name,
+                Math.min(fontSize, controlledFontSize),
+                currentWeight,
+            );
             const maxWidth = Math.max(widthA, widthB);
 
             if (maxWidth > availableWidth && currentLineWords.length > 0) {