[whatwg] rendering WebSRT cue parts in use for subtitling songs

[Diogo Resende]

Maybe the browser could simulate :hover (or :focus) for those words so
it would be easy to style it.

-- 
Diogo


On Sun, 2010-10-17 at 10:18 +1100, Silvia Pfeiffer wrote:
> I've just looked into using WebSRT for subtitling songs where I'm also
> using it to provide more detailed timing on the individual words
> within the cue. This can obviously used for Karaoke-style display, but
> is also very educational for learning the lyrics to a song or even for
> a deaf person to follow along and get a feeling for the rhythm of a
> piece of music.
> 
> I've come up with the following example markup, which I believe is
> correct according to the spec.
> 
> 1
> 00:00:10,000 --> 00:00:12,210
> <00:00:10,035>Chocolate <00:00:11,000>Rain
> 
> 2
> 00:00:12,210 --> 00:00:15,910
> <00:00:13,250>Some <00:00:13,500>stay <00:00:13,750>dry
> <00:00:14,25>and <00:00:14,50>others <00:00:15,00>feel
> <00:00:15,25>the <00:00:15,50>pain
> 
> 3
> 00:00:15,910 --> 00:00:15,920
> <00:00:16,000>Chocolate <00:00:16,500>Rain
> <00:00:13,250>Some <00:00:13,500>stay <00:00:13,750>dry
> <00:00:14,25>and <00:00:14,50>others <00:00:15,00>feel
> <00:00:15,25>the <00:00:15,50>pain
> 
> 4
> 00:00:15,920 --> 00:00:18,000
> <00:00:16,000>Chocolate <00:00:16,500>Rain
> 
> 5
> 00:00:18,000 --> 00:00:21,170
> <00:00:18,250>A <00:00:18,500>baby <00:00:19,000>born
> <00:00:19,250>will <00:00:19,500>die <00:00:19,750>before
> <00:00:20,500>the <00:00:20,750>sin
> 
> 6
> 00:00:21,180 --> 00:00:23,000
> <00:00:21,200>Chocolate <00:00:21,500>Rain
> 
> 
> My question now is: how can I apply CSS to this and render the words.
> I would expect a style of rendering where all words are first
> displayed in ordinary display and e.g. painted in a different color as
> the time reaches them. Something like:
> 
> ::cue {
>   color: black;
> }
> 
> // this is in-valid as per spec right now
> ::cue timestamp {
>   color: red;
> }
> 
> But FAIK we don't currently have a means to address the
> timestamp-activated parts within a cue through CSS. How should that be
> done?
> 
> Cheers,
> Silvia.