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

feat(appliedFontsStore): incorporate implemented font weight logic

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-20 14:21:07 +03:00
parent 55a560b785
commit d4d2d68d9a
4 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@ export function createCharacterComparison(
text: () => string,
fontA: () => { name: string; id: string },
fontB: () => { name: string; id: string },
weight: () => number,
) {
let lines = $state<LineData[]>([]);
let containerWidth = $state(0);
@@ -29,14 +30,16 @@ export function createCharacterComparison(
* @param text - Text string to measure
* @param fontFamily - Font family name
* @param fontSize - Font size in pixels
* @param fontWeight - Font weight
*/
function measureText(
ctx: CanvasRenderingContext2D,
text: string,
fontFamily: string,
fontSize: number,
fontWeight: number,
): number {
ctx.font = `bold ${fontSize}px ${fontFamily}`;
ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
return ctx.measureText(text).width;
}
@@ -62,6 +65,7 @@ export function createCharacterComparison(
* @param container - The container element to measure width from
* @param measureCanvas - The canvas element used for text measurement
*/
function breakIntoLines(
container: HTMLElement | undefined,
measureCanvas: HTMLCanvasElement | undefined,
@@ -70,15 +74,14 @@ 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;
const ctx = measureCanvas.getContext('2d');
if (!ctx) return;
const fontSize = getFontSize();
const currentWeight = weight(); // Get current weight
const words = text().split(' ');
const newLines: LineData[] = [];
let currentLineWords: string[] = [];
@@ -86,9 +89,9 @@ export function createCharacterComparison(
function pushLine(words: string[]) {
if (words.length === 0) return;
const lineText = words.join(' ');
// Measure width to ensure we know exactly how wide this line renders
const widthA = measureText(ctx!, lineText, fontA().name, fontSize);
const widthB = measureText(ctx!, lineText, fontB().name, fontSize);
// 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 maxWidth = Math.max(widthA, widthB);
newLines.push({ text: lineText, width: maxWidth });
}
@@ -97,10 +100,9 @@ export function createCharacterComparison(
const testLine = currentLineWords.length > 0
? 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);
const widthB = measureText(ctx, testLine, fontB().name, fontSize);
const widthA = measureText(ctx, testLine, fontA().name, fontSize, currentWeight);
const widthB = measureText(ctx, testLine, fontB().name, fontSize, currentWeight);
const maxWidth = Math.max(widthA, widthB);
if (maxWidth > availableWidth && currentLineWords.length > 0) {
@@ -111,10 +113,7 @@ export function createCharacterComparison(
}
}
if (currentLineWords.length > 0) {
pushLine(currentLineWords);
}
if (currentLineWords.length > 0) pushLine(currentLineWords);
lines = newLines;
}