This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 18947 - WebVTT: Add CSS examples
Summary: WebVTT: Add CSS examples
Status: NEW
Alias: None
Product: TextTracks CG
Classification: Unclassified
Component: WebVTT (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Silvia Pfeiffer
QA Contact: This bug has no owner yet - up for the taking
URL:
Whiteboard: v1
Keywords:
Depends on:
Blocks:
 
Reported: 2012-09-21 08:02 UTC by Simon Pieters
Modified: 2013-12-09 07:13 UTC (History)
4 users (show)

See Also:

Attachments

Description Simon Pieters 2012-09-21 08:02:19 UTC 
It would be good to have CSS examples showing how to use the different selectors, how to use karaoke, etc.

/* use the same font family as in the surrounding page */
video::cue { font-family:inherit }

/* cue id */
video::cue(#intro) { font-size:10vh }

/* inline class */
video::cue(.code) { white-space:pre-wrap; font-family:monospace }

/* voice */
video::cue(v[voice="Jim"]) { color:yellow }

/* karaoke */
video::cue(c) { transition:linear 0.5s color }
video::cue(c:past) { color:lime }
Comment 1 Silvia Pfeiffer 2012-10-19 23:43:17 UTC 
An example that demonstrates CSS escaped characters would be helpful, too.

E.g.

/* this is the cue */
52 my cue identifier
00:00:52.000 --> 00:00:01:05.000
My cue text

/* how to reference it in CSS */
::cue(#\35 2\ my\ cue\ identifier)