Add window effects for 708.
--- a/608toVTT/608toVTT.html Fri Nov 09 17:16:51 2012 +1100
+++ b/608toVTT/608toVTT.html Sat Nov 10 21:10:24 2012 +1100
@@ -730,8 +730,94 @@
</table>
- <h3></h3>
+ <h3>Window Display Effects</h3>
<p>
+ 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.
+ </p>
+
+
+ <h3>Window Colors and Borders</h3>
+ <p>
+ 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.
+ </p>
+
+ <table border="1">
+ <thead>
+ <tr>
+ <td>CEA-708 Caption Window Properties</td>
+ <td>WebVTT CSS property</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>clear Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ background-color: transparent;
+}</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>translucent Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ background-color: rgba(0,0,0,0.5);
+}</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>solid Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ background-color: rgba(0,0,0,1);
+}</pre>
+(choose color from color list)
+ </td>
+ </tr>
+ <tr>
+ <td>raised border for Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ outline: black ridge 2px;
+}</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>depressed border for Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ outline: black inset 2px;
+}</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>uniform border for Window</td>
+ <td>
+ <pre>
+::cue-region(name) {
+ outline: black solid 2px;
+}</pre>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h3>64 colors in use by CEA-708</h3>
+ <p>
+ 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 by using on 0, 85, 170 and 255 as values in the three components:
+ </p>
+ <pre>
+css-color(r,g,b) = cea708-color(r*85,g*85,b*85)
+ </pre>
+
+ <p>
+ CEA-708 also defines 8 named colors: black, white, red, green, blue, yellow, magenta, cyan. They map to CSS colors of the same name.
</p>
</section>