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 25637 - [WebVTT] Make the padding at the edges of the video overridable using CSS
Summary: [WebVTT] Make the padding at the edges of the video overridable using CSS
Status: RESOLVED DUPLICATE of bug 22085
Alias: None
Product: TextTracks CG
Classification: Unclassified
Component: WebVTT (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: This bug has no owner yet - up for the taking
QA Contact: Web Media Text Tracks CG
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-05-09 19:52 UTC by Philip Jägenstedt
Modified: 2014-10-17 21:21 UTC (History)
2 users (show)

See Also:


Attachments

Description Philip Jägenstedt 2014-05-09 19:52:17 UTC
We currently have:

The 'padding-top' and 'padding-bottom' property on the WebVTT cue background box must be set to '1.5vh' or another user-agent-defined number to define a padding at the edges of the video into which cues will not be placed. In situations with overscan, this padding should be sufficient to place a cue within the title-safe area. In the absence of overscan, this value should be picked for aesthetics (to avoid text being aligned precisely on the top or bottom edge of the video, which can be ugly).

The 'padding-left' and 'padding-right' property on the WebVTT cue background box must be set to '1.5vw' or another user-agent-defined number to define a padding at the edges of the video into which cues will not be placed. In situations with overscan, this padding should be sufficient to place a cue within the title-safe area. In the absence of overscan, this value should be picked for aesthetics (to avoid text being aligned precisely on the top or bottom edge of the video, which can be ugly).

It would be very nice if this were exposed to CSS, maybe with a default of 5vh to match the default line height. For the overscan situation, the user agent can simply have a user agent stylesheet with higher priority than author CSS.
Comment 1 Philip Jägenstedt 2014-05-09 21:39:20 UTC
Oh, I see that this is actually using the wrong box, the WebVTT cue background box is the anonymous box in "The children of the nodes must be wrapped in an anonymous box whose 'display' property has the value 'inline'."

That means these two lines won't do anything useful:

The 'box-sizing' property on the WebVTT cue background box must be set to 'border-box'.

The 'overflow' property on the WebVTT cue background box must be set to 'hidden'.
Comment 2 Silvia Pfeiffer 2014-05-12 01:17:13 UTC
Can we make the "cue box" that is specified in the Data Model (3.1) *be* the cue background box?
Comment 3 Philip Jägenstedt 2014-05-12 11:06:00 UTC
Do you mean http://dev.w3.org/html5/webvtt/#dfn-text-track-cue-box ?

That's the box which is controlled by position, size and align, and it's a block box.

The WebVTT cue background box is an inline box, so they can't be the same.
Comment 4 Silvia Pfeiffer 2014-06-09 13:31:49 UTC
Let's make the block box explicit then and give it these properties. 'overflow' is not necessary since it was meant to deal with non-clamping cues, which is now getting removed again in bug 25660 .
Comment 5 Philip Jägenstedt 2014-06-09 21:37:53 UTC
What should the CSS for controlling this look like?

::cue-root { padding: 10px; } ?

Or maybe ::cue { margin: 10px; } ?

Do we want to be able to control the distance between individual cues?
Comment 6 Philip Jägenstedt 2014-06-11 20:35:44 UTC
Well oops, I left some bits like "minus twice the 'padding-top' space defined in the next section" when I removed the CSS settings in https://github.com/w3c/webvtt/pull/79

That should be fixed as part of this issue.
Comment 7 Silvia Pfeiffer 2014-06-12 13:25:54 UTC
(In reply to Philip Jägenstedt from comment #5)
> What should the CSS for controlling this look like?
> 
> ::cue-root { padding: 10px; } ?
> 
> Or maybe ::cue { margin: 10px; } ?
> 
> Do we want to be able to control the distance between individual cues?

::cue { padding:10px; } seems good. I don't see a need to introduce a new pseudo-element for this.
Comment 8 Philip Jägenstedt 2014-10-17 21:21:55 UTC

*** This bug has been marked as a duplicate of bug 22085 ***