Styling captions

The WebVTT file is shown below. Notice the new attributes that have been added on the right end of the duration values:

WEBVTT

00:00:01.000 --> 00:00:05.000

These captions test some features of the WebVTT formats

00:00:06.000 --> 00:00:10.000 line:5%

This cue is positioned at the top of the video

00:00:11.000 --> 00:00:15.000 position:5% align:start

This cue is positioned at the left side of the video.

00:00:16.000 --> 00:00:20.000 position:95% align:end

And this one ate the right side.

00:00:21.000 --> 00:00:25.000 size:33%

This cue is only a third of the width of the video, hence the multiple line breaks.

00:00:26.000 --> 00:00:30.000

This cue contains <b>bold</b> text.

00:00:31.000 --> 00:00:35.000

This cue contains <i>italic</i> text.

00:00:36.000 --> 00:00:40.000

This cue contains <u>underlined</u> text.

00:00:41.000 --> 00:00:45.000

This cue contains <b><i><u>bold, italic, underlined</u></i></b> text.

00:00:46.000 --> 00:00:50.000

<c.myclass>This cue contains the class "myclass".

Browsers that support ::cue CSS should make it red.</c>

00:00:51.000 --> 00:00:55.000

The following cue contains two voices.

Tarzan should be blue and Jane green.

00:00:56.000 --> 00:01:00.000

<v Tarzan>Me Tarzan...

<v Jane>That would make me Jane!

bigtext

00:01:01.000 --> 00:01:05.000

This cue has a unique id.

Using CSS, its font size should be 150%.

00:01:06.000 --> 00:01:10.000

The <00:01:06.333>text <00:01:06.666>in <00:01:07.000>this <00:01:07.333>cue <00:01:07.666>should <00:01:08.000>grow

<00:01:08.333>one <00:01:08.666>word <00:01:09.000>at <00:01:09.333>a <00:01:09.666>time

00:01:11.000 --> 00:01:15.000

That's it! For now...

How to position the subtitles

Take a look at these two screenshots which demonstrate some positioning:

The video example tests nearly all the possibilities for positioning subtitles/captions, styling (using HTML element wrapping with <b>, <i>,  etc.), voicing (subtitles corresponding to different characters will be displayed in different colors) and CSS styling.

It is possible to locate the cues in the video viewport using absolute or relative values. The attributes that position the text are located on the same line as the cue definition, like at line 9 of the previous WebVTT example file:

00:00:11.000 --> 00:00:15.000 position:5% align:start

This cue is positioned at the left side of the video.

There are several possible values:

• line:5% means "vertical position at a line 5% of the height of the video viewport (it will be located at the top of the video, proportional to its vertical size).

• position:5% align:start means "regular location at the bottom of the video, the start of the sentence will be located at 5% of the width of the video", i.e., near the left side.

• position:95% align:end means "regular location at the bottom of the video, the end of the sentence will be at 95% of the horizontal width of the video".

• size:33% The size of each line will be one third of the size of the video. Since the sentence won't fit, it will be displayed in multiple lines.

And so on. Please look at the video as it is self-explanatory.

Use of <b>, <i>, <u> for styling subtitles / captions

One can use the HTML elements  <b>, <i>, <u> to modify the rendering of subtitles and captions, as illustrated in the example below:

Using CSS classes for styling

It is possible to style using CSS classes as part of a cue value, using the <c> element. You can specify the CSS class that should be applied by adding "." followed by the name of your CSS class. Here is an example:

<c.myclass>This cue contains the class "myclass".

Browsers that support ::cue CSS should make it red.</c>

CSS rules used in this example:

<style type="text/css">

     ::cue(.myclass) { color: red; }

     ::cue(v[voice="Tarzan"]) { color: blue; }

     ::cue(v[voice="Jane"]) { color: green; }

     ::cue(#bigtext) { font-size: 150%; }

</style>

The ::cue pseudo element selector is used to match "cues" in the webVTT file. You add parenthesis and a secondary CSS selector to match cues that have a particular id, or a particular CSS class, etc. Look at the CSS above and at the extract from the webVTT file, play the video, you will understand how the above CSS classes affect the rendering of the subtitles for Jane and Tarzan's voices.

Support differs from one browser to another, see this compatibility table (from CanIuse). Note however that most of the enhanced players presented further on in the course provide full support.

Using voicing for styling: the <v> element

Here is an example that shows the voices of the different characters displayed with different colors: