typstage

0.2.0

Animated HTML talks and a PDF handout from one source.

Was es nicht kann#

Die Grenzen, gesammelt an einer Stelle statt verstreut über die Kapitel.

Barrierefreiheit#

Das ist die härteste Grenze des Pakets. Die Folien sind SVG-Umrisse, Text darin ist als Pfad gezeichnet. Nichts im Browser ist auswählbar, durchsuchbar oder von einem Bildschirmleser lesbar; es gibt keine Textalternative und keine Lesereihenfolge.

Was hingegen geht: Das Dokument trägt aus text.lang ein lang-Attribut. Die Navigation ist vollständig über die Tastatur bedienbar, und ? blendet die wichtigsten Tasten ein, in der Sprecheransicht die Tasten der Ansicht. Farbe und Kontrast gehören dem Theme und damit dir; themes.plain ist das dunkelste der fünf Themes auf Weiß. Wer sein System auf weniger Bewegung eingestellt hat, bekommt ein Deck, das darauf reagiert (prefers-reduced-motion); transition: "none" und enter: "none" setzen dasselbe für alle durch.

Achtung
Sitzt jemand im Raum, der einen Bildschirmleser nutzt: Die ehrliche Lösung ist, zusätzlich die PDF auszugeben und auf jeder Folie vorzulesen, was dort steht. Die PDF aus derselben Quelle trägt echten Text.

Eine Grenze bei verfolgten Elementen#

Sehr dicke Striche. Eine Linie misst 0pt hoch; ihre Farbe liegt außerhalb des Kastens. Damit ein flächenloses Element überhaupt erscheint, bekommt es eine Schrifthöhe Luft nach jeder Seite. Was dicker aufträgt, wird beschnitten. Solche Striche gehören in einen block oder rect mit eigener Höhe, dann gilt dessen Maß.

Hinweis
Sonst braucht die Breite eines verfolgten Elements keine Aufmerksamkeit: Das Paket sieht dem Inhalt an, ob er den angebotenen Platz ausfüllen will. Ein align(center, …) in einem anim zentriert wie im PDF, und ein verfolgtes Element in einer auto-Rasterspalte lässt die 1fr-Nachbarspalte stehen.

Was gar keine Fläche hat. Ein senkrechter Strich misst null breit, ein place null in beiden Richtungen. Beide sind versorgt: Der Strich bekommt seine Luft wie jedes flächenlose Element, und beim place tauschen Marke und Inhalt die Reihenfolge, damit im Fluss kein Platz belegt wird:

#anim(at: 2, place(top + left, dx: 20pt, dy: 50pt,
                   rect(width: 20pt, height: 20pt)))

Und wenn doch keines von beidem greift, sagt es die Laufzeit, statt das Element zu verlieren. Zwei Fälle bleiben: eine Marke, die null breit oder null hoch misst, und eine, die tiefer als vier verfolgte Elemente ineinander liegt. Beide gehen einmal je Element in die Konsole des Browsers, mit dem Ausweg dazu – das Element in einen Kasten mit Größe setzen oder ihm eine Breite geben.

Gemeldet wird das erst im Browser: Beim Übersetzen weiß Typst nicht, ob ein Inhalt eine Fläche hat, erst dort liegt das Rechteck da und lässt sich messen.

Reichweite#

Geprüft in Chrome, Firefox und Safari auf macOS und auf einem iPhone. Nicht geprüft: ältere Browser, Windows, Android. Die Laufzeit benutzt die Web Animations API, ResizeObserver, PointerEvent und CSS zoom; ein Browser von vor etwa 2023 wird also irgendwo zu kurz greifen.

Größe und Tempo#

Eine Folie wird so oft gesetzt, wie sie Zustände hat, und jedes verfolgte Element noch einmal in einem eigenen Rahmen. Die Übersetzungszeit wächst also mit den Schritten, nicht mit den Folien, und flipbook wächst mit den Bildern. Für ein gewöhnliches Deck bleibt das im Sekundenbereich; wer hundert Folien mit je einem Daumenkino plant, misst besser, statt zu schätzen.