diff --git a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts index b6e54e3..06b75b8 100644 --- a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts +++ b/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; }