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

Silvia Pfeiffer silviapfeiffer1 at gmail.com
Sat Oct 16 16:18:55 PDT 2010

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.

00:00:10,000 --> 00:00:12,210
<00:00:10,035>Chocolate <00:00:11,000>Rain

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

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

00:00:15,920 --> 00:00:18,000
<00:00:16,000>Chocolate <00:00:16,500>Rain

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

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


More information about the whatwg mailing list