app/lib/inter-width.ts

Functions

Imports

It imports app/lib/inter-advances.generated.ts. Imported by app/components/filter-link.tsx.

Source

1import { INTER_ADVANCES } from "./inter-advances.generated.ts";
2
3/*
4 * A filter link's box is sized from Inter's own advances, so the row wraps the same way in whichever
5 * face is drawing it. Wrapping by measured glyph width re-flowed the /writing tag row when Inter replaced
6 * its fallback: the metric-matched Arial held the row still only between size-adjust 108% and 110%, and
7 * a machine with a different Arial fell outside that window (nightly CLS 0.094).
8 */
9export function interWidthEm(text: string, weight: 400 | 600): number {
10  const advances = INTER_ADVANCES[weight];
11  // Wider than any Latin glyph, so a character outside the table can only widen the box.
12  const unknown = Math.max(...advances);
13  let width = 0;
14  for (const char of text) {
15    const code = char.codePointAt(0) ?? 0;
16    width += advances[code - 32] ?? unknown;
17  }
18  return Math.ceil(width * 100) / 100;
19}