PDF Reflow Engine
The same article is re-composed into phone, tablet, poster, and editorial spreads instantly.
This demo treats one article as a reusable source document and asks a harder question than responsive design: how should this same story be composed for radically different reading surfaces? The answer comes from measured text blocks, multi-region flow, and preset-aware hierarchy rather than CSS guesswork.
prepare()layout()layoutNextLine() What this demonstrates
One source article can be measured and recomposed into very different publication formats: phone article, tablet story, editorial spread, or poster-like promo. The geometry changes, but the content remains the same prepared document.
Relevant Pretext API
prepare()+layout()for headline and single-block metricslayoutNextLine()for flowing the body through multiple preset regions
Why this matters
Most responsive systems resize components after the fact. A true reflow engine needs to know the reading consequences before paint, so it can decide whether an article becomes a single column, a spread, or a poster teaser without DOM measurement loops.
Quick start
import { prepare, layout, layoutNextLine, buildFont } from '@chenglou/pretext';
const preset = { width: 920, columns: 3, bodyFont: 16, headlineFont: 40 };
const titleFont = buildFont(preset.headlineFont, 'Georgia, serif');
const bodyFont = buildFont(preset.bodyFont, 'Georgia, serif');
// Headline and byline are measured first.
const titlePrepared = prepare(title, titleFont);
const titleHeight = layout(titlePrepared, preset.width - 60, 44).height;
// The body then flows through explicit regions.
let cursor = { segmentIndex: 0, graphemeIndex: 0 };
for (const region of regionsForPreset(preset)) {
while (region.hasRoom()) {
const line = layoutNextLine(preparedBody, cursor, region.widthAtY());
if (!line) break;
drawLine(line.text, region.x, region.y);
cursor = line.end;
}
}