El tipògraf programable per al web

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

1. 0:00

   A la pantallaSobre 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.

2. 0:06

   A la pantallaTitular: «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.

3. 0:19

   A la pantallaDespré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.

4. 0:25

   A la pantallaSecció 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.

5. 0:33

   A la pantallaSecció 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.

6. 0:43

   A la pantallaSecció 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.

7. 0:55

   A la pantallaSecció 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.

8. 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.

9. 1:12

   A la pantallaSecció 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.

10. 1:27

    A la pantallaSecció 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.

11. 1:38

    A la pantallaSecció 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.

12. 1:46

    A la pantallaRè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.

13. 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.

14. 2:06

    A la pantallaTancament: 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.