diff --git a/index.bs b/index.bs index 9890191b..dca5cb4e 100644 --- a/index.bs +++ b/index.bs @@ -458,7 +458,7 @@ CSS comment (e.g. /**/).

-

This example shows how to position cues at explicit positions in the video viewport.

+

This example shows how to position cues at explicit positions in the video viewport.

  WEBVTT
@@ -474,25 +474,25 @@ CSS comment (e.g. /**/).

Since the cues in these examples are horizontal, the "position" setting refers to a percentage - of the width of the video viewpoint. If the text were vertical, the "position" setting would refer - to the height of the video viewport.

+ of the width of the video viewport. If the text were vertical, the "position" setting would + refer to the height of the video viewport.

The "line-left" or "line-right" only refers to the physical side of the box to which the "position" setting applies, in a way which is agnostic regarding the horizontal or vertical direction of the cue. It does not affect or relate to the direction or position of the text itself within the box.

-

The cues cover only 35% of the video viewport's width - that's the cue - box's "size" for all three cues.

+

The cues cover only 35% of the video viewport's width - that's the cue box's "size" for all three cues.

The first cue has its cue box positioned at the 10% mark. The "line-left" and "line-right" within the "position" setting indicates which side of the cue box the position refers to. Since in this case the text is horizontal, "line-left" refers to the left side of the box, and the cue box is thus positioned between the 10% - and the 45% mark of the video viewport's width, probably underneath a speaker on the left of the - video image. If the cue was vertical, "line-left" positioning would be from the top of the video - viewport's height and the cue box would cover 35% of the video - viewport's height.

+ and the 45% mark of the video viewport's width, probably underneath a speaker on the left of + the video image. If the cue was vertical, "line-left" positioning would be from the top of the + video viewport's height and the cue box would cover 35% of the + video viewport's height.

The text within the first cue's cue box is aligned using the "align" cue setting. For left-to-right rendered text, "start" alignment is the left of that box, for right-to-left rendered @@ -502,9 +502,9 @@ CSS comment (e.g. /**/).

changes (from left-to-right to right-to-left or vice versa) as a result of translation.

The second cue has its cue box right aligned at the 90% mark of the - video viewport width ("right" aligned text right aligns the box). The same effect can be achieved - with "position:55%,line-left", which explicitly positions the cue box. The third cue has center - aligned text within the same positioned cue box as the first cue.

+ video viewport width ("right" aligned text right aligns the box). The same effect can be + achieved with "position:55%,line-left", which explicitly positions the cue box. The third cue has + center aligned text within the same positioned cue box as the first cue.

@@ -799,17 +799,18 @@ precomposed character).

Data model

-

The box model of WebVTT consists of three key elements: the video viewport, cues, and -regions. The video viewport is the rendering area into which cues and regions are rendered. Cues are -boxes consisting of a set of cue lines. Regions are subareas of the video viewport that are used to -group cues together. Cues are positioned either inside the video viewport directly or inside a -region, which is positioned inside the video viewport.

+

The box model of WebVTT consists of three key elements: the video viewport, cues, and regions. The video viewport is the +rendering area into which cues and regions are rendered. Cues are boxes +consisting of a set of cue lines. Regions are subareas of the video +viewport that are used to group cues together. Cues are positioned either inside the video viewport +directly or inside a region, which is positioned inside the video viewport.

The position of a cue inside the video viewport is defined by a set of cue settings. The position of a region inside the video viewport is defined by a set of region settings. Cues that are inside regions can only use a limited set of their cue settings. Specifically, if the cue has a "vertical", "line" or "size" setting, the cue drops out of the region. Otherwise, the cue's width is -calculated to be relative to the region width rather than the viewport.

+calculated to be relative to the region width rather than the video viewport.

Overview

@@ -830,20 +831,43 @@ is being used in the text track kind attribute of the text track e data kind of a WebVTT file is externally specified, such as in a HTML file's text track element. The environment is responsible for interpreting the data correctly.

-

WebVTT caption or subtitle cues are rendered as overlays on top of a video viewport or into a -region, which is a subarea of the video viewport.

+

WebVTT caption or subtitle cues are rendered as overlays on top of a video viewport or +into a region, which is a subarea of the video viewport.

+ + +

Video viewport

+ +

The video viewport is the video's rendering area which in the case +of HTML5 is defined by the |video|'s concrete object size.

+ +

The following video-viewport-percentage lengths are defined analogously to how CSS defines +viewport-percentage-lengths ''vh'' and ''vw'' [[!CSS-VALUES]]:

+ +
+ +
vvw unit
+
+

Equal to 1% of the width of the video viewport.

+
+ +
vvh unit
+
+

Equal to 1% of the height of the video viewport.

+
+ +
+

WebVTT cues

A WebVTT cue is a text track cue [[!HTML]] that additionally consist of the -following:

+following:

A cue text

The raw text of the cue, and rules for its interpretation.

-
@@ -860,8 +884,8 @@ fragment:

A cue box

The cue box of a WebVTT cue is a box within which the text of all lines of the cue is to - be rendered. It is either rendered into the video's viewport or a region inside the viewport if - the cue is part of a region.

+ be rendered. It is either rendered into the video viewport or a region inside the video + viewport if the cue is part of a region.

The position of the cue box within the video viewport's or region's dimensions depends on the value of the WebVTT cue position and the WebVTT @@ -878,8 +902,8 @@ fragment:

-

Let |boxes| be the boxes generated as descendants of the initial containing block, along with -their positions.

+

Let |boxes| be the boxes generated as descendants of the containing block, along with their +positions.

Applying CSS properties to cue's WebVTT cue text alignment:

The 'font' shorthand property on the (root) list of WebVTT Node Objects must be set to -''5vh sans-serif''. [[!CSS-VALUES]]

+''5vvh sans-serif''. [[!CSS-VALUES]]

The 'color' property on the (root) list of WebVTT Node Objects must be set to ''rgba(255,255,255,1)''. [[!CSS3-COLOR]]

@@ -4881,11 +4906,13 @@ to ''font-style/italic''.

The 'text-decoration' property on WebVTT Underline Objects must be set to ''text-decoration/underline''.

-

The 'display' property on WebVTT Ruby Objects must be set to -''display/ruby''. [[!CSS3-RUBY]]

+

The 'display' property on WebVTT Ruby Objects must be set to ruby. +[[!CSS3-RUBY]]

The 'display' property on WebVTT Ruby Text Objects must be -set to ''display/ruby-text''. [[!CSS3-RUBY]]

+set to ruby-text. [[!CSS3-RUBY]]

Every WebVTT region object is initialized with the following CSS settings:

@@ -4894,7 +4921,7 @@ set to ''display/ruby-text''. [[!CSS3-RUBY]]

  • the 'writing-mode' property must be set to ''writing-mode/horizontal-tb''
  • the 'background' shorthand property must be set to ''rgba(0,0,0,0.8)''
  • the 'overflow-wrap' property must be set to ''overflow-wrap/break-word''
    • -
  • the 'font' shorthand property must be set to ''5vh sans-serif''
    • +
  • the 'font' shorthand property must be set to ''5vvh sans-serif''
  • the 'color' property must be set to ''rgba(255,255,255,1)''
  • the 'overflow' property must be set to ''overflow/hidden''
  • the 'width' property must be set to |width|
    • @@ -4902,7 +4929,8 @@ set to ''display/ruby-text''. [[!CSS3-RUBY]]

  • the 'max-height' property must be set to |height|
  • the 'left' property must be set to |left|
  • the 'top' property must be set to |top|
    • -
  • the 'display' property must be set to ''display/inline-flex''
    • +
  • the 'display' property must be set to inline-flex
  • the 'flex-flow' property must be set to ''flex-flow/column''
  • the 'justify-content' property must be set to ''justify-content/flex-end''
    • diff --git a/index.html b/index.html index d041b479..2cf92686 100644 --- a/index.html +++ b/index.html @@ -1186,8 +1186,9 @@ background-repeat: no-repeat; } - + + +/* This is a weird hack for me not yet following the commonmark spec + regarding paragraph and lists. */ +[data-md] > :first-child { + margin-top: 0; +} +[data-md] > :last-child { + margin-bottom: 0; +} +a.self-link::before { content: "¶"; } +.heading > a.self-link::before { content: "§"; } +dfn > a.self-link::before { content: "#"; } +figcaption { + counter-increment: figure; +} +figcaption:not(.no-marker)::before { + content: "Figure " counter(figure) " "; +} +[data-link-type=biblio] { + white-space: pre; +}