glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 +37 -5
1 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a5380333eb - Show all commits

42
src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
View File

@@ -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 widthB = measureText(ctx!, lineText, fontB().name, fontSize, currentWeight);
const widthA = measureText(
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 widthB = measureText(ctx, testLine, fontB().name, fontSize, currentWeight);
const widthA = measureText(
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) {