VTTCue: positionAlign property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The positionAlign property of the VTTCue interface is used to determine what VTTCue.position is anchored to.

Value

A string containing one of the following values:

"line-left"

Line-left alignment.

"center"

Center alignment.

"line-right"

Line-right alignment.

"auto"

Automatic alignment, which depends on the text alignment of the cue, interpreted as follows:

  • line-left: if the text alignment is left, the cue is using a LTR language and the text alignment is start, or the cue is using a RTL language and the text alignment is end.
  • line-right: if the text alignment is right, the cue is using a RTL language and the text alignment is start, or the cue is using a LTR language and the text-alignment is end.
  • center: if there is no text alignment position set.

Examples

In the following example a new VTTCue is created, then the value of positionAlign is set to "line-right". The value is then printed to the console.

js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue = new VTTCue(0, 0.9, "Hildy!");
cue.positionAlign = "line-right";
console.log(cue.positionAlign);

track.addCue(cue);

Specifications

Specification
WebVTT: The Web Video Text Tracks Format
# dom-vttcue-positionalign

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
positionAlign
Chrome – No support
Chrome
footnote
footnote See bug 41267398
Edge – No support
Edge
footnote
footnote See bug 41267398
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – No support
Opera
footnote
footnote See bug 41267398
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – No support
Chrome Android
footnote
footnote See bug 41267398
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – No support
Opera Android
footnote
footnote See bug 41267398
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – No support
Samsung Internet
footnote
footnote See bug 41267398
WebView Android – No support
WebView Android
footnote
footnote See bug 41267398
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.