# Introducción a Postext

> Qué es Postext, por qué existe y el problema que resuelve

- Versión HTML: https://postext.dev/es/docs/introduction
- Última actualización: 2026-06-10
- Tiempo de lectura: 7 min
- Otros idiomas: [en](https://postext.dev/en/docs/introduction.md)

**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 — prosa en markdown
más recursos declarados (imágenes de mapa de bits, diagramas SVG y tablas) que se incorporan por
referencia — 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`](https://github.com/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.

Más allá de estas reglas, dos dimensiones concretas y medibles muestran cuánto se aleja la web de
la imprenta:

- **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](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) 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](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) 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*.

> **Figura: La brecha entre CSS multicolumna y la maquetación editorial**
> CSS ofrece column-count y poco más; la maquetación editorial necesita control de huérfanas y viudas, flujo alrededor de obstáculos, equilibrado de columnas, colocación de notas al pie y refinamiento por convergencia.
>
> *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](https://medium.com/binpar/el-arte-de-maquetar-para-ser-le%C3%ADdo-933be57cb293)
arrancó en 2014 como un intento temprano de llevar la calidad de la composición editorial a la
web. Maquetaciones en columnas, experimentos 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.

Faltaba 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`](https://github.com/chenglou/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.

```ts
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.

> **Figura: Pretext mide, Postext decide**
> Pretext ofrece medición de texto sin DOM basada en canvas. Postext consume esas dimensiones exactas para decidir columna, posición, flujo alrededor de recursos y reglas de huérfanas, viudas y equilibrado.
>
> *Dos mitades de la misma operación: Pretext antes, Postext después.*

*Pretext fue creado por [Cheng Lou](https://github.com/chenglou). Postext se construye sobre él.*

## Cómo funciona

El proceso tiene tres etapas:

1. **Tú proporcionas el contenido.** Prosa en markdown más recursos declarados — imágenes de mapa
   de bits, diagramas SVG y tablas. Una referencia en línea `:ref{id="..."}` numera el recurso y, a
   la vez, lo hace flotar a una banda superior o inferior cerca de su primera referencia, igual que
   un tipógrafo de imprenta coloca las figuras. El contenido sigue siendo puramente semántico:
   describe *qué* presentar, no *cómo*; las decisiones de composición nunca quedan grabadas a fuego
   en el documento de origen. La sección de Recursos del
   [formato de documento](/es/docs/document-format) recoge la sintaxis completa.

2. **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 un pipeline de composición
   multipasada: equilibrado de columnas, numeración y flotado 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 — geometría de página y maquetación, cuerpo de texto y encabezados, más
   `tableStyle` para la tipografía de las celdas de tabla, `captionStyle` para los pies de figura
   y `diagramStyle` con `singleInk`, que recolorea los diagramas SVG a matices de una sola tinta
   mapeados por luminancia, pensado para impresión con un único color directo. Tú defines las
   reglas, el motor las aplica.

3. **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.

> **Figura: Proceso de composición en tres etapas**
> Markdown enriquecido más configuración entra en el motor, que ejecuta un pipeline de composición multipasada con medición de Pretext dentro, y genera HTML o PDF renderizado.
>
> *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 multipasada y el bucle de convergencia — consulta el documento de
[Arquitectura](/es/docs/architecture). Para una referencia completa de todas las opciones de
configuración — desde la geometría de página hasta los estilos de tabla, pie de figura y
diagrama — consulta la página de [Configuración](/es/docs/configuration). Y para probarlo todo
en vivo — editor de markdown, panel de recursos con editor de tablas y subida de imágenes y SVG,
y previsualizaciones en vivo en canvas, HTML y PDF — abre el [Sandbox](/es/docs/sandbox).

## Reconocimientos

**[Pretext](https://github.com/chenglou/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.