Untertitel, die stillhalten, während die Wörter leuchten

Bisher hatten wir jede Stufe einzeln getestet: die Seite lesen, das Storyboard schreiben, den Browser aufnehmen, die Stimme einsprechen, rendern. Heute Morgen haben wir sie wirklich verkettet. Eine echte Webadresse ging hinein, heraus kamen ein Plan, eine Aufnahme, eine Erzählung, ein MP4 und ein gestaltetes Vorschaubild.

Die Struktur hielt. Der Film wechselte seine Szenentypen wie geplant, mit einer Zeitleiste, einer großen Zahl und einer Titelkarte, jeweils mit einer Bewegung, die zur Energie des Satzes passte. Dann meldete unsere automatische Qualitätsprüfung, die jeden Film ansieht, die Untertitel.

Wir haben uns nicht auf die Note verlassen. Wir haben die Bilder einzeln herausgezogen und hingeschaut.

Unsere Untertitel sind im Karaoke-Stil. Der Satz steht unten im Bild, und das gesprochene Wort leuchtet in einer kleinen Pille auf. Diese Pille gab dem aktiven Wort auf jeder Seite etwas zusätzlichen Abstand.

Deshalb ordnete sich die Zeile jedes Mal neu, wenn die Hervorhebung weiterwanderte. Ein Satz, der passte, solange ein kurzes Wort leuchtete, konnte gerade so breit werden, dass er den Rand berührte, wenn ein langes Wort dran war.

Das dauerte nur ein paar Bilder, weshalb ein pausierter Player fast immer perfekt aussah. Aber genau in diesen Bildern liest der Zuschauer.

Die Idee hinter der Lösung ist einfach: Während sich das Bild bewegt, bewegt sich das Layout nicht. Wir haben zwei Dinge geändert.

• Jedes Wort hat jetzt denselben Abstand, ob es leuchtet oder nicht. Die Hervorhebung ändert nur, wie ein Wort gemalt wird, Hintergrund, Größe, eine leichte Neigung, und nichts davon kann die Zeile verschieben. Den Wortabstand haben wir verkleinert, um den Platz zurückzugewinnen.
• Lange Sätze werden sanft kleiner. Ab etwa 30 Zeichen schrumpft der Untertitel, nie unter 0,72 seiner normalen Größe, damit auch ein langes zusammengesetztes Wort samt Pille in den sicheren Bereich passt.

Geprüft haben wir es so, wie es wirklich zählt: Wir haben genau den Satz, der den Rand berührt hatte, durch die echte Kette gerendert und jedes Bild gelesen. Eine Zeile, zentriert, vollständig im Bild, auch in jedem Moment, in dem die Hervorhebung von einem Wort zum nächsten springt.

Derselbe Film zeigte ein zweites Detail, das sich zu verbessern lohnte. In einer Aussage-Szene war das betonte Wort kaum zu sehen.

Wir malen Schlüsselwörter mit einem Verlauf aus den Markenfarben der Seite, denn ein Film soll aussehen wie das Unternehmen, das er zeigt. Eine dunkle Seite liefert aber ein dunkles Farbpaar, und ein dunkler Verlauf auf dunklem Grund betont gar nichts. Unsere eigene Seite, pagetovid.com, ist dunkel, wir haben es also selbst gesehen.

Wir haben einen einzigen Schutz eingebaut, textGradient, und ihn überall eingesetzt, wo Wörter so gemalt werden: betonte Aussagen, Kennzahlen, die große Hauptzahl, Zähler und das Zitatzeichen. Wenn die Markenfarben sich nicht von der Szene abheben, übernimmt ein lesbares Paar. Die Prüfung vergleicht die Helligkeit der Farben mit der Szene: Eine dunkle Marke auf dunklem Thema oder eine blasse auf hellem tritt genau dann zurück, wenn sie verschwinden würde.

Für alle, die ein Video machen, ist das Ergebnis unauffällig, und genau darum geht es. Die Zeile, die du liest, bleibt stehen, die Hervorhebung folgt der Stimme, und die Wörter, auf die sich der Film stützt, bleiben sichtbar, egal welche Farben deine Seite hat.

Daraus sind auch zwei Gewohnheiten entstanden. Eine automatische Note sagt uns, wo wir hinschauen sollen; die Bilder sagen uns, warum. Und alles, was sich während der Wiedergabe ändert, eine Hervorhebung, ein Zoom, ein Übergang, testen wir in Bewegung, Bild für Bild, nie an einem Standbild.

Auf der Seite mit den Funktionen siehst du, wie Untertitel, Stimme und Aufnahmen zusammenkommen, oder du fügst unter /new deine eigene Adresse ein und schaust zu, wie die Wörter aufleuchten.