W3C home > Mailing lists > Public > whatwg@whatwg.org > October 2010

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

From: Silvia Pfeiffer <silviapfeiffer1@gmail.com>
Date: Sun, 17 Oct 2010 10:18:55 +1100
Message-ID: <AANLkTikyMFOk3wDJrb2HvGEgQyv_vkRF=hUKcjKHk=j5@mail.gmail.com>
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

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

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:01 UTC