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

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.

Received on Saturday, 16 October 2010 16:18:55 UTC