Wednesday, 17 April 2013

WebVTT Cue Layout Reference

The purpose of this post is to describe how a WebVTT file should render. I will reference rules from the rendering cues for video section.

3. Let output be an empty list of absolutely positioned CSS block boxes.

This is a div element with the the CSS property position set to absolute.

4. If the user agent is exposing a user interface for video, add to output one or more completely transparent positioned CSS block boxes that cover the same region as the user interface.

If the video has controls visible, add a empty div over the control area.

9. For each track track in tracks, append to cues all the cues from track's list of cues that have their text track cue active flag set.
10. If reset is false, then, for each text track cue cue in cues: if cue's text track cue display state has a set of CSS boxes, then add those boxes to output, and remove cue from cues.
10. 17. Add the CSS boxes in boxes to output.

For every cue to be displayed in all tracks, add a div. If the cue has already been rendered, use the existing div.

10. 12. - The children of the nodes must be wrapped in an anonymous box whose 'display' property has the value 'inline'. This is the WebVTT cue background box.

The cue contents should be rendered into a signle <div style="display:inline"> inside the cue div.

10. 12. - Text runs must be wrapped according to the CSS line-wrapping rules, with the following additional constraints:
10. 12. - * Regardless of the value of the 'white-space' property, lines must be wrapped at the edge of their containing blocks, even if doing so requires splitting a word where there is no line breaking opportunity. (Thus, normally text wraps as needed, but if there is a particularly long word, it does not overflow as it normally would in CSS, it is instead forcibly wrapped at the box's edge.)
10. 12. - * Regardless of the value of the 'white-space' property, any line breaks inserted by the user agent for the purposes of line wrapping must be placed so as to minimize Δ across each run of consecutive lines between preserved newlines in the source. Δ for a set of lines is defined as the sum over each line of the absolute of the difference between the line's length and the mean line length of the set.

If a word is longer than the allowed width break the work with a hyphen. Don't use the CSS property word-wrap to break-word, this needs to be determined dynamically. After the number of lines is know and words broken, minimize the cue width without creating new lines.

For example

This is a really long sentence that needs to be displayed on
two lines.

should be

This is a really long sentence that
needs to be displayed on two lines.


The specification uses the CSS viewport units vw and vh. I cannot get these to work properly with video, so I've calculated the values based on the video.


This is what the layout should be for a basic webvtt cue.

Test Video CSS

#testVideo {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 640px;
 height: 480px;

Basic Cue Reference CSS

/* cue constants, same for every cue */
.cueBox {
 position: absolute;
 unicode-bidi: plaintext;
 font: 24px sans-serif;    /* 5vh = 24px */
 color: rgba(255,255,255,1);
 white-space: pre-line;
.cueBackgroundBox {
 background: rgba(0,0,0,0.8);

/* cue variables, depends on cue */
#testCue {
 direction: ltr;
 writing-mode: horizontal-tb;
 left: 0px;    /* 0vw = 0px */
 top: 0px;    /* 0vh = 0px */
 width: 640px;    /* 100vw = 640px */
 text-align: center;

No comments:

Post a comment