typstage

0.2.0

Animated HTML talks and a PDF handout from one source.

Über dieses Paket#

Das typstage-Paket erzeugt aus einer einzigen Typst-Datei eine animierte Präsentation für den Browser – und aus derselben Quelle eine PDF. Der Satz dahinter lautet: Typst setzt, der Browser bewegt. Typst setzt jede Folie als SVG und schreibt sie so in die HTML-Datei; im Browser steht sie deshalb genau wie auf dem Papier. Was sich bewegen soll, meldet man im Quelltext an. Eine Folie bleibt dabei eine Folie: die PDF hat eine Seite je Folie – oder, mit pages: "step", eine je Schritt, sodass das Papier so umblättert wie der Vortrag.

Fünf Wörter, die dieses Handbuch benutzt#

Folie
Ein Bild, von Typst einmal gesetzt. Eine Seite der PDF, ein .ts-slide in der HTML.
Schritt
Ein Druck auf die Pfeiltaste. Eine Folie kann mehrere davon halten; am Ende führt der nächste Druck zur nächsten Folie. Die Adresszeile zählt Schritte, die Fußzeile zählt Folien.
Element
Ein Stück Folie, das die Laufzeit anfassen darf. anim, stagger, alternatives, morph, embed, video und flipbook erzeugen je eines.
Morph
Dasselbe benannte Element zweimal – auf zwei Folien oder auf zwei Schritten einer Folie. Dazwischen fliegt es, Zeichen für Zeichen.
Sprecheransicht
Dieselbe Datei ein zweites Mal geöffnet, mit #speaker in der Adresse. Sie trägt Notiz, Uhr und den nächsten Schritt.

Wo es zwischen den anderen steht#

touying und polylux sind ausgereift, haben weit mehr Themes und machen PDF. Wer einen gewöhnlichen PDF-Vortrag will, nimmt eines davon. reveal.js, Slidev und Quarto animieren im Browser, aber der Satz ist dort HTMLs, nicht Typsts.

Am nächsten kommen die Typst-Pakete, die selbst HTML schreiben. touying-exporter setzt je Folie ein SVG und packt die Folge mit impress.js in eine Datei. slipst folgt slipshow und gibt die feste Folie ganz auf: dort scrollen „slips“ von oben nach unten. Auf der PDF-Seite lohnen daneben mosaic, das die Folien aus denselben Überschriften schneidet wie dieses Paket (= für den Abschnitt, == für die Folie), und slydekit. Drei der siebzehn Beispieldecks sind Adaptionen von mosaic-Decks, damit dieser Vergleich auf dem Bildschirm steht und nicht in der Prosa.

Was dieses Paket kann und keines davon: Ein benanntes Stück steht auf Folie n an einer Stelle und auf Folie n+1 woanders. Es fliegt dorthin, im besten Fall Zeichen für Zeichen, sodass sich eine Gleichung sichtbar selbst umschreibt. Möglich ist das, weil hier je Zustand ein SVG entsteht und nicht je Folie.

Achtung
Der Preis, damit er vor der ersten Zeile Code steht: Die Folien sind SVG-Umrisse. Nichts im Browser ist auswählbar oder durchsuchbar, und ein Bildschirmleser sieht überhaupt nichts. Das Kapitel „Weitergeben“ sagt, was sich dagegen tun lässt.

Dieses Handbuch ist nach Vorhaben geordnet, nicht nach Funktionen:

  1. Die erste Präsentation – von der leeren Datei zur laufenden HTML
  2. Ein Deck von Anfang bis Ende – ein Vortrag, zu Ende gebaut
  3. Eine Folie Schritt für Schritt aufdecken – pause, stagger, anim und der Schrittzeiger
  4. Etwas vorführen statt behaupten – Applet, Video, Daumenkino
  5. GeoGebra – Konstruktionen, die den Schritten der Folie folgen
  6. Desmos – derselbe Weg, ein anderer Rechner
  7. Eine Rechnung entwickeln – Magic Move über mehrere Folien
  8. Den Vortrag halten – Tasten, Sprecheransicht, Zeichnen, die zwei Uhren
  9. Aus einer Quelle drei Ausgaben – Präsentation, Foliensatz, Handout
  10. Das eigene Aussehen – Themes, Farben, Leinwand, Bausteine
  11. Weitergeben – wo die Datei liegt und wie groß sie wird
  12. Was es nicht kann – Barrierefreiheit, Reichweite, die harten Grenzen
  13. Wenn nichts passiert – die Stolpersteine, in der Reihenfolge, in der man über sie fällt
  14. API-Referenz – vollständige Funktionsdokumentation
Hinweis
Die gesetzten Beispiele dieses Handbuchs sind Papier und zeigen deshalb den Endzustand – alles auf einmal. Was im Browser nacheinander geschieht, steht im Text daneben.