# Postext — Tipògraf programable per al web

> Un motor de maquetació que connecta la tradició tipogràfica amb el web modern. Rep markdown semàntic i retorna pàgines amb qualitat editorial — renderitzades a HTML, canvas i PDF a punt per a impremta.

- Versió HTML: https://postext.dev/ca
- Altres idiomes: [en](https://postext.dev/en.md), [es](https://postext.dev/es.md), [zh](https://postext.dev/zh.md), [ar](https://postext.dev/ar.md)

## En poques paraules

Postext és un programa lliure i gratuït que compon les pàgines de llibres, revistes i informes. Escrius el text amb unes quantes marques senzilles i Postext el converteix en pàgines acabades, com les d'un llibre imprès. Segueix regles que els impressors fan servir des de fa segles, perquè el text es llegeixi bé. Les pàgines poden anar a un web, a una aplicació o a un PDF a punt per a impremta. Està pensat per a qui escriu, edita, dissenya o programa.

## El <em>tipògraf</em> programable per al web

Postext parteix de markdown semàntic i aplica regles editorials amb segles d'història — justificació Knuth-Plass, columnes equilibrades, flotants que saben quin és el seu lloc — per produir pàgines de qualitat editorial en HTML, canvas o PDF a punt per a impremta.

## Postext en dos minuts

**Transcripció.** Tot el que diu el narrador, amb una descripció del que apareix a la pantalla.

- 0:00 · *A la pantalla:* Sobre fons fosc, «MAGÚNCIA · 1455» damunt d'un filet daurat. Darrere del titular «Durant cinc segles, la impremta va aprendre a compondre la pàgina.», l'any avança de 1455 a 2026 en grans xifres perfilades i al voltant cauen termes de l'ofici: Justificació, Kerning, Vídues, òrfenes, Columnes equilibrades, Interlineat, Retícula de base, par·ti·ció, Mesura, Flotants, Capçaleres, Rius. La càmera s'endinsa en el punt final, que omple la pantalla de daurat. · *Narració:* Durant cinc segles, la impremta va aprendre a compondre la pàgina.
- 0:06 · *A la pantalla:* Titular: «La web va aprendre a maquetar interfícies. Mai no va aprendre a compondre una pàgina.» Una finestra de navegador a example.com/longform/article mostra un article justificat a tres columnes, «Per què falla la web»; unes etiquetes vermelles assenyalen rius de blanc, una òrfena, una vídua, una imatge que cau sobre el text i una última columna desequilibrada. Al costat, una pastilla de codi diu «column-count: 3;», seguida de «…i poca cosa més.» i d'una llista ratllada amb els mateixos cinc defectes. La finestra es distorsiona i s'esfondra. · *Narració:* La web va aprendre a maquetar interfícies. Mai pàgines. Per això el text llarg encara es trenca: rius, vídues, òrfenes, col·lisions.
- 0:19 · *A la pantalla:* Després d'un esclat blanc i una escombrada de franges blava, daurada i vermella, el logotip de Postext puja al seu lloc amb el lema «El tipògraf programable per a la web». A sota: CODI OBERT · LLICÈNCIA MIT · v1.7.0 · FUNCIONA AL TEU NAVEGADOR. · *Narració:* Això és Postext: el tipògraf programable per a la web.
- 0:25 · *A la pantalla:* Secció 01 de 07, «Entra el contingut»: «El Markdown diu què és cada cosa.» Un fitxer Markdown, 03-por-que-postext.md, s'escriu sol: una directiva de part, el títol «Per què Postext» amb entradeta, un paràgraf que cita la figura fig-flow amb :ref, una línia ::resource i un bloc :::callout. Al costat, config.ts crida buildDocument amb maquetació a dues columnes, text justificat i partició de mots per a «es», sota la frase «La configuració decideix com es veu. El text no conté ni una sola decisió de maquetació.» · *Narració:* Escrius Markdown semàntic, que diu què és cada cosa. La configuració decideix com es veu.
- 0:33 · *A la pantalla:* Secció 02, «Pretext mesura»: «Mesurat sense tocar el DOM.» Un títol, un paràgraf i un requadre s'escanegen l'un rere l'altre i unes cotes en donen l'alçada en punts; un tauler de codi mostra prepare(text, '25px Lora') i layout(prepared, width, 38), que retorna una alçada i un nombre de línies. Dues barres competeixen amb 10.000 paràgrafs: «Reflow del navegador · DOM» amb prou feines avança i «Pretext · canvas + aritmètica» s'omple a l'instant, i un comptador puja fins a 600× sobre «més ràpid que el DOM mesurant text, perquè un llibre sencer es recompongui mentre escrius» i «Impulsat per @chenglou/pretext». · *Narració:* Cada paràgraf es mesura sense tocar el DOM, fins a sis-centes vegades més de pressa, gràcies a Pretext, la biblioteca que ho ha fet possible.
- 0:43 · *A la pantalla:* Secció 03, «Postext decideix»: «Cada línia col·locada abans de pintar un píxel.» Un anell de set segments s'il·lumina per torns, Estructura, Mesura, Col·locació, Flotants, Refinament, Equilibri i Ritme, cadascun amb una línia d'explicació, mentre al costat es munta una pàgina a dues columnes de la guia de Postext: els blocs etiquetats volen a les seves columnes, una figura es desplaça al seu lloc amb la nota «:ref{id="fig-flow"} → peu de columna», cau la banda d'obertura, apareixen les línies, les columnes s'anivellen i baixa la retícula de base. L'anell recorre les iteracions 1 a 3 i mostra «Estable en 3 iteracions» amb una marca; un requadre dona la caixa i la línia de base d'una línia. · *Narració:* Després, Postext decideix. Set passades col·loquen cada línia, porten cada figura al seu lloc i equilibren les columnes, fins que res no es mou.
- 0:55 · *A la pantalla:* Secció 04, «El document virtual»: «Canvia una paraula. Només es recompon allò que canvia.», amb la nota «Com el virtual DOM de React, però per a pàgines: el VDT, un arbre de document virtual.» Set pàgines, de la p. 7 a la p. 13, en fila; un cursor marca una edició a la p. 11, la resta d'aquella columna es torna daurada com a BRUT i una franja passa a la p. 12, que rep una marca i ESTABLE, mentre les anteriors diuen ES SALTA i les següents INTACTA. Tres vinyetes expliquen la regla i un tauler titulat renderToHtmlIndexed() marca com a APEDAÇAT els nodes de l'arbre que han canviat. · *Narració:* Tot viu en un document virtual, com el virtual DOM de React. Canvies una paraula, i només es recompon allò que canvia.
- 1:05 · *A la pantalla:* «Un document llarg? Només es pinta el que hi ha a la pantalla.» Una columna de pàgines passa per un marc daurat retolat VIEWPORT, amb un marge de 200 píxels a dalt i a baix: les pàgines de dins es dibuixen senceres i les de fora són contorns discontinus. Un comptador gran indica quantes de les 48 pàgines estan pintades en cada moment (IntersectionObserver · +200 px), al costat de «Geometria: totes les pàgines. Píxels: només el que veus.» · *Narració:* I en un llibre llarg, només es pinten les pàgines que són a la pantalla.
- 1:12 · *A la pantalla:* Secció 05, «Justificació Knuth–Plass»: «Totes les maneres de tallar el paràgraf. Alhora.» A l'esquerra, un paràgraf sobre el tall de línies compost de manera voraç, com ho fa el navegador, amb les línies més obertes en vermell. A sota, cada paraula és un punt sobre una recta: arcs vermells per als talls voraços, arcs blaus tènues que proven tots els talls possibles i un camí daurat amb la millor combinació. A la dreta, la versió Knuth–Plass, d'espaiat uniforme, amb la lletjor de cada línia, la fórmula «(1 + lletjor + penalització)²» i una suma de demèrits menor. · *Narració:* Un navegador talla les línies de manera voraç, una a una. Postext fa servir Knuth-Plass, l'algorisme de TeX: sospesa totes les maneres de tallar el paràgraf sencer i es queda amb la més uniforme.
- 1:27 · *A la pantalla:* Secció 06, «Una maquetació, tres renderitzadors»: «El que veus és el que va a impremta.» Sota la línia de codi const vdt = buildDocument(content, config); una pàgina es divideix en tres. Canvas (renderToCanvas(), mapes de bits exactes al píxel) porta una lupa sobre la seva graella de píxels; HTML (renderToHtml(), seleccionable i adaptable) emmarca cada bloc amb la seva etiqueta <h1>, <p>, <figure>, etc.; en PDF (renderToPdf(), per a impremta, PDF/UA, CMYK) quatre planxes de color entren en registre i apareixen marques de tall i una tira de color. · *Narració:* Una maquetació, tres renderitzadors: canvas, HTML i PDF per a impremta. El que veus és el que s'imprimeix.
- 1:38 · *A la pantalla:* Secció 07, «Per què un estàndard obert»: «LaTeX va marcar el llistó del paper. Avui l'edició també viu a cada pantalla.» Dues targetes: LaTeX, 1984, amb creus al costat de «Pensat per a la pàgina impresa», «Lligat a les fonts i els paquets d'una màquina», «Compilar, esperar, repetir» i «Sense maquetació editorial a la web adaptable»; Postext, 2026, amb marques al costat de «Web, canvas i PDF d'impremta, una maquetació», «Un sol fitxer .postext ho porta tot», «Es recompon en directe mentre escrius» i «En qualsevol navegador · sense servidors · MIT». La targeta de Postext s'il·lumina. · *Narració:* LaTeX va marcar l'estàndard del paper. Però avui l'edició viu a totes les pantalles.
- 1:46 · *A la pantalla:* Rètol «Un fitxer, el llibre sencer» i titular «Un estàndard obert per a l'edició, més enllà d'on arriba LaTeX». Una icona de fitxer .postext s'obre en cinc peces: preset.json (configuració i disseny), chapters/*.md (un Markdown per capítol), fonts/*.woff2 (les tipografies pròpies), images/ · SVG (cada imatge, inclosa) i resources (taules, figures i peus). Peu: «Un ZIP corrent: obert, documentat i amb llicència MIT. Qualsevol eina el pot llegir i escriure.» · *Narració:* Postext és un estàndard obert: un únic fitxer portàtil, documentat i amb llicència MIT, que qualsevol eina pot llegir i escriure.
- 1:58 · *A la pantalla:* «La mostra · composta pel motor real»: un mur de pàgines de l'edició espanyola de la guia s'allunya en perspectiva mentre un comptador arriba a 48 pàgines. Text: «12 capítols, 3 parts i una portada, maquetats en més o menys mig segon. Cada pàgina de la guia de Postext, calculada en un navegador per postext v1.7.0 per a aquesta peça. Res col·locat a mà.» Després, etiquetes: Llibres de text, Revistes, Edicions literàries, Catàlegs. · *Narració:* Per això és capaç de maquetar llibres de centenars de pàgines en dècimes de segon.
- 2:06 · *A la pantalla:* Tancament: el logotip de Postext amb el lema «El tipògraf programable per a la web», l'adreça postext.dev, una línia de terminal que escriu «$ pnpm add postext» i el peu «Codi obert · MIT · github.com/drnachio/postext». · *Narració:* Postext. Codi obert, a postext.dev.

## Maquetació editorial, calculada per al web

CSS ofereix maquetació responsiva — flexbox, grid, columnes. Però no sap equilibrar columnes, mantenir un títol amb el seu paràgraf, evitar vídues i òrfenes ni portar una figura al capdamunt de la columna següent. Són decisions editorials, depurades durant segles d'impremta.

Postext cobreix aquest buit. Passa-li markdown semàntic i un objecte de configuració. Mesura text entre 300 i 600 vegades més de pressa que el DOM gràcies a [@chenglou/pretext](https://github.com/chenglou/pretext), calcula la geometria completa de cada pàgina — cada línia, flotant i peu — i la renderitza mitjançant els backends d'HTML, canvas o PDF a punt per a impremta.

## El que els tipògrafs sempre han sabut

### Justificació Knuth-Plass

El mateix algorisme òptim de partició de línies que fa servir TeX, amb partició de mots per patrons de TeX i control d'òrfenes — blocs de text homogenis sense rius de blanc, més enllà del que CSS pot expressar.

[Llegir a la documentació](https://postext.dev/ca/docs/justification#knuth-plass-veure-el-paràgraf-sencer)

### Recursos i referències creuades

Figures, diagrames SVG i taules que floten a l'inici o al final de columnes i pàgines — com els flotants a impremta — amb numeració tipada i referències :ref que sempre es mantenen sincronitzades.

[Llegir a la documentació](https://postext.dev/ca/docs/document-format#recursos)

### Taules i peus

Taules amb tipografia independent per al cos i la capçalera, dividides entre pàgines amb la capçalera repetida, i peus que segueixen la teva configuració — numerats i col·locats al costat del recurs que descriuen.

[Llegir a la documentació](https://postext.dev/ca/docs/configuration#estil-de-taules)

### Diagrames a una tinta

Recoloreja els diagrames SVG amb matisos d'una sola tinta segons la seva luminància, perquè cada il·lustració encaixi amb el teu disseny — a punt per a impressió amb tinta directa.

[Llegir a la documentació](https://postext.dev/ca/docs/configuration#estil-dels-diagrames)

### Matemàtiques en LaTeX

Equacions en línia i en bloc escrites en LaTeX, mesurades i compostes pel motor perquè s'assentin a la retícula de base al costat del text.

[Llegir a la documentació](https://postext.dev/ca/docs/document-format#fórmules-matemàtiques)

### Web, PDF per a impremta i EPUB

Un motor de maquetació, quatre sortides. Les mateixes pàgines calculades es renderitzen a HTML, canvas o PDF a punt per a impremta — amb marcadors, color CMYK i PDF etiquetat i accessible (PDF/UA) — i surten com a llibre electrònic EPUB 3, pàgina a pàgina o amb maquetació fluida.

[Llegir a la documentació](https://postext.dev/ca/docs/architecture#interfície-del-backend)

## Una funció, control total

Crida `buildDocument` amb el teu contingut i un objecte de configuració. Reps la geometria completa de les pàgines: dibuixa qualsevol pàgina com a imatge amb `renderPage` o compon el llibre sencer com a PDF a punt per a impremta amb `renderToPdf`.

```ts
import { buildDocument, renderToHtml } from "postext";

const doc = buildDocument(
  { markdown },
  {
    layout: { layoutType: "double" },
    bodyText: {
      textAlign: "justify",
      hyphenation: { enabled: true, locale: "en-us" },
    },
  }
);

const html = renderToHtml(doc);
```

## Maquetació editorial en tres passos

1. **Escriu markdown semàntic.** Escriu el teu contingut en markdown enriquit: títols, llistes, taules, fórmules, requadres i referències :ref a les teves figures. Sense pensar en maquetació — només contingut.
2. **Configura les regles de maquetació.** Defineix la mida de pàgina, les columnes, la tipografia, el disseny dels títols, els titolets i la col·locació de flotants en un objecte PostextConfig — o dissenya-ho visualment al Sandbox.
3. **Renderitza a HTML, canvas o PDF.** Crida buildDocument i obtén la geometria completa de la maquetació — i renderitza-la amb el backend d'HTML, canvas o PDF a punt per a impremta.

## Un fitxer, el llibre sencer

Un fitxer .postext porta tot el que un document necessita per tornar-se a compondre en qualsevol màquina: un format obert i editable que qualsevol pot adoptar.

La majoria dels formats editorials dispersen un projecte. Una compilació de LaTeX depèn de les fonts i els paquets instal·lats en una màquina, i els fitxers nadius dels grans editors de maquetació enllacen imatges i tipografies que en queden fora. En moure el projecte, alguna cosa es perd. Nosaltres mateixos vam topar amb aquests límits a LaTeX.

Un .postext és un fitxer ZIP corrent que qualsevol pot obrir, llegir i editar: un manifest JSON, un fitxer Markdown per capítol i els mateixos fitxers de fonts i imatges. El Sandbox l'exporta, l'skill d'agent postext-port l'escriu i `postext/bundle` l'obre en qualsevol programa per compondre de nou les mateixes pàgines. El format està documentat i té llicència MIT, a punt perquè qualsevol eina el llegeixi i l'escrigui.

- **Configuració**
- **Capítols**
- **Tipografies**
- **Recursos**
- **Imatges**

### Obre la guia, obtén-ne les pàgines

El primer exemple del Sandbox, la guia de Postext, és un únic fitxer .postext. Obre'l al navegador i converteix cada pàgina en una imatge: les tipografies, figures i taules surten del mateix fitxer.

- [postext-guide.postext](https://postext.dev/bundles/postext-guide.postext)

## Comença en menys d'un minut

```bash
pnpm add postext
```

```ts
import { buildDocument, renderToHtml } from "postext";

const doc = buildDocument({
  markdown: "# Hello World\n\nYour content here.",
});

const html = renderToHtml(doc);
```

## Documentació

- [Introducció a Postext](https://postext.dev/ca/docs/introduction.md): Què és Postext, per què existeix i el problema que resol
- [Arquitectura de Postext](https://postext.dev/ca/docs/architecture.md): Arquitectura tècnica del motor de composició tipogràfica Postext
- [Configuració de Postext](https://postext.dev/ca/docs/configuration.md): Referència completa de totes les opcions de configuració de composició de Postext
- [Partició de mots i justificació](https://postext.dev/ca/docs/justification.md): Com Postext talla línies, justifica el text i controla l\
- [Format del document](https://postext.dev/ca/docs/document-format.md): El subconjunt de markdown que analitza Postext i les normes per escriure els documents font
- [Composició xinesa](https://postext.dev/ca/docs/chinese-layout.md): Com compon Postext el xinès, en horitzontal i en vertical: regions, tall de línies, amplada de la puntuació, justificació entre caràcters, la retícula de caràcters, llibres enquadernats per la dreta, números en una casella, marques, ruby, warichu, numerals xinesos i fonts
- [Composició àrab](https://postext.dev/ca/docs/arabic-layout.md): Com compon Postext l
- [Contribuir a Postext](https://postext.dev/ca/docs/contributing.md): Com unir-se a la comunitat Postext i contribuir al projecte
- [Sandbox](https://postext.dev/ca/docs/sandbox.md): Entorn interactiu per experimentar amb el motor de maquetació de Postext
- [Skill per a agents: portar una publicació a Postext](https://postext.dev/ca/docs/skill.md): Instal·la la skill postext-port a Claude Code, Codex o qualsevol agent i deixa que converteixi un PDF, Word, PowerPoint, EPUB, InDesign o HTML en un projecte de Postext que segueix la maquetació original

## Enllaços

- [GitHub](https://github.com/drnachio/postext)
- [npm](https://www.npmjs.com/package/postext)
- [YouTube](https://www.youtube.com/@Postext)
- [Receptari](https://postext.dev/ca/cookbook.md): Exemples de Postext per copiar, des d'una obertura de capítol fins a un llibre sencer, cadascun amb les pàgines que compon i el codi complet.
- [Sandbox](https://postext.dev/ca/sandbox): Editor interactiu al navegador: escriu markdown, ajusta la configuració i exporta un PDF a punt per a impremta i llibres electrònics EPUB 3.
- [Llicència MIT](https://postext.dev/ca/license.md)