header-langage
简体中文
繁體中文
English
Tiếng Việt
한국어
日本語
ภาษาไทย
Türkçe
Scan to Download the APP

"The Future of Text Layout is Not CSS": Midjourney Engineer Open Sources Pretext

According to 1M AI News monitoring, Midjourney engineer and React animation library react-motion author Cheng Lou has open-sourced Pretext, a pure JavaScript/TypeScript text measurement and typesetting library with zero dependencies. Pretext bypasses browser DOM measurements (such as `getBoundingClientRect`, `offsetHeight`), avoids layout reflows, and accomplishes text height calculation and line breaking through pure arithmetic.

Pretext operates in two phases: `prepare()` measures character widths at once using the Canvas API, and `layout()` performs pure arithmetic based on cached width data. In a benchmark test with 500 text segments, `prepare()` takes about 19ms, while `layout()` only requires 0.09ms. Cheng Lou wrote in the accompanying article, "The performance improvement is not incremental, but qualitative: 0.05ms compared to 30ms, zero reflows compared to five hundred."

The library supports all languages including CJK, Arabic, as well as emojis, mixed-directional text, and can be rendered to DOM, Canvas, SVG. Typical use cases include:

1. Virtual lists and occlusion culling without guessing heights
2. JavaScript-driven custom layouts like waterfall flow
3. Chat bubble multi-line text with adaptive width shrinkage
4. Text wrapping around images for editing and typesetting

举报 Correction/Report
Correction/Report
Submit
Add Library
Visible to myself only
Public
Save
Choose Library
Add Library
Cancel
Finish