WebVTT has no style settings of its own. Cues are styled with CSS, either from the web
page that plays the video or from STYLE blocks in the file. A
STYLE block holds a CSS style sheet, may not contain a blank line or
-->, and must come before the first cue.
Pseudo-elements and selectors
| Selector | Matches |
|---|---|
::cue | Every cue, as a whole |
::cue(selector) | Parts of a cue’s text that match the selector |
::cue-region | Every region |
::cue-region(selector) | Regions that match the selector |
Inside ::cue(), the cue text is treated as a small document tree whose
elements are the tags of the cue text. These selectors work on it:
| Selector | Example | Matches |
|---|---|---|
| Type | ::cue(b) | The tags c, i, b, u, ruby, rt, v, lang |
| Class | ::cue(.loud) | Tags carrying that class |
| ID | ::cue(#intro-1) | The whole cue with that identifier |
| Attribute | ::cue(v[voice="Anna"]), ::cue([lang="fr"]) | A voice by name; a language span, or a cue whose track has that language |
:lang() | ::cue(:lang(ja)) | Text in that language |
Universal, :root | ::cue(*), ::cue(:root) | Every element; ::cue(:root) is the same as ::cue |
:past | ::cue(:past) | Tags that come before a timestamp whose time has passed |
:future | ::cue(:future) | Tags that come after a timestamp whose time has not yet come |
Plain text itself cannot be selected, only the tags around it. A cue with no
timestamp tags is neither :past nor :future.
Properties that apply
| Where | Properties |
|---|---|
::cue, ::cue-region | color, opacity, visibility, text-decoration, text-shadow, background (drawn behind the cue box), outline, font and its parts including line-height, white-space, text-combine-upright, ruby-position |
::cue(selector) | the same, plus transitions and animations; but with :past or :future in the selector, not font, white-space, text-combine-upright or ruby-position, so that revealing words never changes the layout |
All other properties are ignored, so a style sheet cannot move a cue: placement comes only from the cue settings.
| Default | Value |
|---|---|
| Font | 5% of the video’s height (5vh), sans-serif |
| Text colour | white, rgba(255,255,255,1) |
| Background | 80% black, rgba(0,0,0,0.8), behind the text |
| White space | pre-line: line breaks kept, runs of spaces collapsed |
Worked example
WEBVTT
STYLE
::cue {
background-color: rgba(0, 0, 0, 0.6);
font-family: "Helvetica Neue", sans-serif;
}
::cue(v[voice="Anna"]) { color: yellow; }
::cue(:future) { color: gray; }
00:01.000 --> 00:03.500
<v Anna>Where are we <00:02.500><c>going?</c>c so that a selector can
reach it: it is grey until 2.5 seconds, because a rule on the c itself
beats the colour it inherits from the voice.