Repolode
Submit
chenglou

chenglou/pretext

Pure JavaScript/TypeScript library that measures and lays out multiline text without triggering DOM reflow, rendering to DOM, Canvas or SVG.

View on GitHubWebsite
Stars
50,839
Forks
2,761
Open issues
65
Last commit
5 days ago

What is it?

Pretext measures multiline text and computes line breaks in plain JavaScript or TypeScript, so layout code can get a paragraph's height or its individual lines without reading `getBoundingClientRect` or `offsetHeight`. Those DOM reads force the browser to reflow the page, which is costly. Pretext uses the browser's canvas text measurement as its source of widths and applies its own line-breaking logic on top.

The basic flow is two calls: `prepare()` analyzes and measures the text once for a given font, and `layout()` returns `height` and `lineCount` for any max width and line height using only arithmetic on cached widths. Lower-level APIs return individual lines, line widths, or cursors for manual layouts such as shrink-wrapped bubbles, text flowing around an image, or ellipsis clamping. A rich inline API handles mixed fonts, code spans, and inline boxes such as images or chips.

The library supports `normal` and `pre-wrap` white-space modes, `keep-all` word breaking, and letter spacing. It needs a browser with Canvas 2D text measurement, Unicode property escapes, and `Intl.Segmenter`; outside a browser, a custom `OffscreenCanvas` measurer must be supplied.

Key features

  • 01Computes paragraph height and line count without DOM reflow, using `prepare()` and `layout()`.
  • 02Returns individual lines, line widths and cursors for manual layout work.
  • 03Includes a rich inline API for mixed fonts, code spans and inline boxes.
  • 04Supports `pre-wrap`, `keep-all` word breaking and letter spacing.
  • 05Renders results to DOM, Canvas or SVG.

Use cases

  • Virtualizing long lists by knowing each item's height before rendering.
  • Shrink-wrapping chat bubbles to their widest line.
  • Flowing text around floated images with lines of varying width.
  • Checking in development that button labels do not wrap to a second line.

Quick start

  1. 1

    Install the package from npm

    npm install @chenglou/pretext
  2. 2

    Import prepare and layout, then measure a paragraph's height without touching the DOM

Things to know

  • The license is listed as NOASSERTION, so the terms of use are unclear and should be checked before adoption.
  • Layout depends on the browser's font engine for measurement, so exact results depend on the fonts available.

Topics

#text-layout#text-measurement#typescript#canvas#reflow#typography

FAQ

What is pretext?
Pure JavaScript/TypeScript library that measures and lays out multiline text without triggering DOM reflow, rendering to DOM, Canvas or SVG. Pretext measures multiline text and computes line breaks in plain JavaScript or TypeScript, so layout code can get a paragraph's height or its individual lines without reading `getBoundingClientRect` or `offsetHeight`. Those DOM reads force the browser to reflow the page, which is costly. Pretext uses the browser's canvas text measurement as its source of widths and applies its own line-breaking logic on top.
Is pretext free to use? What license does it have?
pretext is open source under the Other license. Check the license terms before using it in commercial products.
Is pretext still maintained?
Actively maintained. The last commit to pretext was on Oct 15, 2026.
What can I use pretext for?
Virtualizing long lists by knowing each item's height before rendering. Shrink-wrapping chat bubbles to their widest line. Flowing text around floated images with lines of varying width. Checking in development that button labels do not wrap to a second line.
How do I install pretext?
Install the package from npm: npm install @chenglou/pretext Import prepare and layout, then measure a paragraph's height without touching the DOM
Where can I get pretext?
The source code and installation instructions are on GitHub: https://github.com/chenglou/pretext

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects