PreText

Zero-DOM-reflow text measurement and layout. Pure JavaScript that outperforms browser layout APIs by avoiding expensive reflows.

πŸ“ Live Layout Demo

🎨 Rendered Output

πŸ“Š Layout Stats

Line Count -
Total Height -
Layout Time -
Avg Line Width -

⚑ Performance Comparison

Method Time (500 texts) Triggers Reflow Status
DOM Layout (getBoundingClientRect) ~19,000ms Yes β€” 500 reflows Slow
PreText prepare() ~19ms No β€” canvas measureText Fast
PreText layout() ~0.09ms No β€” pure arithmetic Instant
DOM: 19,000ms
PreText: 19ms

PreText is 1000x faster by avoiding DOM reflow

🌍 Universal Language Support

πŸ‡¨πŸ‡³

CJK Scripts

Chinese, Japanese, Korean with proper line breaking and width measurement

🌍

BiDi Text

Mixed left-to-right and right-to-left text (Arabic, Hebrew) handled correctly

πŸš€

Emoji & Unicode

Full emoji support and modern Unicode grapheme clusters

πŸ’‘ Use Cases

πŸ“

Virtualization

Know exact heights before rendering. No guesstimates needed.

🎨

Canvas/SVG

Render text to non-DOM targets with precise line breaks.

πŸ€–

AI Development

Verify UI constraints at dev time without browser testing.

πŸ“

Custom Layouts

Masonry, text around images, JS-driven flexbox implementations.

⚑

Prevent Layout Shift

Pre-calculate heights before new text loads to re-anchor scroll.

πŸ“¦

Shrink Wrap

Find minimum container width that fits multiline text.

πŸ“¦ Get PreText

npm install @chenglou/pretext

Created by Cheng Lou β€’ View on GitHub