# Espaciado uniforme en columnas estrechas y justificadas
> Corte Knuth–Plass con los espacios entre 0,8 y 1,6 veces el normal, junto a un control voraz con sus líneas flojas, solas y cortas marcadas desde el VDT.
- Versión HTML: https://postext.dev/es/cookbook/justification-lab
- Receta N.º 014 · Texto y tipografía · Nivel 3 (Avanzado) · Salidas: Canvas
- Géneros: Revistas y fanzines
- Requiere postext ≥ 1.4.1 · probada con 1.4.1 el 2026-09-26
- Páginas: [1](https://postext.dev/cookbook/justification-lab/es/p01.webp?v=490a7c43), [2](https://postext.dev/cookbook/justification-lab/es/p02.webp?v=490a7c43), [3](https://postext.dev/cookbook/justification-lab/es/p03.webp?v=490a7c43)
- Última actualización: 2026-09-26
- Otros idiomas: [en](https://postext.dev/en/cookbook/justification-lab.md)
## Lo que vas a componer
El número 12 de *Galerada*, revista de un taller tipográfico, en A5 y a dos columnas de unos cuarenta caracteres, donde cada línea justificada reparte la holgura entre cinco o seis espacios. La apertura dibuja sobre una banda grafito el modelo de Knuth y Plass: cajas de palabras unidas por muelles amarillos de cola que se estiran hasta llenar la medida. El ensayo explica por qué se aflojan las columnas estrechas e intercala en monoespaciada los ajustes de cada regla. Al pie de la página 3, un banco de pruebas compone un párrafo en bandera, justificado sin partir palabras y justificado partiéndolas. El pen compone además una segunda edición con el corte voraz, sin protecciones de viudas ni huérfanas, y, antes del número, muestra juntas las dos páginas 2, como en la tarjeta: las líneas flojas, en amarillo fosforito; las solas y las cortas, señaladas en el margen.
**Esta receta responde a:**
- ¿Cómo consigo una justificación uniforme en columnas estrechas, con la separación silábica de cada idioma?
- ¿Cómo evito viudas, huérfanas y últimas líneas de una sola palabra, y mantengo cada título con su texto?
- ¿Por qué una línea sale en bandera o demasiado estirada (URL, compuestos largos, palabras largas en celdas)?
- ¿Cómo averiguo qué falla en mi documento (avisos, desbordamientos, composición que no converge)?
## La respuesta corta
```js
// script.js, líneas 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 } });
```
## Ingredientes
**Enseña**
- [Corte de líneas óptimo (Knuth–Plass)](https://postext.dev/es/docs/justification.md#knuth-plass-ver-el-párrafo-completo): Corta cada párrafo en su conjunto para igualar el espacio entre palabras, dentro de los límites fijados, en lugar de llenar línea a línea.
- [Viudas, huérfanas y líneas cortas](https://postext.dev/es/docs/configuration.md#huérfanas-viudas-runts-y-reglas-de-cohesión): Evita las líneas sueltas en la cabeza y el pie de las columnas y las últimas líneas de una sola palabra; mantiene cada título con su texto, y el párrafo que acaba en dos puntos, con la lista que presenta.
- [Avisos y diagnóstico](https://postext.dev/es/docs/configuration.md#depuración): Avisos de composición, problemas de análisis y convergencia, las ayudas Resaltar líneas flojas y Negativo de página, y el panel Revisión del Sandbox.
**También usa**
- [Separación silábica e idioma del documento](https://postext.dev/es/docs/justification.md#idiomas-soportados)
- [Sangrías, alineación y separación de párrafos](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo)
- [Columnas dentro de un recuadro](https://postext.dev/es/docs/document-format.md#columns)
- [Recuadros anidados](https://postext.dev/es/docs/configuration.md#el-contenedor-callout)
- [Recuadros](https://postext.dev/es/docs/configuration.md#estilos-de-aviso)
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado)
- [Imágenes en los diseños de página](https://postext.dev/es/docs/configuration.md#elementos-de-imagen)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Estilos de párrafo](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo)
- [Páginas en un canvas](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap)
- [Figuras y tablas como recursos](https://postext.dev/es/docs/document-format.md#recursos)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration.md#paleta-de-colores)
- [Cabeceras y folios](https://postext.dev/es/docs/configuration.md#encabezados-y-pies)
- [Cabeceras según el tipo de página](https://postext.dev/es/docs/configuration.md#elementos-de-texto)
- [Banda de capítulo a todo el ancho](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado)
**La configuración de un vistazo**
- [`bodyText`](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo), [`calloutStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-aviso), [`colorPalette`](https://postext.dev/es/docs/configuration.md#paleta-de-colores), [`footer`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`header`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`headings`](https://postext.dev/es/docs/configuration.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration.md#disposición), [`locale`](https://postext.dev/es/docs/configuration.md#separación-silábica), [`page`](https://postext.dev/es/docs/configuration.md#página), [`paragraphStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo)
**API**
- [`buildDocument`](https://postext.dev/es/docs/configuration.md#construir-un-documento), [`clearMeasurementCache`](https://postext.dev/es/docs/configuration.md#caché-de-medidas), [`parseMarkdownWithIssues`](https://postext.dev/es/docs/configuration.md#parseo), [`registerResourceImage`](https://postext.dev/es/docs/architecture.md#superficie-de-api), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap)
**Tipografías**
- Petrona (OFL-1.1), Bricolage Grotesque (OFL-1.1), Source Code Pro (OFL-1.1)
## Elaboración
### 1 · Estrecha los límites y conserva las protecciones
El código de este paso es [la respuesta corta](#la-respuesta-corta) de arriba. [Knuth–Plass](/es/docs/justification#knuth-plass-ver-el-párrafo-completo), la separación silábica, las penalizaciones de viudas, huérfanas y líneas cortas y los títulos unidos a su texto vienen activados por defecto, así que la edición publicada solo estrecha los [límites del espaciado](/es/docs/justification#límites-de-espaciado-entre-palabras) a 0,8 y 1,6 veces un espacio normal (por defecto son 0,6 y 2). Una línea que pasa del límite superior cuesta más que cualquier guion o línea corta, así que el algoritmo prueba antes otros cortes; sin esos dos límites, este ensayo compone ocho líneas por encima de 1,6. La partición depende de `locale` y de su código exacto: `'es'`, `'fr'` y `'de'` tienen sus propios patrones de TeX, mientras que `'es-ES'` se parte como inglés estadounidense sin ningún aviso.
### 2 · Marca las líneas flojas desde el árbol de composición
```js
// script.js, líneas 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);
}
```
Solo el Sandbox aplica `debug.looseLineHighlight`, y `doc.warnings` nunca menciona una línea floja, así que `marks()` lee directamente el [VDT](/es/docs/justification#depuración-de-líneas-flojas). Cada línea justificada lleva su `justifiedSpaceRatio`, un párrafo partido entre dos columnas vuelve como un bloque por fragmento, y una línea de más de 3× no tiene proporción, porque el motor [la compone en bandera](/es/docs/justification#líneas-que-el-algoritmo-no-puede-llenar) y la marca con `line.ragged`. Con cuarenta caracteres por línea, los límites no bastan para que todas queden por debajo de 1,6; mientras se ajustaba el texto del ensayo, las marcas señalaron qué frases había que reescribir.
### 3 · Pon el control junto a la página publicada
```js
// script.js, líneas 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
}
```
Las dos ediciones salen del mismo diseño, así que cualquier diferencia entre las dos páginas 2 se debe al algoritmo de corte y a sus protecciones. En el texto español, el control voraz deja 26 de sus 108 líneas justificadas por encima de 1,6, y seis de ellas pasan de 2; la edición de Knuth–Plass mantiene las 105 entre 0,80 y 1,59. En la página 2 del control, además, un párrafo acaba en una línea corta que solo lleva el final de una palabra partida.
### 4 · Dale a cada ajuste su propio recuadro
```js
// script.js, líneas 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) } },
];
```
Un recuadro compone todas las columnas de un grupo [`:::columns`](/es/docs/document-format#columns) con un único estilo de texto, así que cada ficha es un recuadro anidado con su propio `body`, y `breaks="3"` apila en la primera columna la ficha en bandera y la que no parte palabras. La ficha en bandera no necesita `hyphenation: false`, porque el texto en bandera nunca se parte. El banco flota al pie de la página 3 con `placement: 'bottom'`, y su relleno inferior repite el marco de 4 mm porque el `marginBottom` de la última ficha se pierde al final del recuadro.
### 5 · Dibuja el modelo en la apertura
```js
// script.js, líneas 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) })),
] },
});
```
El diagrama es un [elemento de imagen](/es/docs/configuration#elementos-de-imagen) del diseño del H1. Como figura sería un flotante `top` a todo el ancho, y un flotante `top` citado en la página 1 abre la página 2. La banda es una caja, y las cajas cuentan para la altura que reserva una apertura, pero las imágenes no, así que el texto empieza bajo la banda sin `minHeight`, una línea más abajo por el `marginBottom` que el H1 trae por defecto. Los rótulos son texto de diseño colocado sobre las coordenadas del propio dibujo, porque un SVG pintado como imagen no puede usar las fuentes web de la página.
## La receta completa
Un solo archivo, compuesto a partir de la carpeta de la receta con el texto de ejemplo y el kit común del Recetario ya incluidos; construye su propia página. Para ejecutarlo, ponlo en un `