Background Information

The following conversion rules apply:

• Each channel of a CEA-608 or CEA-708 service creates a separate WebVTT file.
• CEA-608 and CEA-708 commands that have no visual effect are not considered significant alterations and are not translated to WebVTT.
• Each significant CEA-608/708 command or command sequence that has a visual effect on screen will be mapped to a WebVTT cue with the exact time mapping of the video frame that contains that command sequence to cue start and end times. The video frame’s timing defines the timing of the WebVTT cues.

For example, one particular CEA-608 control event that will normally result in a significant alteration in the caption display is the swapping of the offscreen and onscreen buffers caused by an End of Caption command in pop on mode. Similar commands that also cause creation of a new cue are the Erase Display Memory command, the Backspace command, and the Delete to End of Row command. Typically in these situations a new cue will replace the current one in WebVTT at the time instant of the effect.

Header

When a WebVTT file is created from a CEA-608 or CEA-708 caption data stream using the conversion methods proposed in this document, it is suggested to use the following header for the WebVTT file, including an identification of the type of data contained:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US
        

Notice the metadata fields that this header includes: "Style", "Kind" and "Language". It is recommended to always provide these three with the "Kind" field set to "captions" or "subtitles" and the "Language" field set to a BCP 47 language tag [[BCP47]].

For CEA-708 it is further recommended to add a "AspectRatio" field, which indicates whether a display area of 4:3 or 16:9 is the basis for the calculations. An example CEA-708 WebVTT file header may be:

WEBVTT
Style:
@import(cea608.css)
@import(cea708.css)
##
Kind: captions
Language: en-US
AspectRatio: 16:9
        

The @import command on the "Style" field imports the CSS directives defined in the "Rendering in Browsers" section into the WebVTT file. Browsers will use these CSS directives to make use of their rendering engines for styling cues and cue sections of text.

It is also possible to avoid importing an external style sheet and include the styles directly in the WebVTT header. Here is an example:

WEBVTT
Style:
::cue {
  line-height: 5.33vh;
  font-size: 4.1vh;
  font-family: monospace;
  font-style: normal;
  font-weight: normal;
  background-color: black;
  color: white;
}
##
Kind: captions
Language: en-US
        

Metadata / XDS

Place metadata such as CEA-608 external data service (XDS) data after the header in the [[WEBVTT]] file.

Example metadata:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US
Channel: CC1
Station: Online ABC
ProgramID: SH010855880000
ProgramType: TV series
ProgramName: Castle
Title: Law & Murder
Season: 3
Episode: 19
PublishDate: 2011-03-28
ContentAdvisory: TV-14
        

Positioning in CEA-608

CEA-608 defines a safe caption area as 80% of the TV picture height and 80% of TV picture width, centered. Within this area, it defines one or more areas (called “boxes”) within which caption characters are displayed.

If the safe caption area is to be preserved when using WebVTT, the video player can set the "edge margin" variable to 10% in the WebVTT rendering instructions. The edge margin only affects WebVTT cues that are not provided with explicit, percentage-based line positioning. So it mostly only affects cues that are rendered in their default position.

The CEA-608 boxes can be positioned on a grid of 15 character rows of equal height and 32 columns of equal width to provide accurate placement of text on screen.

In WebVTT CEA-608, each CEA-608 box is mapped to a tree of WebVTT Node Objects, which are displayed into the WebVTT rendering area, i.e. the video viewport. A tree of WebVTT Node Objects contains a parsed representation of the cue content that is to be rendered. They map easily to HTML DOM nodes which simplifies rendering when a browser rendering engine is available. We call the root of a WebVTT Node Object tree the "WebVTT cue box".

When rendering a WebVTT CEA-608 cue box, their sizes and positions are defined in relation to the size of the video viewport using the features of CEA-608:

• The line height is defined as 5.33% of the video height, because CEA-608 requires 15 character rows to be rendered on 80% of the video rendering area’s height.
• The font size is defined from the line height by dividing it by 1.3; this is to make sure there is enough space for the characters in a line.
• The column width is defined as 2.5% of the video width, because CEA-608 requires 32 columns of characters to be rendered on 80% of the video rendering area’s width.
• CEA-608 indent positions are every 10% of the video width, because CEA-608 defines a new indent position every 4 columns/characters.
• CEA-608 does not distinguish between different alignment, so all captions are left aligned and require a WebVTT align cue setting to override the default middle alignment:

align:start
        

When translating to WebVTT only the final position of the caption text shall be translated. CEA-608 captions are generally translated to WebVTT cues with their position specified in cue settings. Only CEA-608 captions that are roll-up captions are rendered into WebVTT "Regions".

CEA-608 defines two different modes of addressing positions on the grid of columns and rows:

(1) Preamble Address Code (PAC)

PAC addresses by row number and 8 different indent positions.

The PAC row number maps to a line cue setting in WebVTT CEA-608. For rollup captions the calculation is the same, but the resulting number is applied to the Region rather than the cue directly, as described in the "Rollup Captions" section. Since WebVTT defines its line numbering scheme based on the height of the font in use, WebVTT CEA-608 makes use of the percentage line setting of WebVTT:

line:x%
        

Use the following percentage values to represent CEA-608 row numbers:

The PAC indent position provides a column indent for lines of caption text. PAC can be different for different lines of captions. It is recommended to create a separate WebVTT cue when a different PAC is used for lines of captions that are on screen at the same time. A PAC indent position maps to a position cue setting in WebVTT CEA-608, which is a percentage offset within the video viewport:

position:x%
        

Use the following position settings for PAC indent. Note that all WebVTT cues need to be explicitly left aligned for this position setting to be accurate, because WebVTT by default has middle aligned cues.

(2) Tab Offset

CE-608 Tab Offset commands provide relative positioning based on the current cursor position and move the cursor 1, 2, or 3 columns to the right.

When used at the beginning of a line, they will be mapped to a WebVTT position cue settings. Other uses of tab offsets will either be mapped to independent cues or ignored based on whether they influence the rendering.

The Tab Offset maps to an absolute text position cue setting in WebVTT CEA-608. Multiply the Tab Offset value with 2.5 and add the resulting value to an existing position cue setting value of a cue to achieve the correct offset:

t=tabOffset*2.5+position
position:t%
        

For example, for an existing cue position setting of 20% (column 5), a Tab Offset of 3 will create a cue position setting of 27.5%.

For rollup captions the position setting is set on the cue, too, but since the cue is already positioned by the Region that it belongs it, its position is simply calculated from the tab offset:

t=tabOffset*2.5
position:t%
        

Positioning in CEA-708

CEA-708 captions make use of what is called a "Caption Screen", which for WebVTT is the video viewport. CEA-708 defines a grid on the Caption Screen that depends on the dimensions of the video - e.g. it is different for 16:9 video to 4:3 video.

Within the Caption Screen, CEA-708 defines "Caption Windows" through which the caption text is rendered. For WebVTT we map CEA-708 "Caption Windows" to WebVTT Regions. It is also possible to use plain WebVTT cues, but those have limited functionality, e.g. don't allow styling of the Region (e.g. Window background colors or fade in), or position with anchor points and anchor location, or do roll-up, so will not result in a perfect representation of CEA-708 captions. We will not regard this option further here.

In CEA-708 there are at most 8 Caption Windows - in WebVTT we can define an unlimited number of Regions.

This is an example Region definition in WebVTT for a Region with its bottom center anchored in the middle of the screen, 4 lines high and 100% wide:

Region: id=window1 width=100% height=4 regionanchor=50%,100% viewportanchor=50%,50% scroll=up
        

Note that Regions in WebVTT cannot be moved at this time, so if there is a need to move to a different on-screen location, because a different PAC row number is given, it is best to define another Region for that location and copy the caption text. Its duration will then be split between the two regions. Such a region move happens only if the base row of the PAC of a caption is different from the previous caption's PAC base row. A different PAC indent can be dealt with within the existing region by applying the indent as a position indent to the caption cue as described in the section on "Positioning in CEA-608".

Caption Window Priority

CEA-708 Caption Windows define a priority between the 8 captions windows with lower priority windows overlaying higher priority windows. Priority values are mapped to the WebVTT "layer" attribute of Regions as follows:

Note that if two Regions end up being active at the same time (i.e. having cues at the same time) and being in the same "layer" and overlapping on the viewport, the one defined last is on top of the one defined earlier.

Caption Window Anchor Points

CEA-708 Caption Windows are positioned by specifying one of 9 different "Anchor points" covering a 9 field grid of the window. An Anchor Point is anchored to a specific location on the Caption Screen. Anchor points are mapped to the WebVTT "regionanchor" attribute of Regions:

regionanchor:x%,y%
        

Caption Window Location

For CEA-708 WebVTT we assume that the grid that is defined on the Caption Screen consists of 100 horizontal cells and 100 vertical cells, i.e. we can position using percentages.

If the CEA-708 Caption Screen grid is not provided as a 100x100 grid, we need to convert the given grid to percentages. For 16:9 video we thus convert the 210 horizontal by 75 vertical cells, and for 4:3 the 160 horizontal by 75 vertical cells to a percentage. We end up with grid locations (x%,y%) in a percentage coordinate system with (0%,0%) at the top left and (100%,100%) on the bottom right.

The grid is used to position the Caption Windows through the "Anchor Location" property. It is given in WebVTT in the "viewportanchor" Region attribute:

viewportanchor:x%,y%
        

Caption Window size

In CEA-708, the size of the Caption Windows is provided through a number of character rows and columns. There is a maximum of 15 rows and a maximum of 32 columns, just like in CEA-608. Similar to CEA-608, these numbers represent the maximum number of rows and columns that a Caption Window that covers the full Caption Screen can provide.

The width of a Caption Window is converted to a WebVTT Region width by multiplying by 2.5 if a display area of 4:3 is used, resulting in a percentage Region width setting:

w=columns*2.5
width:w%
        

If a display area of 16:9 is used, the column width is defined as 1.9% of the video width, because 16x9 requires 42 columns of characters to be rendered on 80% of the video rendering area’s width.

w=columns*1.9
width:w%
        

The height of a Caption Window is converted to a WebVTT Region height by multiplying by 5.33, resulting in a percentage Region height setting:

h=rows*5.33
height:h%
        

The actual height and width of the caption window depends, however, on the actual font size. Thus, the width is calculated by multiplying the number of columns with the character width and the height by multiplying the number of rows with the character height.

Caption Window Row and Column Locking

The "Lock Rows" and “Lock Columns” Caption Window parameters of CEA-708 when set fix the maximum number of rows and columns of caption text that a window may have. This means that lines that were rendered at the default font size are not changed when the user changes the font size. Thus, when the user changes the font size, the window's size scales to become smaller or larger to accommodate the smaller or bigger space required to render the caption text.

If rows or columns are unlocked, rendering can change the line breaks. This means that if e.g. rows are unlocked, the defined caption window width remains fixed, such that for smaller fonts more words will fit in each line, and for larger fonts less words will fit in. Similarly for unlocked columns. If both are unlocked, the agreement is that the same happens as when both dimensions are locked.

In WebVTT we don't currently have a means to specify row and column locking. We currently only support the concept of unlocked rows and columns, i.e. when the user increases or decreases the font size, the Region will grow accordingly, but it is possible for lines to reflow.

Caption Window Word Wrapping

CEA-708 defines that when a caption text line doesn't fit into a Caption Window's width and thus needs a new line break, the line break at the end of the line is removed and replaced with a space character if necessary. The idea is that when the caption text had multiple lines the manually created line breaks created a balanced text layout. Insertion of new line breaks would break that balance and therefore the line breaks have to be removed.

WebVTT supports line wrapping, but does not currently support the removal of line breaks when new line wrapping is necessary.

Caption Text and Region Settings in CEA-708

CEA-708 defines several settings of caption text within a Caption Window. This section explains how to convert them to WebVTT cue settings.

Justification and alignment

CEA-708 defines several different text justification settings for text within a Caption Window. These settings are translated into WebVTT cue settings, since there is no justification attributes on WebVTT Regions. The relevant cue setting is called "align":

Note that WebVTT does not have an equivalent for fully justified text. It would be possible to add such a value or to use the CSS text-align:justify directive, but neither is currently supported in WebVTT. Since fully justifying text is not usually recommended for good quality subtitles or captions, there should be no need for this.

Text direction

CEA-708 defines several different text rendering directions within a Caption Window. These settings are translated into WebVTT cue settings, since there is no direction attributes on WebVTT Regions. The default cue text rendering direction is "horizontal". The relevant cue setting to introduce vertical text is called "vertical". The following explains how the mapping is achieved:

Scroll direction

CEA-708 defines several different scroll directions within a Caption Window. These settings are translated into the WebVTT Region attribute "scroll":

Window Display Effects

CEA-708 defines a couple of animation effects for when a Window becomes visible/invisible. These effects don't map into WebVTT. It may be possible to eventually provide fade in/out and wipe in/out through CSS but not at this time.

Window Colors and Borders

CEA-708 defines different colors, opacity, borders, and border effects for Caption Windows. Some of these effects can be provided through CSS. Flashing backgrounds and drop-shadows are not supported. Note that the default background color in CSS is "transparent".

::cue-region(name) {
  background-color: transparent;
}

::cue-region(name) {
  background-color: rgba(0,0,0,0.5);
}

::cue-region(name) {
  background-color: rgba(0,0,0,1);
}

::cue-region(name) {
  outline: black ridge 2px;
}

::cue-region(name) {
  outline: black inset 2px;
}

::cue-region(name) {
  outline: black solid 2px;
}

64 colors in use by CEA-708

CEA-708 defines 64 colors based on 4 values of each of R,G and B components. This means we can map a CEA-708 color to a CSS value:

css-color-component(x) = cea708-color-component(x*85), x in {r,g,b}
        

CEA-708 also defines 8 named colors: black, white, red, green, blue, yellow, magenta, cyan. They map to appropriate CSS colors.

Pop-on Captions

CEA-608 has a maximum of 4 rows of captions, which can be placed anywhere in the safe caption area.

In WebVTT, pop-on captions are mapped to cues. Their start time and end time are determined by the time that the CEA-608 memory is flipped such that the caption text becomes visible/removed. The caption text of the CEA-608 pop-on caption is placed in the cue content. Cue settings such as line and position settings are set as described in the section on "Positioning in CEA-608".

If the rows of text of one CEA-608 caption are to be rendered into vastly different positions on screen, you should subdivide the rows into separate cues that are active for the exact same interval, but have different locations in their cue settings.

Example of a typical WebVTT file with pop-on captions:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US

00:00:01.373 --> 00:00:02.322
There are two kinds of folks

00:00:02.379 --> 00:00:03.979
who sit around thinking
about how to kill people:

00:00:04.313 --> 00:00:06.039
Psychopaths
and mystery writers.

00:00:06.277 --> 00:00:07.299 
I'm the kind that pays better.
        

CEA-708 pop-on captions rely on a Caption Window to be defined and mapped to a WebVTT Region as described in the section on "Positioning in CEA-708". Further attributes of the Region are described in section "Caption Text and Region Settings in CEA-708". Pop-on captions are the typical way in which cues in Regions are displayed. Regions are not displayed when there is no text in them.

Roll-up Captions

CEA-608 roll-up caption mode display 2, 3, or 4 rows of captions into which old lines are scrolled as new lines are added below. Scrolling up a line must take no more than 0.433 sec. CEA-708 roll-up captions may have any number of lines.

Both CEA-608 and CEA-708 captions are mapped to WebVTT through definition of a Region. In CEA-708 that Region is defined by the Caption Window. For CEA-608 we define a rollup Region as follows with n being the number of rows:

Region: id=rollup width=80% height=n scroll=up regionanchor=0%,100% viewportanchor=10%,90% start=bottom
        

The roll-up display mode is translated to WebVTT by providing cues that overlap in time. As a second cue comes on, the first one scrolls up one line and the new one is added below. The translation software will ascertain that the cue intervals are appropriately timed such that at most n rows of captions are shown at one time.

Paint-on Captions

In CEA-608, paint-on captions mean that subsequent data is displayed immediately upon receipt.

Wherever possible, it is preferable to generate simple pop-on cues from paint-on captions. However, where the paint-on captions are a stylistic choice, it is possible to translate them into WebVTT by using time stamps for individual characters or sequences of characters within a cue.

For example:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US

00:00:00.000 --> 00:00:15.000
T<00:00:00.100>h<00:00:00.200>i<00:00:00.300>s
<00:00:00.400>p<00:00:00.500>a<00:00:00.600>i<00:00:00.700>n<00:00:00.800>t<00:00:00.900>s
<00:00:01.000>o<00:00:01.100>n<00:00:01.200>e
<00:00:01.300>c<00:00:01.400>h<00:00:01.500>a<00:00:01.600>r
<00:00:01.700>p<00:00:01.800>e<00:00:01.900>r
<00:00:02.000>m<00:00:02.100>s
        

Font Size

CEA-608 and CEA-708 both define a default ("intended") font size relative to which columns and lines are defined and positioning on screen is identified (see section on "Positioning in CEA-608").

Both CEA-608 and CEA-708 expect that the user is able to change the size of the font during playback. CEA-708 for example suggests three different font sizes (small, standard and large) per available font. This user override is player-specific and not encoded into WebVTT.

Character Codes

In CEA-608, there are captions rendered from 3 different sets of character codes. In 708 the printable characters in use are ASCII with the substitution of the music note character for the ASCII DEL character, LATIN-1, and an extended character set.

WebVTT uses only unicode code points, rendered as UTF-8 characters. All of the CEA-608 and CEA-708 character codes - standard and extended character codes - are mapped to unicode.

Single-byte codes 0x20-0x7f map to the same Unicode code point, except for:

Two-byte special characters where the second byte maps as follows:

When multiple characters on-screen talk simultaneously, transparent space is sometimes used to position the text for each character in the same line. In these cases, use the transparent space as a cue break, and calculate the positioning for the next part in a new cue similar to the recommendation for converting mid-row PACs.

Character Colors

The foreground text can be rendered in different colors. These colors are defined for CEA-608 - use these classes in WebVTT to provide them:

CEA-708 also knows "black" as a named color, which is the default text color in WebVTT. It would similarly map to a ".black" class. For other CEA-708 text color mappings see the section about "Positioning in CEA-708", subsection on "Window Colors and Borders". All colors mentioned there can be used for text color.

CEA-708 further has the following three transparency states for text:

Italics and Underline

Italics and underline exist in WebVTT as markup and are thus directly converted from CEA-608 or CEA-708 pen style.

For example:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US

00:00:00.000 --> 00:00:15.000
Nice <u>underlined</u> and <i>italicized</i> text.
        

Blinking Characters

The .blink class provides the appropriate styling in WebVTT.

For example a blinking, red and italics text fragment is convert to the following:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US

00:00:00.000 --> 00:00:15.000
A <c.red.italics.blink>flashing piece of text</c>.
        

CEA-708 Background Colour

In CEA-708 it is possible to change the background color of the caption text characters.

Use one of the following classes to provide the setting for a section of caption text:

There are further the following three transparency states:

CEA-708 Font Tags

CEA-708 defines the following fonts, which are mapped to the following WebVTT classes:

For example:

WEBVTT
Style:
@import(cea608.css)
##
Kind: captions
Language: en-US

00:00:00.000 --> 00:00:15.000
A <c.mono_serif>different font</c> text.
        

CEA-708 Character Offsetting

In CEA-708 it is possible to offset caption text characters from the baseline. WebVTT doesn't currently support the CSS for such offsetting, which would make use of the CSS vertical-align property.

Further CEA-708 Features

The remainder of the CEA-708 advanced features can be mapped easily using HTML and CSS. However, the styling language of WebVTT is restricted and consists only of the following:

• text color
• text-decoration
• text-shadow
• text-outline
• background-color
• background-position
• outline-color
• outline-style
• outline-width
• font-style
• font-variant
• font-weight
• font-size/line-height
• line height
• white-space

<style>
  ::cue(.small) {
    font-size: 70%;
  }
  ::cue(.standard) {
    font-size: 100%
  }
  ::cue(.large) {
    font-size: 130%
  }
  ::cue(.italics) {
    font-style: italic;
  }
  ::cue(.underlined) {
    text-decoration: underline;
  }
  ::cue(.textshadow) {
    text-shadow: 1px 1px 2px #000;
  }
  ::cue(.raised) {
    text-shadow: -1px 0 0 silver, 0 -1px 0 silver, 0 1px 0 #111111, 1px 0 0 #111111;
    color: gray;
  }
  ::cue(.depressed) {
    text-shadow: 1px 0 0 silver, 0 1px 0 silver, 0 -1px 0 #111111, -1px 0 0 #111111;
    color: gray;
  }
</style>
              

WEBVTT

00:00:00.000 - 00:00:15.000
<v.Mary>Good morning and welcome to our company.