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

@@ -77,6 +77,7 @@ export function createCharacterComparison(
 
         const rect = container.getBoundingClientRect();
         containerWidth = rect.width;
+
         // Padding considerations - matches the container padding
         const padding = window.innerWidth < 640 ? 48 : 96;
         const availableWidth = rect.width - padding;
@@ -132,8 +133,52 @@ export function createCharacterComparison(
                 currentWeight,
             );
             const maxWidth = Math.max(widthA, widthB);
+            const isContainerOverflown = maxWidth > availableWidth;
 
-            if (maxWidth > availableWidth && currentLineWords.length > 0) {
+            if (isContainerOverflown) {
+                if (currentLineWords.length > 0) {
+                    pushLine(currentLineWords);
+                    currentLineWords = [];
+                }
+
+                let remainingWord = word;
+                while (remainingWord.length > 0) {
+                    let low = 1;
+                    let high = remainingWord.length;
+                    let bestBreak = 1;
+
+                    // Binary Search to find the maximum characters that fit
+                    while (low <= high) {
+                        const mid = Math.floor((low + high) / 2);
+                        const testFragment = remainingWord.slice(0, mid);
+
+                        const wA = measureText(
+                            ctx,
+                            testFragment,
+                            fontA().name,
+                            fontSize,
+                            currentWeight,
+                        );
+                        const wB = measureText(
+                            ctx,
+                            testFragment,
+                            fontB().name,
+                            fontSize,
+                            currentWeight,
+                        );
+
+                        if (Math.max(wA, wB) <= availableWidth) {
+                            bestBreak = mid;
+                            low = mid + 1;
+                        } else {
+                            high = mid - 1;
+                        }
+                    }
+
+                    pushLine([remainingWord.slice(0, bestBreak)]);
+                    remainingWord = remainingWord.slice(bestBreak);
+                }
+            } else if (maxWidth > availableWidth && currentLineWords.length > 0) {
                 pushLine(currentLineWords);
                 currentLineWords = [word];
             } else {
@@ -141,7 +186,9 @@ export function createCharacterComparison(
             }
         }
 
-        if (currentLineWords.length > 0) pushLine(currentLineWords);
+        if (currentLineWords.length > 0) {
+            pushLine(currentLineWords);
+        }
         lines = newLines;
     }