chenglou / chenglou/pretext

Expose fontKerning option in prepare() — align measurement with rendering

Open
#199 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
50.3k
Forks
2.7k
Avg merge
2h 40m
Merged PRs (30d)
69

Description

## Problem

pretext's core value is "accurate measurement without DOM reflow". However, measurement is always locked to the browser default kerning (`"auto"`, which typically applies kerning) because `prepare()` never sets `ctx.fontKerning` when measuring with `measureText()`.

When a consumer renders with kerning disabled (`font-kerning: none` / `ctx.fontKerning = "none"`), pretext's measured widths no longer match the rendered text, causing bounding-box / layout mismatches.

So this isn't really "I want kerning off" — it's that there's **no way to align the measurement's kerning mode with the actual rendering**. Today `PrepareOptions` only exposes `whiteSpace`, `wordBreak`, and `letterSpacing`.

## Proposal

Add an optional `fontKerning` to `PrepareOptions`:

```ts
export type PrepareOptions = {
whiteSpace?: WhiteSpaceMode
wordBreak?: WordBreakMode
letterSpacing?: number
fontKerning?: 'auto' | 'normal' | 'none' // default 'auto' (current behavior)
}
```

Then set `ctx.fontKerning` alongside `ctx.font` in the measurement path.

Defaulting to `'auto'` keeps the current behavior intact. Users who render with kerning are unaffected; users who render with a different kerning mode can align measurement with their rendering. → **non-breaking**.

### Note on caching
Segment widths are cached by `(segment, font)`. Since kerning mode affects width, the cache key needs to include `fontKerning` (e.g. `(segment, font, fontKerning)`) so a width measured under a different kerning mode isn't reused incorrectly.

Happy to open a PR if this direction sounds good.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at prepare() and its PrepareOptions type, then trace the measurement path where ctx.font is set before measureText(). Inspect the segment-width cache keyed by segment and font. Done means the optional fontKerning setting preserves the default behavior, affects measurement, and prevents widths from being reused across kerning modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.