Add window effects for 708.
authorSilvia Pfeiffer
Sat, 10 Nov 2012 21:10:24 +1100
changeset 35 1d91aef4ecff
parent 34 4b9e4b57a036
child 36 9f248c5d7141
Add window effects for 708.
608toVTT/608toVTT.html
--- 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>