Fix the ::cue markup.
authorSilvia Pfeiffer
Tue, 25 Sep 2012 22:27:55 +1000
changeset 7 c4d8b13401f4
parent 6 ffb3c8df5620
child 8 2897b93982e3
Fix the ::cue markup.
Introduce use of @import for external style sheets.
608toVTT/608toVTT.html
--- a/608toVTT/608toVTT.html	Tue Sep 25 00:37:40 2012 +1000
+++ b/608toVTT/608toVTT.html	Tue Sep 25 22:27:55 2012 +1000
@@ -135,7 +135,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
         </pre>
       </section>
@@ -150,7 +152,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 channel: CC1
@@ -253,7 +257,9 @@
         <p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -299,7 +305,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -329,7 +337,9 @@
       </p>
       <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -396,7 +406,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -416,7 +428,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -532,7 +546,9 @@
         </p>
         <pre>
 WEBVTT
-stylesheet: cea608.css
+styles:
+@import(cea608.css)
+##
 kind: captions
 language: en-US
 
@@ -582,12 +598,10 @@
               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;
+  ::cue(#emboss) {
+    background: #f60;
+    color: #fff;
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);  
   }
 &lt;/style>
               </pre>
@@ -647,91 +661,80 @@
 cea608.css
 
 /* default values */
-video track {
+::cue {
   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) {
+::cue(c.white) {
   color: white;
 }
-video track ::cue(c.red) {
+::cue(c.red) {
   color: red;
 }
-video track ::cue(c.green) {
+::cue(c.green) {
   color: green;
 }
-video track ::cue(c.blue) {
+::cue(c.blue) {
   color: blue;
 }
-video track ::cue(c.cyan) {
+::cue(c.cyan) {
   color: cyan;
 }
-video track ::cue(c.yellow) {
+::cue(c.yellow) {
   color: yellow;
 }
-video track ::cue(c.magenta) {
+::cue(c.magenta) {
   color: magenta;
 }
-video track ::cue(c.blink) {
-  text-decoration:blink;
-}
-video track ::cue(c.bg_white) {
+::cue(c.bg_white) {
   background-color: white;
 }
-video track ::cue(c.bg_green) {
+::cue(c.bg_green) {
   background-color: green;
 }
-video track ::cue(c.bg_blue) {
+::cue(c.bg_blue) {
   background-color: blue;
 }
-video track ::cue(c.bg_cyan) {
+::cue(c.bg_cyan) {
   background-color: cyan;
 }
-video track ::cue(c.bg_red) {
+::cue(c.bg_red) {
   background-color: red;
 }
-video track ::cue(c.bg_yellow) {
+::cue(c.bg_yellow) {
   background-color: yellow;
 }
-video track ::cue(c.bg_magenta) {
+::cue(c.bg_magenta) {
   background-color: magenta;
 }
-video track ::cue(c.bg_black) {
+::cue(c.bg_black) {
   background-color: black;
 }
-video track ::cue(c.transparent) {
+::cue(c.transparent) {
   background-color: transparent;
 }
 /* need to set this before changing color, otherwise the color is lost */
-video track ::cue(c.semi-transparent) {
+::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) {
+::cue(c.opaque) {
   background-color: rbga(0, 0, 0, 1);
 }
-video track ::cue(c.blink) {
+::cue(c.blink) {
   text-decoration: blink;
 }
-video track ::cue(c.underline) {
+::cue(c.underline) {
   text-decoration: underline;
 }
-video track ::cue(c.italics) {
+::cue(c.italics) {
   font-style: italic;
 }
-video track ::cue(c.bold) {
+::cue(c.bold) {
   font-weight: bold;
 }
       </pre>
@@ -746,25 +749,25 @@
       <pre>
 cea708.css
 
-video track ::cue(c.mono_serif) {
+::cue(c.mono_serif) {
   font-family:"Courier New", monospace, serif;
 }
-video track ::cue(c.prop_serif) {
+::cue(c.prop_serif) {
   font-family:"Times Roman", serif;
 }
-video track ::cue(c.mono_sans) {
+::cue(c.mono_sans) {
   font-family:"Arial Monospaced", monospace, sans-serif;
 }
-video track ::cue(c.prop_sans) {
+::cue(c.prop_sans) {
   font-family:"Century Gothic", sans-serif;
 }
-video track ::cue(c.casual) {
+::cue(c.casual) {
   font-family:"Lucinda Casual", “Dom Casual”;
 }
-video track ::cue(c.cursive) {
+::cue(c.cursive) {
   font-family: cursive;
 }
-video track ::cue(c.small_caps) {
+::cue(c.small_caps) {
   font-variant: small-caps;
 }
       </pre>