Introducció a Postext

Un compositor tipogràfic programable per al web.

Obre qualsevol llibre ben maquetat. Fixa't en com el text reposa sobre la pàgina: columnes perfectament equilibrades, imatges integrades en el flux, sense forats maldestres, sense línies òrfenes perdudes a l'inici d'una columna. Que això sembli natural és fruit de segles d'ofici.

Ara obre una pàgina web. Fins i tot les millors es noten diferents. El text xoca contra les imatges. Les columnes es desborden o queden mig plenes. Les notes a peu de pàgina desapareixen al fons de la pàgina en lloc de quedar-se a prop de les paraules que hi fan referència. El web ens va donar maquetació responsiva, sí — però mai no ens va donar maquetació editorial.

Postext tanca aquesta bretxa. És un motor de composició que rep el teu contingut — prosa en markdown més recursos declarats (imatges de mapa de bits, diagrames SVG i taules) que s'incorporen per referència — i aplica les mateixes regles que aplicaria un tipògraf professional: prevenció d'òrfenes i vídues, equilibri de columnes, flux de text al voltant d'obstacles, espaiat deliberat. El resultat és geometria de composició amb qualitat editorial, tant per a HTML com per a PDF.

Construït sobre @chenglou/pretext per mesurar text sense DOM, a velocitats que fan possible tot això.

#La bretxa entre la impremta i el web

Durant segles, els tipògrafs han seguit regles que fan que el text sigui agradable de llegir. No són preferències estètiques — són principis forjats al llarg de generacions de llibres impresos, diaris i revistes:

• Sense òrfenes (una sola línia d'un paràgraf encallada a l'inici d'una columna).
• Sense vídues (una sola línia d'un paràgraf abandonada al final d'una columna).
• Columnes equilibrades (alçada aproximadament igual entre columnes en una doble pàgina).
• Text que flueix al voltant de figures, cites destacades i imatges inserides.
• Notes a peu de pàgina col·locades correctament al final de la columna on es referencien.
• Notes al marge alineades amb el paràgraf que les cita.
• Espaiat coherent i deliberat al voltant d'encapçalaments, cites i figures.
• Partició de mots que evita rius d'espai en blanc i vores irregulars.

Més enllà d'aquestes regles, dues dimensions concretes i mesurables mostren fins a quin punt el web s'allunya de la impremta:

• Amplada de línia. Bringhurst situa l'interval còmode entre 45 i 75 caràcters per a una columna (i entre 40 i 50 en multicolumna); la guia d'accessibilitat WCAG 1.4.8 fixa el límit en 80. La majoria de webs deixen que la línia s'estiri fins a 100, 120 o més — molt per sobre del punt on l'ull la pot seguir sense descarrilar.
• Interlineat. La tradició recomana 1,3–1,5 vegades la mida de la font, i WCAG 1.4.12 exigeix que el contingut continuï funcionant amb almenys 1,5. Però l'ajust depèn de l'amplada de línia: un interlineat que es llegeix bé a 50 caràcters es queda curt a 90. Els tipògrafs ajusten l'un en funció de l'altre; CSS no ofereix cap manera automàtica de fer-ho.

I aquí s'acaba el que aporta CSS: column-count i poca cosa més. Sense control sobre la col·locació de recursos, sense consciència del desbordament, sense prevenció d'òrfenes o vídues entre columnes, sense cap manera nativa de fer fluir el text al voltant d'un obstacle arbitrari. Les maquetacions editorials multicolumna continuen sent artesanals — dissenys estàtics que es trenquen tan bon punt canvia la mida de la pantalla.

El web fa més d'una dècada que té maquetació responsiva — flexbox, grid, contenidors que s'adapten a qualsevol pantalla. El que no ha tingut mai és maquetació editorial responsiva: la que fa que el contingut reflueixi de manera intel·ligent a través de columnes, al voltant d'imatges, més enllà de notes a peu de pàgina, obeint les regles que fan que el text sigui agradable de llegir.

#Una dècada buscant la peça que faltava

El projecte Content First va arrencar el 2014 com un intent primerenc de portar la qualitat de la composició editorial al web. Maquetacions en columnes, experiments de flux de text, prototips successius — i sempre el mateix mur: no pots prendre bones decisions de composició sense saber exactament quant espai ocuparà el text.

Sembla senzill, però aquí hi ha tot el problema. Cada vegada que preguntes al navegador «quant mesura aquest paràgraf a aquesta amplada?», provoques un reflow complet del layout. Fes-ho uns quants centenars de vegades en un document multicolumna complex i la pàgina es congela. El navegador no es va dissenyar per a aquesta mena de mesura especulativa — provar deu amplades de columna diferents per trobar la millor, comprovar on trencar un paràgraf, verificar si una imatge hi cap o s'ha de moure a la columna següent.

Faltava una manera de mesurar text prou ràpida per experimentar lliurement, sense bloquejar el fil principal. Durant una dècada, aquesta eina no va existir.

#La peça que faltava

El 2025, Cheng Lou va publicar Pretext: una biblioteca de mesura de text sense DOM, entre 300 i 600 vegades més ràpida que el reflow del navegador i pixel-perfect a Chrome, Safari i Firefox. Fa servir les mètriques de font del canvas i pura aritmètica per calcular l'alçada del text i els salts de línia sense tocar mai el DOM.

Amb Pretext, el coll d'ampolla que va bloquejar aquest treball durant deu anys desapareix. Es poden mesurar milers de blocs de text en mil·lisegons, provar deu configuracions de columna diferents i quedar-se amb la millor, executar l'algorisme complet de composició a cada redimensionament de finestra sense bloquejar el fil principal.

Postext és el que ve després.

#Pretext + Postext

La nomenclatura és intencionada: dues meitats de la mateixa operació. Separar-les importa perquè són responsabilitats diferents — una mesura, l'altra decideix — i aïllar la mesura permet fer-la servir des de qualsevol backend sense lligar-se a les regles editorials.

Pretext és el que passa abans de col·locar el text: mesurar quant espai necessitarà. Sense DOM, basat en canvas, operant amb nombres purs.

Postext és el que passa després de la mesura: les decisions editorials. Donades les dimensions exactes de cada bloc de text a qualsevol amplada, el motor decideix on va cada element — a quina columna, en quina posició, fluint al voltant de quins recursos, obeint quines regles tipogràfiques.

import { prepare, layout } from '@chenglou/pretext';
import { buildDocument, renderToCanvas, renderToHtml } from 'postext';
import { renderToPdf } from 'postext-pdf';
 
// pretext: mesurar (la feina "pre")
const prepared = prepare(paragraphText, '16px/1.5 Inter');
const { height } = layout(prepared, columnWidth, 24);
// => "Aquest paràgraf fa 144px d'alçada a aquesta amplada de columna."
 
// postext: decidir (la feina "post")
const vdt = buildDocument(content, config);
// => Un Arbre Virtual del Document complet amb cada paràgraf,
//     encapçalament i recurs col·locats en coordenades exactes.
 
// Un únic VDT, tres modes de sortida:
const canvases = renderToCanvas(vdt);                       // bitmap pixel-perfect per pàgina
const html = renderToHtml(vdt);                             // DOM seleccionable per al web
const pdfBytes = await renderToPdf(vdt, { fontProvider });  // PDF a punt per imprimir

Pretext proporciona les mesures. Postext proporciona la composició.

Pretext el va crear Cheng Lou. Postext es construeix a sobre.

#Com funciona

El procés té tres etapes:

1. Tu proporciones el contingut. Prosa en markdown més recursos declarats — imatges de mapa de bits, diagrames SVG i taules. Una referència en línia :ref{id="..."} numera el recurs i, alhora, el fa flotar a una banda superior o inferior a prop de la seva primera referència, tal com un tipògraf d'impremta col·loca les figures. El contingut continua sent purament semàntic: descriu què cal presentar, no com; les decisions de composició no queden mai gravades a foc al document d'origen. La secció de Recursos del format de document recull la sintaxi completa.

2. El motor pren les decisions. Postext analitza el contingut, crida Pretext per a la mesura de text pixel-perfect sense tocar el DOM, i després executa un pipeline de composició de diverses passades: equilibri de columnes, numeració i flotació de recursos, prevenció de vídues i òrfenes, alineació de línies de base, refinament de l'espaiat. Cada decisió la controla la configuració — geometria de pàgina i maquetació, cos de text i encapçalaments, més tableStyle per a la tipografia de les cel·les de taula, captionStyle per als peus de figura i diagramStyle amb singleInk, que torna a acolorir els diagrames SVG amb matisos d'una sola tinta assignats per luminància, pensat per a impressió amb un únic color directe. Tu defineixes les regles, el motor les aplica.

3. Obtens una composició completa. Coordenades i dimensions precises per a cada element a cada pàgina. Els renderitzadors tradueixen aquesta geometria al format de destinació — canvas per a una previsualització bitmap pixel-perfect (renderToCanvas, renderPage), HTML per a tipografia seleccionable i que s'adapta al redimensionament al web (renderToHtml, renderToHtmlIndexed), i PDF per a una sortida a punt per imprimir amb fonts incrustades (renderToPdf, del paquet postext-pdf). El mateix contingut, les mateixes regles, tres sortides intercanviables.

Per veure en detall els mecanismes interns del motor — l'Arbre Virtual del Document, el pipeline de diverses passades i el bucle de convergència — consulta el document d'Arquitectura. Per a una referència completa de totes les opcions de configuració — des de la geometria de pàgina fins als estils de taula, peu de figura i diagrama — consulta la pàgina de Configuració. I per provar-ho tot en viu — editor del text de cada capítol, tauler de recursos amb editor de taules i pujada d'imatges i SVG, un tauler de Disseny que recorre cada opció en termes editorials i previsualitzacions en viu en canvas, HTML i PDF — obre el Sandbox.

#Reconeixements

Pretext de Cheng Lou — la biblioteca fonamental de mesura de text que fa possible Postext. Sense una mesura pixel-perfect, sense DOM i a velocitat de submil·lisegon, res d'això no seria pràctic.

Content First (~2014) — l'exploració original de la composició editorial d'alta qualitat al web. Una dècada topant amb murs, aprenent què no funciona, i construint la convicció que aquest problema mereix una solució de debò.

Postext es recolza en segles de tradició tipogràfica. Les regles que implementa no són inventades — són heretades de la feina de tipògrafs, dissenyadors i compositors que van refinar l'ofici de fer el text llegible molt abans que existissin les pantalles. Des dels tipus mòbils de Gutenberg fins a la tipografia asimètrica de Tschichold, passant pels Elements de l'estil tipogràfic de Bringhurst, l'ofici de disposar text sobre una pàgina fa més de cinc-cents anys que evoluciona. Postext porta aquesta saviesa acumulada al web, on ha brillat per la seva absència.