Converted CEA-608/708 translation document to W3C doc format
authorSilviaPfeiffer
Fri, 24 Aug 2012 09:05:24 +1000
changeset 2 fe5cd9afb9c7
parent 1 ec08568d4666
child 3 669f6b95a488
Converted CEA-608/708 translation document to W3C doc format
608toVTT/608toVTT.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/608toVTT/608toVTT.html	Fri Aug 24 09:05:24 2012 +1000
@@ -0,0 +1,771 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Conversion of 608/708 captions to WebVTT</title>
+    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
+    <!-- 
+      === NOTA BENE ===
+      For the three scripts below, if your spec resides on dev.w3 you can check them
+      out in the same tree and use relative links so that they'll work offline,
+     -->
+    <!-- old but local: <script src='../../2009/dap/ReSpec.js/js/respec.js' class='remove'></script> -->
+    <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
+    <script class='remove'>
+      var respecConfig = {
+          // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
+          specStatus:           "unofficial",
+          
+          // the specification's short name, as in http://www.w3.org/TR/short-name/
+          shortName:            "webvtt-608",
+
+          // if your specification has a subtitle that goes below the main
+          // formal title, define it here
+          // subtitle   :  "",
+
+          // if you wish the publication date to be other than today, set this
+          // publishDate:  "2009-08-06",
+
+          // if the specification's copyright date is a range of years, specify
+          // the start date here:
+          copyrightStart: "2012",
+
+          // if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
+          // and its maturity status
+          // previousPublishDate:  "1977-03-15",
+          // previousMaturity:  "WD",
+
+          // if there a publicly available Editor's Draft, this is the link
+          edDraftURI:           "https://dvcs.w3.org/hg/text-tracks/608toVTT/608toVTT.html",
+
+          // if this is a LCWD, uncomment and set the end of its review period
+          // lcEnd: "2009-08-05",
+
+          // if you want to have extra CSS, append them to this list
+          // it is recommended that the respec.css stylesheet be kept
+          extraCSS:             ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css"],
+
+          // editors, add as many as you like
+          // only "name" is required
+          editors:  [
+              { name: "Silvia Pfeiffer", url: "http://www.gingertech.net/",
+                company: "Google Inc.", companyURL: "http://google.com/" },
+          ],
+
+          // authors, add as many as you like. 
+          // This is optional, uncomment if you have authors as well as editors.
+          // only "name" is required. Same format as editors.
+
+          //authors:  [
+          //    { name: "Your Name", url: "http://example.org/",
+          //      company: "Your Company", companyURL: "http://example.com/" },
+          //],
+          
+          // name of the WG
+          wg:           "Text Tracks Community Group",
+          
+          // URI of the public WG page
+          wgURI:        "http://www.w3.org/community/texttracks/",
+          
+          // name (without the @w3c.org) of the public mailing to which comments are due
+          wgPublicList: "public-texttracks",
+          
+          // URI of the patent status for this WG, for Rec-track documents
+          // !!!! IMPORTANT !!!!
+          // This is important for Rec-track documents, do not copy a patent URI from a random
+          // document unless you know what you're doing. If in doubt ask your friendly neighbourhood
+          // Team Contact.
+          wgPatentURI:  "",
+      };
+    </script>
+  </head>
+  <body>
+    <p class="note">
+    <strong>This document is subject to change without notice.</strong>
+    </p>
+
+    <section id='abstract'>
+      This document specifies a method for converting CEA-608 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.
+    </section>
+
+    <section>
+      <h2>Translation</h2>
+      <p>
+        This document defines conversion from CEA-608 data streams to a WebVTT document.
+      </p>
+
+      <p>
+        A CEA-608 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.
+      </p>
+
+      <p>
+        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 to be rendered text. Styling of character attributes is provided through markup of the text in a similar fashion to how HTML marks up text.
+      </p>
+
+      <p>
+        The command-based CEA-608 stream is 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. The translation shall in particular preserve the colour, background, spacing, and timing of captions, including individual character timings in rollup and paint on mode.
+      </p>
+
+      <section>
+        <h2>Background Information</h2>
+        <p>
+          The following conversion rules apply:
+        </p>
+
+        <ul>
+          <li>Each channel of a CEA-608 service creates a separate WebVTT file.</li>
+          <li>CEA-608 commands that have no visual effect are not considered significant alterations and are not translated to WebVTT.</li>
+          <li>Each significant CEA-608 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.</li>
+        </ul>
+
+        <p>
+          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 comment, the Backspace command, and the Delete to End of Row command. Typically in these situation a new cue will replace the current one in WebVTT at the time instant of the effect.
+        </p>
+      </section>
+
+      <section>
+        <h2>Header</h2>
+        <p>
+          When a WebVTT file is created from a CEA-608 caption data stream using the conversion methods proposed in this document, it is suggested to use the following header for the WebVTT file, including a identification of the type of data contained:
+        </p>
+        <pre>
+WEBVTT
+Styling=CEA608
+Kind=Captions
+        </pre>
+      </section>
+
+      <section>
+        <h2>Metadata / XDS</h2>
+        <p>
+          Place metadata such as CEA-608 external data service (XDS) data after the header in the [[WEBVTT]] file. There is no requirement to have metadata in a WebVTT file, but it is recommended to specify at least the Language.
+        </p>
+        <p>
+          Example metadata:
+        </p>
+        <pre>
+WEBVTT
+Styling=CEA608
+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
+        </pre>
+      </section>
+
+      <section>
+        <h2>Positioning</h2>
+        <p>
+          CEA-60 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.
+        </p>
+
+        <p>
+          These 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.
+        </p>
+
+        <p>
+          The default display area for WebVTT CEA-608 captions is an absolute position of the rendering area on top of the video’s rendering area with 80% of the width and height, positioned 10% in from the top and the bottom.
+        </p>
+
+        <p>
+          In WebVTT CEA-608, each CEA-60 box is mapped to one or more WebVTT boxes, which are displayed into the WebVTT display area. A box contains the cue characters that are to be displayed.
+        </p>
+
+        <p>
+          The sizes and positions of the boxes are defined in relation to the size of the video viewport:
+        </p>
+        <ul>
+          <li>15 character rows are defined on 80% of the video rendering area’s height, which sets the line height - i.e. each line is 5.33% of the video height</li>
+          <li>the line height also defines the font height</li>
+          <li>32 columns of characters are defined on 80% of the video rendering area’s width - i.e. each column is 2.5% of the video width</li>
+          <li>every 4 columns/characters is a new indent position - i.e. each indent is 10% of the video width</li>
+        </ul>
+        <p>
+          When translating to WebVTT only the final position of the region shall be translated.
+        </p>
+
+        <p>
+          Two different modes of addressing positions on this grid are possible:
+        </p>
+
+        <h3>(1) Preamble Address Code (PAC)</h3>
+        <p>
+          PAC addresses by row number and 8 different indent positions.
+        </p>
+
+        <p>
+          The PAC row number maps to a line position cue setting in WebVTT CEA-608, given as<br>
+          line:x% (percent of video height between 10..84.66% in steps of 5.33) or<br>
+          line:y (line position between 0..14)
+        </p>
+
+        <p>
+          The PAC indent position maps to a text position cue setting in WebVTT CEA-608, given as<br>
+          position:x% (percent of video width between 10..87.5% in steps of 2.5)
+        </p>
+
+        <h3>(2) Tab Offset</h3>
+        <p>
+          Tab Offset commands provide relative positioning based on the current cursor position and move the cursor 1, 2, or 3 columns to the right.
+        </p>
+        
+        <p>
+          When used at the beginning of a line, they will be mapped to WebVTT text position cue settings. Other uses of tab offsets will either be mapped to independent cues or ignored based on whether they influence the rendering.
+        </p>
+
+        <p>
+          The Tab Offset maps to an absolute text position cue setting in WebVTT CEA-608, given as<br>
+          position:x% (percent of video width)
+        </p>
+      </section>
+
+      <section>
+        <h2>Pop-on Captions</h2>
+        <p>
+          CEA-608 has a maximum of 4 rows of captions, which can be placed anywhere in the safe caption area.
+        </p>
+
+        <p>
+          In WebVTT, pop-on captions are mapped to cues. The translation software will ascertain the following properties:
+        </p>
+        <ul>
+          <li>No cues in the WebVTT file with their intervals defined by start and end time overlap with other cues’ intervals unless they are positioned in different locations on-screen.</li>
+          <li>No more than 4 rows of text are present in a cue.</li>
+          <li>If a specific location is given for the caption, add this location to the cue setting.</li>
+          <li>If the rows of text of one CEA-608 caption are to be rendered into vastly different positions on screen, subdivide the rows into separate cues that are active for the exact same interval, but have different locations in their cue settings.</li>
+        </ul>
+
+        <p>
+          Example of a typical WebVTT file with pop-on captions:
+        <p>
+        <pre>
+WEBVTT
+Styling=CEA608
+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.
+        </pre>
+      </section>
+
+      <section>
+        <h2>Roll-up Captions</h2>
+        <p>
+          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.
+        </p>
+
+        <p>
+          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. (Note: this has not yet been resolved fully and is not accurate at time of writing.) The translation software will ascertain that the cue intervals are appropriately timed such that at most 4 rows of captions are shown at one time.
+        </p>
+      </section>
+
+      <section>
+        <h2>Paint-on Captions</h2>
+        <p>
+          In CEA-608, paint-on captions mean that subsequent data is displayed immediately upon receipt.
+        </p>
+
+        <p>
+          Paint-on captions are translated into WebVTT by uses timing of individual characters or sequences of characters within a cue.
+        </p>
+
+        <p>
+          For example:
+        </p>
+        <pre>
+WEBVTT
+Style=CEA608
+Kind=captions
+Language=en-US
+
+00:00:00.000 --> 00:00:15.000
+T&lt;00:00:00.100>h&lt;00:00:00.200>i&lt;00:00:00.300>s
+&lt;00:00:00.400>p&lt;00:00:00.500>a&lt;00:00:00.600>i&lt;00:00:00.700>n&lt;00:00:00.800>t&lt;00:00:00.900>s
+&lt;00:00:01.000>o&lt;00:00:01.100>n&lt;00:00:01.200>e
+&lt;00:00:01.300>c&lt;00:00:01.400>h&lt;00:00:01.500>a&lt;00:00:01.600>r
+&lt;00:00:01.700>p&lt;00:00:01.800>e&lt;00:00:01.900>r
+&lt;00:00:02.000>m&lt;00:00:02.100>s
+        </pre>
+      </section>
+    </section>
+
+    <section>
+      <h2>Character Style Conversion</h2>
+      <p>
+        The default style applied to WebVTT caption cues when converting from CEA-608 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.
+      </p>
+
+      <p>
+        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 &lt;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 &lt;/c>.
+      </p>
+
+      <p>
+        This is an example WebVTT cue that is marked up with a color class:
+      </p>
+      <pre>
+WEBVTT
+Style=CEA608
+Kind=captions
+Language=en-US
+
+00:00:00.000 --> 00:00:15.000
+A &lt;c.red>red piece of text&lt;/c>.
+      </pre>
+      
+      <section>
+        <h2>Character Codes</h2>
+        <p>
+          In CEA-608, there are captions rendered from 3 different sets of character codes. In 708 it is unicode.
+        </p>
+
+        <p>
+          WebVTT uses only unicode code points, rendered as UTF-8 characters. All of the CEA-608 character codes - both the standard and the extended character codes - are mapped to unicode.
+        </p>
+      </section>
+
+      <section>
+        <h2>Character Colors</h2>
+        <p>
+          The foreground text can be rendered in different colors. These colors are defined for CEA-608 - use these classes in WebVTT to provide them:
+        </p>
+        <table border="1">
+          <tr>
+            <td>white</td>
+            <td>.white</td>
+          </tr>
+          <tr>
+            <td>green</td>
+            <td>.green</td>
+          </tr>
+          <tr>
+            <td>blue</td>
+            <td>.blue</td>
+          </tr>
+          <tr>
+            <td>cyan</td>
+            <td>.cyan</td>
+          </tr>
+          <tr>
+            <td>red</td>
+            <td>.red</td>
+          </tr>
+          <tr>
+            <td>yellow</td>
+            <td>.yellow</td>
+          </tr>
+          <tr>
+            <td>magenta</td>
+            <td>.magenta</td>
+          </tr>
+        </table>
+      </section>
+
+      <section>
+        <h2>Italics and Underline</h2>
+        <p>
+          Italics and underline exist in WebVTT as markup and are thus directly converted from CEA-608.
+        </p>
+
+        <p>
+          For example:
+        </p>
+        <pre>
+WEBVTT
+Style=CEA608
+Kind=captions
+Language=en-US
+
+00:00:00.000 --> 00:00:15.000
+Nice &ltl;u>underlined&lt;/u> and &lt;i>italicized&lt;/i> text.
+        </pre>
+      </section>
+
+      <section>
+        <h2>Blinking Characters</h2>
+        <p>
+          The .blink class provides the appropriate styling in WebVTT.
+        </p>
+
+        <p>
+          For example a blinking, red and italics text fragment is convert to the following:
+        </p>
+        <pre>
+WEBVTT
+Style=CEA608
+Kind=captions
+Language=en-US
+
+00:00:00.000 --> 00:00:15.000
+A &lt;c.red.italics.blink>flashing piece of text&lt;/c>.
+        </pre>   
+      </section>
+
+      <section>
+        <h2>Background Colour</h2>
+        <p>
+          In CEA-708 it is possible to change the background color of the captioning rendering area.
+        </p>
+
+        <p>
+          If this relates to a segment of cue text, use one of the following classes to provide the setting.
+        </p>
+
+        <table border="1">
+          <tr>
+            <td>background white</td>
+            <td>.bg_white</td>
+          </tr>
+          <tr>
+            <td>background green</td>
+            <td>.bg_green</td>
+          </tr>
+          <tr>
+            <td>background blue</td>
+            <td>.bg_blue</td>
+          </tr>
+          <tr>
+            <td>background cyan</td>
+            <td>.bg_cyan</td>
+          </tr>
+          <tr>
+            <td>background red</td>
+            <td>.bg_red</td>
+          </tr>
+          <tr>
+            <td>background yellow</td>
+            <td>.bg_yellow</td>
+          </tr>
+          <tr>
+            <td>background magenta</td>
+            <td>.bg_magenta</td>
+          </tr>
+          <tr>
+            <td>background black</td>
+            <td>.bg_black</td>
+          </tr>
+        </table>
+
+        <p>
+          There are further the following three transparency states:
+        </p>
+
+        <table border="1">
+          <tr>
+            <td>transparent</td>
+            <td>.transparent</td>
+          </tr>
+          <tr>
+            <td>semi-transparent</td>
+            <td>.semi-transparent</td>
+          </tr>
+          <tr>
+            <td>opaque</td>
+            <td>.opaque</td>
+          </tr>
+        </table>
+      </section>
+
+      <section>
+        <h2>CEA-708 Font Tags</h2>
+        <p>
+          CEA-708 defines the following fonts, which are mapped to the following WebVTT classes:
+        </p>
+
+        <table border="1">
+          <tr>
+            <td>undefined</td>
+            <td>--</td>
+          </tr>
+          <tr>
+            <td>monospaced serif</td>
+            <td>.mono_serif</td>
+          </tr>
+          <tr>
+            <td>proportional serif</td>
+            <td>.prop_serif</td>
+          </tr>
+          <tr>
+            <td>monospaced sans serif</td>
+            <td>.mono_sans</td>
+          </tr>
+          <tr>
+            <td>proportional sans serif</td>
+            <td>.prop_sans</td>
+          </tr>
+          <tr>
+            <td>casual</td>
+            <td>.casual</td>
+          </tr>
+          <tr>
+            <td>small capital</td>
+            <td>.small_caps</td>
+          </tr>
+        </table>
+
+        <p>
+          For example:
+        </p>
+        <pre>
+WEBVTT
+Style=CEA608
+Kind=captions
+Language=en-US
+
+00:00:00.000 --> 00:00:15.000
+A &lt;c.mono_serif>different font&lt;/c> text.
+        </pre>
+      </section>
+
+      <section>
+        <h2>Further CEA-708 Features</h2>
+        <p>
+          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:
+        </p>
+
+        <ul>
+          <li>text color</li>
+          <li>text-decoration</li>
+          <li>text-shadow</li>
+          <li>text-outline</li>
+          <li>background-color</li>
+          <li>background-position</li>
+          <li>outline-color</li>
+          <li>outline-style</li>
+          <li>outline-width</li>
+          <li>font-style</li>
+          <li>font-variant</li>
+          <li>font-weight</li>
+          <li>font-size/line-height</li>
+          <li>line height</li>
+          <li>white-space</li>
+        </ul>
+
+        <table border="1">
+          <tr>
+            <td>CEA-708 Feature</td>
+            <td>WebVTT/&lt;track> example</td>
+          </tr>
+          <tr>
+            <td>
+              <b>Further character attribute changes:</b><br>
+              Font size change.<br>
+              Text style changes.<br>
+              Text shadow.<br>
+              Depressed, raised edges.<br>
+            </td>
+            <td>
+              For HTML pages, all of these have attributes in CSS. For example:<br>
+              <pre>
+&lt;style>
+  video track#t1 ::cue(c.roman) {
+    font-size: 200%;
+    font-style: italic;
+    outline:#00FF00 dotted thick;
+    text-shadow: rgba(0, 0, 0, 0.199219) 0px 2px 5px;
+    font-effect: emboss;
+  }
+&lt;/style>
+              </pre>
+              For typical 708 needs, classes will be defined that map the same features.
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <b>Window effects:</b><br>
+              Display Effects (SNAP, FADE, WIPE, x), Effect Direction (L2R, R2L, T2B, B2T), Effect Speed (.5-sec units for WIPE and FADE ops)<br><br>
+              <b>Window Borders:</b><br>
+              Border Type (none, raised, etc), Border Color
+            </td>
+            <td>
+              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.
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Text Type tag (Dialog, Source, Voice, ...)
+            </td>
+            <td>
+              WebVTT has the &lt;v> voice spans which allow association of a text type name with a span of text.<br>
+              For example:<br>
+              <pre>
+WEBVTT
+
+0 - 15
+&lt;v.Mary>Good morning and welcome to our company.
+              </pre>
+            </td>
+          </tr>
+        </table>
+      </section>
+    </section>
+
+    <section>
+      <h2>Rendering in Web Browsers</h2>
+      <p>
+        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:
+      </p>
+      <pre>
+&lt;video controls>
+  &lt;source src=”video.mp4” type=”video/mp4”>
+  &lt;source src=”video.webm” type=”video/webm”>
+  &lt;track id=”cc1” label=”channel1” kind=”captions” srclang=”en” src=”channel1.vtt”>
+  &lt;track id=”cc2” label=”channel2” kind=”captions” srclang=”de” src=”channel2.vtt”>
+  &lt;track id=”cc3” label=”channel3” kind=”captions” srclang=”fr” src=”channel3.vtt”>
+  &lt;track id=”cc4” label=”channel4” kind=”captions” srclang=”sp” src=”channel4.vtt”>
+&lt;/video>
+      </pre>
+
+      <p>
+        The following CSS style sheet is provided for rendering of WebVTT CEA-608 files in Web browsers.
+      </p>
+      <pre>
+/* default values */
+video track {
+  font-family: monospace;
+  font-size: 100%;
+  font-style: normal;
+  font-weight: normal;
+  font-effect: none;
+  background-color: black;
+  color: white;
+  line-height: 100%;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  width: 80%;
+  height: 80%;
+}
+/* special cue parts */
+video track ::cue(c.white) {
+  color: white;
+}
+video track ::cue(c.red) {
+  color: red;
+}
+video track ::cue(c.green) {
+  color: green;
+}
+video track ::cue(c.blue) {
+  color: blue;
+}
+video track ::cue(c.cyan) {
+  color: cyan;
+}
+video track ::cue(c.yellow) {
+  color: yellow;
+}
+video track ::cue(c.magenta) {
+  color: magenta;
+}
+video track ::cue(c.blink) {
+  text-decoration:blink;
+}
+video track ::cue(c.bg_white) {
+  background-color: white;
+}
+video track ::cue(c.bg_green) {
+  background-color: green;
+}
+video track ::cue(c.bg_blue) {
+  background-color: blue;
+}
+video track ::cue(c.bg_cyan) {
+  background-color: cyan;
+}
+video track ::cue(c.bg_red) {
+  background-color: red;
+}
+video track ::cue(c.bg_yellow) {
+  background-color: yellow;
+}
+video track ::cue(c.bg_magenta) {
+  background-color: magenta;
+}
+video track ::cue(c.bg_black) {
+  background-color: black;
+}
+video track ::cue(c.transparent) {
+  background-color: transparent;
+}
+/* need to set this before changing color, otherwise the color is lost */
+video track ::cue(c.semi-transparent) {
+  background-color: rbga(0, 0, 0, 0.5);
+}
+/* need to set this before changing color, otherwise the color is lost */
+video track ::cue(c.opaque) {
+  background-color: rbga(0, 0, 0, 1);
+}
+video track ::cue(c.blink) {
+  text-decoration: blink;
+}
+video track ::cue(c.underline) {
+  text-decoration: underline;
+}
+video track ::cue(c.italics) {
+  font-style: italic;
+}
+video track ::cue(c.bold) {
+  font-weight: bold;
+}
+      </pre>
+
+      <p>
+        CEA-608 defines a safe caption area as 80% of the TV picture height and 80% of TV picture width, centered. WebVTT rendered in HTML allows rendering into the full rendering area of the viewport. Thus, the default limits the size of the rendering area.
+      </p>
+
+      <p>
+        Additionally, this CSS style sheet is provided for CEA-708 captions:
+      </p>
+      <pre>
+video track ::cue(c.mono_serif) {
+  font-family:"Courier New", monospace, serif;
+}
+video track ::cue(c.prop_serif) {
+  font-family:"Times Roman", serif;
+}
+video track ::cue(c.mono_sans) {
+  font-family:"Arial Monospaced", monospace, sans-serif;
+}
+video track ::cue(c.prop_sans) {
+  font-family:"Century Gothic", sans-serif;
+}
+video track ::cue(c.casual) {
+  font-family:"Lucinda Casual", “Dom Casual”;
+}
+video track ::cue(c.cursive) {
+  font-family: cursive;
+}
+video track ::cue(c.small_caps) {
+  font-variant: small-caps;
+}
+      </pre>
+    </section>
+
+    <section class='appendix'>
+      <h2>CEA-608 and CEA-708 References</h2>
+      <ul>
+        <li><a href="http://edocket.access.gpo.gov/cfr_2007/octqtr/pdf/47cfr15.119.pdf">608 specification</a></li>
+        <li><a href="http://www.cpcweb.com/hdtv/708.htm">708 information</a></li>
+      </ul>
+    </section>
+  </body>
+</html>