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/spieler.ts

@@ -4,6 +4,11 @@ import {
   type Stromauskunft, type Spurauskunft,
 } from './api';
 import { dauer, knopf, meldung, hinweisZeigen } from './util';
+import {
+  GROESSE_GROESST, GROESSE_KLEINST, GROESSE_SCHRITT, HINTERGRUENDE, SCHRIFTFARBEN,
+  stilAnwenden, stilGeaendert, stilLesen, stilSchreiben, stilVorgabe,
+  type Untertitelstil,
+} from './untertitelstil';
 import { icons, icon } from './icons';
 
 /* ---------- Was der Browser kann ---------- */
@@ -444,6 +449,113 @@ export function spieler(anfrage: Spieleranfrage): void {
 
   tonmenue.fuss.append(versatzkopf, versatzregler, versatzzurueck);
 
+  /* ---------- Das Aussehen der Untertitel, abgetrennt im Textmenü ---------- */
+
+  // **Hier und nicht in den Einstellungen.** Ob die Schrift gross genug ist,
+  // sieht man nur an einem laufenden Film — und zwar an diesem, in diesem
+  // Licht, aus diesem Abstand. Wer dafür die Wiedergabe verlassen muss,
+  // stellt zweimal falsch ein, bevor er einmal richtig liegt.
+  let stil = stilLesen();
+  stilAnwenden(stil);
+
+  const stilkopf = document.createElement('div');
+  stilkopf.className = 'pl-fusstitel';
+  const stilname = document.createElement('span');
+  stilname.textContent = 'Aussehen';
+  const stilwert = document.createElement('span');
+  stilwert.className = 'pl-fusswert';
+  stilkopf.append(stilname, stilwert);
+
+  const groessenregler = document.createElement('input');
+  groessenregler.type = 'range';
+  groessenregler.className = 'pl-laut pl-groesse';
+  groessenregler.min = String(GROESSE_KLEINST);
+  groessenregler.max = String(GROESSE_GROESST);
+  groessenregler.step = String(GROESSE_SCHRITT);
+  groessenregler.setAttribute('aria-label', 'Schriftgrösse der Untertitel in Prozent');
+
+  const stilzurueck = knopf('Zurücksetzen', 'pl-punkt');
+
+  /** Eine Reihe Farbfelder — die gewählte trägt einen Haken.
+   *
+   * **Felder statt einer Liste mit Farbnamen.** „Hellblau" muss man lesen
+   * und sich vorstellen; ein Feld sieht man. Der Name bleibt trotzdem dran,
+   * als Beschriftung für alles, was nicht sieht. */
+  function farbreihe(
+    beschriftung: string,
+    werte: readonly { name: string; wert: string }[],
+    jetzt: () => string,
+    waehlen: (wert: string) => void,
+  ): HTMLElement {
+    const reihe = document.createElement('div');
+    reihe.className = 'pl-farbreihe';
+
+    const name = document.createElement('span');
+    name.className = 'pl-farbname';
+    name.textContent = beschriftung;
+
+    // **Die Felder in einen eigenen Kasten.** Ohne ihn wird jedes Feld eine
+    // eigene Rasterzelle und die Reihe bricht nach dem zweiten um — gemessen
+    // am Bildschirm: aus einer Zeile wurden drei, und die Beschriftung stand
+    // neben dem ersten Feld statt neben allen.
+    const felder = document.createElement('div');
+    felder.className = 'pl-farben';
+    reihe.append(name, felder);
+
+    werte.forEach(f => {
+      const feld = document.createElement('button');
+      feld.className = 'pl-farbe';
+      feld.style.setProperty('--farbe', f.wert);
+      feld.title = f.name;
+      feld.setAttribute('aria-label', `${beschriftung}: ${f.name}`);
+      // „Ohne" ist keine Farbe, sondern deren Abwesenheit — das Karomuster
+      // sagt das, ein leeres Feld sähe nach Weiss aus.
+      feld.classList.toggle('kariert', f.wert === 'transparent');
+      feld.onclick = e => { e.stopPropagation(); waehlen(f.wert); };
+      feld.dataset.wert = f.wert;
+      felder.appendChild(feld);
+    });
+
+    reihe.onclick = e => e.stopPropagation();
+    (reihe as HTMLElement & { auffrischen?: () => void }).auffrischen = () => {
+      reihe.querySelectorAll<HTMLElement>('.pl-farbe').forEach(f => {
+        f.classList.toggle('an', f.dataset.wert === jetzt());
+      });
+    };
+
+    return reihe;
+  }
+
+  const schriftreihe = farbreihe('Schrift', SCHRIFTFARBEN,
+    () => stil.farbe, wert => stilSetzen({ ...stil, farbe: wert }));
+  const grundreihe = farbreihe('Hintergrund', HINTERGRUENDE,
+    () => stil.hintergrund, wert => stilSetzen({ ...stil, hintergrund: wert }));
+
+  function stilstand(): void {
+    stilwert.textContent = `${stil.groesse} %`;
+    groessenregler.value = String(stil.groesse);
+    groessenregler.setAttribute('aria-valuetext', `${stil.groesse} Prozent`);
+    stilzurueck.classList.toggle('hidden', !stilGeaendert(stil));
+    (schriftreihe as HTMLElement & { auffrischen?: () => void }).auffrischen?.();
+    (grundreihe as HTMLElement & { auffrischen?: () => void }).auffrischen?.();
+  }
+
+  function stilSetzen(neu: Untertitelstil): void {
+    stil = neu;
+    stilSchreiben(stil);
+    stilstand();
+  }
+
+  // Beim Ziehen sofort anwenden: anders als beim Tonversatz kostet das
+  // nichts, und man will ja im Bild sehen, wie gross es wird.
+  groessenregler.oninput = () => stilSetzen({ ...stil, groesse: Number(groessenregler.value) });
+  groessenregler.onclick = e => e.stopPropagation();
+  stilzurueck.onclick = e => { e.stopPropagation(); stilSetzen(stilVorgabe()); };
+
+  textmenue.fuss.append(stilkopf, groessenregler, schriftreihe, grundreihe, stilzurueck);
+  textmenue.fuss.classList.remove('hidden');
+  stilstand();
+
 
   const links = document.createElement('div');
   links.className = 'pl-gruppe';