# Even word spacing in narrow justified columns
> Knuth–Plass breaking with word spaces held to 0.8–1.6 times normal, set beside a greedy control whose loose lines, lone lines and runts are marked from the VDT.
- HTML version: https://postext.dev/en/cookbook/justification-lab
- Recipe Nº 014 · Type & text · Level 3 (Advanced) · Outputs: Canvas
- Genres: Magazines & zines
- Requires postext ≥ 1.4.1 · tested with 1.4.1 on 2026-09-26
- Pages: [1](https://postext.dev/cookbook/justification-lab/en/p01.webp?v=4e2eaa90), [2](https://postext.dev/cookbook/justification-lab/en/p02.webp?v=4e2eaa90), [3](https://postext.dev/cookbook/justification-lab/en/p03.webp?v=4e2eaa90)
- Last updated: 2026-09-26
- Other languages: [es](https://postext.dev/es/cookbook/justification-lab.md)
## What you'll build
Issue 12 of *Galley*, a type lab's journal, set on A5 in two columns of about forty characters, where a justified line has only five or six word spaces to take up the slack. The opener draws the Knuth–Plass model on a graphite band: a line of word boxes whose yellow springs of glue stretch to fill the measure. The essay explains why narrow columns go loose and prints the settings behind each rule in mono between its paragraphs. At the foot of page 3 a bench test sets one paragraph ragged, justified without hyphens and justified with them. The pen also sets the issue with first-fit breaking and the widow and orphan guards off, and shows both page 2s side by side above the pages, as on this recipe's card, with loose lines washed in highlighter yellow and lone lines and runts tagged in the margin.
**This recipe answers:**
- How do I get even justification in narrow columns, with the right hyphenation for each language?
- How do I avoid widows, orphans and one-word last lines (runts), and keep a heading with its text?
- Why is one line set ragged or over-stretched (URLs, long compounds, long words in cells)?
- How do I find out what is wrong with my document (warnings, overflow, non-converging layout)?
## The short answer
One design, two line breakers: Knuth–Plass inside fences, greedy without.
```js
// script.js, lines 39–57
// Knuth–Plass breaking, hyphenation and the widow, orphan and runt penalties are all on by
// default. A narrow column also needs a tighter fence round the glue, in multiples of a
// normal word space (defaults 0.6 and 2): lines past the upper fence cost more than any
// hyphen, so the breaker hyphenates or re-breaks the paragraph before it stretches that far.
const FENCES = { minWordSpacing: 0.8, maxWordSpacing: 1.6 };
const bodyText = { // config().bodyText
fontFamily: TEXT, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
firstLineIndent: mm(4), indentAfterHeading: false, // justified and hyphenated by default
...FENCES,
};
// Hyphenation follows the document's locale, by exact code (gotcha: hyphenation-locales):
const locale = t({ en: 'en-us', es: 'es' }); // config().locale; 'es-ES' would be English
// The control: first-fit breaking, which sets each line once and moves on, with the widow and
// orphan guards off (runts are priced inside Knuth–Plass only). Same text, fonts and measure;
// a fresh object on every call, like config() itself, because the engine caches resolved
// configs by identity (gotcha: config-cache-identity).
const GREEDY = { optimalLineBreaking: false, avoidWidows: false, avoidOrphans: false };
const control = () => ({ ...config(), bodyText: { ...bodyText, ...GREEDY } });
```
## Ingredients
**Teaches**
- [Optimal line breaking (Knuth–Plass)](https://postext.dev/en/docs/justification.md#knuth-plass-seeing-the-whole-paragraph): Breaks each paragraph as a whole for even word spacing, within word-spacing bounds, instead of filling line by line.
- [Widows, orphans and runts](https://postext.dev/en/docs/configuration.md#orphans-widows-runts-and-keep-together-rules): Keeps lone lines off column tops and feet and one-word last lines out of paragraphs; keeps a heading with its text, and a paragraph ending in a colon with the list it introduces.
- [Warnings and diagnostics](https://postext.dev/en/docs/configuration.md#debug): Layout warnings, parse issues and convergence, the Highlight Loose Lines and Page Negative aids, and the Sandbox's Checks panel.
**Also uses**
- [Hyphenation and document language](https://postext.dev/en/docs/justification.md#supported-locales)
- [Indents, alignment and paragraph spacing](https://postext.dev/en/docs/configuration.md#body-text)
- [Columns inside a box](https://postext.dev/en/docs/document-format.md#columns)
- [Nested boxes](https://postext.dev/en/docs/configuration.md#the-callout-container)
- [Callout boxes](https://postext.dev/en/docs/configuration.md#callout-styles)
- [Designed openers](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
- [Pictures in page designs](https://postext.dev/en/docs/configuration.md#image-elements)
- [Heading attributes](https://postext.dev/en/docs/document-format.md#heading-attributes)
- [Paragraph styles](https://postext.dev/en/docs/configuration.md#paragraph-styles)
- [Pages on a canvas](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap)
- [Figures and tables as resources](https://postext.dev/en/docs/document-format.md#resources)
- [Semantic colour palette](https://postext.dev/en/docs/configuration.md#color-palette)
- [Running heads and folios](https://postext.dev/en/docs/configuration.md#headers--footers)
- [Heads by page role](https://postext.dev/en/docs/configuration.md#text-elements)
- [Full-width chapter band](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
**Config at a glance**
- [`bodyText`](https://postext.dev/en/docs/configuration.md#body-text), [`calloutStyles`](https://postext.dev/en/docs/configuration.md#callout-styles), [`colorPalette`](https://postext.dev/en/docs/configuration.md#color-palette), [`footer`](https://postext.dev/en/docs/configuration.md#headers--footers), [`header`](https://postext.dev/en/docs/configuration.md#headers--footers), [`headings`](https://postext.dev/en/docs/configuration.md#headings), [`layout`](https://postext.dev/en/docs/configuration.md#layout), [`locale`](https://postext.dev/en/docs/configuration.md#hyphenation), [`page`](https://postext.dev/en/docs/configuration.md#page), [`paragraphStyles`](https://postext.dev/en/docs/configuration.md#paragraph-styles)
**APIs**
- [`buildDocument`](https://postext.dev/en/docs/configuration.md#building-a-document), [`clearMeasurementCache`](https://postext.dev/en/docs/configuration.md#measurement-cache), [`parseMarkdownWithIssues`](https://postext.dev/en/docs/configuration.md#parsing), [`registerResourceImage`](https://postext.dev/en/docs/architecture.md#api-surface), [`renderPageToCanvas`](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap)
**Typefaces**
- Petrona (OFL-1.1), Bricolage Grotesque (OFL-1.1), Source Code Pro (OFL-1.1)
## Method
### 1 · Tighten the fences, keep the guards
The code for this step is [the short answer](#the-short-answer) above. [Knuth–Plass](/en/docs/justification#knuth-plass-seeing-the-whole-paragraph), hyphenation, the widow, orphan and runt penalties and keep-with-next headings are on by default, so the published edition only narrows the [word-spacing bounds](/en/docs/justification#word-spacing-bounds) to 0.8 and 1.6 times a normal space (the defaults are 0.6 and 2). A line past the upper bound costs more than any hyphen or runt, so the breaker tries other breaks first; delete the two bounds and this essay sets two lines past 1.6. Hyphenation follows `locale` by exact code: `'es'`, `'fr'` and `'de'` get their own TeX patterns, while `'es-ES'` is hyphenated as American English with no warning.
### 2 · Mark loose lines from the layout tree
```js
// script.js, lines 303–345
// debug.looseLineHighlight is Sandbox-only (gotcha: sandbox-only-warnings), so the pen reads the
// VDT: justified lines carry justifiedSpaceRatio; a paragraph cut by a column is two blocks.
function marks(doc, page) {
const body = doc.pages.flatMap((p) => p.columns.flatMap((c) => c.blocks)).filter((b) =>
b.type === 'paragraph' && b.containerId === undefined && b.textAlign === 'justify');
const out = [];
for (const column of page.columns) {
for (const b of column.blocks.filter((x) => body.includes(x))) {
const parts = body.filter((o) => o.contentIndex === b.contentIndex);
b.lines.forEach((line) => {
const at = { x: b.bbox.x, y: line.bbox.y, w: b.bbox.width, h: line.bbox.height, column };
if (line.justifiedSpaceRatio > FENCES.maxWordSpacing || line.ragged) {
out.push({ ...at, kind: 'loose' }); // ragged: past 3×, so the engine set it ragged
}
if (b.lines.length === 1 && parts.length > 1) { // Postext's names (see the essay):
out.push({ ...at, kind: b === parts[0] ? 'widow' : 'orphan' }); // foot : head
} else if (line.isLastLine && !/\s/.test(line.text.trim())) {
out.push({ ...at, kind: 'runt' }); // one word alone on a paragraph's last line
}
});
}
}
return out;
}
const TAGS = t({ en: { widow: 'widow', orphan: 'orphan', runt: 'runt' },
es: { widow: 'viuda', orphan: 'huérfana', runt: 'corta' } });
function paintMarks(canvas, list, scale) {
const ctx = canvas.getContext('2d');
ctx.setTransform(scale, 0, 0, scale, 0, 0); // page px from here on
for (const m of list) { // loose lines: a wash; lone lines and runts: a tag in the margin
const loose = m.kind === 'loose';
ctx.globalCompositeOperation = loose ? 'multiply' : 'source-over'; // the ink shows through
ctx.fillStyle = loose ? palette.marker : palette.graphite;
if (loose) { ctx.fillRect(m.x - 2, m.y + 1, m.w + 4, m.h - 1); continue; }
ctx.font = `600 ${m.h * 0.48}px "${MONO}"`;
const w = ctx.measureText(TAGS[m.kind]).width + m.h * 0.5;
const x = m.column.index === 0 ? m.x - w - m.h * 0.35 : m.x + m.w + m.h * 0.35;
ctx.fillRect(x, m.y + m.h * 0.12, w, m.h * 0.8);
ctx.fillStyle = palette.marker;
ctx.fillText(TAGS[m.kind], x + m.h * 0.25, m.y + m.h * 0.7);
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
```
Only the Sandbox honours `debug.looseLineHighlight`, and `doc.warnings` never lists a loose line, so `marks()` reads the [VDT](/en/docs/justification#loose-line-debugging) itself. Every justified line carries `justifiedSpaceRatio`, a paragraph split between two columns comes back as one block per fragment, and a line past 3× has no ratio, because the engine [sets it ragged](/en/docs/justification#lines-the-breaker-cannot-fill) and flags it `line.ragged` instead. At forty characters the bounds alone do not keep every line under 1.6; while the essay was being copy-fitted, the marks showed which sentences to reword.
### 3 · Lay the control beside the published page
```js
// script.js, lines 349–383
function compare(pairs) {
document.head.insertAdjacentHTML('beforeend', ``);
const section = Object.assign(document.createElement('section'), { id: 'compare' });
section.innerHTML = `${t({ en: 'Same text · same design · page 2',
es: 'El mismo texto · el mismo diseño · página 2' })}
${t({
en: 'Two line breakers', es: 'Dos formas de cortar' })}
`;
for (const [name, doc] of pairs) {
const page = doc.pages[1];
const list = marks(doc, page); // one walk per edition: the counts and the paint share it
const n = (...kinds) => list.filter((m) => kinds.includes(m.kind)).length;
const counts = `${t({ en: 'loose', es: 'flojas' })} ${n('loose')} · `
+ `${t({ en: 'lone', es: 'solas' })} ${n('widow', 'orphan')} · `
+ `${t({ en: 'runts', es: 'cortas' })} ${n('runt')}`;
const figure = document.createElement('figure');
figure.innerHTML = `${name}${counts}`;
const canvas = figure.appendChild(document.createElement('canvas'));
canvas.setAttribute('role', 'img');
canvas.setAttribute('aria-label', `${name}, ${t({ en: 'page', es: 'página' })} 2: ${counts}`);
renderPageToCanvas(page, doc, canvas, { scale: 1000 / page.width });
paintMarks(canvas, list, 1000 / page.width);
section.querySelector('.pair').append(figure);
}
document.getElementById('pages').before(section); // #pages: the desk showPages() builds
}
```
Both editions share one design, so every difference between the two page 2s comes from the line breaker and its guards. In English the greedy control leaves 47 of its 110 justified lines past 1.6 and 30 past 2, three of them past 3× and set ragged by the engine, while the Knuth–Plass edition keeps all 105 between 0.80 and 1.60. On page 2 the control also carries a paragraph's last line alone to the head of a column, which `avoidOrphans: false` allows, and ends another paragraph on a runt.
### 4 · Give each setting a box of its own
```js
// script.js, lines 109–132
// A box sets all its :::columns in one body style, so each setting is a nested box; breaks="3"
// counts a nested box as one block (gotcha: callout-columns). The bench floats to a page foot.
const [SLIP_GAP, FRAME] = [3, 4]; // mm: between slips; the bench's frame round them
const slip = (id, body) => ({ id, background: col('paper'), marginBottom: mm(SLIP_GAP),
padding: { top: mm(2.2), right: mm(2.6), bottom: mm(2.4), left: mm(2.6) },
titleStyle: { fontFamily: MONO, fontSize: pt(6.6), fontWeight: 600, color: col('muted'),
gap: mm(1.6) }, // code keeps its case: textAlign, not TEXTALIGN
body: { fontSize: pt(8.6), lineHeight: pt(11.6), firstLineIndent: pt(0), ...body } });
const calloutStyles = [
{ id: 'bench', span: 'page', placement: 'bottom', background: col('graphite'),
columnGap: mm(FRAME), // the foot needs a FRAME too: the last slip's marginBottom is dropped
padding: { top: mm(3.4), right: mm(FRAME), bottom: mm(FRAME), left: mm(FRAME) },
titleStyle: { ...caps(7.5, 600), color: col('marker'), gap: mm(2.4) },
body: { fontSize: pt(8.6), lineHeight: pt(11.6), color: col('paper'), textAlign: 'left',
firstLineIndent: pt(0) } },
slip('ragged', { textAlign: 'left' }), // never hyphenated (gotcha: ragged-no-hyphenation)
slip('unhyphenated', { hyphenation: false }), // justified, like the body text
slip('justified', {}), // justified and hyphenated: the body text's own settings
{ id: 'settings', backgroundEnabled: false, marginTop: pt(3), marginBottom: pt(3), // config
stripe: { enabled: true, side: 'left', width: pt(2), color: col('graphite') },
padding: { top: pt(1), right: pt(0), bottom: pt(1), left: mm(3) },
body: { fontFamily: MONO, fontSize: pt(7), lineHeight: pt(9.5), color: col('graphite'),
firstLineIndent: pt(0) } },
];
```
A box sets all the columns of a [`:::columns`](/en/docs/document-format#columns) group in one body style, so each slip is a nested box with a `body` of its own, and `breaks="3"` stacks the ragged and the unhyphenated slips in the first column. The ragged slip needs no `hyphenation: false`, because ragged text is never hyphenated. The bench floats to the foot of page 3 with `placement: 'bottom'`, and its bottom padding repeats the 4 mm frame because the last slip's `marginBottom` is dropped at the end of the box.
### 5 · Draw the model into the opener
```js
// script.js, lines 61–89
const BAND = 104; // mm from the trim's top edge to the band's foot
const DIAGRAM = { y: 64, w: MEASURE + 8, h: 34 }; // mm: its top on the page, width, height
const LABEL = 7; // pt: the diagram's labels, tracked less than caps() so the legend fits
const text = (id, content, family, size, color, x, y, extra) => ({ kind: 'text', id, content,
fontFamily: family, fontSize: pt(size), color: col(color), align: 'left', overflow: 'wrap',
placement: { anchor: { to: 'page', edge: 'top-left' }, offset: { x: mm(x), y: mm(y) },
size: { width: mm(MEASURE) } }, ...extra });
const opener = () => ({ // a function: the diagram's constants are defined further down
enabled: true,
slot: { elements: [
// The band box reserves the opener's height, and the H1's default marginBottom adds a line
// of white: the body starts on the second grid line under the band. The diagram could not
// reserve it, as images never count (gotcha: opener-image-no-reserve).
{ kind: 'box', id: 'band', style: { backgroundColor: col('graphite') },
placement: { anchor: { to: 'bleed', edge: 'top-left' },
size: { width: 'fill', height: mm(BAND) } } },
text('kicker', '{attr.kicker}', MONO, 7.5, 'marker', INNER, TOP, caps(7.5, 600)),
text('title', '{titleText}', DISPLAY, 29, 'paper', INNER, TOP + 5, // one line in both
{ fontWeight: 800, lineHeight: 1.02 }), // a multiple (gotcha: design-lineheight-multiple)
text('standfirst', '{attr.standfirst}', TEXT, 10.5, 'haze', INNER, TOP + 19,
{ italic: true, lineHeight: 1.3 }),
{ kind: 'image', id: 'diagram', resourceId: 'diagram', placement: { anchor: { to: 'page',
edge: 'top-left' }, offset: { x: mm(INNER), y: mm(DIAGRAM.y) },
size: { width: mm(DIAGRAM.w), height: mm(DIAGRAM.h) } } },
// An SVG image cannot use web fonts (gotcha: svg-no-webfonts): its labels are design text.
...diagramLabels().map(([id, words, x, y]) => text(id, words, MONO, LABEL, 'haze',
INNER + x, DIAGRAM.y + y, { ...caps(LABEL), letterSpacing: pt(0.5) })),
] },
});
```
The diagram is an [image element](/en/docs/configuration#image-elements) of the H1's design. As a figure it would be a page-wide `top` float, and a `top` float cited on page 1 opens page 2. The band is a box, and boxes count towards the height an opener reserves while images do not, so the text starts under the band without a `minHeight`, a line further down because of the H1's default `marginBottom`. The labels are design text laid on the drawing's own coordinates, since an SVG drawn as an image cannot use the page's web fonts.
## The whole recipe
One file, composed from the recipe's folder with the sample text and the Cookbook's shared kit inlined; it builds its own page. To run it, put it in a `