Ranjan Marathe

Engineering, ML, and occasional thoughts

Pretext masonry · initializing…
posts 9 prepare() layout() reflows 0
pretext layout masonry performance interactive
How does this page use Pretext?

This page uses @chenglou/pretext to measure every card's title and excerpt height before rendering any DOM. Normal web pages use getBoundingClientRect() to measure text — each call forces the browser to do a synchronous layout reflow. Pretext replaces that with pure arithmetic over cached canvas measurements.

1 · prepare()

Segments text via Intl.Segmenter, measures each word via canvas measureText(), caches widths. Done once per text.

2 · layout()

Pure arithmetic over cached widths. Returns exact height and line count. ~0.0002ms per text. No DOM reads.

3 · Masonry

Card heights are known before render → CSS column masonry packs tightly with zero layout shift.

4 · Hover

Hover any card to see Pretext measurement data: line count and pixel height for title + excerpt.