VTTCue.vertical — Eigenschaft · JavaScript-Referenz

Signatur

VTTCue.vertical

Beschreibung

Die Eigenschaft vertical eines VTTCue-Objekts bestimmt, ob der Untertitel- oder Beschriftungstext horizontal oder vertikal dargestellt wird. Sie entspricht der Cue-Einstellung vertical:rl bzw. vertical:lr in einer WebVTT-Datei.

Mögliche Werte (Aufzählungstyp DirectionSetting):

"" (leerer String): horizontale Schrift, Standardwert.
"rl": vertikal, Zeilen laufen von rechts nach links, z. B. klassisches Japanisch oder Chinesisch.
"lr": vertikal, Zeilen laufen von links nach rechts, z. B. Mongolisch.

Du brauchst die Eigenschaft vor allem, wenn du Untertitel für ostasiatische Sprachen per Skript erzeugst oder vorhandene Cues anpassen willst. Bei vertikalen Cues ändert sich die Bedeutung der Positionierung: line gibt dann die horizontale Lage an, position und size die vertikale.

Rückgabewert

Typ

"" | "rl" | "lr"

Beschreibung

Die aktuelle Schreibrichtung des Cues. Beim Setzen sind nur diese drei Werte gültig.

Beispiele

Vertikalen japanischen Untertitel erzeugen

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', '日本語', 'ja');
track.mode = 'showing';

const cue = new VTTCue(1, 5, 'こんにちは、世界');
cue.vertical = 'rl'; // vertikal, Zeilen von rechts nach links
track.addCue(cue);

console.log(cue.vertical);

rl

Schreibrichtung vorhandener Cues auswerten

const track = document.querySelector('video').textTracks[0];
track.mode = 'hidden'; // Cues laden, ohne sie anzuzeigen

track.addEventListener('cuechange', () => {
  for (const cue of track.activeCues) {
    const richtung = cue.vertical === '' ? 'horizontal' : `vertikal (${cue.vertical})`;
    console.log(`${cue.text}: ${richtung}`);
  }
});

Hallo Welt: horizontal

Umschalter zwischen horizontal und vertikal

const toggleVertical = (track) => {
  for (const cue of track.cues) {
    cue.vertical = cue.vertical === '' ? 'rl' : '';
  }
};

const track = document.querySelector('video').textTracks[0];
document.querySelector('#toggle').addEventListener('click', () => toggleVertical(track));

// Wichtig · Fallstricke

Ungültige Werte wie "vertical" oder "RL" werden ignoriert: Der alte Wert bleibt erhalten, es gibt aber keinen Fehler. Achte also auf die genaue Schreibweise in Kleinbuchstaben.
Die Eigenschaft wird in allen modernen Browsern unterstützt, die Darstellung vertikaler Cues fällt aber unterschiedlich aus. Einige Browser (besonders Firefox und ältere Safari-Versionen) stellen vertikale Cues nur teilweise korrekt dar. Teste das in den Zielbrowsern.
Bei vertikalen Cues gilt line für die horizontale Achse. Werte, die für horizontale Cues passen, können den Text daher an unerwartete Stellen setzen.
Mit ::cue kannst du nur eingeschränkt stylen. writing-mode wird dort nicht unterstützt, deshalb steuerst du die Richtung ausschließlich über vertical.

Siehe auch

VTTCue VTTCue.line VTTCue.position VTTCue.size VTTCue.align TextTrack.addCue() SourceBuffer.videoTracks