Untertitel so gross und so bunt, wie man sie braucht

Die Voreinstellung des Browsers ist weisse Schrift auf schwarzem Kasten, in
einer Grösse, die er aus der Höhe des Videos rechnet. Auf einem grossen
Bildschirm aus drei Metern Abstand ist das zu klein, und wer schlecht sieht,
braucht es anders.

Einstellbar sind Grösse (60 bis 300 Prozent in Zehnerschritten),
Schriftfarbe (Weiss, Hellgelb, Hellblau, Schwarz) und Hintergrund
(Halbdunkel, Schwarz, Grau, Ohne).

Gestaltet wird mit `::cue`, nicht mit eigenen Kästen. Der Browser zeichnet
die Einblendungen selbst — Position, Umbruch, Zeilenabstand und die
Platzangaben aus der Datei. Das nachzubauen hiesse, all das noch einmal zu
schreiben und dabei schlechter zu werden.

Gemessen an einem Video mit echter Spur, Bild für Bild: 200 Prozent in
Hellgelb ohne Kasten und 140 Prozent in Hellblau auf Grau kommen beide so
heraus, wie sie gemeint sind.

Ohne Kasten setzt es von selbst einen Schatten. Weisse Schrift in einer
hellen Szene ist sonst weg, und das wäre eine Einstellung, die sich selbst
unbrauchbar macht. Mit Kasten wäre derselbe Schatten nur Unschärfe.

Die Einstellung sitzt im Untertitelmenü, abgetrennt unter den Spuren — wie
der Tonversatz im Tonmenü. Ob die Schrift gross genug ist, sieht man nur an
einem laufenden Film, in diesem Licht, aus diesem Abstand; wer dafür die
Wiedergabe verlassen muss, stellt zweimal falsch ein, bevor er einmal
richtig liegt.

Gemerkt wird im Browser, nicht am Konto: wie gross Schrift sein muss, hängt
am Bildschirm und am Abstand davor. Dasselbe Konto am Telefon und am
Fernseher will zwei verschiedene Grössen.

Farbfelder statt einer Liste mit Farbnamen — „Hellblau" muss man lesen und
sich vorstellen, ein Feld sieht man. Das gewählte trägt einen Ring aussen
herum und keinen Haken darin: ein Haken wäre auf Weiss unsichtbar und auf
Schwarz erst recht. „Ohne Hintergrund" zeigt ein Karomuster, weil ein
leeres Feld nach Weiss aussähe.

Gelesen wird nur, was bekannt ist. Ein fremder Eintrag im Speicher darf
nicht zu beliebigem CSS in der Seite werden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/untertitelstil.ts

@@ -0,0 +1,126 @@
+/** Wie Untertitel aussehen — Größe, Schrift- und Hintergrundfarbe.
+ *
+ * **Warum das kein Luxus ist.** Die Voreinstellung des Browsers ist weiße
+ * Schrift auf schwarzem Kasten in einer Größe, die der Browser aus der Höhe
+ * des Videos rechnet. Auf einem großen Bildschirm aus drei Metern Entfernung
+ * ist das zu klein, auf einem hellen Film ohne Kasten unlesbar, und wer
+ * schlecht sieht, braucht beides anders.
+ *
+ * **Gestaltet wird mit `::cue`, nicht mit eigenen Kästen.** Der Browser
+ * zeichnet die Einblendungen selbst — Position, Umbruch, Zeilenabstand und
+ * die Platzangaben aus der Datei. Das nachzubauen hieße, all das noch einmal
+ * zu schreiben und dabei schlechter zu werden. `::cue` greift genau in das
+ * ein, was gewünscht ist, und lässt den Rest in Ruhe.
+ *
+ * **Je Gerät, nicht je Konto.** Wie groß Schrift sein muss, hängt am
+ * Bildschirm und am Abstand davor, nicht an der Person: dasselbe Konto am
+ * Telefon und am Fernseher will zwei verschiedene Größen. Das gehört in den
+ * Browser und nicht auf den Server.
+ */
+
+const SCHLUESSEL = 'flaro.untertitelstil';
+
+/** Die wählbaren Schriftfarben. */
+export const SCHRIFTFARBEN = [
+  { name: 'Weiß', wert: '#ffffff' },
+  { name: 'Hellgelb', wert: '#f2e14c' },
+  { name: 'Hellblau', wert: '#8fd6ff' },
+  { name: 'Schwarz', wert: '#000000' },
+] as const;
+
+/** Die wählbaren Hintergründe. */
+export const HINTERGRUENDE = [
+  { name: 'Halbdunkel', wert: 'rgba(0, 0, 0, .75)' },
+  { name: 'Schwarz', wert: '#000000' },
+  { name: 'Grau', wert: 'rgba(90, 90, 90, .8)' },
+  { name: 'Ohne', wert: 'transparent' },
+] as const;
+
+export const GROESSE_KLEINST = 60;
+export const GROESSE_GROESST = 300;
+export const GROESSE_SCHRITT = 10;
+
+export type Untertitelstil = {
+  /** In Prozent der Größe, die der Browser von sich aus wählt. */
+  groesse: number;
+  farbe: string;
+  hintergrund: string;
+};
+
+const VORGABE: Untertitelstil = {
+  groesse: 100,
+  farbe: SCHRIFTFARBEN[0].wert,
+  hintergrund: HINTERGRUENDE[0].wert,
+};
+
+export function stilLesen(): Untertitelstil {
+  try {
+    const roh = localStorage.getItem(SCHLUESSEL);
+    if (!roh) return { ...VORGABE };
+
+    const gelesen = JSON.parse(roh) as Partial<Untertitelstil>;
+    return {
+      groesse: zahlImRahmen(gelesen.groesse, VORGABE.groesse),
+      // Nur bekannte Werte: ein fremder Eintrag im Speicher darf nicht zu
+      // beliebigem CSS in der Seite werden.
+      farbe: SCHRIFTFARBEN.some(f => f.wert === gelesen.farbe) ? gelesen.farbe! : VORGABE.farbe,
+      hintergrund: HINTERGRUENDE.some(h => h.wert === gelesen.hintergrund)
+        ? gelesen.hintergrund! : VORGABE.hintergrund,
+    };
+  } catch {
+    // Ein unlesbarer Eintrag ist kein Grund, keinen Untertitel zu zeigen.
+    return { ...VORGABE };
+  }
+}
+
+export function stilSchreiben(stil: Untertitelstil): void {
+  try { localStorage.setItem(SCHLUESSEL, JSON.stringify(stil)); } catch { /* Kür */ }
+  stilAnwenden(stil);
+}
+
+/** Ob überhaupt etwas von der Vorgabe abweicht — für den Zurücksetzen-Knopf. */
+export const stilGeaendert = (stil: Untertitelstil): boolean =>
+  stil.groesse !== VORGABE.groesse
+  || stil.farbe !== VORGABE.farbe
+  || stil.hintergrund !== VORGABE.hintergrund;
+
+export const stilVorgabe = (): Untertitelstil => ({ ...VORGABE });
+
+/** Schreibt die Regeln in die Seite.
+ *
+ * **Ein Stilblock, der ersetzt wird, statt vieler, die sich stapeln.**
+ * `::cue` lässt sich nicht über eine Variable am Element steuern — der
+ * Browser wendet es auf einen eigenen Baum an, den die Seite nicht erreicht.
+ * Also wird die Regel selbst neu geschrieben.
+ */
+export function stilAnwenden(stil: Untertitelstil): void {
+  const ohneKasten = stil.hintergrund === 'transparent';
+
+  // Ohne Kasten braucht es einen Rand, sonst verschwindet weiße Schrift in
+  // einer hellen Szene. Mit Kasten wäre derselbe Rand nur Unschärfe.
+  const rand = ohneKasten
+    ? 'text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, 1);'
+    : 'text-shadow: none;';
+
+  const regeln = `video::cue {
+  font-size: ${stil.groesse}%;
+  color: ${stil.farbe};
+  background-color: ${stil.hintergrund};
+  ${rand}
+}`;
+
+  let block = document.getElementById(SCHLUESSEL) as HTMLStyleElement | null;
+  if (!block) {
+    block = document.createElement('style');
+    block.id = SCHLUESSEL;
+    document.head.appendChild(block);
+  }
+
+  block.textContent = regeln;
+}
+
+function zahlImRahmen(wert: unknown, vorgabe: number): number {
+  if (typeof wert !== 'number' || !Number.isFinite(wert)) return vorgabe;
+  const gerundet = Math.round(wert / GROESSE_SCHRITT) * GROESSE_SCHRITT;
+  return Math.max(GROESSE_KLEINST, Math.min(GROESSE_GROESST, gerundet));
+}