Das programmierbare Satzsystem für das Web

Alles, was der Sprecher sagt, mit einer Beschreibung dessen, was auf dem Bildschirm zu sehen ist.

1. 0:00

   Auf dem BildschirmEine dunkle Karte zeigt „MAINZ · 1455“ über einer feinen goldenen Linie. Hinter der Schlagzeile „For five centuries, print learned to set a page.“ („Fünf Jahrhunderte lang hat der Buchdruck gelernt, eine Seite zu setzen.“) zählt die Jahreszahl in riesigen Konturziffern von 1455 bis 2026 hoch, und ringsum landen Begriffe aus dem Druckwesen, auf Englisch: Blocksatz (Justification), Unterschneidung (Kerning), Witwen und Waisen (Widows, orphans), ausgeglichene Spalten (Balanced columns), Zeilenabstand (Leading), Grundlinienraster (Baseline grid), Silbentrennung (geschrieben „hy·phen·a·tion“), Zeilenlänge (Measure), Gleitobjekte (Floats), Kolumnentitel (Running heads), Gießbäche (Rivers). Die Kamera fährt in den Schlusspunkt hinein, der den Bildschirm mit Gold flutet.

   SprecherFünf Jahrhunderte lang hat der Buchdruck gelernt, wie man eine Seite setzt.

2. 0:05

   Auf dem BildschirmSchlagzeile: „The web learned to lay out interfaces. It never learned to set a page.“ („Das Web hat gelernt, Oberflächen zu gestalten. Eine Seite zu setzen, hat es nie gelernt.“) Ein Browserfenster mit der Adresse example.com/longform/article zeigt einen dreispaltigen Artikel im Blocksatz, „Why the web can’t set a page“ („Warum das Web keine Seite setzen kann“); rote Etiketten markieren Gießbäche aus Weißraum, eine Witwe, eine Waise, ein Bild, das auf dem Text landet, und eine unausgeglichene letzte Spalte. Daneben zeigt ein Code-Chip „column-count: 3;“, dann „…and little else.“ („…und kaum mehr.“) und eine durchgestrichene Liste derselben fünf Fehler. Das Fenster flackert und fällt in sich zusammen.

   SprecherDas Web hat gelernt, Oberflächen zu gestalten. Nie Seiten. Deshalb bricht langer Text noch immer auseinander: Gießbäche, Witwen, Waisen, Kollisionen.

3. 0:18

   Auf dem BildschirmNach einem weißen Blitz und einem Wisch aus blauen, goldenen und roten Streifen steigen Logo und Schriftzug von Postext an ihren Platz, mit dem Slogan „The programmable typesetter for the web“ („Das programmierbare Satzsystem für das Web“). Darunter: OPEN SOURCE · MIT LICENCE · v1.7.0 · RUNS IN YOUR BROWSER (Open Source, MIT-Lizenz, läuft in Ihrem Browser).

   SprecherDas ist Postext: das programmierbare Satzsystem für das Web.

4. 0:24

   Auf dem BildschirmAbschnitt 01 von 07, „Content in“ („Der Inhalt kommt herein“): „Markdown says what things are.“ („Markdown sagt, was die Dinge sind.“) Eine Markdown-Datei, 03-why-postext.md, schreibt sich von selbst: eine Teil-Direktive, die Überschrift „Why Postext“ mit einem Vorspann, ein Absatz, der mit :ref auf die Abbildung fig-flow verweist, eine Zeile ::resource und ein Block :::callout. Daneben ruft config.ts buildDocument mit einem zweispaltigen Layout, Grundtext im Blocksatz und Silbentrennung für en-us auf, unter dem Satz „Configuration decides how they look. Nothing about layout lives in the text.“ („Die Konfiguration entscheidet, wie sie aussehen. Nichts vom Layout steckt im Text.“)

   SprecherSie schreiben semantisches Markdown, das sagt, was die Dinge sind. Eine Konfiguration entscheidet, wie sie aussehen.

5. 0:32

   Auf dem BildschirmAbschnitt 02, „Pretext measures“ („Pretext misst“): „Measured without touching the DOM.“ („Gemessen, ohne das DOM anzufassen.“) Eine Überschrift, ein Absatz und ein Kasten werden nacheinander abgetastet, und Maßlinien geben ihre Höhe in Punkt an; ein Code-Feld zeigt prepare(text, '25px Lora') und layout(prepared, width, 38), die eine Höhe und eine Zeilenzahl zurückgeben. Zwei Balken liefern sich ein Rennen durch 10.000 Absätze: „Browser reflow · DOM“ (der Neuumbruch im Browser) kommt kaum voran, während sich „Pretext · canvas metrics + arithmetic“ (Canvas-Metriken und Arithmetik) auf einen Schlag füllt, und ein Zähler klettert auf 600× über „faster text measurement than the DOM, so a whole book reflows as you type“ („schnellere Textmessung als über das DOM, sodass ein ganzes Buch beim Tippen neu umbricht“) und „Powered by @chenglou/pretext“.

   SprecherJeder Absatz wird gemessen, ohne das DOM anzufassen, bis zu sechshundertmal schneller, dank Pretext, der Bibliothek, die das möglich gemacht hat.

6. 0:42

   Auf dem BildschirmAbschnitt 03, „Postext decides“ („Postext entscheidet“): „Every line placed before a pixel is drawn.“ („Jede Zeile steht, bevor ein Pixel gezeichnet ist.“) Ein Ring aus sieben Segmenten leuchtet der Reihe nach auf, Structure, Measure, Place, Float, Refine, Balance und Rhythm (gliedern, messen, platzieren, gleiten lassen, verfeinern, ausgleichen, rhythmisieren), jedes mit einer einzeiligen Beschreibung, während sich daneben eine zweispaltige Seite des Postext-Leitfadens zusammensetzt: Beschriftete Blöcke fliegen in ihre Spalten, eine Abbildung gleitet unter der Notiz „:ref{id="fig-flow"} → column foot“ (Spaltenfuß) an ihren Platz, das Farbband des Kapitelauftakts fällt herein, die Zeilen erscheinen, die Spalten gleichen sich aus, und ein Grundlinienraster streicht über die Seite nach unten. Der Ring durchläuft die Iterationen 1 bis 3 und zeigt mit einem Häkchen „Settled in 3 iterations“ („Nach 3 Iterationen stabil“); eine Beschriftung gibt den Begrenzungsrahmen und die Grundlinie einer Zeile an.

   SprecherDann entscheidet Postext. Sieben Durchgänge platzieren jede Zeile, lassen jede Abbildung gleiten und gleichen jede Spalte aus, immer wieder, bis sich nichts mehr bewegt.

7. 0:54

   Auf dem BildschirmAbschnitt 04, „The virtual document“ („Das virtuelle Dokument“): „Change a word. Only what changed is set again.“ („Ändern Sie ein Wort. Nur was sich geändert hat, wird neu gesetzt.“), mit der Notiz „Like React’s virtual DOM, but for pages: the VDT, a virtual document tree.“ („Wie das virtuelle DOM von React, aber für Seiten: der VDT, ein virtueller Dokumentbaum.“) Sieben Seiten, S. 7 bis S. 13, stehen in einer Reihe; eine Einfügemarke zeigt eine Änderung auf S. 11, der Rest dieser Spalte färbt sich golden und trägt DIRTY (neu zu setzen), und ein schmaler Rest fließt auf S. 12 über, die ein Häkchen und SETTLED (stabil) erhält, während die Seiten davor SKIPPED (übersprungen) und die danach UNTOUCHED (unberührt) zeigen. Drei Aufzählungspunkte nennen die Regel, und ein Feld mit der Überschrift renderToHtmlIndexed() markiert die geänderten Knoten des Dokumentbaums als PATCHED (aktualisiert).

   SprecherAll das lebt in einem virtuellen Dokument, wie das virtuelle DOM von React. Ändern Sie ein Wort, und nur was sich geändert hat, wird neu gesetzt.

8. 1:03

   Auf dem Bildschirm„A long document? Only what’s on screen gets painted.“ („Ein langes Dokument? Gezeichnet wird nur, was auf dem Bildschirm ist.“) Eine Kolonne von Buchseiten läuft durch einen goldenen Rahmen mit der Aufschrift VIEWPORT (sichtbarer Bereich), mit einem Rand von 200 Pixeln darüber und darunter: Seiten innerhalb werden vollständig gezeichnet, Seiten außerhalb sind gestrichelte Umrisse. Ein großer Zähler zeigt, wie viele der 48 Seiten in diesem Moment gezeichnet sind (IntersectionObserver · +200 px), neben „Geometry: every page. Pixels: only what you see.“ („Geometrie: jede Seite. Pixel: nur was Sie sehen.“)

   SprecherUnd in einem langen Buch werden nur die Seiten gezeichnet, die auf dem Bildschirm sind.

9. 1:10

   Auf dem BildschirmAbschnitt 05, „Knuth–Plass justification“ („Blocksatz nach Knuth-Plass“): „Every way to break the paragraph. At once.“ („Jede Art, den Absatz umzubrechen. Auf einmal.“) Links wird ein Absatz über den Zeilenumbruch so gesetzt, wie es ein Browser tut, mit der ersten passenden Lösung für jede Zeile, und seine lockersten Zeilen färben sich rot. Darunter wird jedes Wort zu einem Punkt auf einer Linie: Rote Bögen markieren die gierigen Umbrüche, blasse blaue Bögen probieren jeden möglichen Umbruch aus, und ein goldener Pfad wählt die beste Kombination. Rechts ist die Fassung nach Knuth-Plass gleichmäßig verteilt, mit der Badness jeder Zeile, der Formel „(1 + badness + penalty)²“ und einer niedrigeren Summe der Demerits.

   SprecherEin Browser bricht Zeilen gierig um, eine nach der anderen. Postext verwendet Knuth-Plass, den Algorithmus hinter TeX. Er wägt jede Art ab, den ganzen Absatz umzubrechen, und behält die gleichmäßigste.

10. 1:24

    Auf dem BildschirmAbschnitt 06, „One layout, five outputs“ („Ein Layout, fünf Ausgaben“): „What you see is what goes to press.“ („Was Sie sehen, geht in den Druck.“) Unter der Codezeile const vdt = buildDocument(content, config); teilt sich eine Seite in fünf. Canvas (renderToCanvas(), pixelgenaue Bitmaps) bekommt eine Lupe über seinem Pixelraster; bei HTML (renderToHtml(), markierbarer Text, passt sich der Fenstergröße an) wird jeder Block umrandet und mit <h1>, <p>, <figure> usw. beschriftet; bei PDF (renderToPdf(), druckfertig, PDF/UA, CMYK) gleiten vier Farbauszüge passgenau übereinander, dann erscheinen Schnittmarken und ein Farbkontrollstreifen. EPUB 3 (renderToEpub(), E-Book, fest oder umfließend) zeigt die Seite in einem E-Reader mit der Aufschrift „Fixed layout“ (festes Layout); der Bildschirm schrumpft auf Handygröße, der Text bricht neu um, und die Aufschrift wechselt zu „Reflowable“ (umfließend). Folio (postext-folio, ein 3D-Buch mit Seiten, die sich umblättern lassen) öffnet die Seite zu einer Doppelseite und blättert ein Blatt über den Rücken um.

    SprecherEin Layout, fünf Ausgaben: Canvas, HTML, druckfertiges PDF, EPUB 3, fest oder umfließend, und ein Buch in 3D. Was Sie sehen, geht in den Druck.

11. 1:41

    Auf dem BildschirmAbschnitt 07, „Why an open standard“ („Warum ein offener Standard“): „LaTeX set the bar for print. Publishing now lives on every screen, too.“ („LaTeX hat die Messlatte für den Druck gelegt. Publizieren findet heute auch auf jedem Bildschirm statt.“) Zwei Karten: LaTeX, 1984, mit Kreuzen bei „Built for the printed page“ (für die gedruckte Seite gebaut), „Builds tied to one machine’s fonts & packages“ (Builds an die Schriften und Pakete eines Rechners gebunden), „Compile, wait, repeat“ (kompilieren, warten, wiederholen) und „No editorial layout on the responsive web“ (kein redaktionelles Layout im responsiven Web); Postext, 2026, mit Häkchen bei „Web, print-ready PDF & EPUB 3 from one layout“ (Web, druckfertiges PDF und EPUB 3 aus einem Layout), „One portable .postext file carries it all“ (eine portable .postext-Datei enthält alles), „Reflows live, as you type“ (bricht beim Tippen live neu um) und „Runs in any browser · zero servers · MIT“ (läuft in jedem Browser, ohne Server, MIT). Die Postext-Karte leuchtet auf.

    SprecherLaTeX hat den Standard für den Druck gesetzt. Aber Publizieren findet heute auf jedem Bildschirm statt.

12. 1:48

    Auf dem BildschirmDachzeile „One file, the whole book“ („Eine Datei, das ganze Buch“), Schlagzeile „An open standard for publishing, beyond where LaTeX reaches.“ („Ein offener Standard für das Publizieren, über die Reichweite von LaTeX hinaus.“) Ein Dateisymbol .postext zerfällt in fünf Teile: preset.json (Konfiguration und Gestaltung), chapters/*.md (eine Markdown-Datei pro Kapitel), fonts/*.woff2 (die Schriften selbst), images/ · SVG (jedes Bild, eingebettet) und resources (Tabellen, Abbildungen und Bildunterschriften). Bildtext: „A plain ZIP: open, documented, MIT-licensed. Any tool can read and write it.“ („Ein einfaches ZIP: offen, dokumentiert, unter MIT-Lizenz. Jedes Werkzeug kann es lesen und schreiben.“)

    SprecherPostext ist ein offener Standard: eine portable Datei, dokumentiert und unter MIT-Lizenz, die jedes Werkzeug lesen und schreiben kann.

13. 1:58

    Auf dem Bildschirm„The showcase · set by the real engine“ („Das Schaufenster, gesetzt von der echten Engine“): Eine Wand aus Buchseiten weicht perspektivisch zurück, während ein Zähler 48 Seiten erreicht. Text: „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 Kapitel, 3 Teile, ein Umschlag, in etwa einer halben Sekunde gesetzt. Jede Seite des Postext-Leitfadens, für diesen Film von postext v1.7.0 in einem Browser berechnet. Nichts von Hand platziert.“) Es folgen Schlagwörter: Textbooks, Magazines, Literary editions, Catalogues (Lehrbücher, Zeitschriften, literarische Ausgaben, Kataloge).

    SprecherDeshalb kann es Bücher mit Hunderten von Seiten in Zehntelsekunden setzen.

14. 2:05

    Auf dem BildschirmAbspann: das Postext-Logo mit dem Slogan „The programmable typesetter for the web“ („Das programmierbare Satzsystem für das Web“), die Adresse postext.dev, eine Terminalzeile, die „$ pnpm add postext“ tippt, und die Fußzeile „Open source · MIT · github.com/drnachio/postext“.

    SprecherPostext. Open Source, auf postext.dev.