Show HN: React hooks that predict text height before render, using font metrics

8 points

2 months ago

I built @pretext-studio/core to solve a specific annoyance: the browser won't tell you how tall a text block is until after it renders. This forces you into either a render-then-measure cycle (which causes layout shift) or hacks like max-height: 9999px for accordion animations (which makes easing look wrong because the animation runs over 9999px, not the actual content height).

The library wraps @chenglou/pretext, a pure-JS text layout engine that replicates the browser's line-breaking. algorithm using font metrics loaded once via the Font Metrics API. From there, computing height is arithmetic — no DOM, no getBoundingClientRect, no reflow. A prepare() call runs in ~0.03ms; a layout() call in under 0.01ms. Results are cached in a module-level LRU map so repeated calls for the same font/size pair are nearly free.

The main hooks are useTextLayout (height + line count for a block at a given width), useBubbleMetrics (finds the tightest width that preserves line count, which eliminates the dead space you get from CSS fit-content), and useStableList (pre-computes heights for a list of items before paint, useful for virtualized lists and masonry layouts). There's also a MeasuredText drop-in component with a debug overlay that draws predicted line boundaries over actual rendered text so you can see where predictions diverge.

The honest limitation: it only works with fonts you can load metrics for, so arbitrary system fonts or poorly-behaved variable fonts may drift. The isReady flag on every hook is false until font metrics load, so you need to gate renders on it when using web fonts. It also doesn't handle white-space: pre-wrap yet. Feedback welcome — especially if you've hit edge cases with font loading or non-Latin scripts.

GitHub: https://github.com/ahmadparizaad/pretext-studio-core — npm: @pretext-studio/core

2 comments