Il compositore tipografico programmabile per il web

Tutto ciò che dice la voce narrante, con una descrizione di ciò che appare sullo schermo.

1. 0:00

   Sullo schermoUna scheda scura riporta «MAINZ · 1455» sopra un sottile filetto dorato. Dietro il titolo «For five centuries, print learned to set a page.» («Per cinque secoli la stampa ha imparato a comporre una pagina.»), l’anno scorre da 1455 a 2026 in enormi cifre contornate, e attorno si posano termini di tipografia, in inglese: giustificazione, crenatura (Kerning), vedove e orfane, colonne bilanciate, interlinea, griglia della linea di base, sillabazione (scritta «hy·phen·a·tion»), giustezza, elementi flottanti, testatine, canali di bianco. La telecamera si tuffa nel punto finale, che inonda lo schermo d’oro.

   NarrazionePer cinque secoli la stampa ha imparato a comporre una pagina.

2. 0:05

   Sullo schermoTitolo: «The web learned to lay out interfaces. It never learned to set a page.» («Il web ha imparato a impaginare interfacce. Non ha mai imparato a comporre una pagina.») Una finestra del browser aperta su example.com/longform/article contiene un articolo giustificato su tre colonne, «Why the web can’t set a page» («Perché il web non sa comporre una pagina»); etichette rosse segnalano canali di bianco, una vedova, un’orfana, un’immagine che cade sul testo e un’ultima colonna sbilanciata. Accanto, un riquadro di codice mostra «column-count: 3;», poi «…and little else.» («…e poco altro.») e un elenco barrato degli stessi cinque difetti. La finestra si disturba e crolla.

   NarrazioneIl web ha imparato a impaginare interfacce. Mai pagine. Così il testo lungo si rompe ancora: canali di bianco, vedove, orfane, collisioni.

3. 0:18

   Sullo schermoDopo un lampo bianco e una passata di strisce blu, oro e rosse, il logo e il nome di Postext salgono al loro posto con lo slogan «The programmable typesetter for the web» («Il compositore programmabile per il web»). Sotto: OPEN SOURCE · MIT LICENCE · v1.7.0 · RUNS IN YOUR BROWSER (open source, licenza MIT, funziona nel tuo browser).

   NarrazioneEcco Postext: il compositore programmabile per il web.

4. 0:24

   Sullo schermoSezione 01 di 07, «Content in» («Entra il contenuto»): «Markdown says what things are.» («Il Markdown dice che cosa sono le cose.») Un file Markdown, 03-why-postext.md, si scrive da solo: una direttiva di parte, il titolo «Why Postext» con un sommario, un paragrafo che rimanda alla figura fig-flow con :ref, una riga ::resource e un blocco :::callout. Accanto, config.ts chiama buildDocument con un’impaginazione a due colonne, il testo corrente giustificato e la sillabazione en-us, sotto la frase «Configuration decides how they look. Nothing about layout lives in the text.» («La configurazione decide il loro aspetto. Nulla dell’impaginazione vive nel testo.»)

   NarrazioneScrivi Markdown semantico, che dice che cosa sono le cose. Una configurazione decide il loro aspetto.

5. 0:32

   Sullo schermoSezione 02, «Pretext measures» («Pretext misura»): «Measured without touching the DOM.» («Misurato senza toccare il DOM.») Un titolo, un paragrafo e un riquadro vengono scansionati uno dopo l’altro, e linee di quota ne danno l’altezza in punti; un pannello di codice mostra prepare(text, '25px Lora') e layout(prepared, width, 38), che restituiscono un’altezza e un numero di righe. Due barre gareggiano su 10.000 paragrafi: «Browser reflow · DOM» (il ricalcolo del layout nel browser) si muove appena, mentre «Pretext · canvas metrics + arithmetic» (metriche del canvas e aritmetica) si riempie in un attimo, e un contatore sale fino a 600× sopra «faster text measurement than the DOM, so a whole book reflows as you type» («una misurazione del testo più veloce del DOM, così un libro intero si ricompone mentre scrivi») e «Powered by @chenglou/pretext».

   NarrazioneOgni paragrafo viene misurato senza toccare il DOM, fino a seicento volte più in fretta, grazie a Pretext, la libreria che lo ha reso possibile.

6. 0:42

   Sullo schermoSezione 03, «Postext decides» («Postext decide»): «Every line placed before a pixel is drawn.» («Ogni riga al suo posto prima che si disegni un pixel.») Un anello di sette segmenti si accende a turno, Structure, Measure, Place, Float, Refine, Balance e Rhythm (strutturare, misurare, collocare, far flottare, rifinire, bilanciare, dare ritmo), ognuno con una descrizione di una riga, mentre accanto si compone una pagina a due colonne della guida di Postext: blocchi etichettati volano nelle loro colonne, una figura scivola al suo posto sotto la nota «:ref{id="fig-flow"} → column foot» (piede della colonna), la fascia d’apertura scende, compaiono le righe, le colonne si pareggiano e una griglia della linea di base scorre dall’alto in basso. L’anello ripete le iterazioni da 1 a 3 e mostra «Settled in 3 iterations» («Stabile in 3 iterazioni») con un segno di spunta; un fumetto indica il riquadro di delimitazione e la linea di base di una riga.

   NarrazionePoi Postext decide. Sette passate collocano ogni riga, fanno flottare ogni figura e bilanciano ogni colonna, e ripetono finché nulla si muove più.

7. 0:54

   Sullo schermoSezione 04, «The virtual document» («Il documento virtuale»): «Change a word. Only what changed is set again.» («Cambia una parola. Si ricompone solo ciò che è cambiato.»), con la nota «Like React’s virtual DOM, but for pages: the VDT, a virtual document tree.» («Come il DOM virtuale di React, ma per le pagine: il VDT, un albero virtuale del documento.») Sette pagine, da p. 7 a p. 13, stanno in fila; un cursore segna una modifica a pagina 11, il resto di quella colonna diventa oro con la scritta DIRTY (da rifare) e un filo di testo trabocca a pagina 12, che riceve un segno di spunta e SETTLED (stabile), mentre le pagine precedenti riportano SKIPPED (saltata) e quelle successive UNTOUCHED (intatta). Tre punti enunciano la regola, e un pannello intitolato renderToHtmlIndexed() segna come PATCHED (aggiornati) i nodi modificati dell’albero del documento.

   NarrazioneTutto vive in un documento virtuale, come il DOM virtuale di React. Cambia una parola, e si ricompone solo ciò che è cambiato.

8. 1:03

   Sullo schermo«A long document? Only what’s on screen gets painted.» («Un documento lungo? Si dipinge solo ciò che è sullo schermo.») Una colonna di pagine di libro scorre dentro una cornice dorata con la scritta VIEWPORT (area visibile), con un margine di 200 pixel sopra e sotto: le pagine all’interno sono disegnate per intero, quelle all’esterno sono contorni tratteggiati. Un grande contatore mostra quante delle 48 pagine sono dipinte in quel momento (IntersectionObserver · +200 px), accanto a «Geometry: every page. Pixels: only what you see.» («Geometria: ogni pagina. Pixel: solo ciò che vedi.»)

   NarrazioneE in un libro lungo si dipingono soltanto le pagine sullo schermo.

9. 1:10

   Sullo schermoSezione 05, «Knuth–Plass justification» («Giustificazione Knuth–Plass»): «Every way to break the paragraph. At once.» («Tutti i modi di dividere il paragrafo. In una volta.») A sinistra, un paragrafo sulla divisione in righe è composto con il primo adattamento, come fa un browser, e le sue righe più larghe diventano rosse. Sotto, ogni parola diventa un punto su una linea: archi rossi segnano gli a capo greedy, tenui archi blu provano ogni a capo possibile e un percorso dorato sceglie l’insieme migliore. A destra, la versione Knuth–Plass ha una spaziatura uniforme, con la badness di ogni riga, la formula «(1 + badness + penalty)²» e un totale di demeriti più basso.

   NarrazioneUn browser va a capo in modo greedy, una riga alla volta. Postext usa Knuth–Plass, l’algoritmo di TeX. Valuta tutti i modi di dividere l’intero paragrafo e tiene il più uniforme.

10. 1:24

    Sullo schermoSezione 06, «One layout, five outputs» («Un’impaginazione, cinque output»): «What you see is what goes to press.» («Quello che vedi è quello che va in stampa.») Sotto la riga di codice const vdt = buildDocument(content, config); una pagina si divide in cinque. Canvas (renderToCanvas(), bitmap precise al pixel) riceve una lente d’ingrandimento sulla sua griglia di pixel; HTML (renderToHtml(), testo selezionabile, attento al ridimensionamento) vede ogni blocco contornato ed etichettato <h1>, <p>, <figure> e così via; PDF (renderToPdf(), pronto per la stampa, PDF/UA, CMYK) fa scivolare quattro lastre di colore fino al registro, poi compaiono i segni di taglio e una scala colori. EPUB 3 (renderToEpub(), libro digitale, fisso o fluido) mostra la pagina in un lettore di e-book con l’etichetta «Fixed layout» (layout fisso); lo schermo si restringe alle dimensioni di un telefono, il testo si ricompone e l’etichetta diventa «Reflowable» (fluido). Folio (postext-folio, un libro in 3D, con pagine che si sfogliano) apre la pagina in una doppia pagina e gira un foglio sopra il dorso.

    NarrazioneUn’impaginazione, cinque output: canvas, HTML, PDF pronto per la stampa, EPUB 3, fisso o fluido, e un libro in 3D. Quello che vedi è quello che va in stampa.

11. 1:41

    Sullo schermoSezione 07, «Why an open standard» («Perché uno standard aperto»): «LaTeX set the bar for print. Publishing now lives on every screen, too.» («LaTeX ha fissato l’asticella per la stampa. Ora l’editoria vive anche su ogni schermo.») Due schede: LaTeX, 1984, con delle croci accanto a «Built for the printed page» (pensato per la pagina stampata), «Builds tied to one machine’s fonts & packages» (compilazioni legate ai font e ai pacchetti di una macchina), «Compile, wait, repeat» (compila, aspetta, ripeti) e «No editorial layout on the responsive web» (nessuna impaginazione editoriale sul web responsive); Postext, 2026, con dei segni di spunta accanto a «Web, print-ready PDF & EPUB 3 from one layout» (web, PDF pronto per la stampa ed EPUB 3 da un’unica impaginazione), «One portable .postext file carries it all» (un solo file .postext portabile contiene tutto), «Reflows live, as you type» (si ricompone dal vivo, mentre scrivi) e «Runs in any browser · zero servers · MIT» (funziona in qualunque browser, senza server, con licenza MIT). La scheda di Postext si illumina.

    NarrazioneLaTeX ha fissato lo standard per la stampa. Ma oggi l’editoria vive su ogni schermo.

12. 1:48

    Sullo schermoOcchiello «One file, the whole book» («Un file, tutto il libro»), titolo «An open standard for publishing, beyond where LaTeX reaches.» («Uno standard aperto per l’editoria, che arriva dove LaTeX non arriva.») L’icona di un file .postext si apre in cinque parti: preset.json (configurazione e progetto grafico), chapters/*.md (un file Markdown per capitolo), fonts/*.woff2 (i caratteri stessi), images/ · SVG (ogni immagine, incorporata) e resources (tabelle, figure e didascalie). Didascalia: «A plain ZIP: open, documented, MIT-licensed. Any tool can read and write it.» («Un semplice ZIP: aperto, documentato, con licenza MIT. Qualunque strumento può leggerlo e scriverlo.»)

    NarrazionePostext è uno standard aperto: un unico file portabile, documentato e con licenza MIT, che qualunque strumento può leggere e scrivere.

13. 1:58

    Sullo schermo«The showcase · set by the real engine» («La vetrina, composta dal vero motore»): un muro di pagine di libro si allontana in prospettiva mentre un contatore arriva a 48 pagine. Testo: «12 chapters, 3 parts, a cover, laid out in about half a second. Every page of the Postext guide, computed in a browser by postext v1.7.0 for this film. Nothing placed by hand.» («12 capitoli, 3 parti, una copertina, impaginati in circa mezzo secondo. Ogni pagina della guida di Postext, calcolata in un browser da postext v1.7.0 per questo filmato. Niente è collocato a mano.») Seguono delle etichette: Textbooks, Magazines, Literary editions, Catalogues (libri di testo, riviste, edizioni letterarie, cataloghi).

    NarrazionePer questo può impaginare libri di centinaia di pagine in pochi decimi di secondo.

14. 2:05

    Sullo schermoScheda finale: il logo di Postext con lo slogan «The programmable typesetter for the web» («Il compositore programmabile per il web»), l’indirizzo postext.dev, una riga di terminale che digita «$ pnpm add postext», e il piede «Open source · MIT · github.com/drnachio/postext».

    NarrazionePostext. Open source, su postext.dev.