Re: Yet Another Scroll-Up Idea (YASUI) in VTT

On Tue, 25 Sep 2012 14:32:57 +0200, Silvia Pfeiffer  
<silviapfeiffer1@gmail.com> wrote:

> On Fri, Sep 21, 2012 at 4:47 PM, Simon Pieters <simonp@opera.com> wrote:
>> On Fri, 21 Sep 2012 03:25:12 +0200, Silvia Pfeiffer
>> <silviapfeiffer1@gmail.com> wrote:
>>
>>> It's  a bit outdated and replaced by
>>> http://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html
>>>  now. I have emailed the group about this before and asked if it can
>>> become part of what we're working on.
>>
>>
>> The style sheet looks wrong. You should drop the "video track" from all
>> selectors. Also this ruleset seems mostly wrong:
>>
>> video track {
>>   font-family: monospace;
>>   font-size: 100%;
>>   font-style: normal;
>>   font-weight: normal;
>>   font-effect: none;
>>   background-color: black;
>>   color: white;
>>   line-height: 100%;
>>   position: absolute;
>>   top: 10%;
>>   left: 10%;
>>   width: 80%;
>>   height: 80%;
>> }
>>
>> The selector should be just ::cue (matches the WebVTT root), there's no
>> font-effect property, position, top, left, width and height do not  
>> apply to
>> WebVTT elements.
>>
>> Are you sure you want font-size:100%? IIRC it will inherit the font  
>> size of
>> the video element (which is likely to be 16px or so; won't scale with  
>> the
>> video). The default is 5vh i.e. 5% of the video viewport's height.
>
>
> I've made some changes to that spec. Still needs some effort to get
> the rest of the 708 features specified.
>
> http://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html
>
> I've used the suggestion of Ian to reference external stylesheets with
> an @import from https://www.w3.org/Bugs/Public/show_bug.cgi?id=18530 .
> I've used multi-line header metadata for it with the bulky "##" end.
> Not sure yet if I like it..

OK.

Looking at it again, other things now stand out. :-)


::cue(c.bg_white) {
   background-color: white;
}
::cue(c.bg_green) {
   background-color: green;
}
::cue(c.bg_blue) {
   background-color: blue;
}
::cue(c.bg_cyan) {
   background-color: cyan;
}
::cue(c.bg_red) {
   background-color: red;
}
::cue(c.bg_yellow) {
   background-color: yellow;
}
::cue(c.bg_magenta) {
   background-color: magenta;
}
::cue(c.bg_black) {
   background-color: black;
}
::cue(c.transparent) {
   background-color: transparent;
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.semi-transparent) {
   background-color: rbga(0, 0, 0, 0.5);
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.opaque) {
   background-color: rbga(0, 0, 0, 1);
}


You have typoed rgba as rbga.

The above doesn't do what you think it does. The way the cascade works is  
that the last background-color declaration wins if there are two classes  
specified, so <c.semi-transparent.bg_magenta> will end up being rgba(0, 0,  
0, 0.5).

The above should be:

::cue(c.bg_white) {
   background-color: white;
}
::cue(c.bg_green) {
   background-color: green;
}
::cue(c.bg_blue) {
   background-color: blue;
}
::cue(c.bg_cyan) {
   background-color: cyan;
}
::cue(c.bg_red) {
   background-color: red;
}
::cue(c.bg_yellow) {
   background-color: yellow;
}
::cue(c.bg_magenta) {
   background-color: magenta;
}
::cue(c.bg_black) {
   background-color: black;
}
::cue(c.bg_white.semi-transparent) {
   background-color: rgba(255, 255, 255, 0.5);
}
::cue(c.bg_green.semi-transparent) {
   background-color: rgba(0, 128, 0, 0.5);
}
::cue(c.bg_blue.semi-transparent) {
   background-color: rgba(0, 0, 255, 0.5);
}
::cue(c.bg_cyan.semi-transparent) {
   background-color: rgba(0, 255, 255, 0.5);
}
::cue(c.bg_red.semi-transparent) {
   background-color: rgba(255, 0, 0, 0.5);
}
::cue(c.bg_yellow.semi-transparent) {
   background-color: rgba(255, 255, 0, 0.5);
}
::cue(c.bg_magenta.semi-transparent) {
   background-color: rgba(255, 0, 255, 0.5);
}
::cue(c.bg_black.semi-transparent) {
   background-color: rgba(0, 0, 0, 0.5);
}
::cue(c.transparent) {
   background-color: transparent;
}


The ::cue(c.transparent) selector has lower specificity than the  
semi-transparent one. If you want transparent to win over semi-transparent  
when both are specified, make the selector  
::cue(c.transparent.transparent).

Then we have these:


::cue(c.underline) {
   text-decoration: underline;
}
::cue(c.italics) {
   font-style: italic;
}
::cue(c.bold) {
   font-weight: bold;
}


Why not rely on <u>, <i> and <b> instead?

Finally, it seems slightly weird that style sheets referenced from the  
WebVTT file itself would use the pseudo-elements, since it would mean that  
the selector has to match the <video> of which the track is associated. I  
can see some value in being able to use the same style sheet for both the  
HTML page and referencing it from the track. OTOH, having to say  
::cue(blah) instead of just blah in an inline style sheet seems quite  
annoying.

-- 
Simon Pieters
Opera Software

Received on Tuesday, 25 September 2012 14:09:48 UTC