--- a/608toVTT/608toVTT.html Sun Nov 11 23:56:16 2012 +1100
+++ b/608toVTT/608toVTT.html Mon Nov 12 20:13:45 2012 +1100
@@ -921,7 +921,7 @@
<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.
+ 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.
</p>
<p>
@@ -960,92 +960,6 @@
</section>
<section>
- <h2>Font</h2>
- <p>
- CEA-708 suggests the use of monospace and proportionally spaced fonts and defines 8 different fonts. These can be mapped to WebVTT/CSS fonts as follows:
- </p>
-
- <table border="1">
- <thead>
- <tr>
- <td>CEA-708 Font Styles</td>
- <td>WebVTT CSS Fonts</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>0 - default (undefined)</td>
- <td>default WebVTT font, i.e. 'sans-serif'</td>
- </tr>
- <tr>
- <td>1 - monospaced with serifs</td>
- <td>
- <pre>
-::cue {
- font-family:'Courier, monospace, serif';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>2 - Proportionally spaced with serifs</td>
- <td>
- <pre>
-::cue {
- font-family:'Times New Roman, serif';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>3 - Monospaced without serifs</td>
- <td>
- <pre>
-::cue {
- font-family:'Helvetica, monospace, sans-serif';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>4 - Proportionally spaced without serifs</td>
- <td>
- <pre>
-::cue {
- font-family:'Arial, Swiss, sans-serif';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>5 - Casual font type</td>
- <td>
- <pre>
-::cue {
- font-family:'Dom, Impress, casual';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>6 - Cursive font type</td>
- <td>
- <pre>
-::cue {
- font-family:'Coronet, Marigold, cursive';
-}</pre>
- </td>
- </tr>
- <tr>
- <td>7 - Small capital</td>
- <td>
- <pre>
-::cue {
- font-family:'Engravers Gothic, monospace, sans-serif';
- font-variant:small-caps;
-}</pre>
- </td>
- </tr>
- </tbody>
- </table>
- </section>
-
- <section>
<h2>Character Codes</h2>
<p>
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.
@@ -1095,12 +1009,31 @@
<p>
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.
</p>
+
+ <p>
+ CEA-708 further has the following three transparency states for text:
+ </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>Italics and Underline</h2>
<p>
- Italics and underline exist in WebVTT as markup and are thus directly converted from CEA-608.
+ Italics and underline exist in WebVTT as markup and are thus directly converted from CEA-608 or CEA-708 pen style.
</p>
<p>
@@ -1142,13 +1075,13 @@
</section>
<section>
- <h2>Background Colour</h2>
+ <h2>CEA-708 Background Colour</h2>
<p>
- In CEA-708 it is possible to change the background color of the captioning rendering area.
+ In CEA-708 it is possible to change the background color of the caption text characters.
</p>
<p>
- If this relates to a segment of cue text, use one of the following classes to provide the setting.
+ Use one of the following classes to provide the setting for a section of caption text:
</p>
<table border="1">
@@ -1192,16 +1125,16 @@
<table border="1">
<tr>
- <td>transparent</td>
- <td>.transparent</td>
+ <td>background transparent</td>
+ <td>.bg_transparent</td>
</tr>
<tr>
- <td>semi-transparent</td>
- <td>.semi-transparent</td>
+ <td>background semi-transparent</td>
+ <td>.bg_semi-transparent</td>
</tr>
<tr>
- <td>opaque</td>
- <td>.opaque</td>
+ <td>background opaque</td>
+ <td>.bg_opaque</td>
</tr>
</table>
</section>
@@ -1214,31 +1147,34 @@
<table border="1">
<tr>
- <td>undefined</td>
- <td>--</td>
+ <td>0 - default (undefined)</td>
+ <td>default WebVTT font, i.e. 'sans-serif'</td>
</tr>
<tr>
- <td>monospaced serif</td>
+ <td>1 - monospaced with serifs</td>
<td>.mono_serif</td>
</tr>
<tr>
- <td>proportional serif</td>
+ <td>2 - Proportionally spaced with serifs</td>
<td>.prop_serif</td>
</tr>
<tr>
- <td>monospaced sans serif</td>
+ <td>3 - Monospaced without serifs</td>
<td>.mono_sans</td>
</tr>
<tr>
- <td>proportional sans serif</td>
+ <td>4 - Proportionally spaced without serifs</td>
<td>.prop_sans</td>
</tr>
<tr>
- <td>casual</td>
+ <td>5 - Casual font type</td>
<td>.casual</td>
</tr>
<tr>
- <td>small capital</td>
+ <td>6 - Cursive font type</td>
+ <td>.cursive</td>
+ <tr>
+ <td>7 - Small capital</td>
<td>.small_caps</td>
</tr>
</table>
@@ -1260,6 +1196,13 @@
</section>
<section>
+ <h2>CEA-708 Character Offsetting</h2>
+ <p>
+ 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.
+ </p>
+ </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:
@@ -1373,6 +1316,20 @@
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;
}
@@ -1394,6 +1351,17 @@
::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;
}
@@ -1418,76 +1386,60 @@
::cue(c.bg_black) {
background-color: black;
}
-::cue(c.bg_white.semi-transparent) {
+/* Examples of combined colors */
+::cue(c.bg_white.bg_semi-transparent) {
background-color: rgba(255, 255, 255, 0.5);
}
-::cue(c.bg_green.semi-transparent) {
+::cue(c.bg_green.bg_semi-transparent) {
background-color: rgba(0, 128, 0, 0.5);
}
-::cue(c.bg_blue.semi-transparent) {
+::cue(c.bg_blue.bg_semi-transparent) {
background-color: rgba(0, 0, 255, 0.5);
}
-::cue(c.bg_cyan.semi-transparent) {
+::cue(c.bg_cyan.bg_semi-transparent) {
background-color: rgba(0, 255, 255, 0.5);
}
-::cue(c.bg_red.semi-transparent) {
+::cue(c.bg_red.bg_semi-transparent) {
background-color: rgba(255, 0, 0, 0.5);
}
-::cue(c.bg_yellow.semi-transparent) {
+::cue(c.bg_yellow.bg_semi-transparent) {
background-color: rgba(255, 255, 0, 0.5);
}
-::cue(c.bg_magenta.semi-transparent) {
+::cue(c.bg_magenta.bg_semi-transparent) {
background-color: rgba(255, 0, 255, 0.5);
}
-::cue(c.bg_black.semi-transparent) {
- background-color: rgba(0, 0, 0, 0.5);
-}
-::cue(c.transparent.transparent) {
- background-color: transparent;
-}
-/* need to set this before changing color, otherwise the color is lost */
-::cue(c.semi-transparent) {
+::cue(c.bg_black.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.opaque) {
- background-color: rgba(0, 0, 0, 1);
-}
-::cue(c.blink) {
- text-decoration: blink;
-}
</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>
cea708.css
::cue(c.mono_serif) {
- font-family:"Courier New", monospace, serif;
+ font-family:'Courier, monospace, serif';
}
::cue(c.prop_serif) {
- font-family:"Times Roman", serif;
+ font-family:'Times New Roman, serif';
}
::cue(c.mono_sans) {
- font-family:"Arial Monospaced", monospace, sans-serif;
+ font-family:'Helvetica, monospace, sans-serif';
}
::cue(c.prop_sans) {
- font-family:"Century Gothic", sans-serif;
+ font-family:'Arial, Swiss, sans-serif';
}
::cue(c.casual) {
- font-family:"Lucinda Casual", “Dom Casual”;
+ font-family:'Dom, Impress, casual';
}
::cue(c.cursive) {
- font-family: cursive;
+ font-family:'Coronet, Marigold, cursive';
}
::cue(c.small_caps) {
- font-variant: small-caps;
+ font-family:'Engravers Gothic, monospace, sans-serif';
+ font-variant:small-caps;
}
</pre>
</section>