On-screen text
Pretext turns word into place while you the
[+LIFE]
[WIDEN]
Fast, accurate & comprehensive text measurement & layout
Read me
MIT license
Pretext
Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side.
Pretext side-steps the need for DOM measurements (e.g. getBoundingClientRect, offsetHeight), which trigger layout reflow, one of the most expensive operations in the browser. It implements its own text measurement logic, using the browsers' own font engine as ground truth (very AI-friendly iteration method).
Installation
npm install @chenglou/pretext
Demos
Clone the repo, run bun install, then bun start, and open /demos/index in your browser. On Windows, use
bun run start:windows. Alternatively, see them live at. Some more at
API
Pretext serves 2 us:
1. Measure a p
import { layout } from '@chenglou/pretext'
Copied!
(This is a demonstration of the Pretext library, which is a JavaScript/TypeScript library for multiline text measurement and layout. It is fast, accurate, and supports many languages. It allows rendering to DOM, Canvas, SVG, and soon, server-side. The library side-steps the need for DOM measurements, which trigger layout reflow, one of the most expensive operations in the browser. It implements its own text measurement logic, using the browsers' own font engine as ground truth. The video shows how to install and use the library, and provides a demo of its capabilities. The library is also capable of rendering to DOM, Canvas, SVG, and soon, server-side. It is also capable of rendering to DOM, Canvas, SVG, and soon, server-side.)