Fix the ::cue markup.
Introduce use of @import for external style sheets.
--- 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>
<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);
}
</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>