Introduction to Postext

A programmable typesetter for the web.

Open any beautifully typeset book. Notice how the text sits on the page: columns perfectly balanced, images nestled into the flow, no awkward gaps, no lonely lines stranded at the top of a column. Centuries of craft went into making that feel effortless.

Now open a webpage. Even the best ones feel different. Text slams into images. Columns overflow or sit half-empty. Footnotes vanish to the bottom of the page instead of staying near the words that reference them. The web gave us responsive layout — but it never gave us editorial layout.

Postext closes that gap. It is a layout engine that takes your content — enriched markdown with images, footnotes, pull quotes, and figures — and applies the same rules a professional typesetter would: orphan and widow prevention, column balancing, text flowing around obstacles, deliberate spacing. The output is publication-grade layout geometry for both HTML and PDF.

Built on @chenglou/pretext for DOM-free text measurement at speeds that make all of this possible.

#The Gap Between Print and Web

For centuries, typesetters have followed rules that make text pleasant to read. These are not aesthetic preferences — they are hard-won principles refined across generations of printed books, newspapers, and magazines:

• No orphans (a single line of a paragraph stranded at the top of a column).
• No widows (a single line of a paragraph left behind at the bottom).
• Balanced columns (roughly equal height across columns on a spread).
• Text flowing around figures, pull quotes, and inset images.
• Proper placement of footnotes at the bottom of the column where they are referenced.
• Margin notes aligned with the paragraph that cites them.
• Consistent and deliberate spacing around headings, block quotes, and figures.
• Hyphenation that avoids rivers and excessive rag.

Two of these rules are so fundamental that they deserve special attention — because the web violates them on virtually every page.

Two concrete numbers are enough to measure the distance:

• Line measure. Bringhurst puts the comfortable range at 45–75 characters per line in a single column (and 40–50 in multi-column); the WCAG 1.4.8 accessibility guideline caps it at 80. Most websites let lines stretch to 100, 120, or more — well past the point where the eye can track a line without losing its place.
• Leading. Tradition recommends 1.3–1.5 times the font size, and WCAG 1.4.12 requires content to remain functional at 1.5× or more. But the right value depends on the measure: leading that reads well at 50 characters feels tight at 90. Typesetters tune one against the other; CSS offers no automatic way to do it.

And here CSS runs out: you get column-count, and little else. No control over resource placement, no overflow awareness, no cross-column orphan or widow prevention, no native way to flow text around an arbitrary obstacle. Multi-column editorial layouts on the web remain hand-crafted — static designs that break the moment the screen size changes.

The web has had responsive layout for over a decade — flexbox, grid, containers that adapt to any screen. What it has never had is responsive editorial layout: the kind where content reflows intelligently through columns, around images, past footnotes, obeying the rules that make text pleasant to read.

#A Decade Looking for the Missing Piece

The Content First project started in 2014 as an early attempt to bring editorial layout quality to the web. Column-based layouts, text flow experiments, successive prototypes — and always the same wall: you cannot make good layout decisions without knowing exactly how much space text will occupy.

That sounds simple, but it is the whole problem. Every time you ask the browser "how tall is this paragraph at this width?", you trigger a full layout reflow. Do that a few hundred times for a complex multi-column document and the page freezes. The browser was never designed for this kind of speculative measurement — trying ten different column widths to find the best one, testing where to break a paragraph, checking if an image fits here or needs to move to the next column.

I needed a way to measure text that was fast enough to experiment freely, without locking up the main thread. For a decade, that tool did not exist.

#The Missing Piece

In 2025, Cheng Lou released Pretext: a DOM-free text measurement library, 300 to 600 times faster than browser reflow and pixel-perfect across Chrome, Safari and Firefox. It uses canvas font metrics and pure arithmetic to compute text height and line breaks without ever touching the DOM.

With Pretext, the bottleneck that blocked this work for ten years disappears. Measure thousands of text blocks in milliseconds, try ten different column configurations and keep the best, run the entire layout algorithm on every window resize without blocking the main thread.

Postext is what happens next.

#Pretext + Postext

The naming is intentional: two halves of the same operation. Keeping them separate matters because they are distinct responsibilities — one measures, the other decides — and isolating measurement lets any backend consume it without coupling to editorial rules.

Pretext is what happens before text is placed: measuring how much space it will need. DOM-free, canvas-based, operating on pure numbers.

Postext is what happens after measurement: the editorial decisions. Given exact dimensions for every text block at any width, the engine decides where each element goes — which column, at what position, flowing around which resources, obeying which typographic rules.

import { prepare, layout } from '@chenglou/pretext';
import { buildDocument, renderToCanvas, renderToHtml } from 'postext';
import { renderToPdf } from 'postext-pdf';
 
// pretext: measure (the "pre" work)
const prepared = prepare(paragraphText, '16px/1.5 Inter');
const { height } = layout(prepared, columnWidth, 24);
// => "This paragraph is 144px tall at this column width."
 
// postext: decide (the "post" work)
const vdt = buildDocument(content, config);
// => A complete Virtual Document Tree with every paragraph,
//     heading, and resource placed at exact coordinates.
 
// One VDT, three output modes:
const canvases = renderToCanvas(vdt);                       // pixel-accurate bitmap per page
const html = renderToHtml(vdt);                             // selectable DOM for the web
const pdfBytes = await renderToPdf(vdt, { fontProvider });  // print-ready PDF

Pretext gives you the measurements. Postext gives you the layout.

Pretext was created by Cheng Lou. Postext builds on top of it.

#How It Works

The process has three stages:

1. You provide the content. Enriched markdown with referenced resources — images, tables, figures, footnotes, pull quotes. The content is purely semantic: it describes what to present, not how. Layout decisions are never hardcoded into the source.

2. The engine makes the decisions. Postext parses the content, calls Pretext for pixel-perfect text measurement without touching the DOM, and then runs seven layout passes: balancing columns, placing resources, preventing widows and orphans, aligning baselines, refining spacing. Every decision is driven by configuration — you control the rules, the engine applies them.

3. You get a complete layout. Precise coordinates and dimensions for every element on every page. Renderers translate this geometry to the target format — canvas for a pixel-accurate bitmap preview (renderToCanvas, renderPage), HTML for selectable, resize-aware typography on the web (renderToHtml, renderToHtmlIndexed), and PDF for print-ready output with embedded fonts (renderToPdf, from the postext-pdf package). The same content, the same rules, three interchangeable outputs.

For a detailed look at the engine internals — the Virtual Document Tree, the seven-pass pipeline, and the convergence loop — see the Architecture document. For a complete reference of all configuration options and their defaults, see the Configuration page.

#Acknowledgments

Pretext by Cheng Lou — the foundational text measurement library that makes Postext possible. Without DOM-free, pixel-perfect measurement at sub-millisecond speed, none of this would be practical.

Content First (~2014) — the original exploration into high-quality editorial layout on the web. A decade of running into walls, learning what does not work, and building the conviction that this problem deserves a real solution.

Postext stands on centuries of typographic tradition. The rules it implements are not invented — they are inherited from the work of typesetters, typographers, and designers who refined the art of making text readable long before screens existed. From Gutenberg's movable type to Tschichold's asymmetric typography to Bringhurst's Elements of Typographic Style, the craft of arranging text on a page has been evolving for over five hundred years. Postext brings that accumulated wisdom to the web, where it has been conspicuously absent.