Un compositor tipográfico programable para la web.

Abre cualquier libro bien maquetado. Fíjate en cómo el texto descansa sobre la página: columnas perfectamente equilibradas, imágenes integradas en el flujo, sin huecos torpes, sin líneas huérfanas perdidas al inicio de una columna. Siglos de oficio están detrás de que eso parezca natural.

Ahora abre una página web. Incluso las mejores se sienten distintas. El texto choca contra las imágenes. Las columnas se desbordan o quedan a medio llenar. Las notas al pie desaparecen al fondo de la página en vez de quedarse cerca de las palabras que las referencian. La web nos dio maquetación responsiva, sí — pero nunca nos dio maquetación editorial.

Postext cierra esa brecha. Es un motor de composición que recibe tu contenido — markdown enriquecido con imágenes, notas al pie, citas destacadas y figuras — y aplica las mismas reglas que aplicaría un tipógrafo profesional: prevención de huérfanas y viudas, equilibrado de columnas, flujo de texto alrededor de obstáculos, espaciado deliberado. El resultado es geometría de composición con calidad editorial, tanto para HTML como para PDF.

Construido sobre @chenglou/pretext para medición de texto sin DOM, a velocidades que hacen todo esto posible.

#La brecha entre la imprenta y la web

Durante siglos, los tipógrafos han seguido reglas que hacen el texto agradable de leer. No son preferencias estéticas — son principios curtidos a lo largo de generaciones de libros impresos, periódicos y revistas:

Sin huérfanas (una sola línea de un párrafo varada al inicio de una columna).
Sin viudas (una sola línea de un párrafo abandonada al final de una columna).
Columnas equilibradas (altura aproximadamente igual entre columnas en una doble página).
Texto que fluye alrededor de figuras, citas destacadas e imágenes insertadas.
Notas al pie colocadas correctamente al final de la columna donde se referencian.
Notas al margen alineadas con el párrafo que las cita.
Espaciado consistente y deliberado alrededor de encabezados, citas y figuras.
Separación silábica que evita ríos de espacio en blanco y bordes irregulares.

Dos de estas reglas son tan fundamentales que merecen atención especial — porque la web las viola en prácticamente todas las páginas.

Dos datos concretos bastan para medir la distancia:

Ancho de carro. Bringhurst sitúa el rango cómodo entre 45 y 75 caracteres para una columna (y entre 40 y 50 en multicolumna); la guía de accesibilidad WCAG 1.4.8 fija el tope en 80. La mayoría de webs dejan que la línea se estire a 100, 120 o más — muy por encima del punto donde el ojo puede seguirla sin descarrilar.
Interlineado. La tradición recomienda 1,3–1,5 veces el tamaño de fuente, y WCAG 1.4.12 exige que el contenido siga funcionando con al menos 1,5. Pero el ajuste depende del ancho de carro: un interlineado que se lee bien a 50 caracteres se queda corto a 90. Los tipógrafos ajustan uno en función del otro; CSS no ofrece ninguna forma automática de hacerlo.

Y aquí se acaba lo que CSS aporta: column-count y poco más. Sin control sobre la colocación de recursos, sin consciencia del desbordamiento, sin prevención de huérfanas o viudas entre columnas, sin forma nativa de fluir texto alrededor de un obstáculo arbitrario. Las maquetaciones editoriales multicolumna siguen siendo artesanales — diseños estáticos que se rompen en cuanto cambia el tamaño de la pantalla.

La web lleva más de una década con maquetación responsiva — flexbox, grid, contenedores que se adaptan a cualquier pantalla. Lo que nunca ha tenido es maquetación editorial responsiva: el tipo en el que el contenido refluye inteligentemente a través de columnas, alrededor de imágenes, más allá de notas al pie, obedeciendo las reglas que hacen que el texto sea agradable de leer.

Lo que CSS ofrece frente a lo que la maquetación editorial realmente necesita.

#Una década buscando la pieza que faltaba

El proyecto Content First arrancó en 2014 como un intento temprano de llevar la calidad de la composición editorial a la web. Maquetaciones en columnas, algoritmos de flujo de texto, prototipos sucesivos — y siempre el mismo muro: no puedes tomar buenas decisiones de composición sin saber exactamente cuánto espacio va a ocupar el texto.

Suena sencillo, pero ahí está todo el problema. Cada vez que le preguntas al navegador "¿cuánto mide este párrafo a este ancho?", provocas un reflow completo del layout. Hazlo unos cientos de veces en un documento multicolumna complejo y la página se congela. El navegador no fue diseñado para este tipo de medición especulativa — probar diez anchos de columna diferentes para encontrar el mejor, comprobar dónde romper un párrafo, verificar si una imagen cabe aquí o necesita moverse a la siguiente columna.

Necesitaba una forma de medir texto lo bastante rápida para experimentar libremente, sin bloquear el hilo principal. Durante una década, esa herramienta no existió.

#La pieza que faltaba

En 2025, Cheng Lou publicó Pretext: una librería de medición de texto sin DOM, entre 300 y 600 veces más rápida que el reflow del navegador y pixel-perfect en Chrome, Safari y Firefox. Usa las métricas de fuente del canvas y pura aritmética para calcular la altura del texto y los saltos de línea sin tocar jamás el DOM.

Con Pretext, el cuello de botella que bloqueó este trabajo durante diez años desaparece. Se pueden medir miles de bloques de texto en milisegundos, probar diez configuraciones de columna diferentes y quedarse con la mejor, ejecutar el algoritmo completo de composición en cada redimensionado de ventana sin bloquear el hilo principal.

Postext es lo que viene después.

#Pretext + Postext

La nomenclatura es intencionada: dos mitades de la misma operación. Separarlas importa porque son responsabilidades distintas — una mide, la otra decide — y aislar la medición permite consumirla desde cualquier backend sin acoplarse a las reglas editoriales.

Pretext es lo que ocurre antes de colocar el texto: medir cuánto espacio va a necesitar. Sin DOM, basado en canvas, operando con números puros.

Postext es lo que ocurre después de la medición: las decisiones editoriales. Dadas las dimensiones exactas de cada bloque de texto a cualquier ancho, el motor decide dónde va cada elemento — en qué columna, en qué posición, fluyendo alrededor de qué recursos, obedeciendo qué reglas tipográficas.

import { prepare, layout } from '@chenglou/pretext';
import { buildDocument, renderToCanvas, renderToHtml } from 'postext';
import { renderToPdf } from 'postext-pdf';
 
// pretext: medir (el trabajo "pre")
const prepared = prepare(paragraphText, '16px/1.5 Inter');
const { height } = layout(prepared, columnWidth, 24);
// => "Este párrafo mide 144px de alto a este ancho de columna."
 
// postext: decidir (el trabajo "post")
const vdt = buildDocument(content, config);
// => Un Árbol Virtual del Documento completo con cada párrafo,
//     encabezado y recurso colocados en coordenadas exactas.
 
// Un único VDT, tres modos de salida:
const canvases = renderToCanvas(vdt);                       // bitmap pixel-perfect por página
const html = renderToHtml(vdt);                             // DOM seleccionable para la web
const pdfBytes = await renderToPdf(vdt, { fontProvider });  // PDF listo para imprimir

Pretext proporciona las medidas. Postext proporciona la composición.

Dos mitades de la misma operación: Pretext antes, Postext después.

Pretext fue creado por Cheng Lou. Postext se construye sobre él.

#Cómo funciona

El proceso tiene tres etapas:

Tú proporcionas el contenido. Markdown enriquecido con recursos referenciados — imágenes, tablas, figuras, notas al pie, citas destacadas. El contenido es puramente semántico: describe qué presentar, no cómo. Las decisiones de composición nunca están escritas a fuego en el código fuente.
El motor toma las decisiones. Postext analiza el contenido, llama a Pretext para la medición de texto pixel-perfect sin tocar el DOM, y después ejecuta siete pasadas de composición: equilibrado de columnas, colocación de recursos, prevención de viudas y huérfanas, alineación de líneas base, refinamiento del espaciado. Cada decisión la controla la configuración — tú defines las reglas, el motor las aplica.
Obtienes una composición completa. Coordenadas y dimensiones precisas para cada elemento en cada página. Los renderizadores traducen esta geometría al formato de destino — canvas para una previsualización bitmap pixel-perfect (renderToCanvas, renderPage), HTML para tipografía seleccionable y sensible al redimensionado en la web (renderToHtml, renderToHtmlIndexed), y PDF para salida lista para imprimir con fuentes incrustadas (renderToPdf, desde el paquete postext-pdf). El mismo contenido, las mismas reglas, tres salidas intercambiables.

Contenido dentro, geometría fuera — después renderizada al formato de destino.

Para una mirada detallada a los mecanismos internos del motor — el Árbol Virtual del Documento, el pipeline de siete pasadas y el bucle de convergencia — consulta el documento de Arquitectura. Para una referencia completa de todas las opciones de configuración y sus valores por defecto, consulta la página de Configuración.

#Reconocimientos

Pretext de Cheng Lou — la librería fundacional de medición de texto que hace posible Postext. Sin medición pixel-perfect, sin DOM y a velocidad de submilisegundo, nada de esto sería práctico.

Content First (~2014) — la exploración original de la composición editorial de alta calidad en la web. Una década chocando contra muros, aprendiendo qué no funciona, y construyendo la convicción de que este problema merece una solución de verdad.

Postext se apoya en siglos de tradición tipográfica. Las reglas que implementa no son inventadas — son heredadas del trabajo de tipógrafos, diseñadores y compositores que refinaron el arte de hacer el texto legible mucho antes de que existieran las pantallas. Desde los tipos móviles de Gutenberg hasta la tipografía asimétrica de Tschichold, pasando por los Elementos del estilo tipográfico de Bringhurst, el oficio de disponer texto sobre una página lleva más de quinientos años evolucionando. Postext trae esa sabiduría acumulada a la web, donde ha brillado por su ausencia.

Introducción a Postext