From 28b708c40260b2c418c80d706de833c0a784b15b Mon Sep 17 00:00:00 2001 From: Silvia Pfeiffer Date: Sun, 1 Apr 2018 22:20:09 +1000 Subject: [PATCH 1/3] Add a definition of "video viewport" and how it relates in HTML5 to object size resolution. --- index.bs | 154 +++++++++------- index.html | 533 ++++++++++++++++++++++++++++------------------------- 2 files changed, 362 insertions(+), 325 deletions(-) diff --git a/index.bs b/index.bs index 9890191b..c89f1805 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,13 +831,20 @@ 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.

+

WebVTT cues

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

+following:

@@ -860,8 +868,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 +886,8 @@ fragment:

  • horizontal (a line extends - horizontally and is offset vertically from the video viewport's top edge, with consecutive lines - displayed below each other),
    • + horizontally and is offset vertically from the     video viewport's top edge, with consecutive + lines displayed below each other),
  • vertical growing left (a line extends vertically and is offset horizontally from the video viewport's right edge, with @@ -927,7 +935,7 @@ fragment:

    box.

    The line offsets the cue box from the - top, the right or left of the video viewport as defined by the writing direction, the snap-to-lines flag, or the lines occupied by any other showing tracks.

    @@ -1084,8 +1092,8 @@ fragment:

    Even for horizontal cues with right-to-left cue text, the cue box is positioned from the left edge of - the video viewport. This allows defining a rendering space template which can be filled with - either left-to-right or right-to-left cue text, or both.

    + the video viewport. This allows defining a rendering space template which can be filled + with either left-to-right or right-to-left cue text, or both.

    For WebVTT cues that have a size other than 100%, and a text alignment of start @@ -1339,8 +1347,9 @@ cues are the rules for updating the display of WebVTT text tracks.

    WebVTT caption or subtitle regions -

    A WebVTT region represents a subpart of the video viewport and provides a limited -rendering area for WebVTT caption or subtitle cues.

    +

    A WebVTT region represents a subpart of the video viewport and provides a +limited rendering area for WebVTT caption or subtitle +cues.

    Regions provide a means to group caption or subtitle cues so the cues can be rendered together, which is particularly important when scrolling up.

    @@ -1374,15 +1383,16 @@ together, which is particularly important when scrolling up.

    A region anchor point
    -

    Two numbers giving the x and y coordinates within the region which is anchored to the video - viewport and does not change location even when the region does, e.g. because of font size +

    Two numbers giving the x and y coordinates within the region which is anchored to the video + viewport and does not change location even when the region does, e.g. because of font size changes. Defaults to (0,100), i.e. the bottom left corner of the region.

    A region viewport anchor point
    -

    Two numbers giving the x and y coordinates within the video viewport to which the region anchor - point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video viewport.

    +

    Two numbers giving the x and y coordinates within the video viewport to which the region + anchor point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video + viewport.

    A scroll value
    @@ -1403,18 +1413,19 @@ together, which is particularly important when scrolling up.

-

The following diagram illustrates how anchoring of a region to a video viewport works. The black - cross is the anchor, orange explains the anchor's offset within the region and green the anchor's - offset within the video viewport. Think of it as sticking a pin through a note onto a board:

+

The following diagram illustrates how anchoring of a region to a video viewport works. + The black cross is the anchor, orange explains the anchor's offset within the region and green the + anchor's offset within the video viewport. Think of it as sticking a pin through a note onto + a board:

visual explanation of WebVTT regions

-

Image description: Within the video viewport, there is a WebVTT region. - Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal - distance from the video viewport's edges to the anchor is marked with green arrows, representing - the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region's - edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets. - The size of the region is represented by the region width for the horizontal axis, and region lines - for the vertical axis.

+

Image description: Within the video viewport, there is a WebVTT + region. Inside the region, there is an anchor point marked with a black cross. The vertical and + horizontal distance from the video viewport's edges to the anchor is marked with green arrows, + representing the region viewport anchor X and Y offsets. The vertical and horizontal distance from + the region's edges to the anchor is marked with orange arrows, representing the region anchor X and + Y offsets. The size of the region is represented by the region width for the horizontal axis, and + region lines for the vertical axis.

For parsing, we also need the following:

@@ -1898,8 +1909,9 @@ than once per WebVTT region settings list string.

The WebVTT region settings list gives configuration options regarding the dimensions, positioning and anchoring of the region. For example, it allows a group of cues within a -region to be anchored in the center of the region and the center of the video viewport. In this -example, when the font size grows, the region grows uniformly in all directions from the center.

+region to be anchored in the center of the region and the center of the video viewport. In +this example, when the font size grows, the region grows uniformly in all directions from the +center.

A WebVTT region identifier setting consists of the following components, in the order given:

@@ -1978,14 +1990,14 @@ order given:

The WebVTT region viewport anchor setting provides a tuple of two percentages -that specify the point within the video viewport that the region anchor point is anchored to. The -first percentage measures the x-dimension and the second percentage measures the y-dimension from -the top left corner of the video viewport box. If no region viewport anchor is given, it defaults to -0%, 100% (i.e. the bottom left corner).

+that specify the point within the video viewport that the region anchor point is anchored to. +The first percentage measures the x-dimension and the second percentage measures the y-dimension +from the top left corner of the video viewport. If no region viewport anchor is given, it +defaults to 0%, 100% (i.e. the bottom left corner).

For browsers, the region maps to an absolute positioned CSS box relative to the -video viewport, i.e. there is a relative positioned box that represents the video viewport relative -to which the regions are absolutely positioned. Overflow is hidden.

+video viewport, i.e. there is a relative positioned box that represents the video viewport +relative to which the regions are absolutely positioned. Overflow is hidden.

A WebVTT region scroll setting consists of the following components, in the order given:

@@ -1998,8 +2010,8 @@ given:

The WebVTT region scroll setting specifies whether cues rendered into the region are allowed to move out of their initial rendering place and roll up, i.e. move towards the -top of the video viewport. If the scroll setting is omitted, cues do not move from their rendered -position.

+top of the video viewport. If the scroll setting is omitted, cues do not move from their +rendered position.

Cues are added to a region one line at a time below existing cue lines. When an existing rendered cue line is removed, and it was above another already rendered cue line, that cue @@ -2063,7 +2075,7 @@ given:

  • an offset value, either:
    -
    To represent a specific offset relative to the video viewport
    +
    To represent a specific offset relative to the video viewport

    A WebVTT percentage.

    @@ -2088,17 +2100,17 @@ given:

    • -

    A WebVTT line cue setting configures the offset of the cue box from the video -viewport's edge in the direction orthogonal to the writing -direction. For horizontal cues, this is the vertical offset from the top of the video viewport, -for vertical cues, it's the horizontal offset. The offset is for the start, center, or end of the cue box, depending on the WebVTT cue line alignment value - start by default. The offset can be given either as a -percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line -numbers are based on the size of the first line of the cue. Positive line numbers count from the -start of the video viewport (the first line is numbered 0), negative line numbers from the end of -the video viewport (the last line is numbered −1).

    +

    A WebVTT line cue setting configures the offset of the cue box from the +video viewport's edge in the direction orthogonal to the writing direction. For horizontal cues, this is the vertical offset from the top of +the video viewport, for vertical cues, it's the horizontal offset. The offset is for the start, center, +or end of the cue box, depending on the WebVTT cue line +alignment value - start by default. The offset can +be given either as a percentage of the relevant writing-mode dependent video viewport +dimension or as a line number. Line numbers are based on the size of the first line of the cue. +Positive line numbers count from the start of the video viewport (the first line is numbered 0), +negative line numbers from the end of the video viewport (the last line is numbered −1).

    A WebVTT position cue setting consists of the following components, in the order given:

    @@ -2125,7 +2137,7 @@ given:

    A WebVTT position cue setting configures the indent position of the cue box in the direction orthogonal to the WebVTT line cue setting. For horizontal cues, this is the horizontal position. The cue position is given as a percentage of -the video viewport. The positioning is for the line-left, center, or line-right of the cue box, depending on the cue's computed position alignment, which is overridden by the WebVTT @@ -2143,7 +2155,7 @@ given:

    A WebVTT size cue setting configures the size of the cue box in the same direction as the WebVTT position cue setting. For horizontal cues, this is the width of the cue box. It is given as a percentage of -the width of the video viewport.

    +the width of the video viewport.

    A WebVTT alignment cue setting consists of the following components, in the order given:

    @@ -2174,7 +2186,7 @@ lt="WebVTT line cue setting">"line" or "size If a cue is part of a region, its cue settings for "position" and "align" are applied to the line boxes in the cue relative to the region box and the cue box width and height are calculated relative -to the region dimensions rather than the viewport dimensions.

    +to the region dimensions rather than the video viewport dimensions.

    Properties of cue sequences

    @@ -4225,7 +4237,7 @@ manner suiting the user.

  • Properties on |regionNode| have their values set as defined in the next section. (That section uses some of the variables whose values were calculated earlier in this algorithm.)

    • -

  • The video viewport (and initial containing block) is video's rendering area.

    • +
  • The video viewport is the initial containing block for positioning boxes.
    • @@ -4791,7 +4803,7 @@ constraints: [[!CSS22]]

  • Text runs must be wrapped according to the CSS line-wrapping rules.
    • -
  • The video viewport (and initial containing block) is |video|'s rendering area.
    • +
  • The video viewport is the initial containing block for positioning boxes.
    • diff --git a/index.html b/index.html index d041b479..4d3563c2 100644 --- a/index.html +++ b/index.html @@ -1447,7 +1447,7 @@

    WebVTT: The Web Video Text Tracks Format

    -

    Draft Community Group Report,

    +

    Draft Community Group Report,

    This version: @@ -1524,11 +1524,12 @@

    Table of Contents

    3 Data model
    1. 3.1 Overview -
    2. 3.2 WebVTT cues -
    3. 3.3 WebVTT caption or subtitle cues -
    4. 3.4 WebVTT caption or subtitle regions -
    5. 3.5 WebVTT chapter cues -
    6. 3.6 WebVTT metadata cues +
    7. 3.2 Video viewport +
    8. 3.3 WebVTT cues +
    9. 3.4 WebVTT caption or subtitle cues +
    10. 3.5 WebVTT caption or subtitle regions +
    11. 3.6 WebVTT chapter cues +
    12. 3.7 WebVTT metadata cues
  • 4 Syntax @@ -1895,9 +1896,9 @@

    • -
    - -

    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
 
 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
@@ -1910,31 +1911,27 @@ 
    
     
    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
  text the right of the box. So, independent of the directionality of the text, it will stay
  underneath that speaker. Note that "center" position alignment of the cue box is the default for
  start aligned text, in order to avoid having the box move when the base direction of the text
  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.
    
+    
    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.
    @@ -2169,16 +2166,16 @@

    3. 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.

    3.1. Overview

    This section is non-normative.

    The WebVTT file is a container file for chunks of data that are time-aligned with a video or @@ -2190,26 +2187,29 @@

    text track kind attribute of the text track element [HTML].

    A WebVTT file must only contain data of one kind, never a mix of different kinds of data. The 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.

    -

    3.2. WebVTT cues

    +

    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.

    +

    3.2. 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.

    +

    3.3. 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.

    -

    3.3. WebVTT caption or subtitle cues

    -

    A WebVTT caption or subtitle cue is a WebVTT cue that has the following +

    3.4. WebVTT caption or subtitle cues

    +

    A WebVTT caption or subtitle cue is a WebVTT cue that has the following additional properties allowing the cue text to be rendered and converted to a DOM 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.

    +

    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 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 cue line.

    @@ -2219,8 +2219,8 @@

    3.3.

    A writing direction, either

    By default, the position alignment is set to auto.

    -

    A WebVTT cue has a computed position +

    A WebVTT cue has a computed position alignment whose value is that returned by the following algorithm, which is defined in terms of other aspects of the cue:

      @@ -2480,22 +2480,23 @@

      3.3. its lines' base direction.

      A region
      -

      An optional WebVTT region to which a cue belongs.

      -

      By default, the region is set to null.

      +

      An optional WebVTT region to which a cue belongs.

      +

      By default, the region is set to null.

      -

      The associated rules for updating the text track rendering of WebVTT +

      The associated rules for updating the text track rendering of WebVTT cues are the rules for updating the display of WebVTT text tracks.

      -

      When a WebVTT cue whose active flag is set has its writing direction, snap-to-lines flag, line, line alignment, position, position alignment, size, text alignment, region, or text change value, then the user agent must empty the text track cue display state, and then +

      When a WebVTT cue whose active flag is set has its writing direction, snap-to-lines flag, line, line alignment, position, position alignment, size, text alignment, region, or text change value, then the user agent must empty the text track cue display state, and then immediately run the text track’s rules for updating the display of WebVTT text tracks.

      -

      3.4. WebVTT caption or subtitle regions

      -

      A WebVTT region represents a subpart of the video viewport and provides a limited -rendering area for WebVTT caption or subtitle cues.

      +

      3.5. WebVTT caption or subtitle regions

      +

      A WebVTT region represents a subpart of the video viewport and provides a +limited rendering area for WebVTT caption or subtitle +cues.

      Regions provide a means to group caption or subtitle cues so the cues can be rendered together, which is particularly important when scrolling up.

      -

      Each WebVTT region consists of:

      +

      Each WebVTT region consists of:

      An identifier
      @@ -2515,13 +2516,14 @@

      3. for non-scrolling regions it happens at the bottom.

      A region anchor point
      -

      Two numbers giving the x and y coordinates within the region which is anchored to the video - viewport and does not change location even when the region does, e.g. because of font size +

      Two numbers giving the x and y coordinates within the region which is anchored to the video + viewport and does not change location even when the region does, e.g. because of font size changes. Defaults to (0,100), i.e. the bottom left corner of the region.

      A region viewport anchor point
      -

      Two numbers giving the x and y coordinates within the video viewport to which the region anchor - point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video viewport.

      +

      Two numbers giving the x and y coordinates within the video viewport to which the region + anchor point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video + viewport.

      A scroll value

      One of the following:

      @@ -2536,32 +2538,33 @@

      3.

      -

      The following diagram illustrates how anchoring of a region to a video viewport works. The black - cross is the anchor, orange explains the anchor’s offset within the region and green the anchor’s - offset within the video viewport. Think of it as sticking a pin through a note onto a board:

      +

      The following diagram illustrates how anchoring of a region to a video viewport works. + The black cross is the anchor, orange explains the anchor’s offset within the region and green the + anchor’s offset within the video viewport. Think of it as sticking a pin through a note onto + a board:

      visual explanation of WebVTT regions

      -

      Image description: Within the video viewport, there is a WebVTT region. - Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal - distance from the video viewport’s edges to the anchor is marked with green arrows, representing - the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region’s - edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets. - The size of the region is represented by the region width for the horizontal axis, and region lines - for the vertical axis.

      +

      Image description: Within the video viewport, there is a WebVTT + region. Inside the region, there is an anchor point marked with a black cross. The vertical and + horizontal distance from the video viewport’s edges to the anchor is marked with green arrows, + representing the region viewport anchor X and Y offsets. The vertical and horizontal distance from + the region’s edges to the anchor is marked with orange arrows, representing the region anchor X and + Y offsets. The size of the region is represented by the region width for the horizontal axis, and + region lines for the vertical axis.

      For parsing, we also need the following:

      A text track list of regions
      -

      A list of zero or more WebVTT regions.

      +

      A list of zero or more WebVTT regions.

      -

      3.5. WebVTT chapter cues

      -

      A WebVTT chapter cue is a WebVTT cue whose cue text is interpreted as a +

      3.6. WebVTT chapter cues

      +

      A WebVTT chapter cue is a WebVTT cue whose cue text is interpreted as a chapter title that describes the chapter as a navigation target.

      Chapter cues mark up the timeline of a audio or video file in consecutive, non-overlapping intervals. It is further possible to subdivide these intervals into sub-chapters building a navigation tree.

      -

      3.6. WebVTT metadata cues

      -

      A WebVTT metadata cue is a WebVTT cue whose cue text is interpreted as +

      3.7. WebVTT metadata cues

      +

      A WebVTT metadata cue is a WebVTT cue whose cue text is interpreted as time-aligned metadata.

      4. Syntax

      4.1. WebVTT file structure

      @@ -2631,7 +2634,7 @@

      WebVTT cue identifier is any sequence of one or more characters not containing the substring "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN), nor containing any U+000A LINE FEED (LF) characters or U+000D CARRIAGE RETURN (CR) characters.

      -

      A WebVTT cue identifier must be unique amongst all the WebVTT cue identifiers of all WebVTT cues of a WebVTT +

      A WebVTT cue identifier must be unique amongst all the WebVTT cue identifiers of all WebVTT cues of a WebVTT file.

      A WebVTT cue identifier can be used to reference a specific cue, for example from script or CSS.

      @@ -2859,7 +2862,7 @@

      HTML character reference [HTML]

      4.3. WebVTT region settings

      -

      A WebVTT cue settings list can contain a reference to a WebVTT region. To define a +

      A WebVTT cue settings list can contain a reference to a WebVTT region. To define a region, a WebVTT region definition block is specified.

      The WebVTT region settings list consists of zero or more of the following components, in any order, separated from each other by one or more U+0020 SPACE characters, U+0009 CHARACTER @@ -2876,8 +2879,9 @@

      The WebVTT region settings list gives configuration options regarding the dimensions, positioning and anchoring of the region. For example, it allows a group of cues within a -region to be anchored in the center of the region and the center of the video viewport. In this -example, when the font size grows, the region grows uniformly in all directions from the center.

      +region to be anchored in the center of the region and the center of the video viewport. In +this example, when the font size grows, the region grows uniformly in all directions from the +center.

      A WebVTT region identifier setting consists of the following components, in the order given:

        @@ -2890,10 +2894,10 @@

        -->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).

      -

      A WebVTT region identifier setting must be unique amongst all the WebVTT region identifier settings of all WebVTT +

      A WebVTT region identifier setting must be unique amongst all the WebVTT region identifier settings of all WebVTT regions of a WebVTT file.

      A WebVTT region identifier setting must be present in each WebVTT cue settings -list. Without an identifier, it is not possible to associate a WebVTT cue with a WebVTT region in the syntax.

      +list. Without an identifier, it is not possible to associate a WebVTT cue with a WebVTT region in the syntax.

      The WebVTT region identifier setting gives a name to the region so it can be referenced by the cues that belong to the region.

      A WebVTT region width setting consists of the following components, in the order @@ -2955,13 +2959,12 @@

      WebVTT percentage.

    The WebVTT region viewport anchor setting provides a tuple of two percentages -that specify the point within the video viewport that the region anchor point is anchored to. The -first percentage measures the x-dimension and the second percentage measures the y-dimension from -the top left corner of the video viewport box. If no region viewport anchor is given, it defaults to -0%, 100% (i.e. the bottom left corner).

    -

    For browsers, the region maps to an absolute positioned CSS box relative to the -video viewport, i.e. there is a relative positioned box that represents the video viewport relative -to which the regions are absolutely positioned. Overflow is hidden.

    +that specify the point within the video viewport that the region anchor point is anchored to. +The first percentage measures the x-dimension and the second percentage measures the y-dimension +from the top left corner of the video viewport. If no region viewport anchor is given, it +defaults to 0%, 100% (i.e. the bottom left corner).

    +

    For browsers, the region maps to an absolute positioned CSS box relative to the video viewport, i.e. there is a relative positioned box that represents the video viewport +relative to which the regions are absolutely positioned. Overflow is hidden.

    A WebVTT region scroll setting consists of the following components, in the order given:

      @@ -2974,8 +2977,8 @@

      The WebVTT region scroll setting specifies whether cues rendered into the region are allowed to move out of their initial rendering place and roll up, i.e. move towards the -top of the video viewport. If the scroll setting is omitted, cues do not move from their rendered -position.

      +top of the video viewport. If the scroll setting is omitted, cues do not move from their +rendered position.

      Cues are added to a region one line at a time below existing cue lines. When an existing rendered cue line is removed, and it was above another already rendered cue line, that cue line moves into its space, thus scrolling in the given direction. If there is not enough space for a @@ -3028,7 +3031,7 @@

      video viewport

      A WebVTT percentage.

      Or to represent a line number @@ -3047,14 +3050,13 @@

      A WebVTT line cue setting configures the offset of the cue box from the video -viewport’s edge in the direction orthogonal to the writing -direction. For horizontal cues, this is the vertical offset from the top of the video viewport, -for vertical cues, it’s the horizontal offset. The offset is for the start, center, or end of the cue box, depending on the WebVTT cue line alignment value - start by default. The offset can be given either as a -percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line -numbers are based on the size of the first line of the cue. Positive line numbers count from the -start of the video viewport (the first line is numbered 0), negative line numbers from the end of -the video viewport (the last line is numbered −1).

      +

      A WebVTT line cue setting configures the offset of the cue box from the video viewport’s edge in the direction orthogonal to the writing direction. For horizontal cues, this is the vertical offset from the top of +the video viewport, for vertical cues, it’s the horizontal offset. The offset is for the start, center, +or end of the cue box, depending on the WebVTT cue line +alignment value - start by default. The offset can +be given either as a percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line numbers are based on the size of the first line of the cue. +Positive line numbers count from the start of the video viewport (the first line is numbered 0), +negative line numbers from the end of the video viewport (the last line is numbered −1).

      A WebVTT position cue setting consists of the following components, in the order given:

        @@ -3077,7 +3079,7 @@

        A WebVTT position cue setting configures the indent position of the cue box in the direction orthogonal to the WebVTT line cue setting. For horizontal cues, this is the horizontal position. The cue position is given as a percentage of -the video viewport. The positioning is for the line-left, center, or line-right of the cue box, depending on the cue’s computed position alignment, which is overridden by the WebVTT +the video viewport. The positioning is for the line-left, center, or line-right of the cue box, depending on the cue’s computed position alignment, which is overridden by the WebVTT position cue setting.

        A WebVTT size cue setting consists of the following components, in the order given:

        @@ -3091,7 +3093,7 @@

        A WebVTT size cue setting configures the size of the cue box in the same direction as the WebVTT position cue setting. For horizontal cues, this is the width of the cue box. It is given as a percentage of -the width of the video viewport.

        +the width of the video viewport.

        A WebVTT alignment cue setting consists of the following components, in the order given:

          @@ -3119,7 +3121,7 @@

          "vertical", "line" or "size" cue setting. If a cue is part of a region, its cue settings for "position" and "align" are applied to the line boxes in the cue relative to the region box and the cue box width and height are calculated relative -to the region dimensions rather than the viewport dimensions.

          +to the region dimensions rather than the video viewport dimensions.

          4.5. Properties of cue sequences

          4.5.1. WebVTT file using only nested cues

          A WebVTT file whose cues all follow the following rules is said to be a WebVTT file @@ -3302,7 +3304,7 @@

          6. <

          6.1. WebVTT file parsing

          A WebVTT parser, given an input byte stream, a text track list of cues output, and a collection of CSS style sheets stylesheets, must decode the byte stream using the UTF-8 decode algorithm, and then must parse the resulting -string according to the WebVTT parser algorithm below. This results in WebVTT cues being added to output, and CSS style sheets being added to stylesheets. [RFC3629]

          +string according to the WebVTT parser algorithm below. This results in WebVTT cues being added to output, and CSS style sheets being added to stylesheets. [RFC3629]

          A WebVTT parser, specifically its conversion and parsing steps, is typically run asynchronously, with the input byte stream being updated incrementally as the resource is downloaded; this is called an incremental WebVTT parser.

          @@ -3351,13 +3353,13 @@

        1. If position is past the end of input, then abort these steps. The file was successfully - processed, but it contains no useful data and so no WebVTT cues were added + processed, but it contains no useful data and so no WebVTT cues were added to output.

        2. The character indicated by position is a U+000A LINE FEED (LF) character. Advance position to the next character in input.

        3. If position is past the end of input, then abort these steps. The file was successfully - processed, but it contains no useful data and so no WebVTT cues were added + processed, but it contains no useful data and so no WebVTT cues were added to output.

        4. Header: If the character indicated by position is not a U+000A LINE FEED (LF) @@ -3373,7 +3375,7 @@

          Collect a WebVTT block, and let block be the returned value.

        5. -

          If block is a WebVTT cue, add block to the text track list of cues output.

          +

          If block is a WebVTT cue, add block to the text track list of cues output.

        6. Otherwise, if block is a CSS style sheet, add block to stylesheets.

        7. @@ -3441,7 +3443,7 @@

          Let previous position be position.

        8. -

          Cue creation: Let cue be a new WebVTT cue and initialize it as +

          Cue creation: Let cue be a new WebVTT cue and initialize it as follows:

          1. @@ -3523,7 +3525,7 @@

            , then run these substeps:

            1. -

              Region creation: Let region be a new WebVTT region.

              +

              Region creation: Let region be a new WebVTT region.

            2. Let region’s identifier be the empty string.

              @@ -3566,7 +3568,7 @@

              6.2. WebVTT region settings parsing

              When the WebVTT parser algorithm says to collect WebVTT region settings from a string input for a text track, the user agent must run the following algorithm.

              -

              A WebVTT region object is a conceptual construct to represent a WebVTT region that is used as a root node for lists of WebVTT node +

              A WebVTT region object is a conceptual construct to represent a WebVTT region that is used as a root node for lists of WebVTT node objects. This algorithm returns a list of WebVTT Region Objects.

                @@ -3675,7 +3677,7 @@

                6.3. WebVTT cue timings and settings parsing

                -

                When the algorithm above says to collect WebVTT cue timings and settings from a string input using a text track list of regions regions for a WebVTT cue cue, the user +

                When the algorithm above says to collect WebVTT cue timings and settings from a string input using a text track list of regions regions for a WebVTT cue cue, the user agent must run the following algorithm.

                1. @@ -3737,7 +3739,7 @@

                  WebVTT cue region be the last WebVTT region in regions whose WebVTT region identifier is value, if any, or null otherwise.

                  +

                  Let cue’s WebVTT cue region be the last WebVTT region in regions whose WebVTT region identifier is value, if any, or null otherwise.

                If name is a case-sensitive match for "vertical"
                @@ -4375,7 +4377,7 @@

                6.5. WebVTT cue text DOM construction rules

                -

                For the purpose of retrieving a WebVTT cue’s content via the getCueAsHTML() method of the VTTCue interface, it needs to be parsed to a DocumentFragment. This section describes how.

                +

                For the purpose of retrieving a WebVTT cue’s content via the getCueAsHTML() method of the VTTCue interface, it needs to be parsed to a DocumentFragment. This section describes how.

                To convert a list of WebVTT Node Objects to a DOM tree for Document owner, user agents must create a tree of DOM nodes that is isomorphous to the tree of WebVTT Node Objects, with the following mapping of WebVTT Node Objects to DOM nodes:

                @@ -4439,7 +4441,7 @@

                6.6. WebVTT rules for extracting the chapter title

                -

                The WebVTT rules for extracting the chapter title for a WebVTT cue cue are as +

                The WebVTT rules for extracting the chapter title for a WebVTT cue cue are as follows:

                1. @@ -4493,12 +4495,12 @@

                  For each track track in tracks, append to cues all the cues from track’s list of cues that have their text track cue active flag set.

                2. -

                  Let regions be an empty list of WebVTT regions.

                  +

                  Let regions be an empty list of WebVTT regions.

                3. -

                  For each track track in tracks, append to regions all the regions with an identifier from track’s list of +

                  For each track track in tracks, append to regions all the regions with an identifier from track’s list of regions.

                4. -

                  If reset is false, then, for each WebVTT region region in regions let regionNode be a WebVTT region object.

                  +

                  If reset is false, then, for each WebVTT region region in regions let regionNode be a WebVTT region object.

                5. Apply the following steps for each regionNode:

                    @@ -4528,14 +4530,13 @@

                    Properties on regionNode have their values set as defined in the next section. (That section uses some of the variables whose values were calculated earlier in this algorithm.)

                    -
                  1. -

                    The video viewport (and initial containing block) is video’s rendering area.

                    +
                  2. The video viewport is the initial containing block for positioning boxes.

                6. Add the CSS box box to output.

              1. -

                If reset is false, then, for each WebVTT cue cue in cues: if cue’s text track +

                If reset is false, then, for each WebVTT cue cue in cues: if cue’s text track cue display state has a set of CSS boxes, then:

                • @@ -4544,7 +4545,7 @@

                  Otherwise, add those boxes to output and remove cue from cues.

              2. -

                For each WebVTT cue cue in cues that has not yet had corresponding CSS boxes added +

                For each WebVTT cue cue in cues that has not yet had corresponding CSS boxes added to output, in text track cue order, run the following substeps:

                1. @@ -4891,7 +4892,7 @@

                  Text runs must be wrapped according to the CSS line-wrapping rules. -
                2. The video viewport (and initial containing block) is video’s rendering area. +
                3. The video viewport is the initial containing block for positioning boxes.

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

                  @@ -4912,7 +4913,7 @@

                  text-wrap property must be set to balance [CSS-TEXT-4]

                  The variables writing-mode, top, left, width, and height are the values with those -names determined by the rules for updating the display of WebVTT text tracks for the WebVTT cue from whose text the list of WebVTT Node Objects was +names determined by the rules for updating the display of WebVTT text tracks for the WebVTT cue from whose text the list of WebVTT Node Objects was constructed.

                  The text-align property on the (root) list of WebVTT Node Objects must be set to the value in the second cell of the row of the table below whose first cell is the value of the @@ -4970,7 +4971,7 @@

                  justify-content property must be set to flex-end

                  The variables width, height, top, and left are the values with those names determined by -the rules for updating the display of WebVTT text tracks for the WebVTT region from +the rules for updating the display of WebVTT text tracks for the WebVTT region from which the WebVTT region object was constructed.

                  The children of every WebVTT region object are further initialized with these CSS settings:

                  @@ -4984,7 +4985,7 @@

                  list of WebVTT Node Objects must inherit their values from the media element for which the WebVTT cue is being rendered, if any. If there is no media element (i.e. +the root list of WebVTT Node Objects must inherit their values from the media element for which the WebVTT cue is being rendered, if any. If there is no media element (i.e. if the text track is being rendered for another media playback mechanism), then inherited properties on the root list of WebVTT Node Objects and the WebVTT region objects must take their initial values.

                  If there are style sheets that apply to the media element or other playback mechanism, @@ -5234,17 +5235,17 @@

    8.2. Processing model

    -

    When a user agent is rendering one or more WebVTT cues according to the rules for updating the display of WebVTT text tracks, WebVTT Node +

    When a user agent is rendering one or more WebVTT cues according to the rules for updating the display of WebVTT text tracks, WebVTT Node Objects in the list of WebVTT Node Objects used in the rendering can be matched by certain pseudo-selectors as defined below. These selectors can begin or stop matching individual WebVTT Node Objects while a cue is being rendered, even in between applications of the rules for updating the display of WebVTT text tracks (which are only run when the set of active cues changes). User agents that support the -pseudo-element described below must dynamically update renderings accordingly. When either white-space or one of the properties corresponding to the font shorthand (including line-height) changes value, then the WebVTT cue’s text track cue display state must +pseudo-element described below must dynamically update renderings accordingly. When either white-space or one of the properties corresponding to the font shorthand (including line-height) changes value, then the WebVTT cue’s text track cue display state must be emptied and the text track’s rules for updating the text track rendering must be immediately rerun.

    Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, that element is the matched element. The pseudo-elements defined in the following sections -affect the styling of parts of WebVTT cues that are being rendered for the matched element.

    +affect the styling of parts of WebVTT cues that are being rendered for the matched element.

    If the matched element is not a video element, the pseudo-elements defined below won’t have any effect according to this specification.

    A CSS user agent that implements the text tracks model must implement the ::cue, ::cue(selector), ::cue-region and ::cue-region(selector) pseudo-elements, and the :past and :future pseudo-classes.

    @@ -5366,13 +5367,13 @@

    [SELECTORS4]

    The :past pseudo-class only matches WebVTT Node Objects that are in the past.

    A WebVTT Node Object c is in the past if, in a -pre-order, depth-first traversal of the WebVTT cue’s list of WebVTT Node Objects, +pre-order, depth-first traversal of the WebVTT cue’s list of WebVTT Node Objects, there exists a WebVTT Timestamp Object whose value is less than the current playback position of the media element that is the matched element, entirely after the WebVTT Node Object c.

    The :future pseudo-class only matches WebVTT Node Objects that are in the future.

    A WebVTT Node Object c is in the future if, in a -pre-order, depth-first traversal of the WebVTT cue’s list of WebVTT Node Objects, +pre-order, depth-first traversal of the WebVTT cue’s list of WebVTT Node Objects, there exists a WebVTT Timestamp Object whose value is greater than the current playback position of the media element that is the matched element, entirely before the WebVTT Node Object c.

    8.2.3. The ::cue-region pseudo-element

    @@ -5396,7 +5397,7 @@

    WebVTT region objects used in the rendering can be matched by the above pseudo-element. User agents that support the pseudo-element must dynamically update renderings accordingly. When either white-space or one of the properties corresponding to the font shorthand (including line-height) changes -value, then the text track cue display state of all the WebVTT cues in +value, then the text track cue display state of all the WebVTT cues in the region must be emptied and the text track’s rules for updating the text track rendering must be immediately rerun.

    9. API

    @@ -5534,7 +5535,7 @@

    The VTTCue(startTime, endTime, text) constructor, when invoked, must run the following steps:

    1. -

      Create a new WebVTT cue. Let cue be that WebVTT cue.

      +

      Create a new WebVTT cue. Let cue be that WebVTT cue.

    2. Let cue’s text track cue start time be the value of the startTime argument, interpreted as a time in seconds.

      @@ -5571,12 +5572,12 @@

      Return the VTTCue object representing cue.

    -

    The region attribute, on getting, must return the VTTRegion object representing the WebVTT cue region of the WebVTT cue that the VTTCue object +

    The region attribute, on getting, must return the VTTRegion object representing the WebVTT cue region of the WebVTT cue that the VTTCue object represents, if any; or null otherwise. On setting, the WebVTT cue region must be set to the new value.

    The vertical attribute, on getting, must return the string from the second cell of the row in the table below whose first cell is the WebVTT cue writing -direction of the WebVTT cue that the VTTCue object represents:

    +direction of the WebVTT cue that the VTTCue object represents:

    @@ -5596,18 +5597,18 @@

    On setting, the WebVTT cue writing direction must be set to the value given in the first cell of the row in the table above whose second cell is a case-sensitive match for the new value.

    -

    The snapToLines attribute, on getting, must return true if the WebVTT cue snap-to-lines flag of the WebVTT cue that the VTTCue object represents +

    The snapToLines attribute, on getting, must return true if the WebVTT cue snap-to-lines flag of the WebVTT cue that the VTTCue object represents is true; or false otherwise. On setting, the WebVTT cue snap-to-lines flag must be set to the new value.

    The line attribute, on getting, must return the WebVTT cue -line of the WebVTT cue that the VTTCue object represents. The special value auto must be represented as the string "auto". On +line of the WebVTT cue that the VTTCue object represents. The special value auto must be represented as the string "auto". On setting, the WebVTT cue line must be set to the new value; if the new value is the string "auto", then it must be interpreted as the special value auto.

    In order to be able to set the snapToLines and line attributes in any order, the API does not reject setting snapToLines to false when line has a value outside the range 0..100, or vice versa.

    The lineAlign attribute, on getting, must return the string from the second cell of the row in the table below whose first cell is the WebVTT cue line -alignment of the WebVTT cue that the VTTCue object represents:

    +alignment of the WebVTT cue that the VTTCue object represents:

    @@ -5628,13 +5629,13 @@

    case-sensitive match for the new value.

    The position attribute, on getting, must return the WebVTT cue -position of the WebVTT cue that the VTTCue object represents. The special value auto must be represented as the string "auto". +position of the WebVTT cue that the VTTCue object represents. The special value auto must be represented as the string "auto". On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT cue position must be set to the new value; if the new value is the string "auto", then it must be interpreted as the special value auto.

    The positionAlign attribute, on getting, must return the string from the second cell of the row in the table below whose first cell is the WebVTT cue position -alignment of the WebVTT cue that the VTTCue object represents:

    +alignment of the WebVTT cue that the VTTCue object represents:

    @@ -5658,11 +5659,11 @@

    case-sensitive match for the new value.

    The size attribute, on getting, must return the WebVTT cue -size of the WebVTT cue that the VTTCue object represents. On setting, if the new +size of the WebVTT cue that the VTTCue object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT cue size must be set to the new value.

    The align attribute, on getting, must return the string from the -second cell of the row in the table below whose first cell is the WebVTT cue text alignment of the WebVTT cue that the VTTCue object represents:

    +second cell of the row in the table below whose first cell is the WebVTT cue text alignment of the WebVTT cue that the VTTCue object represents:

    @@ -5689,7 +5690,7 @@

    case-sensitive match for the new value.

    The text attribute, on getting, must return the raw cue -text of the WebVTT cue that the VTTCue object represents. On setting, the cue +text of the WebVTT cue that the VTTCue object represents. On setting, the cue text must be set to the new value.

    The getCueAsHTML() method must convert the cue text to a DocumentFragment for the responsible document specified by the entry settings object by applying the WebVTT cue text DOM construction rules to the result of applying @@ -5757,7 +5758,7 @@

    1. -

      Create a new WebVTT region. Let region be that WebVTT region.

      +

      Create a new WebVTT region. Let region be that WebVTT region.

    2. Let region’s WebVTT region identifier be the empty string.

    3. @@ -5780,26 +5781,26 @@

      Return the VTTRegion object representing region.

    The id attribute, on getting, must return the WebVTT region -identifier of the WebVTT region that the VTTRegion object represents. On setting, the WebVTT region identifier must be set to the new value.

    +identifier of the WebVTT region that the VTTRegion object represents. On setting, the WebVTT region identifier must be set to the new value.

    The width attribute, on getting, must return the WebVTT -region width of the WebVTT region that the VTTRegion object represents. On setting, +region width of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region width must be set to the new value.

    The lines attribute, on getting, must return the WebVTT -region lines of the WebVTT region that the VTTRegion object represents. On setting, +region lines of the WebVTT region that the VTTRegion object represents. On setting, the WebVTT region lines must be set to the new value.

    -

    The regionAnchorX attribute, on getting, must return the WebVTT region anchor X offset of the WebVTT region that the VTTRegion object +

    The regionAnchorX attribute, on getting, must return the WebVTT region anchor X offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region anchor X distance must be set to the new value.

    -

    The regionAnchorY attribute, on getting, must return the WebVTT region anchor Y offset of the WebVTT region that the VTTRegion object +

    The regionAnchorY attribute, on getting, must return the WebVTT region anchor Y offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region anchor Y distance must be set to the new value.

    -

    The viewportAnchorX attribute, on getting, must return the WebVTT region viewport anchor X offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region viewport anchor X +

    The viewportAnchorX attribute, on getting, must return the WebVTT region viewport anchor X offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region viewport anchor X distance must be set to the new value.

    -

    The viewportAnchorY attribute, on getting, must return the WebVTT region viewport anchor Y offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region viewport anchor Y +

    The viewportAnchorY attribute, on getting, must return the WebVTT region viewport anchor Y offset of the WebVTT region that the VTTRegion object represents. On setting, if the new value is negative or greater than 100, then an IndexSizeError exception must be thrown. Otherwise, the WebVTT region viewport anchor Y distance must be set to the new value.

    The scroll attribute, on getting, must return the string from -the second cell of the row in the table below whose first cell is the WebVTT region scroll setting of the WebVTT region that the VTTRegion object represents:

    +the second cell of the row in the table below whose first cell is the WebVTT region scroll setting of the WebVTT region that the VTTRegion object represents:

    @@ -6005,14 +6006,14 @@

    consume an HTML character reference, in §6.4
  • ::cue, in §8.2.1
  • cue component class names, in §4.2.2 -
  • cue computed line, in §3.3 -
  • cue computed position, in §3.3 -
  • cue computed position alignment, in §3.3 +
  • cue computed line, in §3.4 +
  • cue computed position, in §3.4 +
  • cue computed position alignment, in §3.4
  • cue payload, in §4.1
  • ::cue-region, in §8.2.3
  • ::cue-region(selector), in §8.2.3
  • ::cue(selector), in §8.2.1 -
  • cue text, in §3.2 +
  • cue text, in §3.3
  • DirectionSetting, in §9.1
  • "end" @@ -6080,7 +6081,7 @@

    enum-value for AlignSetting, in §9.1
  • text, in §9.1 -
  • text track list of regions, in §3.4 +
  • text track list of regions, in §3.5
  • text/vtt, in §10.1
  • up, in §9.2
  • "up", in §9.2 @@ -6088,6 +6089,7 @@

    User agents that do not support CSS, in §2.1
  • User agents that support a full HTML CSS engine, in §2.1
  • vertical, in §9.1 +
  • video viewport, in §3.2
  • viewportAnchorX, in §9.2
  • viewportAnchorY, in §9.2
  • VTTCue, in §9.1 @@ -6097,55 +6099,55 @@

    WebVTT, in §1
  • WebVTT alignment cue setting, in §4.4
  • WebVTT Bold Object, in §6.4 -
  • WebVTT caption or subtitle cue, in §3.3 +
  • WebVTT caption or subtitle cue, in §3.4
  • WebVTT caption or subtitle cue components, in §4.2.2
  • WebVTT caption or subtitle cue text, in §4.2.2 -
  • WebVTT chapter cue, in §3.5 +
  • WebVTT chapter cue, in §3.6
  • WebVTT chapter title text, in §4.2.3
  • WebVTT Class Object, in §6.4
  • WebVTT comment block, in §4.1 -
  • WebVTT cue, in §3.2 -
  • WebVTT cue automatic position, in §3.3 +
  • WebVTT cue, in §3.3 +
  • WebVTT cue automatic position, in §3.4
  • WebVTT cue background box, in §7.3
  • WebVTT cue block, in §4.1
  • WebVTT cue bold span, in §4.2.2 -
  • WebVTT cue box, in §3.3 -
  • WebVTT cue center alignment, in §3.3 +
  • WebVTT cue box, in §3.4 +
  • WebVTT cue center alignment, in §3.4
  • WebVTT cue class span, in §4.2.2 -
  • WebVTT cue end alignment, in §3.3 -
  • WebVTT cue horizontal writing direction, in §3.3 +
  • WebVTT cue end alignment, in §3.4 +
  • WebVTT cue horizontal writing direction, in §3.4
  • WebVTT cue identifier, in §4.1
  • WebVTT cue internal text, in §4.2.2
  • WebVTT cue italics span, in §4.2.2
  • WebVTT cue language span, in §4.2.2 -
  • WebVTT cue left alignment, in §3.3 -
  • WebVTT cue line, in §3.3 -
  • WebVTT cue line alignment, in §3.3 -
  • WebVTT cue line automatic, in §3.3 -
  • WebVTT cue line center alignment, in §3.3 -
  • WebVTT cue line end alignment, in §3.3 -
  • WebVTT cue line start alignment, in §3.3 -
  • WebVTT cue position, in §3.3 -
  • WebVTT cue position alignment, in §3.3 -
  • WebVTT cue position automatic alignment, in §3.3 -
  • WebVTT cue position center alignment, in §3.3 -
  • WebVTT cue position line-left alignment, in §3.3 -
  • WebVTT cue position line-right alignment, in §3.3 -
  • WebVTT cue region, in §3.3 -
  • WebVTT cue right alignment, in §3.3 +
  • WebVTT cue left alignment, in §3.4 +
  • WebVTT cue line, in §3.4 +
  • WebVTT cue line alignment, in §3.4 +
  • WebVTT cue line automatic, in §3.4 +
  • WebVTT cue line center alignment, in §3.4 +
  • WebVTT cue line end alignment, in §3.4 +
  • WebVTT cue line start alignment, in §3.4 +
  • WebVTT cue position, in §3.4 +
  • WebVTT cue position alignment, in §3.4 +
  • WebVTT cue position automatic alignment, in §3.4 +
  • WebVTT cue position center alignment, in §3.4 +
  • WebVTT cue position line-left alignment, in §3.4 +
  • WebVTT cue position line-right alignment, in §3.4 +
  • WebVTT cue region, in §3.4 +
  • WebVTT cue right alignment, in §3.4
  • WebVTT cue ruby span, in §4.2.2
  • WebVTT cue ruby text span, in §4.2.2
  • WebVTT cue setting, in §4.1
  • WebVTT cue setting name, in §4.1
  • WebVTT cue settings list, in §4.1
  • WebVTT cue setting value, in §4.1 -
  • WebVTT cue size, in §3.3 -
  • WebVTT cue snap-to-lines flag, in §3.3 +
  • WebVTT cue size, in §3.4 +
  • WebVTT cue snap-to-lines flag, in §3.4
  • WebVTT cue span end tag, in §4.2.2
  • WebVTT cue span start tag, in §4.2.2
  • WebVTT cue span start tag annotation text, in §4.2.2 -
  • WebVTT cue start alignment, in §3.3 -
  • WebVTT cue text alignment, in §3.3 +
  • WebVTT cue start alignment, in §3.4 +
  • WebVTT cue text alignment, in §3.4
  • WebVTT cue text DOM construction rules, in §6.5
  • WebVTT cue text parsing rules, in §6.4
  • WebVTT cue text span, in §4.2.2 @@ -6153,10 +6155,10 @@

    WebVTT cue timestamp, in §4.2.2
  • WebVTT cue timings, in §4.1
  • WebVTT cue underline span, in §4.2.2 -
  • WebVTT cue vertical growing left writing direction, in §3.3 -
  • WebVTT cue vertical growing right writing direction, in §3.3 +
  • WebVTT cue vertical growing left writing direction, in §3.4 +
  • WebVTT cue vertical growing right writing direction, in §3.4
  • WebVTT cue voice span, in §4.2.2 -
  • WebVTT cue writing direction, in §3.3 +
  • WebVTT cue writing direction, in §3.4
  • WebVTT data state, in §6.4
  • WebVTT end tag state, in §6.4
  • WebVTT file, in §4.1 @@ -6171,7 +6173,7 @@

    WebVTT Leaf Node Object, in §6.4
  • WebVTT line cue setting, in §4.4
  • WebVTT line terminator, in §4.1 -
  • WebVTT metadata cue, in §3.6 +
  • WebVTT metadata cue, in §3.7
  • WebVTT metadata text, in §4.2.1
  • WebVTT Node Object, in §6.4
  • WebVTT Node Object’s applicable classes, in §6.4 @@ -6180,24 +6182,24 @@

    WebVTT parser algorithm, in §6.1
  • WebVTT percentage, in §4.1
  • WebVTT position cue setting, in §4.4 -
  • WebVTT region, in §3.4 -
  • WebVTT region anchor, in §3.4 +
  • WebVTT region, in §3.5 +
  • WebVTT region anchor, in §3.5
  • WebVTT region anchor setting, in §4.3
  • WebVTT region cue setting, in §4.4
  • WebVTT region definition block, in §4.1 -
  • WebVTT region identifier, in §3.4 +
  • WebVTT region identifier, in §3.5
  • WebVTT region identifier setting, in §4.3 -
  • WebVTT region lines, in §3.4 +
  • WebVTT region lines, in §3.5
  • WebVTT region lines setting, in §4.3
  • WebVTT region object, in §6.2 -
  • WebVTT region scroll, in §3.4 -
  • WebVTT region scroll none, in §3.4 +
  • WebVTT region scroll, in §3.5 +
  • WebVTT region scroll none, in §3.5
  • WebVTT region scroll setting, in §4.3 -
  • WebVTT region scroll up, in §3.4 +
  • WebVTT region scroll up, in §3.5
  • WebVTT region settings list, in §4.3 -
  • WebVTT region viewport anchor, in §3.4 +
  • WebVTT region viewport anchor, in §3.5
  • WebVTT region viewport anchor setting, in §4.3 -
  • WebVTT region width, in §3.4 +
  • WebVTT region width, in §3.5
  • WebVTT region width setting, in §4.3
  • WebVTT Ruby Object, in §6.4
  • WebVTT Ruby Text Object, in §6.4 @@ -6355,6 +6357,11 @@

    visibility
  • width +
  • + [css3-images] defines the following terms: +
  • [CSS3-RUBY] defines the following terms: +

    • 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]]

    @@ -4906,7 +4918,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|
    • diff --git a/index.html b/index.html index 4d3563c2..4045a15f 100644 --- a/index.html +++ b/index.html @@ -1447,7 +1447,7 @@

    WebVTT: The Web Video Text Tracks Format

    -

    Draft Community Group Report,

    +

    Draft Community Group Report,

    This version: @@ -2192,6 +2192,16 @@

    3.2. 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.

    +

    3.3. WebVTT cues

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

    @@ -2208,7 +2218,7 @@

    3.4.
    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 viewport or a region inside the video + 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 @@ -2219,7 +2229,7 @@

    3.4.

    A writing direction, either

    3.5. WebVTT caption or subtitle regions

    -

    A WebVTT region represents a subpart of the video viewport and provides a +

    A WebVTT region represents a subpart of the video viewport and provides a limited rendering area for WebVTT caption or subtitle cues.

    Regions provide a means to group caption or subtitle cues so the cues can be rendered @@ -2516,13 +2526,13 @@

    3. for non-scrolling regions it happens at the bottom.

    A region anchor point
    -

    Two numbers giving the x and y coordinates within the region which is anchored to the video +

    Two numbers giving the x and y coordinates within the region which is anchored to the video viewport and does not change location even when the region does, e.g. because of font size changes. Defaults to (0,100), i.e. the bottom left corner of the region.

    A region viewport anchor point
    -

    Two numbers giving the x and y coordinates within the video viewport to which the region - anchor point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video +

    Two numbers giving the x and y coordinates within the video viewport to which the region + anchor point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video viewport.

    A scroll value
    @@ -2538,12 +2548,12 @@

    3.
    -

    The following diagram illustrates how anchoring of a region to a video viewport works. +

    The following diagram illustrates how anchoring of a region to a video viewport works. The black cross is the anchor, orange explains the anchor’s offset within the region and green the - anchor’s offset within the video viewport. Think of it as sticking a pin through a note onto + anchor’s offset within the video viewport. Think of it as sticking a pin through a note onto a board:

    visual explanation of WebVTT regions

    -

    Image description: Within the video viewport, there is a WebVTT +

    Image description: Within the video viewport, there is a WebVTT region. Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal distance from the video viewport’s edges to the anchor is marked with green arrows, representing the region viewport anchor X and Y offsets. The vertical and horizontal distance from @@ -2879,7 +2889,7 @@

    The WebVTT region settings list gives configuration options regarding the dimensions, positioning and anchoring of the region. For example, it allows a group of cues within a -region to be anchored in the center of the region and the center of the video viewport. In +region to be anchored in the center of the region and the center of the video viewport. In this example, when the font size grows, the region grows uniformly in all directions from the center.

    A WebVTT region identifier setting consists of the following components, in the order @@ -2959,11 +2969,11 @@

    WebVTT percentage.

    The WebVTT region viewport anchor setting provides a tuple of two percentages -that specify the point within the video viewport that the region anchor point is anchored to. +that specify the point within the video viewport that the region anchor point is anchored to. The first percentage measures the x-dimension and the second percentage measures the y-dimension -from the top left corner of the video viewport. If no region viewport anchor is given, it +from the top left corner of the video viewport. If no region viewport anchor is given, it defaults to 0%, 100% (i.e. the bottom left corner).

    -

    For browsers, the region maps to an absolute positioned CSS box relative to the video viewport, i.e. there is a relative positioned box that represents the video viewport +

    For browsers, the region maps to an absolute positioned CSS box relative to the video viewport, i.e. there is a relative positioned box that represents the video viewport relative to which the regions are absolutely positioned. Overflow is hidden.

    A WebVTT region scroll setting consists of the following components, in the order given:

    @@ -2977,7 +2987,7 @@

    The WebVTT region scroll setting specifies whether cues rendered into the region are allowed to move out of their initial rendering place and roll up, i.e. move towards the -top of the video viewport. If the scroll setting is omitted, cues do not move from their +top of the video viewport. If the scroll setting is omitted, cues do not move from their rendered position.

    Cues are added to a region one line at a time below existing cue lines. When an existing rendered cue line is removed, and it was above another already rendered cue line, that cue @@ -3031,7 +3041,7 @@

    video viewport +
    To represent a specific offset relative to the video viewport

    A WebVTT percentage.

    Or to represent a line number @@ -3050,11 +3060,11 @@

    A WebVTT line cue setting configures the offset of the cue box from the video viewport’s edge in the direction orthogonal to the writing direction. For horizontal cues, this is the vertical offset from the top of -the video viewport, for vertical cues, it’s the horizontal offset. The offset is for the start, center, +

    A WebVTT line cue setting configures the offset of the cue box from the video viewport’s edge in the direction orthogonal to the writing direction. For horizontal cues, this is the vertical offset from the top of +the video viewport, for vertical cues, it’s the horizontal offset. The offset is for the start, center, or end of the cue box, depending on the WebVTT cue line alignment value - start by default. The offset can -be given either as a percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line numbers are based on the size of the first line of the cue. +be given either as a percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line numbers are based on the size of the first line of the cue. Positive line numbers count from the start of the video viewport (the first line is numbered 0), negative line numbers from the end of the video viewport (the last line is numbered −1).

    A WebVTT position cue setting consists of the following components, in the order @@ -3079,7 +3089,7 @@

    A WebVTT position cue setting configures the indent position of the cue box in the direction orthogonal to the WebVTT line cue setting. For horizontal cues, this is the horizontal position. The cue position is given as a percentage of -the video viewport. The positioning is for the line-left, center, or line-right of the cue box, depending on the cue’s computed position alignment, which is overridden by the WebVTT +the video viewport. The positioning is for the line-left, center, or line-right of the cue box, depending on the cue’s computed position alignment, which is overridden by the WebVTT position cue setting.

    A WebVTT size cue setting consists of the following components, in the order given:

    @@ -3093,7 +3103,7 @@

    A WebVTT size cue setting configures the size of the cue box in the same direction as the WebVTT position cue setting. For horizontal cues, this is the width of the cue box. It is given as a percentage of -the width of the video viewport.

    +the width of the video viewport.

    A WebVTT alignment cue setting consists of the following components, in the order given:

      @@ -3121,7 +3131,7 @@

      "vertical", "line" or "size" cue setting. If a cue is part of a region, its cue settings for "position" and "align" are applied to the line boxes in the cue relative to the region box and the cue box width and height are calculated relative -to the region dimensions rather than the video viewport dimensions.

      +to the region dimensions rather than the video viewport dimensions.

      4.5. Properties of cue sequences

      4.5.1. WebVTT file using only nested cues

      A WebVTT file whose cues all follow the following rules is said to be a WebVTT file @@ -4508,20 +4518,19 @@

      Prepare some variables for the application of CSS properties to regionNode as follows:

      • -

        Let regionWidth be the WebVTT region width. Let width be regionWidth vw (vw is a CSS unit). [CSS-VALUES]

        +

        Let regionWidth be the WebVTT region width. Let width be regionWidth vvw.

      • -

        Let lineHeight be 6vh (vh is a CSS unit) [CSS-VALUES] and regionHeight be - the WebVTT region lines. Let lines be lineHeight multiplied by regionHeight.

        +

        Let lineHeight be 6vvh and regionHeight be the WebVTT region lines. Let lines be lineHeight multiplied by regionHeight.

      • Let viewportAnchorX be the x dimension of the WebVTT region anchor and regionAnchorX be the x dimension of the WebVTT region anchor. Let leftOffset be regionAnchorX multiplied by width divided by 100.0. Let left be leftOffset subtracted - from viewportAnchorX vw.

        + from viewportAnchorX vvw.

      • Let viewportAnchorY be the y dimension of the WebVTT region anchor and regionAnchorY be the y dimension of the WebVTT region anchor. Let topOffset be regionAnchorY multiplied by lines divided by 100.0. Let top be topOffset subtracted - from viewportAnchorY vh.

        + from viewportAnchorY vvh.

    1. Apply the terms of the CSS specifications to regionNode within the following constraints, - thus obtaining a CSS box box positioned relative to an initial containing block:

      + thus obtaining a CSS box box positioned relative to the video viewport:

      1. No style sheets are associated with regionNode. (The regionNodes are subsequently @@ -4530,7 +4539,7 @@

        Properties on regionNode have their values set as defined in the next section. (That section uses some of the variables whose values were calculated earlier in this algorithm.)

        -
      2. The video viewport is the initial containing block for positioning boxes. +
      3. The video viewport is the containing block for positioning boxes.

    2. Add the CSS box box to output.

      @@ -4585,8 +4594,8 @@

      Let left be offset %. [CSS-VALUES]

    3. -

      Obtain a set of CSS boxes boxes positioned relative to an initial containing - block.

      +

      Obtain a set of CSS boxes boxes positioned relative to the video + viewport.

    4. If there are no line boxes in boxes, skip the remainder of these substeps for cue. The cue is ignored.

      @@ -4638,8 +4647,7 @@

      If the WebVTT cue size is less than maximum size, then let size be WebVTT cue size. Otherwise, let size be maximum size.

    5. -

      If the WebVTT cue writing direction is horizontal, then let width be size vw and height be auto. Otherwise, let width be auto and height be size vh. - (These are CSS values used by the next section to set CSS properties for the rendering; vw and vh are CSS units.) [CSS-VALUES]

      +

      If the WebVTT cue writing direction is horizontal, then let width be size vvw and height be auto. Otherwise, let width be auto and height be size vvh.

    6. Determine the value of x-position or y-position for cue as per the appropriate rules from the following list:

      @@ -4700,12 +4708,10 @@

      These are not final positions, they are merely temporary positions used to calculate box dimensions below.

    7. -

      Let left be x-position vw and top be y-position vh. (These are - CSS values used by the next section to set CSS properties for the rendering; vw and vh are - CSS units.) [CSS-VALUES]

      +

      Let left be x-position vvw and top be y-position vvh.

    8. -

      Obtain a set of CSS boxes boxes positioned relative to an initial containing - block.

      +

      Obtain a set of CSS boxes boxes positioned relative to the video + viewport.

    9. If there are no line boxes in boxes, skip the remainder of these substeps for cue. The cue is ignored.

      @@ -4892,10 +4898,10 @@

      Text runs must be wrapped according to the CSS line-wrapping rules. -
    10. The video viewport is the initial containing block for positioning boxes. +
    11. The video viewport is the containing block for positioning boxes. -

      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.

      7.4. Applying CSS properties to WebVTT Node Objects

      When following the rules for updating the display of WebVTT text tracks, user agents must set properties of WebVTT Node Objects at the CSS user agent cascade @@ -4940,7 +4946,7 @@

      Right alignment right -

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

      +

      The font shorthand property on the (root) list of WebVTT Node Objects must be set to 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]

      The background shorthand property on the WebVTT cue background box and on WebVTT Ruby Text Objects must be set to rgba(0,0,0,0.8). [CSS3-COLOR]

      @@ -4958,7 +4964,7 @@

      writing-mode property must be set to horizontal-tb
    12. the background shorthand property must be set to rgba(0,0,0,0.8)
    13. the overflow-wrap property must be set to break-word -
    14. the font shorthand property must be set to 5vh sans-serif +
    15. the font shorthand property must be set to 5vvh sans-serif
    16. the color property must be set to rgba(255,255,255,1)
    17. the overflow property must be set to hidden
    18. the width property must be set to width @@ -6096,6 +6102,8 @@

      VTTCue(startTime, endTime, text), in §9.1
    19. VTTRegion(), in §9.2
    20. VTTRegion, in §9.2 +
    21. vvh, in §3.2 +
    22. vvw, in §3.2
    23. WebVTT, in §1
    24. WebVTT alignment cue setting, in §4.4
    25. WebVTT Bold Object, in §6.4 @@ -6608,12 +6616,14 @@

      I
    26. 1.4. Other caption and subtitling features (2) (3) (4) (5) (6) (7) (8)
    27. 3. Data model (2)
    28. 3.1. Overview -
    29. 3.4. WebVTT caption or subtitle cues (2) (3) (4) -
    30. 3.5. WebVTT caption or subtitle regions (2) (3) (4) (5) (6) (7) -
    31. 4.3. WebVTT region settings (2) (3) (4) (5) -
    32. 4.4. WebVTT cue settings (2) (3) (4) (5) (6) (7) -
    33. 7.1. Processing model -
    34. 7.3. Obtaining CSS boxes +
    35. 3.2. Video viewport (2) +
    36. 3.4. WebVTT caption or subtitle cues (2) (3) (4) +
    37. 3.5. WebVTT caption or subtitle regions (2) (3) (4) (5) (6) (7) +
    38. 4.3. WebVTT region settings (2) (3) (4) (5) +
    39. 4.4. WebVTT cue settings (2) (3) (4) (5) (6) (7) +
    40. 7.1. Processing model (2) (3) +
    41. 7.2. Processing cue settings +
    42. 7.3. Obtaining CSS boxes
    43. Properties on WebVTT Node Objects have their values set as defined in the next section. (That section uses some of the variables whose values were calculated @@ -4905,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:

      @@ -4926,7 +4929,8 @@ set to ''display/ruby-text''. [[!CSS3-RUBY]]

    44. the 'max-height' property must be set to |height|
    45. the 'left' property must be set to |left|
    46. the 'top' property must be set to |top|
      47. -
    47. the 'display' property must be set to ''display/inline-flex''
      48. +
    48. the 'display' property must be set to inline-flex
    49. the 'flex-flow' property must be set to ''flex-flow/column''
    50. the 'justify-content' property must be set to ''justify-content/flex-end''
      51. diff --git a/index.html b/index.html index 4045a15f..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; +}