This document is subject to change without notice.
Note in particular that the multi-line header format used in this specification for styling has not been finalized in WebVTT yet.

This document specifies a method for converting CEA-608/708 data streams to [[WEBVTT]]. This document details how such a conversion can be made, and defines some constraints on the translation process so that the resulting [[WEBVTT]] file is interoperable between WebVTT implementations.

This document does not target user agent developers. User agents (UAs) are expected to implement the [[WEBVTT]] specification. Any conversion tool that follows the suggestions in this document and delivers WebVTT files as converted by the suggestions in this document together with an appropriate HTML page and a style sheet as explained in can expect UAs to render their WebVTT file on their videos correctly.

The aim of this document is to help developers of tools that convert between different caption formats to implement best practice for creating WebVTT files that support CEA-608 or CEA-708 features.

Note that CEA-608 has been defined for US television and therefore only horizontal ltr rendered text is created in WebVTT cues. CEA-708 has some support for vertically rendered and rtl text through caption text settings.

Translation

This document defines conversion from CEA-608 or CEA-708 data streams to a WebVTT document.

A CEA-608 or CEA-708 data stream consist of a sequence of bytes transferred to a video device which interprets the bytes as a combination of characters, character attributes, and commands to place the characters on screen in a pre-defined area. CEA-608 defines two 32x15 character memories one of which is currently displayed while the other is for off-screen composition in preparation for display. CEA-708 defines different windows on top of the video viewport into which text is rendered.

A WebVTT file consists at its core of a series of so-called cues, which contain a start time, an end time, cue settings, and the cue text, which is rendered in browsers for WebVTT files of kind "subtitles" or "captions". Styling of character attributes is provided through markup of the text in a similar fashion to how HTML marks up text. Cues are either rendered directly to the video viewport, or into a so-called WebVTT "Regions". Regions are similar to CEA-708 windows.

The command-based CEA-608 and CEA-708 streams are mapped in the following to the file-based WebVTT format. The aim is to achieve the same visual experience, so for CEA-608 it is important what is in the display memory and not what is in the off-screen composition memory. Similarly, for CEA-708 it is important what is in the visible windows. The translation shall in particular preserve the positioning, colour, background, spacing, and timing of captions, including individual character timings in rollup and paint on mode.

Background Information

The following conversion rules apply:

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:

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:

CEA-608 PAC row WebVTT cue line setting
1 line:10%
2 line:15.33%
3 line:20.66%
4 line:26%
5 line:31.33%
6 line:36.66%
7 line:42%
8 line:47.33%
9 line:52.66%
10 line:58%
11 line:63.33%
12 line:68.66%
13 line:74%
14 line:79.33%
15 line:84.66%

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.

CEA-608 PAC indent code WebVTT cue position value
indent 0/column 1 position:10%
indent 4/column 5 position:20%
indent 8/column 9 position:30%
indent 12/column 13 position:40%
indent 16/column 17 position:50%
indent 20/column 21 position:60%
indent 24/column 25 position:70%
indent 28/column 29 position:80%

(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:

CEA-708 Caption Window Priority WebVTT Region layer attribute
0 7
1 6
2 5
3 4
4 3
5 2
6 1
7 0

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%
        
CEA-708 Caption Window Anchor Point WebVTT Region regionanchor attribute
0 (top-left corner) regionanchor:0%,0%
1 (top middle) regionanchor:0%,50%
2 (top-right corner) regionanchor:0%,100%
3 (left middle) regionanchor:50%,0%
4 (middle/center) regionanchor:50%,50%
5 (right middle) regionanchor:50%,100%
6 (bottom-left corner) regionanchor:100%,0%
7 (bottom middle) regionanchor:100%,50%
8 (bottom-right corner) regionanchor:100%,100%

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":

CEA-708 Caption Window Justification WebVTT Cue align setting
left align:start
right align:end
center align:middle
full no equivalent in WebVTT - use "middle" instead.

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:

CEA-708 Caption Window Print Direction WebVTT Cue text and settings
left-to-right horizontal is the default; no special cue setting
right-to-left horizontal is the default; use UTF-8 characters to change to rtl text
top-to-bottom vertical:rl or vertical:lr
bottom-to-top vertical:rl or vertical:lr; use UTF-8 characters to change directionality

Scroll direction

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

CEA-708 Caption Window Scroll Direction WebVTT Region attribute
top-to-bottom for horizontal text scroll:down
bottom-to-top for horizontal text scroll:up
left-to-right for vertical text if vertical:lr, then scroll:down; else scroll:up
right-to-left if vertical:rl, then scroll:down; else scroll:up

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".

CEA-708 Caption Window Properties WebVTT CSS property
clear Window
::cue-region(name) {
  background-color: transparent;
}
translucent Window
::cue-region(name) {
  background-color: rgba(0,0,0,0.5);
}
solid Window
::cue-region(name) {
  background-color: rgba(0,0,0,1);
}
(choose color from color list)
raised border for Window
::cue-region(name) {
  outline: black ridge 2px;
}
depressed border for Window
::cue-region(name) {
  outline: black inset 2px;
}
uniform border for Window
::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
        

Character Style Conversion

The default style applied to WebVTT caption cues when converting from CEA-608 and CEA-708 shall be white foreground, black background, monospace font, no text decoration, no font style, weight, or effect, single line and character height and non-outlined text. This state corresponds to the presumed conditions at the beginning of each displayed row.

Most character styling is mapped to WebVTT by providing segments of text with a class markup, which provides the appropriate styling to that text segment. A class markup is a <c> tag with one or more class names that is provided before the beginning of the relevant text segment and ends the text segment with a </c>.

This is an example WebVTT cue that is marked up with a color class:

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

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

In CEA-708, the concept of a Pen is defined, which governs the font size, font, colors and style of the text within a Window. Pen characteristics remain consistent within a Window - and therefore within a WebVTT Region - unless specifically changed.

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:

0x2a U+00E1
0x5c U+00E9
0x5e U+00ED
0x5f U+00F3
0x60 U+00FA
0x7b U+00E7
0x7c U+00F7
0x7d U+00D1
0x7e U+00F1
0x7f U+2588

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

0x30 U+00AE
0x31 U+00B0
0x32 U+00BD
0x33 U+00BF
0x34 U+2122
0x35 U+00A2
0x36 U+00A3
0x37 U+266A
0x38 U+00E0
0x39 transparent space
0x3a U+00E8
0x3b U+00E2
0x3c U+00EA
0x3d U+00EE
0x3e U+00F4
0x3f U+00FB

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:

white .white
green .green
blue .blue
cyan .cyan
red .red
yellow .yellow
magenta .magenta

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:

transparent .transparent
semi-transparent .semi-transparent
opaque .opaque

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:

background white .bg_white
background green .bg_green
background blue .bg_blue
background cyan .bg_cyan
background red .bg_red
background yellow .bg_yellow
background magenta .bg_magenta
background black .bg_black

There are further the following three transparency states:

background transparent .bg_transparent
background semi-transparent .bg_semi-transparent
background opaque .bg_opaque

CEA-708 Font Tags

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

0 - default (undefined) default WebVTT font, i.e. 'sans-serif'
1 - monospaced with serifs .mono_serif
2 - Proportionally spaced with serifs .prop_serif
3 - Monospaced without serifs .mono_sans
4 - Proportionally spaced without serifs .prop_sans
5 - Casual font type .casual
6 - Cursive font type .cursive
7 - Small capital .small_caps

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:

CEA-708 Feature WebVTT/<track> example
Further character attribute changes:
Font size change (small, standard, large).
Text style changes (font change, italicised, underlined).
Text shadow.
Depressed, raised edges.
Depressed is typically also called "engraved" and raised is called "embossed".
For HTML pages, these may have attributes in CSS. For example:
<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>
              
For typical 708 needs, classes will be defined that map the same features.
Window effects:
Display Effects (SNAP, FADE, WIPE, x), Effect Direction (L2R, R2L, T2B, B2T), Effect Speed (.5-sec units for WIPE and FADE ops)

Window Borders:
Border Type (none, raised, etc), Border Color
Each of the defined effects can be recreated in modern CSS3 transitions and transformations in Web browsers. Thus, for typical 708 needs, classes will be defined that map the same feature.
Text Type tag (Dialog, Source, Voice, ...) WebVTT has the <v> voice spans which allow association of a text type name with a span of text.
For example to associate a speaker with a caption text segment, use the v tag:
WEBVTT

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

Rendering in Web Browsers

The following HTML snippet is an example of how a WebVTT CEA-608 file may be included in a Web browser in relation to a video:

<video controls>
  <source src=”video.mp4” type=”video/mp4”>
  <source src=”video.webm” type=”video/webm”>
  <track id=”cc1” label=”channel1” kind=”captions” srclang=”en” src=”channel1.vtt”>
  <track id=”cc2” label=”channel2” kind=”captions” srclang=”de” src=”channel2.vtt”>
  <track id=”cc3” label=”channel3” kind=”captions” srclang=”fr” src=”channel3.vtt”>
  <track id=”cc4” label=”channel4” kind=”captions” srclang=”sp” src=”channel4.vtt”>
</video>
      

CEA-608 further suggests use of caption tracks formatted for "easy reader" (3rd grade level for language learners). Such an "easy reader" track is marked up in HTML by use of the @label attribute. It can also be internationalized. For example:

          
<video controls>
  <source src=”video.mp4” type=”video/mp4”>
  <source src=”video.webm” type=”video/webm”>
  <track id=”cc1” label=”easy reader” kind=”captions” srclang=”en” src=”easy_reader_en.vtt”>
  <track id=”cc2” label=”einfacher Leser” kind=”captions” srclang=”de” src=”easy_reader_de.vtt”>
</video>
      

The following CSS style sheet is provided for rendering of WebVTT CEA-608 files in Web browsers.

cea608.css

/* default values */
::cue {
  line-height: 5.33vh;
  font-size: 4.1vh;
  font-family: monospace;
  font-style: normal;
  font-weight: normal;
  background-color: black;
  color: white;
}
/* special cue parts */
::cue(c.transparent) {
  color: transparent;
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.semi-transparent) {
  color: rgba(0, 0, 0, 0.5);
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.opaque) {
  color: rgba(0, 0, 0, 1);
}
::cue(c.blink) {
  text-decoration: blink;
}
::cue(c.white) {
  color: white;
}
::cue(c.red) {
  color: red;
}
::cue(c.green) {
  color: lime;
}
::cue(c.blue) {
  color: blue;
}
::cue(c.cyan) {
  color: cyan;
}
::cue(c.yellow) {
  color: yellow;
}
::cue(c.magenta) {
  color: magenta;
}
::cue(c.bg_transparent) {
  background-color: transparent;
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.bg_semi-transparent) {
  background-color: rgba(0, 0, 0, 0.5);
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.bg_opaque) {
  background-color: rgba(0, 0, 0, 1);
}
::cue(c.bg_white) {
  background-color: white;
}
::cue(c.bg_green) {
  background-color: lime;
}
::cue(c.bg_blue) {
  background-color: blue;
}
::cue(c.bg_cyan) {
  background-color: cyan;
}
::cue(c.bg_red) {
  background-color: red;
}
::cue(c.bg_yellow) {
  background-color: yellow;
}
::cue(c.bg_magenta) {
  background-color: magenta;
}
::cue(c.bg_black) {
  background-color: black;
}
/* Examples of combined colors */
::cue(c.bg_white.bg_semi-transparent) {
  background-color: rgba(255, 255, 255, 0.5);
}
::cue(c.bg_green.bg_semi-transparent) {
  background-color: rgba(0, 256, 0, 0.5);
}
::cue(c.bg_blue.bg_semi-transparent) {
  background-color: rgba(0, 0, 255, 0.5);
}
::cue(c.bg_cyan.bg_semi-transparent) {
  background-color: rgba(0, 255, 255, 0.5);
}
::cue(c.bg_red.bg_semi-transparent) {
  background-color: rgba(255, 0, 0, 0.5);
}
::cue(c.bg_yellow.bg_semi-transparent) {
  background-color: rgba(255, 255, 0, 0.5);
}
::cue(c.bg_magenta.bg_semi-transparent) {
  background-color: rgba(255, 0, 255, 0.5);
}
::cue(c.bg_black.bg_semi-transparent) {
  background-color: rgba(0, 0, 0, 0.5);
}
      

Additionally, this CSS style sheet is provided for CEA-708 captions:

cea708.css

::cue(c.mono_serif) {
  font-family:'Courier, monospace, serif';
}
::cue(c.prop_serif) {
  font-family:'Times New Roman, serif';
}
::cue(c.mono_sans) {
  font-family:'Helvetica, monospace, sans-serif';
}
::cue(c.prop_sans) {
  font-family:'Arial, Swiss, sans-serif';
}
::cue(c.casual) {
  font-family:'Dom, Impress, casual';
}
::cue(c.cursive) {
  font-family:'Coronet, Marigold, cursive';
}
::cue(c.small_caps) {
  font-family:'Engravers Gothic, monospace, sans-serif';
  font-variant:small-caps;
}
      

CEA-608 and CEA-708 References

Contributors

Thanks go to: