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

feat(createCharacterComparison): add support for font size change

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-21 21:56:34 +03:00
parent 46de3c6e87
commit a5380333eb
1 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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