Le compositeur programmable pour le web

Tout ce que dit le narrateur, avec une description de ce qui apparaît à l’écran.

1. 0:00

   À l’écranUne carte sombre affiche « MAINZ · 1455 » au-dessus d’un fin filet doré. Derrière le titre « For five centuries, print learned to set a page. » (« Pendant cinq siècles, l’imprimerie a appris à composer une page. »), l’année défile de 1455 à 2026 en immenses chiffres détourés, et des termes d’imprimerie, en anglais, se posent tout autour : justification, crénage (Kerning), veuves et orphelines, colonnes équilibrées, interlignage, grille de ligne de base, césure (écrite « hy·phen·a·tion »), longueur de ligne, flottants, titres courants, lézardes. La caméra plonge dans le point final, qui inonde l’écran d’or.

   NarrationPendant cinq siècles, l’imprimerie a appris à composer une page.

2. 0:05

   À l’écranTitre : « The web learned to lay out interfaces. It never learned to set a page. » (« Le web a appris à mettre en page des interfaces. Il n’a jamais appris à composer une page. ») Une fenêtre de navigateur ouverte sur example.com/longform/article contient un article justifié sur trois colonnes, « Why the web can’t set a page » (« Pourquoi le web ne sait pas composer une page ») ; des étiquettes rouges signalent des lézardes de blanc, une veuve, une orpheline, une image qui tombe sur le texte et une dernière colonne déséquilibrée. À côté, une pastille de code affiche « column-count: 3; », puis « …and little else. » (« …et pas grand-chose de plus. ») et une liste barrée des cinq mêmes défauts. La fenêtre se brouille et s’effondre.

   NarrationLe web a appris à mettre en page des interfaces. Jamais des pages. Alors le texte long se casse encore : lézardes, veuves, orphelines, collisions.

3. 0:18

   À l’écranAprès un éclair blanc et un balayage de bandes bleues, dorées et rouges, le logo et le nom de Postext se mettent en place avec le slogan « The programmable typesetter for the web » (« Le compositeur programmable pour le web »). En dessous : OPEN SOURCE · MIT LICENCE · v1.7.0 · RUNS IN YOUR BROWSER (open source, licence MIT, fonctionne dans votre navigateur).

   NarrationVoici Postext : le compositeur programmable pour le web.

4. 0:24

   À l’écranSection 01 sur 07, « Content in » (« Le contenu entre ») : « Markdown says what things are. » (« Markdown dit ce que sont les choses. ») Un fichier Markdown, 03-why-postext.md, s’écrit tout seul : une directive de partie, le titre « Why Postext » avec un chapeau, un paragraphe qui renvoie à la figure fig-flow avec :ref, une ligne ::resource et un bloc :::callout. À côté, config.ts appelle buildDocument avec une mise en page sur deux colonnes, un texte courant justifié et la césure en en-us, sous la phrase « Configuration decides how they look. Nothing about layout lives in the text. » (« La configuration décide de leur apparence. Rien de la mise en page ne vit dans le texte. »)

   NarrationVous écrivez du Markdown sémantique, qui dit ce que sont les choses. Une configuration décide de leur apparence.

5. 0:32

   À l’écranSection 02, « Pretext measures » (« Pretext mesure ») : « Measured without touching the DOM. » (« Mesuré sans toucher au DOM. ») Un titre, un paragraphe et un encadré sont scannés l’un après l’autre, et des lignes de cote donnent leur hauteur en points ; un panneau de code montre prepare(text, '25px Lora') et layout(prepared, width, 38), qui renvoient une hauteur et un nombre de lignes. Deux barres font la course sur 10 000 paragraphes : « Browser reflow · DOM » (la recomposition par le navigateur) bouge à peine, tandis que « Pretext · canvas metrics + arithmetic » (métriques canvas et arithmétique) se remplit d’un coup, et un compteur grimpe jusqu’à 600× au-dessus de « faster text measurement than the DOM, so a whole book reflows as you type » (« une mesure du texte plus rapide que le DOM : tout un livre se recompose pendant la frappe ») et de « Powered by @chenglou/pretext ».

   NarrationChaque paragraphe est mesuré sans toucher au DOM, jusqu’à six cents fois plus vite, grâce à Pretext, la bibliothèque qui a rendu cela possible.

6. 0:42

   À l’écranSection 03, « Postext decides » (« Postext décide ») : « Every line placed before a pixel is drawn. » (« Chaque ligne placée avant qu’un seul pixel soit dessiné. ») Un anneau de sept segments s’allume tour à tour, Structure, Measure, Place, Float, Refine, Balance et Rhythm (structurer, mesurer, placer, faire flotter, affiner, équilibrer, rythmer), chacun avec une description d’une ligne, tandis qu’une page sur deux colonnes du guide de Postext s’assemble à côté : des blocs étiquetés volent jusqu’à leurs colonnes, une figure glisse à sa place sous la note « :ref{id="fig-flow"} → column foot » (pied de colonne), le bandeau d’ouverture descend, les lignes apparaissent, les colonnes s’égalisent et une grille de ligne de base balaie la page de haut en bas. L’anneau boucle sur les itérations 1 à 3 et affiche « Settled in 3 iterations » (« Stabilisé en 3 itérations ») avec une coche ; une bulle donne la boîte englobante et la ligne de base d’une ligne.

   NarrationPuis Postext décide. Sept passes placent chaque ligne, font flotter chaque figure et équilibrent chaque colonne, en boucle jusqu’à ce que plus rien ne bouge.

7. 0:54

   À l’écranSection 04, « The virtual document » (« Le document virtuel ») : « Change a word. Only what changed is set again. » (« Changez un mot. Seul ce qui a changé est recomposé. »), avec la note « Like React’s virtual DOM, but for pages: the VDT, a virtual document tree. » (« Comme le DOM virtuel de React, mais pour des pages : le VDT, un arbre de document virtuel. ») Sept pages, de p. 7 à p. 13, se tiennent en rang ; un curseur marque une modification à la page 11, le reste de cette colonne passe à l’or avec la mention DIRTY (à refaire) et un filet de texte déborde sur la page 12, qui reçoit une coche et SETTLED (stabilisée), tandis que les pages précédentes indiquent SKIPPED (ignorée) et les suivantes UNTOUCHED (intacte). Trois puces énoncent la règle, et un panneau intitulé renderToHtmlIndexed() marque PATCHED (corrigés) les nœuds modifiés de l’arbre du document.

   NarrationTout cela vit dans un document virtuel, comme le DOM virtuel de React. Changez un mot, et seul ce qui a changé est recomposé.

8. 1:03

   À l’écran« A long document? Only what’s on screen gets painted. » (« Un long document ? Seul ce qui est à l’écran est peint. ») Une colonne de pages de livre défile dans un cadre doré marqué VIEWPORT (zone d’affichage), avec une marge de 200 pixels au-dessus et au-dessous : les pages à l’intérieur sont dessinées en entier, celles de l’extérieur ne sont que des contours en pointillés. Un grand compteur montre combien des 48 pages sont peintes à ce moment-là (IntersectionObserver · +200 px), à côté de « Geometry: every page. Pixels: only what you see. » (« Géométrie : chaque page. Pixels : seulement ce que vous voyez. »)

   NarrationEt dans un long livre, seules les pages à l’écran sont peintes.

9. 1:10

   À l’écranSection 05, « Knuth–Plass justification » (« Justification Knuth–Plass ») : « Every way to break the paragraph. At once. » (« Toutes les manières de couper le paragraphe. D’un coup. ») À gauche, un paragraphe sur la coupure des lignes est composé au premier ajustement, comme le fait un navigateur, et ses lignes les plus lâches virent au rouge. En dessous, chaque mot devient un point sur une ligne : des arcs rouges marquent les coupures gloutonnes, de pâles arcs bleus essaient toutes les coupures possibles et un chemin doré retient le meilleur ensemble. À droite, la version Knuth–Plass est espacée régulièrement, avec la laideur (badness) de chaque ligne, la formule « (1 + badness + penalty)² » et un total de démérites plus bas.

   NarrationUn navigateur coupe les lignes de façon gloutonne, une à une. Postext utilise Knuth–Plass, l’algorithme de TeX. Il pèse toutes les façons de couper le paragraphe entier et garde la plus régulière.

10. 1:24

    À l’écranSection 06, « One layout, five outputs » (« Une mise en page, cinq sorties ») : « What you see is what goes to press. » (« Ce que vous voyez est ce qui part à l’impression. ») Sous la ligne de code const vdt = buildDocument(content, config); une page se divise en cinq. Canvas (renderToCanvas(), images matricielles au pixel près) reçoit une loupe sur sa grille de pixels ; HTML (renderToHtml(), texte sélectionnable, sensible au redimensionnement) voit chaque bloc détouré et étiqueté <h1>, <p>, <figure>, etc. ; PDF (renderToPdf(), prêt pour l’impression, PDF/UA, CMJN) fait glisser quatre plaques de couleur jusqu’au repérage, puis apparaissent les traits de coupe et une gamme de contrôle. EPUB 3 (renderToEpub(), livre numérique, fixe ou recomposable) montre la page dans une liseuse étiquetée « Fixed layout » (mise en page fixe) ; l’écran se rétrécit à la taille d’un téléphone, le texte se recompose et l’étiquette devient « Reflowable » (recomposable). Folio (postext-folio, un livre en 3D aux pages qui tournent) ouvre la page en double page et tourne un feuillet par-dessus le dos.

    NarrationUne mise en page, cinq sorties : canvas, HTML, PDF prêt pour l’impression, EPUB 3, fixe ou recomposable, et un livre en 3D. Ce que vous voyez est ce qui part à l’impression.

11. 1:41

    À l’écranSection 07, « Why an open standard » (« Pourquoi un standard ouvert ») : « LaTeX set the bar for print. Publishing now lives on every screen, too. » (« LaTeX a placé la barre pour l’imprimé. L’édition vit désormais aussi sur tous les écrans. ») Deux cartes : LaTeX, 1984, avec des croix face à « Built for the printed page » (conçu pour la page imprimée), « Builds tied to one machine’s fonts & packages » (des compilations liées aux polices et aux paquets d’une machine), « Compile, wait, repeat » (compiler, attendre, recommencer) et « No editorial layout on the responsive web » (pas de mise en page éditoriale sur le web adaptatif) ; Postext, 2026, avec des coches face à « Web, print-ready PDF & EPUB 3 from one layout » (web, PDF prêt pour l’impression et EPUB 3 à partir d’une seule mise en page), « One portable .postext file carries it all » (un seul fichier .postext portable contient tout), « Reflows live, as you type » (se recompose en direct, pendant la frappe) et « Runs in any browser · zero servers · MIT » (fonctionne dans tout navigateur, sans serveur, sous licence MIT). La carte Postext s’illumine.

    NarrationLaTeX a fixé la norme pour l’imprimé. Mais l’édition vit désormais sur tous les écrans.

12. 1:48

    À l’écranSurtitre « One file, the whole book » (« Un fichier, tout le livre »), titre « An open standard for publishing, beyond where LaTeX reaches. » (« Un standard ouvert pour l’édition, qui va plus loin que LaTeX. ») Une icône de fichier .postext éclate en cinq parties : preset.json (configuration et maquette), chapters/*.md (un fichier Markdown par chapitre), fonts/*.woff2 (les polices elles-mêmes), images/ · SVG (chaque image, incorporée) et resources (tableaux, figures et légendes). Légende : « A plain ZIP: open, documented, MIT-licensed. Any tool can read and write it. » (« Un simple ZIP : ouvert, documenté, sous licence MIT. N’importe quel outil peut le lire et l’écrire. »)

    NarrationPostext est un standard ouvert : un fichier portable, documenté et sous licence MIT, que n’importe quel outil peut lire et écrire.

13. 1:58

    À l’écran« The showcase · set by the real engine » (« La vitrine, composée par le vrai moteur ») : un mur de pages de livre s’éloigne en perspective tandis qu’un compteur atteint 48 pages. Texte : « 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 chapitres, 3 parties, une couverture, mis en page en une demi-seconde environ. Chaque page du guide de Postext, calculée dans un navigateur par postext v1.7.0 pour ce film. Rien n’est placé à la main. ») Suivent des étiquettes : Textbooks, Magazines, Literary editions, Catalogues (manuels, magazines, éditions littéraires, catalogues).

    NarrationC’est pourquoi il peut mettre en page des livres de plusieurs centaines de pages en quelques dixièmes de seconde.

14. 2:05

    À l’écranCarte de fin : le logo de Postext avec le slogan « The programmable typesetter for the web » (« Le compositeur programmable pour le web »), l’adresse postext.dev, une ligne de terminal qui tape « $ pnpm add postext », et le pied « Open source · MIT · github.com/drnachio/postext ».

    NarrationPostext. Open source, sur postext.dev.