diff --git a/archives/2019-03-06/Overview.html b/archives/2019-03-06/Overview.html new file mode 100644 index 0000000..9d09353 --- /dev/null +++ b/archives/2019-03-06/Overview.html @@ -0,0 +1,8011 @@ + + + + + WebVTT: The Web Video Text Tracks Format + + + + + + + + + + + + + + + +
+

+

WebVTT: The Web Video Text Tracks Format

+

W3C Candidate Recommendation

+
+
+
This version: +
https://www.w3.org/TR/2018/CR-webvtt1-20180415/ +
Latest published version: +
https://www.w3.org/TR/webvtt1/ +
Editor's Draft: +
https://w3c.github.io/webvtt/ +
Previous Versions: +
+
Test Suite: +
https://github.com/web-platform-tests/wpt/tree/master/webvtt +
Editor: +
(CSIRO) +
Former Editors: +
(Opera Software AS) +
(NICTA) +
(Opera Software ASA) +
(Google) +
Participate: +
GitHub w3c/webvtt (new issue, open issues, legacy open bugs) +
Commits: +
GitHub w3c/webvtt/commits +
@webvtt +
+
+
+

Copyright © 2011-2018 W3C® (MIT, ERCIM, Keio, Beihang). +W3C liability, trademark and document use rules apply.

+
+
+
+

Abstract

+

This specification defines WebVTT, the Web Video Text Tracks format. Its main use is for marking up external text track resources in connection with the HTML <track> element. + +WebVTT files provide captions or subtitles for video content, and also text video descriptions [MAUR], chapters for content navigation, and more generally any form of metadata that is time-aligned with audio or video content.

+ +

This specification is based on the Draft Community Group Report of the +Web Media Text Tracks Community Group.

+ +
+

Status of this document

+
+ +

This section describes the status of this document at the time of its publication. Other +documents may supersede this document. A list of current W3C publications and the latest revision +of this technical report can be found in the W3C technical reports +index at https://www.w3.org/TR/.

+ +

This document was produced by the +W3C Timed Text Working Group as a Candidate +Recommendation. This document is intended to become a W3C +Recommendation. If you wish to make comments regarding this document, please send them to +public-tt@w3.org +(subscribe, +archives) with [webvtt] +at the start of your email’s subject. All comments are welcome. +W3C publishes a Candidate Recommendation to indicate +that the document is believed to be stable and to encourage implementation by the developer +community. This document will remain a Candidate Recommendation at least until 2 May 2019 +in order to ensure the opportunity for wide review.

+ +

Please see the Working Group's Implementation Report.

+ +

For this specification to exit the CR stage, at least 2 independent implementations of every +feature defined in this specification need to be documented in the implementation report. The +implementation report is based on implementer-provided test results for the +test suite. The Working +Group does not require that implementations are publicly available but encourages them to be so.

+ +
+

The following features are at-risk, and may be dropped during the CR period:

+ +
+ +

A cumulative summary of all changes applied to this version since the +WebVTT First Public Working Draft +was published is available at Changes from FPWD WebVTT.

+ +

For convenience, a complete diff between this version and the WebVTT previous Working Draft was published is found at Diff from previous Working Draft WebVTT.

+ +

Publication as a Candidate Recommendation does not imply endorsement by the +W3C Membership. This is a draft document and may be +updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this +document as other than work in progress.

+ +

This document was produced by a group operating under +the W3C Patent Policy. +W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; +that page also includes instructions for disclosing a patent. +W3C maintains a public list of any patent disclosures made in connection with the +deliverables of the group; that page also includes instructions for disclosing a patent. +An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

+ +

This document is governed by the 1 March 2019 W3C Process Document.

+ +
+ +
+

1. Introduction

+

This section is non-normative.

+

The WebVTT (Web Video Text Tracks) format is intended for marking up external text +track resources in connection with the HTML <track> element.

+

WebVTT files provide captions or subtitles for video content, and also text video descriptions [MAUR], chapters for content navigation, and more generally any form of metadata that is +time-aligned with audio or video content.

+

The majority of the current version of this specification is dedicated to describing how to use +WebVTT files for captioning or subtitling. There is minimal information about chapters and +time-aligned metadata and nothing about video descriptions at this stage.

+

In this section we provide some example WebVTT files as an introduction.

+

1.1. A simple caption file

+

This section is non-normative.

+

The main use for WebVTT files is captioning or subtitling video content. Here is a sample file +that captions an interview:

+
WEBVTT
+
+00:11.000 --> 00:13.000
+<v Roger Bingham>We are in New York City
+
+00:13.000 --> 00:16.000
+<v Roger Bingham>We’re actually at the Lucern Hotel, just down the street
+
+00:16.000 --> 00:18.000
+<v Roger Bingham>from the American Museum of Natural History
+
+00:18.000 --> 00:20.000
+<v Roger Bingham>And with me is Neil deGrasse Tyson
+
+00:20.000 --> 00:22.000
+<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
+
+00:22.000 --> 00:24.000
+<v Roger Bingham>at the AMNH.
+
+00:24.000 --> 00:26.000
+<v Roger Bingham>Thank you for walking down here.
+
+00:27.000 --> 00:30.000
+<v Roger Bingham>And I want to do a follow-up on the last conversation we did.
+
+00:30.000 --> 00:31.500 align:right size:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 align:left size:50%
+<v Neil deGrasse Tyson>Didn’t we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 align:right size:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 align:left size:50%
+<v Neil deGrasse Tyson><i>Laughs</i>
+
+00:35.500 --> 00:38.000
+<v Roger Bingham>You know I’m so excited my glasses are falling off here.
+
+

You can see that a WebVTT file in general consists of a sequence of text segments associated with +a time-interval, called a cue (definition). Beyond captioning and subtitling, +WebVTT can be used for time-aligned metadata, typically in use for delivering name-value pairs in +cues. WebVTT can also be used for delivering chapters, which helps with contextual navigation around +an audio/video file. Finally, WebVTT can be used for the delivery of text video descriptions, which +is text that describes the visual content of time-intervals and can be synthesized to speech to help +vision-impaired users understand context.

+

This version of WebVTT focuses on solving the captioning and subtitling use cases. +More specification work is possible for the other use cases. A decision on what type of use case a +WebVTT file is being used for is made by the software that is using the file. For example, if in use +with a HTML file through a <track> element, the kind attribute +defines how the WebVTT file is to be interpreted.

+

The following subsections provide an overview of some of the key features of the WebVTT file +format, particularly when in use for captioning and subtitling.

+

1.2. Caption cues with multiple lines

+

This section is non-normative.

+

Line breaks in cues are honored. User agents will also insert extra line breaks if necessary to +fit the cue in the cue’s width. In general, therefore, authors are encouraged to write cues all on +one line except when a line break is definitely necessary.

+
+ +

These captions on a public service announcement video demonstrate line breaking:

+
WEBVTT
+
+00:01.000 --> 00:04.000
+Never drink liquid nitrogen.
+
+00:05.000 --> 00:09.000
+— It will perforate your stomach.
+— You could die.
+
+00:10.000 --> 00:14.000
+The Organisation for Sample Public Service Announcements accepts no liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.
+
+

The first cue is simple, it will probably just display on one line. The second will take two + lines, one for each speaker. The third will wrap to fit the width of the video, possibly taking + multiple lines. For example, the three cues could look like this:

+
           Never drink liquid nitrogen.
+
+        — It will perforate your stomach.
+                — You could die.
+
+    The Organisation for Sample Public Service
+    Announcements accepts no liability for the
+    content of this advertisement, or for the
+     consequences of any actions taken on the
+        basis of the information provided.
+
+

If the width of the cues is smaller, the first two cues could wrap as well, as in the following + example. Note how the second cue’s explicit line break is still honored, however:

+
      Never drink
+    liquid nitrogen.
+
+  — It will perforate
+      your stomach.
+    — You could die.
+
+  The Organisation for
+  Sample Public Service
+  Announcements accepts
+  no liability for the
+     content of this
+  advertisement, or for
+   the consequences of
+  any actions taken on
+    the basis of the
+  information provided.
+
+

Also notice how the wrapping is done so as to keep the line lengths balanced.

+
+

1.3. Styling captions

+

This section is non-normative.

+

CSS style sheets that apply to an HTML page that contains a video element can +target WebVTT cues and regions in the video using the ::cue, ::cue(), ::cue-region and ::cue-region() pseudo-elements.

+
+ +

In this example, an HTML page has a CSS style sheet in a style element that + styles all cues in the video with a gradient background and a text color, as well as changing the + text color for all WebVTT Bold Objects in cues in the video.

+
<!doctype html>
+<html>
+ <head>
+  <title>Styling WebVTT cues</title>
+  <style>
+   video::cue {
+     background-image: linear-gradient(to bottom, dimgray, lightgray);
+     color: papayawhip;
+   }
+   video::cue(b) {
+     color: peachpuff;
+   }
+  </style>
+ </head>
+ <body>
+  <video controls autoplay src="video.webm">
+   <track default src="track.vtt">
+  </video>
+ </body>
+</html>
+
+
+

CSS style sheets can also be embedded in WebVTT files themselves.

+

Style blocks are placed after any headers but before the first cue, and start with the line +"STYLE". Comment blocks can be interleaved with style blocks.

+

Blank lines cannot appear in the style sheet. They can be removed or be filled with a space or a +CSS comment (e.g. /**/).

+

The string "-->" cannot be used in the style sheet. If the style sheet is wrapped in +"<!--" and "-->", then those strings can just be removed. If +"-->" appears inside a CSS string, then it can use CSS escaping e.g. +"--\>".

+
+ +

This example shows how cues can be styled with style blocks in WebVTT.

+
WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+hello
+00:00:00.000 --> 00:00:10.000
+Hello <b>world</b>.
+
+NOTE style blocks cannot appear after the first cue.
+
+
+

1.4. Other caption and subtitling features

+

This section is non-normative.

+

WebVTT also supports some less-often used features.

+
+ +

In this example, the cues have an identifier:

+
WEBVTT
+
+test
+00:00.000 --> 00:02.000
+This is a test.
+
+123
+00:00.000 --> 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --> 00:05.000
+Transcrit par Célestes™
+
+

This allows a style sheet to specifically target the cues.

+
/* style for cue: test */
+::cue(#test) { color: lime; }
+
+

Due to the syntax rules of CSS, some characters need to be escaped with CSS character escape + sequences. For example, an ID that starts with a number 0-9 needs to be escaped. The ID 123 can be represented as "\31 23" (31 refers to the Unicode code point for "1"). See Using character escapes in markup + and CSS for more information on CSS escapes.

+
/* style for cue: 123 */
+::cue(#\31 23) { color: lime; }
+/* style for cue: crédit de transcription */
+::cue(#crédit\ de\ transcription) { color: red; }
+
+
+
+ +

This example shows how classes can be used on elements, which can be helpful for localization or + maintainability of styling, and also how to indicate a language change in the cue text.

+
WEBVTT
+
+04:02.500 --> 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+
+
+
+ +

In this example, each cue says who is talking using voice spans. In the first cue, the span + specifying the speaker is also annotated with two classes, "first" and "loud". In the third cue, + there is also some italics text (not associated with a specific speaker). The last cue is annotated + with just the class "loud".

+
WEBVTT
+
+00:00.000 --> 00:02.000
+<v.first.loud Esme>It’s a blue apple tree!
+
+00:02.000 --> 00:04.000
+<v Mary>No way!
+
+00:04.000 --> 00:06.000
+<v Esme>Hee!</v> <i>laughter</i>
+
+00:06.000 --> 00:08.000
+<v.loud Mary>That’s awesome!
+
+

Notice that as a special exception, the voice spans don’t have to be closed if they cover the + entire cue text.

+

Style sheets can style these spans:

+
::cue(v[voice="Esme"]) { color: cyan }
+::cue(v[voice="Mary"]) { color: lime }
+::cue(i) { font-style: italic }
+::cue(.loud) { font-size: 2em }
+
+
+
+ +

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%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+
+

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.

+

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

+

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.

+
+
+ +

This example shows two regions containing rollup captions for two different speakers. Fred’s + cues scroll up in a region in the left half of the video, Bill’s cues scroll up in a region on the + right half of the video. Fred’s first cue disappears at 12.5sec even though it is defined until + 20sec because its region is limited to 3 lines and at 12.5sec a fourth cue appears:

+
WEBVTT
+
+REGION
+id:fred
+width:40%
+lines:3
+regionanchor:0%,100%
+viewportanchor:10%,90%
+scroll:up
+
+REGION
+id:bill
+width:40%
+lines:3
+regionanchor:100%,100%
+viewportanchor:90%,90%
+scroll:up
+
+00:00:00.000 --> 00:00:20.000 region:fred align:left
+<v Fred>Hi, my name is Fred
+
+00:00:02.500 --> 00:00:22.500 region:bill align:right
+<v Bill>Hi, I’m Bill
+
+00:00:05.000 --> 00:00:25.000 region:fred align:left
+<v Fred>Would you like to get a coffee?
+
+00:00:07.500 --> 00:00:27.500 region:bill align:right
+<v Bill>Sure! I’ve only had one today.
+
+00:00:10.000 --> 00:00:30.000 region:fred align:left
+<v Fred>This is my fourth!
+
+00:00:12.500 --> 00:00:32.500 region:fred align:left
+<v Fred>OK, let’s go.
+
+

Note that regions are only defined for horizontal cues.

+
+

1.5. Comments in WebVTT

+

This section is non-normative.

+

Comments can be included in WebVTT files.

+

Comments are just blocks that are preceded by a blank line, start with the word +"NOTE" (followed by a space or newline), and end at the first blank line.

+
+ +

Here, a one-line comment is used to note a possible problem with a cue.

+
WEBVTT
+
+00:01.000 --> 00:04.000
+Never drink liquid nitrogen.
+
+NOTE I’m not sure the timing is right on the following cue.
+
+00:05.000 --> 00:09.000
+— It will perforate your stomach.
+— You could die.
+
+
+
+ +

In this example, the author has written many comments.

+
WEBVTT
+
+NOTE
+This file was written by Jill. I hope
+you enjoy reading it. Some things to
+bear in mind:
+- I was lip-reading, so the cues may
+not be 100% accurate
+- I didn’t pay too close attention to
+when the cues should start or end.
+
+00:01.000 --> 00:04.000
+Never drink liquid nitrogen.
+
+NOTE check next cue
+
+00:05.000 --> 00:09.000
+— It will perforate your stomach.
+— You could die.
+
+NOTE end of file
+
+
+

1.6. Chapters example

+

This section is non-normative.

+

A WebVTT file can consist of chapters, which are navigation markers for the video.

+

Chapters are plain text, typically just a single line.

+
+ +

In this example, a talk is split into each slide being a chapter.

+
WEBVTT
+
+NOTE
+This is from a talk Silvia gave about WebVTT.
+
+Slide 1
+00:00:00.000 --> 00:00:10.700
+Title Slide
+
+Slide 2
+00:00:10.700 --> 00:00:47.600
+Introduction by Naomi Black
+
+Slide 3
+00:00:47.600 --> 00:01:50.100
+Impact of Captions on the Web
+
+Slide 4
+00:01:50.100 --> 00:03:33.000
+Requirements of a Video text format
+
+
+

1.7. Metadata example

+

This section is non-normative.

+

A WebVTT file can consist of time-aligned metadata.

+

Metadata can be any string and is often provided as a JSON construct.

+

Note that you cannot provide blank lines inside a metadata block, because the blank line +signifies the end of the WebVTT cue.

+
+ +

In this example, a talk is split into each slide being a chapter.

+
WEBVTT
+
+NOTE
+Thanks to http://output.jsbin.com/mugibo
+
+1
+00:00:00.100 --> 00:00:07.342
+{
+ "type": "WikipediaPage",
+ "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats"
+}
+
+2
+00:07.810 --> 00:09.221
+{
+ "type": "WikipediaPage",
+ "url" :"http://samuraipizzacats.wikia.com/wiki/Samurai_Pizza_Cats_Wiki"
+}
+
+3
+00:11.441 --> 00:14.441
+{
+ "type": "LongLat",
+ "lat" : "36.198269",
+ "long": "137.2315355"
+}
+
+
+

2. Conformance

+

All diagrams, examples, and notes in this specification are non-normative, as are all sections +explicitly marked non-normative. Everything else in this specification is normative.

+

The key words "MUST", "MUST NOT", "SHOULD", "SHOULD NOT", "MAY", and "OPTIONAL" in the normative +parts of this document are to be interpreted as described in RFC2119. The key word "OPTIONALLY" in +the normative parts of this document is to be interpreted with the same normative meaning as "MAY" +and "OPTIONAL". For readability, these words do not appear in all uppercase letters in this +specification. [RFC2119]

+

Requirements phrased in the imperative as part of algorithms (such as "strip any leading space +characters" or "return false and abort these steps") are to be interpreted with the meaning of the +key word ("must", "should", "may", etc) used in introducing the algorithm.

+

Conformance requirements phrased as algorithms or specific steps may be implemented in any +manner, so long as the end result is equivalent. (In particular, the algorithms defined in this +specification are intended to be easy to follow, and not intended to be performant.)

+

2.1. Conformance classes

+

This specification describes the conformance criteria for user agents (relevant to implementors) +and WebVTT files (relevant to authors and authoring tool implementors).

+

§4 Syntax defines what consists of a valid WebVTT file. Authors need to +follow the requirements therein, and are encouraged to use a conformance checker. §6 Parsing defines how user agents are to interpret a file labelled as text/vtt, for both valid and +invalid WebVTT files. The parsing rules are more tolerant to author errors than the syntax +allows, in order to provide for extensibility and to still render cues that have some syntax +errors.

+

For example, the parser will create two cues even if the blank line between them is +skipped. This is clearly a mistake, so a conformance checker will flag it as an error, but it is +still useful to render the cues to the user.

+

User agents fall into several (possibly overlapping) categories with different conformance +requirements.

+
+
User agents that support scripting +
+

All processing requirements in this specification apply. The user agent must also be + conforming implementations of the IDL fragments in this specification, as described in the Web IDL + specification. [WEBIDL-1]

+
User agents with no scripting support +
+

All processing requirements in this specification apply, except those in §6.5 WebVTT cue text DOM construction rules and §9 API.

+
User agents that do not support CSS +
+

All processing requirements in this specification apply, except parts of §6 Parsing that + relate to stylesheets and CSS, and all of §7 Rendering and §8 CSS extensions. The user agent + must instead only render the text inside WebVTT caption or subtitle cue text in an + appropriate manner and specifically support the color classes defined in §5 Default classes for WebVTT Caption or Subtitle Cue Components. Any + other styling instructions are optional.

+
User agents that do not support a full HTML CSS engine +
+

All processing requirements in this specification apply, including the color classes defined + in §5 Default classes for WebVTT Caption or Subtitle Cue Components. However, the user agent will need to apply the CSS related features in §6 Parsing, §7 Rendering and §8 CSS extensions in such a way that the rendered results are + equivalent to what a full CSS supporting renderer produces.

+
User agents that support a full HTML CSS engine +
+

All processing requirements in this specification apply. However, only a limited set of CSS + styles is allowed because user agents that do not support a full HTML CSS engine will need + to implement CSS functionality equivalents. User agents that support a full CSS engine must + therefore limit the CSS styles they apply for WebVTT so as to enable identical rendering without + bleeding in extra CSS styles that are beyond the WebVTT specification.

+
Conformance checkers +
+

Conformance checkers must verify that a WebVTT file conforms to the applicable + conformance criteria described in this specification. The term "validator" is equivalent to + conformance checker for the purpose of this specification.

+
Authoring tools +
+

Authoring tools must generate conforming WebVTT files. Tools that convert other formats + to WebVTT are also considered to be authoring tools.

+

When an authoring tool is used to edit a non-conforming WebVTT file, it may preserve the + conformance errors in sections of the file that were not edited during the editing session (i.e. + an editing tool is allowed to round-trip erroneous content). However, an authoring tool must not + claim that the output is conformant if errors have been so preserved.

+
+

2.2. Unicode normalization

+

Implementations of this specification must not normalize Unicode text during processing.

+

For example, a cue with an identifier consisting of the characters U+0041 LATIN +CAPITAL LETTER A followed by U+030A COMBINING RING ABOVE (a decomposed character sequence), or the +character U+212B ANGSTROM SIGN (a compatibility character), will not match a selector targeting a +cue with an ID consisting of the character U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE (a +precomposed character).

+

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

+

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 +audio resource. It can therefore be regarded as a serialisation format for time-aligned data.

+

A WebVTT file starts with a header and then contains a series of data blocks. If a data block has +a start and end time, it is called a WebVTT cue. A comment is another kind of data block.

+

Different kinds of data can be carried in WebVTT files. The HTML specification identifies +captions, subtitles, chapters, audio descriptions and metadata as data kinds and specifies which one +is being used in the text track kind attribute of the text track element [HTML51].

+

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

+

A WebVTT cue is a text track cue [HTML51] that additionally consist of the +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 +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 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.

+

Lines are wrapped within the cue box’s size if lines' lengths make this necessary.

+
A writing direction +
+

A writing direction, either

+
    +
  • horizontal (a line extends + 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 + consecutive lines displayed to the left of each other), or +
  • vertical growing right (a + line extends vertically and is offset horizontally from the video viewport’s left edge, with + consecutive lines displayed to the right of each other). +
+

The writing direction affects the + interpretation of the line, position, + and size cue settings to be interpreted with respect to either the + width or height of the video.

+

By default, the writing direction is set to to horizontal.

+

The vertical growing + left writing direction could be used for vertical Chinese, Japanese, and Korean, and the vertical growing right writing + direction could be used for vertical Mongolian.

+
A snap-to-lines flag +
+

A boolean indicating whether the line is an integer number of lines + (using the line dimensions of the first line of the cue), or whether it is a percentage of the + dimension of the video. The flag is set to true when lines are counted, and false otherwise.

+

Cues where the flag is false will be offset as requested modulo overlap avoidance if multiple + cues are in the same place.

+

By default, the snap-to-lines flag is set to + true.

+
A line +
+

The line defines positioning of the cue + 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.

+

The line is set either as a number of lines, a percentage of the + video viewport height or width, or as the special value auto, which means the offset is to depend on the other showing tracks.

+

By default, the line is set to auto.

+

If the writing direction is horizontal, then the line percentages are relative to the height of the video, otherwise to the width of the video.

+

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

+
    +
  1. +

    If the line is numeric, the WebVTT cue snap-to-lines flag of the WebVTT cue is false, and the line is negative or + greater than 100, then return 100 and abort these steps.

    +

    Although the WebVTT parser will not set the line to a number outside the range 0..100 and also set the WebVTT cue snap-to-lines + flag to false, this can happen when using the DOM API’s snapToLines and line attributes.

    +
  2. +

    If the line is numeric, return the value of the WebVTT cue + line and abort these steps. (Either the WebVTT cue snap-to-lines flag is true, so any + value, not just those in the range 0..100, is valid, or the value is in the range 0..100 and is + thus valid regardless of the value of that flag.)

    +
  3. +

    If the WebVTT cue snap-to-lines flag of the WebVTT cue is false, return the + value 100 and abort these steps. (The line is the special value auto.)

    +
  4. +

    Let cue be the WebVTT cue.

    +
  5. +

    If cue is not in a list of cues of a text + track, or if that text track is not in the list of text tracks of a media + element, return −1 and abort these steps.

    +
  6. +

    Let track be the text track whose list of + cues the cue is in.

    +
  7. +

    Let n be the number of text tracks whose text track mode is showing and that are in the media element’s list of text tracks before track.

    +
  8. +

    Increment n by one.

    +
  9. +

    Negate n.

    +
  10. +

    Return n.

    +
+

For example, if two text tracks are showing at the same time in one media element, and each text track currently has an active WebVTT cue whose line are both auto, then the first text track’s cue’s computed line will be −1 and the second will be −2.

+
A line alignment +
+

An alignment for the cue box’s line, one + of:

+
+
Start alignment +
The cue box’s top side (for horizontal cues), left side (for vertical growing right), or right side (for vertical growing left) is aligned at the line. +
Center alignment +
The cue box is centered at the line. +
End alignment +
The cue box’s bottom side (for horizontal cues), right side (for vertical growing right), or left side (for vertical growing left) is aligned at the line. +
+

By default, the line alignment is set to start.

+

The line alignment is separate from the text alignment — right-to-left vs. left-to-right cue text + does not affect the line alignment.

+
A position +
+

The position defines the indent of the cue box in the direction defined by the writing + direction.

+

The position is either a number giving the position of the cue box as a percentage value or the special value auto, which means the position is to depend on the text alignment of the cue.

+

If the cue is not within a region, the percentage value is to be + interpreted as a percentage of the video dimensions, otherwise as a percentage of the region + dimensions.

+

By default, the position is set to auto.

+

If the writing direction is horizontal, then the position percentages are relative to the width of the video, otherwise to the height of the video.

+

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

+
    +
  1. +

    If the position is numeric between 0 and 100, then return + the value of the position and abort these steps. (Otherwise, the position is the special value auto.)

    +
  2. +

    If the cue text alignment is left, return 0 and abort these steps.

    +
  3. +

    If the cue text alignment is right, return 100 and abort these steps.

    +
  4. +

    Otherwise, return 50 and abort these steps.

    +
+

Since the default value of the WebVTT cue position alignment is center, if there is no WebVTT cue text alignment setting for a cue, the WebVTT cue position defaults to 50%.

+

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.

+

For WebVTT cues that have a size other than 100%, and a text alignment of start or end, authors must not use the default auto position.

+

When the text alignment is start or end, the auto position is 50%. This is different + from left and right aligned text, where the auto position is 0% and 100%, respectively. The above requirement is present because it + can be surprising that automatic positioning doesn’t work for start or end aligned text. Since cue + text can consist of text with left-to-right base direction, or right-to-left base direction, + or both (on different lines), such automatic positioning would have unexpected results.

+
A position alignment +
+

An alignment for the cue box in the dimension of the writing direction, describing what the position is anchored to, one of:

+
+
Line-left alignment +
The cue box’s left side (for horizontal cues) or top side (otherwise) is aligned at the position. +
Center alignment +
The cue box is centered at the position. +
Line-right alignment +
The cue box’s right side (for horizontal cues) or bottom side (otherwise) is aligned at the position. +
Auto alignment +
The cue box’s alignment depends on the value of the text alignment of the cue. +
+

By default, the position alignment is set to auto.

+

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:

+
    +
  1. +

    If the WebVTT cue position alignment is not auto, then return the value of the WebVTT cue position alignment and abort + these steps.

    +
  2. +

    If the WebVTT cue text alignment is left, + return line-left and abort these + steps.

    +
  3. +

    If the WebVTT cue text alignment is right, + return line-right and abort these + steps.

    +
  4. +

    If the WebVTT cue text alignment is start, + return line-left if the base direction of the + cue text is left-to-right, line-right otherwise.

    +
  5. +

    If the WebVTT cue text alignment is end, + return line-right if the base direction of + the cue text is left-to-right, line-left otherwise.

    +
  6. +

    Otherwise, return center.

    +
+

Since the position always measures from the left + of the video (for horizontal cues) or the top + (otherwise), the WebVTT cue position alignment line-left value varies between left and top for horizontal and vertical cues.

+
A size +
+

A number giving the size of the cue box, to be interpreted as a + percentage of the video, as defined by the writing + direction.

+

By default, the WebVTT cue size is set to 100%.

+

If the writing direction is horizontal, then the size percentages are relative to the width of the video, otherwise to the height of the video.

+
A text alignment +
+

An alignment for all lines of text within the cue box, in the + dimension of the writing direction, one of:

+
+
Start alignment +
The text of each line is individually aligned towards the start side of the box, where the + start side for that line is determined by using the CSS rules for plaintext value of the unicode-bidi property. [CSS-WRITING-MODES-3] +
Center alignment +
The text is aligned centered between the box’s start and end sides. +
End alignment +
The text of each line is individually aligned towards the end side of the box, where the end + side for that line is determined by using the CSS rules for plaintext value of + the unicode-bidi property. [CSS-WRITING-MODES-3] +
Left alignment +
The text is aligned to the box’s left side (for horizontal cues) or top side (otherwise). +
Right alignment +
The text is aligned to the box’s right side (for horizontal cues) or bottom side (otherwise). +
+

By default, the text alignment is set to center.

+

The base direction of each line in a cue (which is used by the Unicode Bidirectional + Algorithm to determine the order in which to display the characters in the line) is determined by + looking up the first strong directional character in each line, using the CSS plaintext algorithm. In the occasional cases where the first strong character on + a line would produce the wrong base direction for that line, the author can use an U+200E + LEFT-TO-RIGHT MARK or U+200F RIGHT-TO-LEFT MARK character at the start of the line to correct it. [BIDI]

+
+ +

In this example, the second cue will have a right-to-left base direction, rendering as + ".I think ,يلاع". (Note that the text + below shows all characters left-to-right; a text editor would not necessarily have the same + rendering.)

+
WEBVTT
+
+00:00:07.000 --> 00:00:09.000
+What was his name again?
+
+00:00:09.000 --> 00:00:11.000
+عالي, I think.
+
+

To change that line to left-to-right base direction, start the line with an U+200E + LEFT-TO-RIGHT MARK character (it can be escaped as "&lrm;").

+
+

Where the base direction of some embedded text within a line needs to be different + from the surrounding text on that line, this can be achieved by using the paired Unicode bidi + formatting code characters.

+
+ +

In this example, assuming no bidi formatting code characters are used, the cue text is + rendered as "I’ve read the book 3 דנליונ + times!" (i.e. the "3" is on the wrong side of the book title) because of the effect + of the Unicode Bidirection Algorithm. (Again, the text below shows all characters + left-to-right.)

+
WEBVTT
+
+00:00:04.000 --> 00:00:08.000
+I’ve read the book נוילנד 3 times!
+
+

If a U+2068 FIRST STRONG ISOLATE (FSI) character was placed before the book title and a U+2069 + POP DIRECTIONAL ISOLATE (PDI) character after it, the rendering would be the intended "I’ve read the book דנליונ 3 times!". + (Those characters can be escaped as "&#x2068;" and "&#x2069;", + respectively.)

+
+

The default text alignment is center + alignment regardless of the base direction of the cue text. To make the text alignment of each + line match the base direction of the line (e.g. left for English, right for Hebrew), use start alignment, or end + alignment for the opposite alignment.

+
+ +

In this example, start alignment is used. The first + line is left-aligned because the base direction is left-to-right, and the second line is + right-aligned because the base direction is right-to-left.

+
WEBVTT
+
+00:00:00.000 --> 00:00:05.000 align:start
+Hello!
+שלום!
+
+

This would render as follows:

+
Hello!
+                                            !םולש
+
+
+

The left alignment and right alignment can be used to left-align or right-align the cue text regardless of + its lines' base direction.

+
A region +
+

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

+

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:

+
+
An identifier +
+

An arbitrary string of zero or more characters other than U+0020 SPACE or U+0009 CHARACTER + TABULATION character. The string must not contain the substring "-->" (U+002D HYPHEN-MINUS, U+002D + HYPHEN-MINUS, U+003E GREATER-THAN SIGN). Defaults to the empty string.

+
A width +
+

A number giving the width of the box within which the text of each line of the containing cues + is to be rendered, to be interpreted as a percentage of the video width. Defaults to 100.

+
A lines value +
+

A number giving the number of lines of the box within which the text of each line of the + containing cues is to be rendered. Defaults to 3.

+

Since a WebVTT region defines a fixed rendering area, a cue that has more lines + than the region allows will be clipped. For scrolling regions, the clipping happens at the top, + 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 + 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.

+
A scroll value +
+

One of the following:

+
+
None +
Indicates that the cues in the region are not to scroll and instead stay fixed at the + location they were first painted in. +
Up +
Indicates that the cues in the region will be added at the bottom of the region and push any + already displayed cues in the region up until all lines of the new cue are visible in the + region. +
+
+
+

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.

+
+

For parsing, we also need the following:

+
+
A text track list of 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 +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 +time-aligned metadata.

+

4. Syntax

+

4.1. WebVTT file structure

+

A WebVTT file must consist of a WebVTT file body encoded as UTF-8 and labeled +with the MIME type text/vtt. [RFC3629]

+

A WebVTT file body consists of the following components, in the following order:

+
    +
  1. An optional U+FEFF BYTE ORDER MARK (BOM) character. +
  2. The string "WEBVTT". +
  3. Optionally, either a U+0020 SPACE character or a U+0009 CHARACTER TABULATION (tab) character + followed by any number of characters that are not U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN + (CR) characters. +
  4. Two or more WebVTT line terminators to terminate the line + with the file magic and separate it from the rest of the body. +
  5. Zero or more WebVTT region definition blocks, WebVTT style blocks and WebVTT comment + blocks separated from each other by one or more WebVTT line + terminators. +
  6. Zero or more WebVTT line terminators. +
  7. Zero or more WebVTT cue blocks and WebVTT comment blocks separated from each other by one or more WebVTT line terminators. +
  8. Zero or more WebVTT line terminators. +
+

A WebVTT line terminator consists of one of the following:

+ +

A WebVTT region definition block consists of the following components, in the given +order:

+
    +
  1. The string "REGION" (U+0052 LATIN CAPITAL LETTER R, U+0045 LATIN CAPITAL LETTER E, + U+0047 LATIN CAPITAL LETTER G, U+0049 LATIN CAPITAL LETTER I, U+004F LATIN CAPITAL LETTER O, U+004E + LATIN CAPITAL LETTER N). +
  2. Zero or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. +
  3. A WebVTT line terminator. +
  4. A WebVTT region settings list. +
  5. A WebVTT line terminator. +
+

A WebVTT style block consists of the following components, in the given order:

+
    +
  1. The string "STYLE" (U+0053 LATIN CAPITAL LETTER S, U+0054 LATIN CAPITAL LETTER T, + U+0059 LATIN CAPITAL LETTER Y, U+004C LATIN CAPITAL LETTER L, U+0045 LATIN CAPITAL LETTER E). +
  2. Zero or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. +
  3. A WebVTT line terminator. +
  4. Any sequence of zero or more characters other than U+000A LINE FEED (LF) characters and U+000D + CARRIAGE RETURN (CR) characters, each optionally separated from the next by a WebVTT line + terminator, except that the entire resulting string must not contain the substring + "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN). The string + represents a CSS style sheet; the requirements given in the relevant CSS specifications apply. [CSS22] +
  5. A WebVTT line terminator. +
+

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

+
    +
  1. Optionally, a WebVTT cue identifier followed by a WebVTT line terminator. +
  2. WebVTT cue timings. +
  3. Optionally, one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters + followed by a WebVTT cue settings list. +
  4. A WebVTT line terminator. +
  5. The cue payload: either WebVTT caption or subtitle cue text, WebVTT + chapter title text, or WebVTT metadata text, but it must not contain the substring + "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN). +
  6. A WebVTT line terminator. +
+

A WebVTT cue block corresponds to one piece of time-aligned text or data in +the WebVTT file, for example one subtitle. The cue payload is the text or data +associated with the cue.

+

A 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 +file.

+

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

+

The WebVTT cue timings part of a WebVTT cue block consists of the following +components, in the given order:

+
    +
  1. A WebVTT timestamp representing the start time offset of the cue. The time represented + by this WebVTT timestamp must be greater than or equal to the start time offsets of all + previous cues in the file. +
  2. One or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. +
  3. The string "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN + SIGN). +
  4. One or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. +
  5. A WebVTT timestamp representing the end time offset of the cue. The time represented by + this WebVTT timestamp must be greater than the start time offset of the cue. +
+

The WebVTT cue timings give the start and end offsets of the WebVTT cue +block. Different cues can overlap. Cues are always listed ordered by their start time.

+

A WebVTT timestamp consists of the following components, in the given order:

+
    +
  1. + Optionally (required if hours is non-zero): +
      +
    1. Two or more ASCII digits, representing the hours as a base ten integer. +
    2. A U+003A COLON character (:) +
    +
  2. Two ASCII digits, representing the minutes as a base ten integer in the range + 0 ≤ minutes ≤ 59. +
  3. A U+003A COLON character (:) +
  4. Two ASCII digits, representing the seconds as a base ten integer in the range + 0 ≤ seconds ≤ 59. +
  5. A U+002E FULL STOP character (.). +
  6. Three ASCII digits, representing the thousandths of a second seconds-frac as a base + ten integer. +
+

A WebVTT timestamp is always interpreted relative to the current playback +position of the media data that the WebVTT file is to be synchronized with.

+

A WebVTT cue settings list consist of a sequence of zero or more WebVTT cue settings in any order, separated from each other by one or more U+0020 +SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. Each setting consists of the +following components, in the order given:

+
    +
  1. A WebVTT cue setting name. +
  2. An optional U+003A COLON (colon) character. +
  3. An optional WebVTT cue setting value. +
+

A WebVTT cue setting name and a WebVTT cue setting value each consist of +any sequence of one or more characters other than U+000A LINE FEED (LF) characters and - U+000D +CARRIAGE RETURN (CR) characters except that the entire resulting string must not contain the +substring "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN +SIGN).

+

A WebVTT percentage consists of the following components:

+
    +
  1. One or more ASCII digits. +
  2. + Optionally: +
      +
    1. A U+002E DOT character (.). +
    2. One or more ASCII digits. +
    +
  3. A U+0025 PERCENT SIGN character (%). +
+

When interpreted as a number, a WebVTT percentage must be in the range 0..100.

+

A WebVTT comment block consists of the following components, in the given order:

+
    +
  1. The string "NOTE". +
  2. + Optionally, the following components, in the given order: +
      +
    1. + Either: + +
    2. Any sequence of zero or more characters other than U+000A LINE FEED (LF) characters and + U+000D CARRIAGE RETURN (CR) characters, each optionally separated from the next by a WebVTT + line terminator, except that the entire resulting string must not contain the substring + "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN). +
    +
  3. A WebVTT line terminator. +
+

A WebVTT comment block is ignored by the parser.

+

4.2. Types of WebVTT cue payload

+

4.2.1. WebVTT metadata text

+

WebVTT metadata text consists of any sequence of zero or more characters other than +U+000A LINE FEED (LF) characters and U+000D CARRIAGE RETURN (CR) characters, each optionally +separated from the next by a WebVTT line terminator. (In other words, any text that does not +have two consecutive WebVTT line terminators and does not start +or end with a WebVTT line terminator.)

+

WebVTT metadata text cues are only useful for scripted applications (e.g. using the metadata text track kind in a HTML text track).

+

4.2.2. WebVTT caption or subtitle cue text

+

WebVTT caption or subtitle cue text is cue payload that consists of zero or +more WebVTT caption or subtitle cue components, in any order, each optionally separated from +the next by a WebVTT line terminator.

+

The WebVTT caption or subtitle cue components are:

+ +

All WebVTT caption or subtitle cue components bar the HTML character reference may have +one or more cue component class names attached to it by separating the cue component +class name from the cue component start tag using the period ('.') notation. The class name must +immediately follow the "period" (.).

+

WebVTT cue internal text consists of an optional WebVTT line terminator, +followed by zero or more WebVTT caption or subtitle cue components, in any order, each +optionally followed by a WebVTT line terminator.

+

A WebVTT cue class span consists of a WebVTT cue span start tag "c" that disallows an annotation, WebVTT cue internal text representing cue +text, and a WebVTT cue span end tag "c".

+

A WebVTT cue italics span consists of a WebVTT cue span start tag "i" that disallows an annotation, WebVTT cue internal text representing the +italicized text, and a WebVTT cue span end tag "i".

+

A WebVTT cue bold span consists of a WebVTT cue span start tag "b" +that disallows an annotation, WebVTT cue internal text representing the boldened text, and a WebVTT cue span end tag "b".

+

A WebVTT cue underline span consists of a WebVTT cue span start tag "u" that disallows an annotation, WebVTT cue internal text representing the +underlined text, and a WebVTT cue span end tag "u".

+

A WebVTT cue ruby span consists of the following components, in the order given:

+
    +
  1. A WebVTT cue span start tag "ruby" that disallows an annotation. +
  2. + One or more occurrences of the following group of components, in the order given: +
      +
    1. WebVTT cue internal text, representing the ruby base. +
    2. A WebVTT cue span start tag "rt" that disallows an annotation. +
    3. A WebVTT cue ruby text span: WebVTT cue internal text, representing the + ruby text component of the ruby annotation. +
    4. A WebVTT cue span end tag "rt". If this is the last occurrence of this + group of components in the WebVTT cue ruby span, then this last end tag string may be + omitted. +
    +
  3. If the last end tag string was not omitted: Optionally, a WebVTT line terminator. +
  4. If the last end tag string was not omitted: Zero or more U+0020 SPACE characters or U+0009 + CHARACTER TABULATION (tab) characters, each optionally followed by a WebVTT line + terminator. +
  5. A WebVTT cue span end tag "ruby". +
+

Cue positioning controls the positioning of the baseline text, not the ruby +text.

+

Ruby in WebVTT is a subset of the ruby features in HTML. This might be extended in +the future to also support an object for ruby base text as well as complex ruby, when these features +are more mature in HTML and CSS. [HTML51] [CSS3-RUBY]

+

A WebVTT cue voice span consists of the following components, in the order given:

+
    +
  1. A WebVTT cue span start tag "v" that requires an annotation; the annotation + represents the name of the voice. +
  2. WebVTT cue internal text. +
  3. A WebVTT cue span end tag "v". If this WebVTT cue voice span is the + only component of its WebVTT caption or + subtitle cue text sequence, then the end tag may be omitted for brevity. +
+

A WebVTT cue language span consists of the following components, in the order +given:

+
    +
  1. A WebVTT cue span start tag "lang" that requires an annotation; the + annotation represents the language of the following component, and must be a valid BCP 47 language + tag. [BCP47] +
  2. WebVTT cue internal text. +
  3. A WebVTT cue span end tag "lang". +
+

The requirement above regarding valid BCP 47 language tag is an authoring requirement, +so a conformance checker will do validity checking of the language tag, but other user agents will +not.

+

A WebVTT cue span start tag has a tag name and either +requires or disallows an annotation, and consists of the following components, in the order +given:

+
    +
  1. A U+003C LESS-THAN SIGN character (<). +
  2. The tag name. +
  3. + Zero or more occurrences of the following sequence: +
      +
    1. U+002E FULL STOP character (.) +
    2. One or more characters other than U+0009 CHARACTER TABULATION (tab) characters, U+000A LINE + FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0020 SPACE characters, U+0026 + AMPERSAND characters (&), U+003C LESS-THAN SIGN characters (<), U+003E GREATER-THAN SIGN + characters (>), and U+002E FULL STOP characters (.), representing a class that describes the cue + span’s significance. +
    +
  4. +

    If the start tag requires an annotation: a U+0020 SPACE character or a U+0009 CHARACTER + TABULATION (tab) character, followed by one or more of the following components, the concatenation + of their representations having a value that contains at least one character other than U+0020 + SPACE and U+0009 CHARACTER TABULATION (tab) characters:

    + +
  5. A U+003E GREATER-THAN SIGN character (>). +
+

A WebVTT cue span end tag has a tag name and consists of the following components, +in the order given:

+
    +
  1. A U+003C LESS-THAN SIGN character (<). +
  2. U+002F SOLIDUS character (/). +
  3. The tag name. +
  4. A U+003E GREATER-THAN SIGN character (>). +
+

A WebVTT cue timestamp consists of a U+003C LESS-THAN SIGN character (<), followed +by a WebVTT timestamp representing the time that the given point in the cue becomes active, +followed by a U+003E GREATER-THAN SIGN character (>). The time represented by the WebVTT +timestamp must be greater than the times represented by any previous WebVTT cue timestamps in the cue, as well as greater than the cue’s start time +offset, and less than the cue’s end time offset.

+

A WebVTT cue text span consists of one or more characters other than U+000A LINE FEED +(LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND characters (&), and +U+003C LESS-THAN SIGN characters (<).

+

WebVTT cue span start tag annotation text consists of one or more characters other +than U+000A LINE FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND +characters (&), and U+003E GREATER-THAN SIGN characters (>).

+

4.2.3. WebVTT chapter title text

+

WebVTT chapter title text is cue text that makes use of zero or more of the +following components, each optionally separated from the next by a WebVTT line +terminator:

+ +

4.3. WebVTT region settings

+

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 +TABULATION (tab) characters, or WebVTT line terminators, except that the string must not +contain two consecutive WebVTT line terminators. Each component must not be included more +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.

+

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

+
    +
  1. +

    The string "id".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    An arbitrary string of one or more characters other than ASCII whitespace. The string + must not contain the substring "-->" (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 +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.

+

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 +given:

+
    +
  1. +

    The string "width".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    A WebVTT percentage.

    +
+

The WebVTT region width setting provides a fixed width as a percentage of the +video width for the region into which cues are rendered and based on which alignment is +calculated.

+

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

+
    +
  1. +

    The string "lines".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    One or more ASCII digits.

    +
+

The WebVTT region lines setting provides a fixed height as a number of lines +for the region into which cues are rendered. As such, it defines the height of the roll-up region if +it is a scroll region.

+

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

+
    +
  1. +

    The string "regionanchor".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    A WebVTT percentage.

    +
  4. +

    A U+002C COMMA character (,).

    +
  5. +

    A WebVTT percentage.

    +
+

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

+

A WebVTT region viewport anchor setting consists of the following components, in the +order given:

+
    +
  1. +

    The string "viewportanchor".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    A WebVTT percentage.

    +
  4. +

    A U+002C COMMA character (,).

    +
  5. +

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

+

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

+
    +
  1. +

    The string "scroll".

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    The string "up".

    +
+

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.

+

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 +new cue line to be added to a region, the top-most cue line is pushed off the visible region (thus +slowly becoming invisible as it moves into overflow:hidden). This eventually makes space for the new +cue line and allows it to be added.

+

When there is no scroll direction, cue lines are added in the empty line closest to +the line in the bottom of the region. If no empty line is available, the oldest line is +replaced.

+

4.4. WebVTT cue settings

+

A WebVTT cue setting is part of a WebVTT cue settings list and provides +configuration options regarding the position and alignment of the cue box and the cue text +within.

+

For example, a set of WebVTT cue settings may allow a cue box to be aligned to the +left or positioned at the top right with the cue text within center aligned.

+

The current available WebVTT cue settings that may appear in a WebVTT cue settings +list are:

+ +

Each of these setting must not be included more than once per WebVTT cue settings +list.

+

A WebVTT vertical text cue setting is a WebVTT cue setting that consists of the +following components, in the order given:

+
    +
  1. The string "vertical" as the WebVTT cue setting name. +
  2. +

    A U+003A COLON character (:).

    +
  3. One of the following strings as the WebVTT cue setting value: "rl", + "lr". +
+

A WebVTT vertical text cue setting configures the cue to use vertical text +layout rather than horizontal text layout. Vertical text layout is sometimes used in Japanese, for +example. The default is horizontal layout.

+

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

+
    +
  1. +

    The string "line" as the WebVTT cue setting name.

    +
  2. +

    A U+003A COLON character (:).

    +
  3. + As the WebVTT cue setting value: +
      +
    1. + an offset value, either: +
      +
      To represent a specific offset relative to the video viewport +
      +

      A WebVTT percentage.

      +
      Or to represent a line number +
      +
        +
      1. Optionally a U+002D HYPHEN-MINUS character (-). +
      2. One or more ASCII digits. +
      +
      +
    2. + An optional alignment value consisting of the following components: +
        +
      1. A U+002C COMMA character (,). +
      2. One of the following strings: "start", "center", + "end" +
      +
    +
+

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:

+
    +
  1. +

    The string "position" as the WebVTT cue setting name.

    +
  2. +

    A U+003A COLON character (:).

    +
  3. + As the WebVTT cue setting value: +
      +
    1. a position value consisting of: a WebVTT percentage. +
    2. + an optional alignment value consisting of: +
        +
      1. A U+002C COMMA character (,). +
      2. One of the following strings: "line-left", "center", + "line-right" +
      +
    +
+

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 +position cue setting.

+

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

+
    +
  1. +

    The string "size" as the WebVTT cue setting name.

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    As the WebVTT cue setting value: a WebVTT percentage.

    +
+

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.

+

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

+
    +
  1. +

    The string "align" as the WebVTT cue setting name.

    +
  2. +

    A U+003A COLON character (:).

    +
  3. One of the following strings as the WebVTT cue setting value: "start", + "center", "end", "left", "right" +
+

A WebVTT alignment cue setting configures the alignment of the text within +the cue. The "start" and "end" keywords are relative to the cue text’s +lines' base direction; for left-to-right English text, "start" means left-aligned.

+

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

+
    +
  1. +

    The string "region" as the WebVTT cue setting name.

    +
  2. +

    A U+003A COLON character (:).

    +
  3. +

    As the WebVTT cue setting value: a WebVTT region identifier.

    +
+

A WebVTT region cue setting configures a cue to become part of a region by referencing the +region’s identifier unless the cue has a "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.

+

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 +using only nested cues:

+

given any two cues cue1 and cue2 with start and end time offsets (x1, y1) and (x2, y2) respectively,

+ +
+ +

The following example matches this definition:

+
WEBVTT
+
+00:00.000 --> 01:24.000
+Introduction
+
+00:00.000 --> 00:44.000
+Topics
+
+00:44.000 --> 01:19.000
+Presenters
+
+01:24.000 --> 05:00.000
+Scrolling Effects
+
+01:35.000 --> 03:00.000
+Achim’s Demo
+
+03:00.000 --> 05:00.000
+Timeline Panel
+
+

Notice how you can express the cues in this WebVTT file as a tree structure:

+ +

If the file has cues that can’t be expressed in this fashion, then they don’t match the + definition of a WebVTT file using only nested cues. For example:

+
WEBVTT
+
+00:00.000 --> 01:00.000
+The First Minute
+
+00:30.000 --> 01:30.000
+The Final Minute
+
+

In this ninety-second example, the two cues partly overlap, with the first ending before the + second ends and the second starting before the first ends. This therefore is not a WebVTT file + using only nested cues.

+
+

4.6. Types of WebVTT files

+

The syntax definition of WebVTT files allows authoring of a wide variety of WebVTT files with a +mix of cues. However, only a small subset of WebVTT file types are typically authored.

+

Conformance checkers, when validating WebVTT files, may offer to restrict syntax checking +for validating these types.

+

4.6.1. WebVTT file using metadata content

+

A WebVTT file whose cues all have a cue payload that is WebVTT metadata text is said to be a WebVTT file using metadata content.

+

4.6.2. WebVTT file using chapter title text

+

A WebVTT file using chapter title text is a WebVTT file using only nested cues whose cues all have a cue payload that is WebVTT chapter title text.

+

4.6.3. WebVTT file using caption or subtitle cue text

+

A WebVTT file whose cues all have a cue payload that is WebVTT caption or +subtitle cue text is said to be a WebVTT file using caption or subtitle cue text.

+

5. Default classes for WebVTT Caption or Subtitle Cue Components

+

Many captioning formats have simple ways of specifying a limited subset of text colors and +background colors for text. Therefore, the WebVTT spec makes available a set of default cue +component class names for WebVTT caption or subtitle cue components that authors can use +in a standard way to mark up colored text and text background.

+

User agents that support CSS style sheets may implement this section through adding +User Agent stylesheets.

+

5.1. Default text colors

+

WebVTT caption or subtitle cue components that have one or more class names matching those in the first cell of a row in the table below must set their color property as presentational hints to the value in the second cell of the +row:

+ + + + + + + + + + + + +
class names + color value +
white + rgba(255,255,255,1) +
lime + rgba(0,255,0,1) +
cyan + rgba(0,255,255,1) +
red + rgba(255,0,0,1) +
yellow + rgba(255,255,0,1) +
magenta + rgba(255,0,255,1) +
blue + rgba(0,0,255,1) +
black + rgba(0,0,0,1) +
+

If your background is captioning, don’t get confused: The color for the class lime is what has traditionally been used in captioning under the name green (e.g. +608/708).

+

Do not use the classes blue and black on the default dark +background, since they result in unreadable text. In general, please refer to WCAG for guidance on +color contrast [WCAG20] and make sure to take into account the text color, background color and +also the video’s color.

+

5.2. Default text background colors

+

WebVTT caption or subtitle cue components that have one or more class names matching those in the first cell of a row in the table below must set their background-color property as presentational hints to the value in the second cell +of the row:

+ + + + + + + + + + + + +
class names + background value +
bg_white + rgba(255,255,255,1) +
bg_lime + rgba(0,255,0,1) +
bg_cyan + rgba(0,255,255,1) +
bg_red + rgba(255,0,0,1) +
bg_yellow + rgba(255,255,0,1) +
bg_magenta + rgba(255,0,255,1) +
bg_blue + rgba(0,0,255,1) +
bg_black + rgba(0,0,0,1) +
+

The color for the class bg_lime is what has traditionally been used in +captioning under the name green (e.g. 608/708).

+

For the purpose of determining the cascade of the color and background +classes, the order of appearance determines the cascade of the classes.

+
+ +

This example shows how to use the classes.

+
WEBVTT
+
+02:00.000 --> 02:05.000
+<c.yellow.bg_blue>This is yellow text on a blue background</c>
+
+04:00.000 --> 04:05.000
+<c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background</c>
+
+
+

Default classes can be changed by authors, e.g. ::cue(.yellow) {color:cyan} would +change all .yellow classed text to cyan.

+

6. Parsing

+

WebVTT file parsing is the same for all types of WebVTT files, including captions, subtitles, +chapters, or metadata. Most of the steps will be skipped for chapters or metadata files.

+

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]

+

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.

+

A WebVTT parser verifies a file signature before parsing the provided byte stream. If the +stream lacks this WebVTT file signature, then the parser aborts.

+

The WebVTT parser algorithm is as follows:

+
    +
  1. +

    Let input be the string being parsed, after conversion to Unicode, and with the following + transformations applied:

    +
      +
    • +

      Replace all U+0000 NULL characters by U+FFFD REPLACEMENT CHARACTERs.

      +
    • +

      Replace each U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair by a single + U+000A LINE FEED (LF) character.

      +
    • +

      Replace all remaining U+000D CARRIAGE RETURN characters by U+000A LINE FEED (LF) + characters.

      +
    +
  2. +

    Let position be a pointer into input, initially pointing at the start of the string. In + an incremental WebVTT parser, when this algorithm (or further algorithms that it uses) moves + the position pointer, the user agent must wait until appropriate further characters from the byte + stream have been added to input before moving the pointer, so that the algorithm never reads past + the end of the input string. Once the byte stream has ended, and all characters have been added + to input, then the position pointer may, when so instructed by the algorithms, be moved past + the end of input.

    +
  3. Let seen cue be false. +
  4. +

    If input is less than six characters long, then abort these steps. The file does not start + with the correct WebVTT file signature and was therefore not successfully + processed.

    +
  5. +

    If input is exactly six characters long but does not exactly equal "WEBVTT", + then abort these steps. The file does not start with the correct WebVTT file signature and + was therefore not successfully processed.

    +
  6. +

    If input is more than six characters long but the first six characters do not exactly + equal "WEBVTT", or the seventh character is not a U+0020 SPACE character, a U+0009 + CHARACTER TABULATION (tab) character, or a U+000A LINE FEED (LF) character, then abort these steps. + The file does not start with the correct WebVTT file signature and was therefore not + successfully processed.

    +
  7. +

    collect a sequence of code points that are not U+000A LINE FEED (LF) + characters.

    +
  8. +

    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 + to output.

    +
  9. +

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

    +
  10. +

    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 + to output.

    +
  11. +

    Header: If the character indicated by position is not a U+000A LINE FEED (LF) + character, then collect a WebVTT block with the in header flag set. Otherwise, + advance position to the next character in input.

    +
  12. +

    collect a sequence of code points that are U+000A LINE FEED (LF) characters.

    +
  13. +

    Let regions be an empty text track list of regions.

    +
  14. +

    Block loop: While position doesn’t point past the end of input:

    +
      +
    1. +

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

      +
    2. +

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

      +
    3. +

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

      +
    4. +

      Otherwise, if block is a WebVTT region object, add block to regions.

      +
    5. +

      collect a sequence of code points that are U+000A LINE FEED (LF) + characters.

      +
    +
  15. +

    End: The file has ended. Abort these steps. The WebVTT parser has finished. + The file was successfully processed.

    +
+

When the algorithm above says to collect a WebVTT block, optionally with a flag in +header set, the user agent must run the following steps:

+
    +
  1. +

    Let input, position, seen cue and regions be the same variables as those of the same + name in the algorithm that invoked these steps.

    +
  2. +

    Let line count be zero.

    +
  3. +

    Let previous position be position.

    +
  4. +

    Let line be the empty string.

    +
  5. +

    Let buffer be the empty string.

    +
  6. +

    Let seen EOF be false.

    +
  7. +

    Let seen arrow be false.

    +
  8. +

    Let cue be null.

    +
  9. +

    Let stylesheet be null.

    +
  10. +

    Let region be null.

    +
  11. +

    Loop: Run these substeps in a loop:

    +
      +
    1. +

      collect a sequence of code points that are not U+000A LINE FEED (LF) + characters. Let line be those characters, if any.

      +
    2. +

      Increment line count by 1.

      +
    3. +

      If position is past the end of input, let seen EOF be true. Otherwise, the character + indicated by position is a U+000A LINE FEED (LF) character; advance position to the next + character in input.

      +
    4. +

      If line contains the three-character substring "-->" (U+002D HYPHEN-MINUS, + U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then run these substeps:

      +
        +
      1. +

        If in header is not set and at least one of the following conditions are true:

        +
          +
        • +

          line count is 1

          +
        • +

          line count is 2 and seen arrow is false

          +
        +

        ...then run these substeps:

        +
          +
        1. +

          Let seen arrow be true.

          +
        2. +

          Let previous position be position.

          +
        3. +

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

          +
            +
          1. +

            Let cue’s text track cue identifier be buffer.

            +
          2. +

            Let cue’s text track cue pause-on-exit flag be false.

            +
          3. +

            Let cue’s WebVTT cue region be null.

            +
          4. +

            Let cue’s WebVTT cue writing direction be horizontal.

            +
          5. +

            Let cue’s WebVTT cue snap-to-lines flag be true.

            +
          6. +

            Let cue’s WebVTT cue line be auto.

            +
          7. +

            Let cue’s WebVTT cue line alignment be start alignment.

            +
          8. +

            Let cue’s WebVTT cue position be auto.

            +
          9. +

            Let cue’s WebVTT cue position alignment be auto.

            +
          10. +

            Let cue’s WebVTT cue size be 100.

            +
          11. +

            Let cue’s WebVTT cue text alignment be center alignment.

            +
          12. +

            Let cue’s cue text be the empty string.

            +
          +
        4. +

          Collect WebVTT cue timings and settings from line using regions for cue. + If that fails, let cue be null. Otherwise, let buffer be the empty string and let seen + cue be true.

          +
        +

        Otherwise, let position be previous position and break out of loop.

        +
      +
    5. +

      Otherwise, if line is the empty string, break out of loop.

      +
    6. +

      Otherwise, run these substeps:

      +
        +
      1. +

        If in header is not set and line count is 2, run these substeps:

        +
          +
        1. +

          If seen cue is false and buffer starts with the substring "STYLE" + (U+0053 LATIN CAPITAL LETTER S, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER + Y, U+004C LATIN CAPITAL LETTER L, U+0045 LATIN CAPITAL LETTER E), and the remaining + characters in buffer (if any) are all ASCII whitespace, then run these + substeps:

          +
            +
          1. +

            Let stylesheet be the result of creating + a CSS style sheet, with the following properties: [CSSOM]

            +
            +
            location +
            null +
            parent CSS style sheet +
            null +
            owner node +
            null +
            owner CSS rule +
            null +
            media +
            The empty string. +
            title +
            The empty string. +
            alternate flag +
            Unset. +
            origin-clean flag +
            Set. +
            +
          2. +

            Let buffer be the empty string.

            +
          +
        2. +

          Otherwise, if seen cue is false and buffer starts with the substring + "REGION" (U+0052 LATIN CAPITAL LETTER R, U+0045 LATIN CAPITAL LETTER E, U+0047 + LATIN CAPITAL LETTER G, U+0049 LATIN CAPITAL LETTER I, U+004F LATIN CAPITAL LETTER O, U+004E + LATIN CAPITAL LETTER N), and the remaining characters in buffer (if any) are all ASCII + whitespace, then run these substeps:

          +
            +
          1. +

            Region creation: Let region be a new WebVTT region.

            +
          2. +

            Let region’s identifier be the empty + string.

            +
          3. +

            Let region’s width be 100.

            +
          4. +

            Let region’s lines be 3.

            +
          5. +

            Let region’s anchor point be (0,100).

            +
          6. +

            Let region’s viewport anchor point be + (0,100).

            +
          7. +

            Let region’s scroll value be none.

            +
          8. +

            Let buffer be the empty string.

            +
          +
        +
      2. +

        If buffer is not the empty string, append a U+000A LINE FEED (LF) character to buffer.

        +
      3. +

        Append line to buffer.

        +
      4. +

        Let previous position be position.

        +
      +
    7. +

      If seen EOF is true, break out of loop.

      +
    +
  12. +

    If cue is not null, let the cue text of cue be buffer, and return cue.

    +
  13. +

    Otherwise, if stylesheet is not null, then Parse a stylesheet from buffer. If it returned a list of rules, assign the list as stylesheet’s CSS rules; otherwise, set stylesheet’s CSS + rules to an empty list. [CSSOM] [CSS-SYNTAX-3] Finally, return stylesheet.

    +
  14. +

    Otherwise, if region is not null, then collect WebVTT region settings from buffer using region for the results. Construct a WebVTT Region Object from region, and return + it.

    +
  15. +

    Otherwise, return null.

    +
+

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 +objects. This algorithm returns a list of WebVTT Region +Objects.

+
    +
  1. +

    Let settings be the result of splitting input on + spaces.

    +
  2. + For each token setting in the list settings, run the following substeps: +
      +
    1. +

      If setting does not contain a U+003A COLON character (:), or if the first U+003A COLON + character (:) in setting is either the first or last character of setting, then jump to the + step labeled next setting.

      +
    2. +

      Let name be the leading substring of setting up to and excluding the first U+003A + COLON character (:) in that string.

      +
    3. +

      Let value be the trailing substring of setting starting from the character immediately + after the first U+003A COLON character (:) in that string.

      +
    4. +

      Run the appropriate substeps that apply for the value of name, as follows:

      +
      +
      +

      If name is a case-sensitive match for "id"

      +
      +

      Let region’s identifier be value.

      +
      +

      Otherwise if name is a case-sensitive match for "width"

      +
      +

      If parse a percentage string from value returns a percentage, let region’s WebVTT region width be percentage.

      +
      Otherwise if name is a case-sensitive match for "lines" +
      +
        +
      1. +

        If value contains any characters other than ASCII digits, then jump to the + step labeled next setting.

        +
      2. +

        Interpret value as an integer, and let number be that number.

        +
      3. +

        Let region’s WebVTT region lines be number.

        +
      +
      Otherwise if name is a case-sensitive match for "regionanchor" +
      +
        +
      1. +

        If value does not contain a U+002C COMMA character (,), then jump to the step + labeled next setting.

        +
      2. +

        Let anchorX be the leading substring of value up to and excluding the first U+002C + COMMA character (,) in that string.

        +
      3. +

        Let anchorY be the trailing substring of value starting from the character + immediately after the first U+002C COMMA character (,) in that string.

        +
      4. +

        If parse a percentage string from anchorX or parse a percentage string from anchorY don’t return a percentage, then jump to the step labeled next + setting.

        +
      5. +

        Let region’s WebVTT region anchor point be the + tuple of the percentage values calculated from anchorX and anchorY.

        +
      +
      Otherwise if name is a case-sensitive match for "viewportanchor" +
      +
        +
      1. +

        If value does not contain a U+002C COMMA character (,), then jump to the step + labeled next setting.

        +
      2. +

        Let viewportanchorX be the leading substring of value up to and excluding the + first U+002C COMMA character (,) in that string.

        +
      3. +

        Let viewportanchorY be the trailing substring of value starting from the character + immediately after the first U+002C COMMA character (,) in that string.

        +
      4. +

        If parse a percentage string from viewportanchorX or parse a percentage + string from viewportanchorY don’t return a percentage, then jump to the step labeled next setting.

        +
      5. +

        Let region’s WebVTT region viewport anchor + point be the tuple of the percentage values calculated from viewportanchorX and viewportanchorY.

        +
      +
      Otherwise if name is a case-sensitive match for "scroll" +
      +
        +
      1. +

        If value is a case-sensitive match for the string "up", then let region’s scroll value be up.

        +
      +
      +
    5. Next setting: Continue to the next setting, if any. +
    +
+

The rules to parse a percentage string are as follows. This will return either a +number in the range 0..100, or nothing. If at any point the algorithm says that it "fails", this +means that it is aborted at that point and returns nothing.

+
    +
  1. +

    Let input be the string being parsed.

    +
  2. +

    If input does not match the syntax for a WebVTT percentage, then fail.

    +
  3. +

    Remove the last character from input.

    +
  4. +

    Let percentage be the result of parsing input using the rules for parsing + floating-point number values. [HTML51]

    +
  5. +

    If percentage is an error, is less than 0, or is greater than 100, then fail.

    +
  6. +

    Return percentage.

    +
+

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 +agent must run the following algorithm.

+
    +
  1. +

    Let input be the string being parsed.

    +
  2. +

    Let position be a pointer into input, initially pointing at the start of the + string.

    +
  3. +

    Skip whitespace.

    +
  4. +

    Collect a WebVTT timestamp. If that algorithm fails, then abort these steps and + return failure. Otherwise, let cue’s text track cue start time be the collected + time.

    +
  5. +

    Skip whitespace.

    +
  6. +

    If the character at position is not a + U+002D HYPHEN-MINUS character (-) then abort these steps and return failure. Otherwise, move position forwards one character.

    +
  7. +

    If the character at position is not a + U+002D HYPHEN-MINUS character (-) then abort these steps and return failure. Otherwise, move position forwards one character.

    +
  8. +

    If the character at position is not a + U+003E GREATER-THAN SIGN character (>) then abort these steps and return failure. Otherwise, move position forwards one character.

    +
  9. +

    Skip whitespace.

    +
  10. +

    Collect a WebVTT timestamp. If that algorithm fails, then abort these steps and + return failure. Otherwise, let cue’s text track cue end time be the collected + time.

    +
  11. +

    Let remainder be the trailing substring of input starting at position.

    +
  12. +

    Parse the WebVTT cue settings from remainder using regions for cue.

    +
+

When the user agent is to parse the WebVTT cue settings from a string input using a text track list of regions regions for a text track cue cue, the user agent must +run the following steps:

+
    +
  1. +

    Let settings be the result of splitting input on + spaces.

    +
  2. +

    For each token setting in the list settings, run the following substeps:

    +
      +
    1. +

      If setting does not contain a U+003A COLON character (:), or if the first U+003A COLON + character (:) in setting is either the first or last character of setting, then jump to the + step labeled next setting.

      +
    2. +

      Let name be the leading substring of setting up to and excluding the first U+003A + COLON character (:) in that string.

      +
    3. +

      Let value be the trailing substring of setting starting from the character immediately + after the first U+003A COLON character (:) in that string.

      +
    4. +

      Run the appropriate substeps that apply for the value of name, as follows:

      +
      +
      If name is a case-sensitive match for "region" +
      +
        +
      1. +

        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" +
      +
        +
      1. +

        If value is a case-sensitive match for the string "rl", then let cue’s WebVTT cue writing direction be vertical growing left.

        +
      2. +

        Otherwise, if value is a case-sensitive match for the string + "lr", then let cue’s WebVTT cue writing direction be vertical growing right.

        +
      3. +

        If cue’s WebVTT cue writing direction is not horizontal, let cue’s WebVTT cue region be null (there are no + vertical regions).

        +
      +
      If name is a case-sensitive match for "line" +
      +
        +
      1. +

        If value contains a U+002C COMMA character (,), then let linepos be the leading + substring of value up to and excluding the first U+002C COMMA character (,) in that string + and let linealign be the trailing substring of value starting from the character + immediately after the first U+002C COMMA character (,) in that string.

        +
      2. +

        Otherwise let linepos be the full value string and linealign be null.

        +
      3. +

        If linepos does not contain at least one ASCII digit, then jump to the step + labeled next setting.

        +
      4. +
        +
        +

        If the last character in linepos is a U+0025 PERCENT SIGN character (%)

        +
        +

        If parse a percentage string from linepos doesn’t fail, let number be the + returned percentage, otherwise jump to the step labeled next setting.

        +
        +

        Otherwise

        +
        +
          +
        1. +

          If linepos contains any characters other than U+002D HYPHEN-MINUS characters + (-), ASCII digits, and U+002E DOT character (.), then jump to the step labeled next setting.

          +
        2. +

          If any character in linepos other than the first character is a U+002D + HYPHEN-MINUS character (-), then jump to the step labeled next setting.

          +
        3. +

          If there are more than one U+002E DOT characters (.), then jump to the step + labeled next setting.

          +
        4. +

          If there is a U+002E DOT character (.) and the character before or the character + after is not an ASCII digit, or if the U+002E DOT character (.) is the first or + the last character, then jump to the step labeled next setting.

          +
        5. +

          Let number be the result of parsing linepos using the rules for parsing + floating-point number values. [HTML51]

          +
        6. +

          If number is an error, then jump to the step labeled next + setting.

          +
        +
        +
      5. +

        If linealign is a case-sensitive match for the string "start", + then let cue’s WebVTT cue line alignment be start alignment.

        +
      6. +

        Otherwise, if linealign is a case-sensitive match for the string + "center", then let cue’s WebVTT cue line alignment be center alignment.

        +
      7. +

        Otherwise, if linealign is a case-sensitive match for the string + "end", then let cue’s WebVTT cue line alignment be end alignment.

        +
      8. +

        Otherwise, if linealign is not null, then jump to the step labeled next + setting.

        +
      9. +

        Let cue’s WebVTT cue line be number.

        +
      10. +

        If the last character in linepos is a U+0025 PERCENT SIGN character (%), then let cue’s WebVTT cue snap-to-lines flag be false. Otherwise, let it be true.

        +
      11. +

        If cue’s WebVTT cue line is not auto, + let cue’s WebVTT cue region be null (the cue has been explicitly positioned with a + line offset and thus drops out of the region).

        +
      +
      If name is a case-sensitive match for "position" +
      +
        +
      1. +

        If value contains a U+002C COMMA character (,), then let colpos be the leading + substring of value up to and excluding the first U+002C COMMA character (,) in that string + and let colalign be the trailing substring of value starting from the character + immediately after the first U+002C COMMA character (,) in that string.

        +
      2. +

        Otherwise let colpos be the full value string and colalign be null.

        +
      3. +

        If parse a percentage string from colpos doesn’t fail, let number be the + returned percentage, otherwise jump to the step labeled next setting (position’s value remains the special value auto).

        +
      4. +

        If colalign is a case-sensitive match for the string + "line-left", then let cue’s WebVTT cue position alignment be line-left alignment.

        +
      5. +

        Otherwise, if colalign is a case-sensitive match for the string + "center", then let cue’s WebVTT cue position alignment be center alignment.

        +
      6. +

        Otherwise, if colalign is a case-sensitive match for the string + "line-right", then let cue’s WebVTT cue position alignment be line-right alignment.

        +
      7. +

        Otherwise, if colalign is not null, then jump to the step labeled next + setting.

        +
      8. +

        Let cue’s position be number.

        +
      +
      If name is a case-sensitive match for "size" +
      +
        +
      1. +

        If parse a percentage string from value doesn’t fail, let number be the + returned percentage, otherwise jump to the step labeled next setting.

        +
      2. +

        Let cue’s WebVTT cue size be number.

        +
      3. +

        If cue’s WebVTT cue size is not 100, let cue’s WebVTT cue region be + null (the cue has been explicitly sized and thus drops out of the region).

        +
      +
      If name is a case-sensitive match for "align" +
      +
        +
      1. +

        If value is a case-sensitive match for the string "start", then + let cue’s WebVTT cue text alignment be start + alignment.

        +
      2. +

        If value is a case-sensitive match for the string "center", then + let cue’s WebVTT cue text alignment be center + alignment.

        +
      3. +

        If value is a case-sensitive match for the string "end", then + let cue’s WebVTT cue text alignment be end + alignment.

        +
      4. +

        If value is a case-sensitive match for the string "left", then + let cue’s WebVTT cue text alignment be left + alignment.

        +
      5. +

        If value is a case-sensitive match for the string "right", then + let cue’s WebVTT cue text alignment be right + alignment.

        +
      +
      +
    5. +

      Next setting: Continue to the next token, if any.

      +
    +
+

When this specification says that a user agent is to collect a WebVTT timestamp, the +user agent must run the following steps:

+
    +
  1. +

    Let input and position be the same variables as those of the same name in the algorithm + that invoked these steps.

    +
  2. +

    Let most significant units be minutes.

    +
  3. +

    If position is past the end of input, return an error and abort these steps.

    +
  4. +

    If the character indicated by position is not an ASCII digit, then return an error + and abort these steps.

    +
  5. +

    Collect a sequence of code points that are ASCII digits, and let string be + the collected substring.

    +
  6. +

    Interpret string as a base-ten integer. Let value1 be that + integer.

    +
  7. +

    If string is not exactly two characters in length, or if value1 is + greater than 59, let most significant units be hours.

    +
  8. +

    If position is beyond the end of input or if the character at position is not a U+003A + COLON character (:), then return an error and abort these steps. Otherwise, move position forwards one character.

    +
  9. +

    collect a sequence of code points that are ASCII digits, and let string be + the collected substring.

    +
  10. +

    If string is not exactly two characters in length, return an error and abort these + steps.

    +
  11. +

    Interpret string as a base-ten integer. Let value2 be that + integer.

    +
  12. +

    If most significant units is hours, or if position is not beyond the end of input and the character at position is a U+003A COLON character (:), run these substeps:

    +
      +
    1. +

      If position is beyond the end of input or if the character at position is not a + U+003A COLON character (:), then return an error and abort these steps. Otherwise, move position forwards one character.

      +
    2. +

      collect a sequence of code points that are ASCII digits, and let string be + the collected substring.

      +
    3. +

      If string is not exactly two characters in length, return an error and abort these + steps.

      +
    4. +

      Interpret string as a base-ten integer. Let value3 be that + integer.

      +
    +

    Otherwise (if most significant units is not hours, and either position is beyond the + end of input, or the character at position is not a U+003A COLON character (:)), let value3 have the value of value2, then value2 have the value of value1, then let value1 equal zero.

    +
  13. +

    If position is beyond the end of input or if the character at position is not a U+002E + FULL STOP character (.), then return an error and abort these steps. Otherwise, move position forwards one character.

    +
  14. +

    collect a sequence of code points that are ASCII digits, and let string be + the collected substring.

    +
  15. +

    If string is not exactly three characters in length, return an error and abort these + steps.

    +
  16. +

    Interpret string as a base-ten integer. Let value4 be that + integer.

    +
  17. +

    If value2 is greater than 59 or if value3 is + greater than 59, return an error and abort these steps.

    +
  18. +

    Let result be value1×60×60 + value2×60 + value3 + value4∕1000.

    +
  19. +

    Return result.

    +
+

6.4. WebVTT cue text parsing rules

+

A WebVTT Node Object is a conceptual construct used to represent components of cue +text so that its processing can be described without reference to the underlying syntax.

+

There are two broad classes of WebVTT Node Objects: WebVTT Internal Node Objects and WebVTT +Leaf Node Objects.

+

WebVTT Internal Node Objects are those that can +contain further WebVTT Node Objects. They are conceptually similar to +elements in HTML or the DOM. WebVTT Internal Node Objects have an ordered list of child WebVTT Node Objects. The WebVTT +Internal Node Object is said to be the parent of the children. Cycles do not occur; the +parent-child relationships so constructed form a tree structure. WebVTT Internal Node Objects also have an ordered list of class names, known as their applicable +classes, and a language, known as their applicable language, which is to be interpreted as a BCP 47 language tag. [BCP47]

+

User agents will add a language tag as the applicable language even if it is not a valid or not even well-formed language tag. [BCP47]

+

There are several concrete classes of WebVTT Internal Node +Objects:

+
+
Lists of WebVTT Node Objects +
+

These are used as root nodes for trees of WebVTT Node + Objects.

+
WebVTT Class Objects +
+

These represent spans of text (a WebVTT cue class span) in cue text, and are used + to annotate parts of the cue with applicable + classes without implying further meaning (such as italics or bold).

+
WebVTT Italic Objects +
+

These represent spans of italic text (a WebVTT cue italics span) in WebVTT caption or + subtitle cue text.

+
WebVTT Bold Objects +
+

These represent spans of bold text (a WebVTT cue bold span) in WebVTT caption or + subtitle cue text.

+
WebVTT Underline Objects +
+

These represent spans of underline text (a WebVTT cue underline span) in WebVTT + caption or subtitle cue text.

+
WebVTT Ruby Objects +
+

These represent spans of ruby (a WebVTT cue ruby span) in WebVTT caption or subtitle + cue text.

+
WebVTT Ruby Text Objects +
+

These represent spans of ruby text (a WebVTT cue ruby text span) in WebVTT caption or + subtitle cue text.

+
WebVTT Voice Objects +
+

These represent spans of text associated with a specific voice (a WebVTT cue voice span) + in WebVTT caption or subtitle cue text. A WebVTT Voice Object has a value, which is + the name of the voice.

+
WebVTT Language Objects +
+

These represent spans of text (a WebVTT cue language span) in WebVTT caption or + subtitle cue text, and are used to annotate parts of the cue where the applicable language might be different than the surrounding + text’s, without implying further meaning (such as italics or bold).

+
+

WebVTT Leaf Node Objects are those that contain data, +such as text, and cannot contain child WebVTT Node Objects.

+

There are two concrete classes of WebVTT Leaf Node +Objects:

+
+
WebVTT Text Objects +
+

A fragment of text. A WebVTT Text Object has a value, which is the text it + represents.

+
WebVTT Timestamp Objects +
+

A timestamp. A WebVTT Timestamp Object has a value, in seconds and fractions of a + second, which is the time represented by the timestamp.

+
+

The WebVTT cue text parsing rules consist of the following algorithm. The input is a +string input supposedly containing WebVTT caption or subtitle cue text, and optionally a +fallback language language. This algorithm returns a list of WebVTT Node Objects.

+
    +
  1. +

    Let input be the string being parsed.

    +
  2. +

    Let position be a pointer into input, initially pointing at the start of the + string.

    +
  3. +

    Let result be a list of WebVTT Node Objects, initially empty.

    +
  4. +

    Let current be the WebVTT Internal Node Object result.

    +
  5. +

    Let language stack be a stack of language tags, initially empty.

    +
  6. +

    If language is set, set result’s applicable language to language, and push language onto the language + stack.

    +
  7. +

    Loop: If position is past the end of input, return result and abort these + steps.

    +
  8. +

    Let token be the result of invoking the WebVTT cue text tokenizer.

    +
  9. +

    Run the appropriate steps given the type of token:

    +
    +
    If token is a string +
    +
      +
    1. +

      Create a WebVTT Text Object whose value is the value of the string token token.

      +
    2. +

      Append the newly created WebVTT Text Object to current.

      +
    +
    If token is a start tag +
    +

    How the start tag token token is processed depends on its tag name, as follows:

    +
    +
    If the tag name is "c" +
    +

    Attach a WebVTT Class Object.

    +
    If the tag name is "i" +
    +

    Attach a WebVTT Italic Object.

    +
    If the tag name is "b" +
    +

    Attach a WebVTT Bold Object.

    +
    If the tag name is "u" +
    +

    Attach a WebVTT Underline + Object.

    +
    If the tag name is "ruby" +
    +

    Attach a WebVTT Ruby Object.

    +
    If the tag name is "rt" +
    +

    If current is a WebVTT Ruby Object, then attach a WebVTT Ruby Text Object.

    +
    If the tag name is "v" +
    +

    Attach a WebVTT Voice Object, and + set its value to the token’s annotation string, or the empty string if there is no annotation + string.

    +
    If the tag name is "lang" +
    +

    Push the value of the token’s annotation string, or the empty string if there is no + annotation string, onto the language stack; then attach a WebVTT Language Object.

    +
    Otherwise +
    +

    Ignore the token.

    +
    +

    When the steps above say to attach a WebVTT Internal Node Object of a particular + concrete class, the user agent must run the following steps:

    +
      +
    1. +

      Create a new WebVTT Internal Node Object of the specified concrete + class.

      +
    2. +

      Set the new object’s list of applicable + classes to the list of classes in the token, excluding any classes that are the empty + string.

      +
    3. +

      Set the new object’s applicable + language to the top entry on the language stack, if the stack is not empty.

      +
    4. +

      Append the newly created node object to current.

      +
    5. +

      Let current be the newly created node object.

      +
    +
    If token is an end tag +
    +

    If any of the following conditions is true, then let current be the parent node of current.

    + +

    Otherwise, if the tag name of the end tag token token is "lang" and current is a WebVTT Language Object, then let current be the parent node of current, and pop + the top value from the language stack.

    +

    Otherwise, if the tag name of the end tag token token is "ruby" and current is a WebVTT Ruby Text Object, then let current be the parent node of the parent node of current.

    +

    Otherwise, ignore the token.

    +
    If token is a timestamp tag +
    +
      +
    1. +

      Let input be the tag value.

      +
    2. +

      Let position be a pointer into input, initially pointing at the start of the + string.

      +
    3. +

      Collect a WebVTT timestamp.

      +
    4. +

      If that algorithm does not fail, and if position now points at the end of input (i.e. + there are no trailing characters after the timestamp), then create a WebVTT Timestamp + Object whose value is the collected time, then append it to current.

      +

      Otherwise, ignore the token.

      +
    +
    +
  10. +

    Jump to the step labeled loop.

    +
+

The WebVTT cue text tokenizer is as follows. It emits a token, which is either a +string (whose value is a sequence of characters), a start tag (with a tag name, a list of classes, +and optionally an annotation), an end tag (with a tag name), or a timestamp tag (with a tag +value).

+
    +
  1. +

    Let input and position be the same variables as those of the same name in the algorithm + that invoked these steps.

    +
  2. +

    Let tokenizer state be WebVTT data state.

    +
  3. +

    Let result be the empty string.

    +
  4. +

    Let classes be an empty list.

    +
  5. +

    Loop: If position is past the end of input, let c be an end-of-file marker. + Otherwise, let c be the character in input pointed to by position.

    +

    An end-of-file marker is not a Unicode character, it is used to end the + tokenizer.

    +
  6. +

    Jump to the state given by tokenizer state:

    +
    +
    WebVTT data state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+0026 AMPERSAND (&) +
    +

    Set tokenizer state to the HTML character reference in data state, and jump to the + step labeled next.

    +
    U+003C LESS-THAN SIGN (<) +
    +

    If result is the empty string, then set tokenizer state to the WebVTT tag state and jump to the step labeled next.

    +

    Otherwise, return a string token whose value is result and abort these steps.

    +
    End-of-file marker +
    +

    Return a string token whose value is result and abort these steps.

    +
    Anything else +
    +

    Append c to result and jump to the step labeled next.

    +
    +
    HTML character reference in data state +
    +

    Attempt to consume an HTML character reference, with no additional allowed + character.

    +

    If nothing is returned, append a U+0026 AMPERSAND character (&) to result.

    +

    Otherwise, append the data of the character tokens that were returned to result.

    +

    Then, in any case, set tokenizer state to the WebVTT data state, and jump to the + step labeled next.

    +
    WebVTT tag state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+0009 CHARACTER TABULATION (tab) character +
    U+000A LINE FEED (LF) character +
    U+000C FORM FEED (FF) character +
    U+0020 SPACE character +
    +

    Set tokenizer state to the WebVTT start tag annotation state, and jump to the step + labeled next.

    +
    U+002E FULL STOP character (.) +
    +

    Set tokenizer state to the WebVTT start tag class state, and jump to the step + labeled next.

    +
    U+002F SOLIDUS character (/) +
    +

    Set tokenizer state to the WebVTT end tag state, and jump to the step labeled next.

    +
    ASCII digits +
    +

    Set result to c, set tokenizer state to the WebVTT timestamp tag state, and + jump to the step labeled next.

    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Return a start tag whose tag name is the empty string, with no classes and no annotation, + and abort these steps.

    +
    Anything else +
    +

    Set result to c, set tokenizer state to the WebVTT start tag state, and jump + to the step labeled next.

    +
    +
    WebVTT start tag state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+0009 CHARACTER TABULATION (tab) character +
    U+000C FORM FEED (FF) character +
    U+0020 SPACE character +
    +

    Set tokenizer state to the WebVTT start tag annotation state, and jump to the step + labeled next.

    +
    U+000A LINE FEED (LF) character +
    +

    Set buffer to c, set tokenizer state to the WebVTT start tag annotation state, + and jump to the step labeled next.

    +
    U+002E FULL STOP character (.) +
    +

    Set tokenizer state to the WebVTT start tag class state, and jump to the step + labeled next.

    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Return a start tag whose tag name is result, with no classes and no annotation, and abort + these steps.

    +
    Anything else +
    +

    Append c to result and jump to the step labeled next.

    +
    +
    WebVTT start tag class state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+0009 CHARACTER TABULATION (tab) character +
    U+000C FORM FEED (FF) character +
    U+0020 SPACE character +
    +

    Append to classes an entry whose value is buffer, set buffer to the empty string, set tokenizer state to the WebVTT start tag annotation state, and jump to the step + labeled next.

    +
    U+000A LINE FEED (LF) character +
    +

    Append to classes an entry whose value is buffer, set buffer to c, set tokenizer + state to the WebVTT start tag annotation state, and jump to the step labeled next.

    +
    U+002E FULL STOP character (.) +
    +

    Append to classes an entry whose value is buffer, set buffer to the empty string, and + jump to the step labeled next.

    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Append to classes an entry whose value is buffer, then return a start tag whose tag + name is result, with the classes given in classes but no annotation, and abort these + steps.

    +
    Anything else +
    +

    Append c to buffer and jump to the step labeled next.

    +
    +
    WebVTT start tag annotation state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+0026 AMPERSAND (&) +
    +

    Set tokenizer state to the HTML character reference in annotation state, and jump + to the step labeled next.

    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Remove any leading or trailing ASCII whitespace characters from buffer, and + replace any sequence of one or more consecutive ASCII whitespace characters in buffer with a single U+0020 SPACE character; then, return a start tag whose tag name is result, + with the classes given in classes, and with buffer as the annotation, and abort these + steps.

    +
    Anything else +
    +

    Append c to buffer and jump to the step labeled next.

    +
    +
    HTML character reference in annotation state +
    +

    Attempt to consume an HTML character reference, with the additional allowed + character being U+003E GREATER-THAN SIGN (>).

    +

    If nothing is returned, append a U+0026 AMPERSAND character (&) to buffer.

    +

    Otherwise, append the data of the character tokens that were returned to buffer.

    +

    Then, in any case, set tokenizer state to the WebVTT start tag annotation state, and + jump to the step labeled next.

    +
    WebVTT end tag state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Return an end tag whose tag name is result and abort these steps.

    +
    Anything else +
    +

    Append c to result and jump to the step labeled next.

    +
    +
    WebVTT timestamp tag state +
    +

    Jump to the entry that matches the value of c:

    +
    +
    U+003E GREATER-THAN SIGN character (>) +
    +

    Advance position to the next character in input, then jump to the next "end-of-file + marker" entry below.

    +
    End-of-file marker +
    +

    Return a timestamp tag whose tag name is result and abort these steps.

    +
    Anything else +
    +

    Append c to result and jump to the step labeled next.

    +
    +
    +
  7. +

    Next: Advance position to the next character in input.

    +
  8. +

    Jump to the step labeled loop.

    +
+

When the algorithm above says to attempt to consume an HTML character reference, it +means to attempt to consume a character reference as defined in HTML. [HTML51]

+

When the HTML specification says to consume a character, in this context, it means to advance position to the next character in input. When it says to unconsume a character, it means to move position back to the previous character in input. "EOF" is equivalent to the end-of-file marker +in this specification. Finally, this context is not "as part of an attribute" (when it +comes to handling a missing semicolon).

+

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.

+

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:

+ + + + + + + + + + + + + + + + +
WebVTT Node Object + DOM node +
List of WebVTT Node Objects + DocumentFragment node. +
WebVTT Region Object + DocumentFragment node. +
WebVTT Class Object + HTML span element. +
WebVTT Italic Object + HTML i element. +
WebVTT Bold Object + HTML b element. +
WebVTT Underline Object + HTML u element. +
WebVTT Ruby Object + HTML ruby element. +
WebVTT Ruby Text Object + HTML rt element. +
WebVTT Voice Object + HTML span element with a title attribute set to + the WebVTT Voice Object’s value. +
WebVTT Language Object + HTML span element with a lang attribute set to + the WebVTT Language Object’s applicable + language. +
WebVTT Text Object + Text node whose data is the value of the WebVTT Text + Object. +
WebVTT Timestamp Object + ProcessingInstruction node whose target is + "timestamp" and whose data is a WebVTT timestamp representing the value of the WebVTT Timestamp Object, with all optional components + included, with one leading zero if the hours component is less than ten, and with no leading + zeros otherwise. +
+

HTML elements created as part of the mapping described above must have their namespaceURI set to the HTML namespace, use the appropriate IDL interface as defined +in the HTML specification, and, if the corresponding WebVTT Internal Node Object has any applicable classes, must have a class attribute set to the string obtained by concatenating all those classes, each +separated from the next by a single U+0020 SPACE character.

+

The ownerDocument attribute of all nodes in the DOM tree must be set to the given +document owner.

+

All characteristics of the DOM nodes that are not described above or dependent on characteristics +defined above must be left at their initial values.

+

6.6. WebVTT rules for extracting the chapter +title

+

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

+
    +
  1. +

    Let nodes be the list of WebVTT Node Objects obtained by applying the WebVTT cue + text parsing rules to the cue’s cue text.

    +
  2. +

    Return the concatenation of the values of each WebVTT Text Object in nodes, in a + pre-order, depth-first traversal, excluding WebVTT Ruby Text + Objects and their descendants.

    +
+

7. Rendering

+

This section describes in some detail how to visually render WebVTT caption or +subtitle cues in a user agent. The processing model is quite tightly linked to media elements in +HTML, where CSS is available. User agents that do not support CSS are expected to render +plain text only, without styling and positioning features. User agents that do not support a full +HTML CSS engine are expected to render an equivalent visual representation to what a user agent +with a full CSS engine would render.

+

7.1. Processing model

+

The rules for updating the display of WebVTT text tracks render the text tracks of a media element (specifically, a video element), or of another playback +mechanism, by applying the steps below. All the text tracks that use these +rules for a given media element, or other playback mechanism, are rendered together, to avoid +overlapping subtitles from multiple tracks. A fallback language language may be set when calling +this algorithm.

+

In HTML, audio elements don’t have a visual rendering area and therefore, this +algorithm will abort for audio elements. When authors do create WebVTT captions or subtitles for +audio resources, they need to publish them in a video element for rendering by the user agent.

+

The output of the steps below is a set of CSS boxes that covers the rendering area of the media element or other playback mechanism, which user agents are expected to render in a +manner suiting the user.

+

The rules are as follows:

+
    +
  1. +

    If the media element is an audio element, or is another playback + mechanism with no rendering area, abort these steps.

    +
  2. +

    Let video be the media element or other playback mechanism.

    +
  3. +

    Let output be an empty list of absolutely positioned CSS block boxes.

    +
  4. +

    If the user agent is exposing a user + interface for video, add to output one or more completely transparent positioned CSS block + boxes that cover the same region as the user interface.

    +
  5. +

    If the last time these rules were run, the user agent was not exposing a user interface for video, but now it is, optionally let reset be + true. Otherwise, let reset be false.

    +
  6. +

    Let tracks be the subset of video’s list of text tracks that have as their rules for updating the text track rendering these rules for updating the display of + WebVTT text tracks, and whose text track mode is showing.

    +
  7. +

    Let cues be an empty list of text track cues.

    +
  8. +

    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.

    +
  9. +

    Let regions be an empty list of WebVTT regions.

    +
  10. +

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

    +
  11. +

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

    +
  12. +

    Apply the following steps for each regionNode:

    +
      +
    1. +

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

        +
      • +

        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.

        +
      +
    2. +

      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:

      +
        +
      1. +

        No style sheets are associated with regionNode. (The regionNodes are subsequently + restyled using style sheets after their boxes are generated, as described below.)

        +
      2. +

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

        +
      3. +

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

        +
      +
    3. +

      Add the CSS box box to output.

      +
    +
  13. +

    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:

    +
      +
    • +

      If cue’s WebVTT cue region is not null, add those boxes to that region’s box and remove cue from cues.

      +
    • +

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

      +
    +
  14. +

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

      Let nodes be the list of WebVTT Node Objects obtained by applying the WebVTT + cue text parsing rules, with the fallback language language if provided, to the cue’s cue text.

      +
    2. +

      If cue’s WebVTT cue region is null, run the following substeps:

      +
        +
      1. Apply WebVTT cue settings to obtain CSS boxes boxes from nodes. +
      2. +

        Let cue’s text track cue display state have the CSS boxes in boxes.

        +
      3. +

        Add the CSS boxes in boxes to output.

        +
      +
    3. +

      Otherwise, run the following substeps:

      +
        +
      1. +

        Let region be cue’s WebVTT cue region.

        +
      2. +

        If region’s WebVTT region scroll setting is up and region already has one child, set region’s transition-property to top and transition-duration to 0.433s.

        +
      3. +

        Let offset be cue’s computed position multiplied + by region’s WebVTT region width and divided by 100 (i.e. interpret it as a percentage + of the region width).

        +
      4. +

        Adjust offset using cue’s computed position + alignment as follows:

        +
        +
        If the computed position alignment is center alignment +
        +

        Subtract half of region’s WebVTT region width from offset.

        +
        If the computed position alignment is line-right alignment +
        +

        Subtract region’s WebVTT region width from offset.

        +
        +
      5. +

        Let left be offset %. [CSS-VALUES]

        +
      6. +

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

        +
      7. +

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

        +
      8. +

        Let cue’s text track cue display state have the CSS boxes in boxes.

        +
      9. +

        Add the CSS boxes in boxes to region.

        +
      10. +

        If the CSS boxes boxes together have a height less than the height of the region box, let diff be the absolute difference between the two height values. Increase top by diff and re-apply it to regionNode.

        +
      +
    +
  15. +

    Return output.

    +
+

User agents may allow the user to override the above algorithm’s positioning of cues, e.g. by +dragging them to another location on the video, or even off the video entirely.

+

7.2. Processing cue settings

+

When the processing algorithm above requires that the user agent apply WebVTT cue +settings to obtain CSS boxes from a list of WebVTT Node Objects nodes, the user agent +must run the following algorithm.

+
    +
  1. +

    If the WebVTT cue writing direction is horizontal, then let writing-mode be "horizontal-tb". Otherwise, if the WebVTT + cue writing direction is vertical + growing left, then let writing-mode be "vertical-rl". Otherwise, the WebVTT cue writing + direction is vertical growing + right; let writing-mode be "vertical-lr".

    +
  2. +

    Determine the value of maximum size for cue as per the appropriate rules from the following + list:

    +
    +
    If the computed position alignment is line-left +
    +

    Let maximum size be the computed position subtracted from + 100.

    +
    If the computed position alignment is line-right +
    +

    Let maximum size be the computed position.

    +
    If the computed position alignment is center, and the computed position is less than or equal to 50 +
    +

    Let maximum size be the computed position multiplied by + two.

    +
    If the computed position alignment is center, and the computed position is greater than 50 +
    +

    Let maximum size be the result of subtracting computed + position from 100 and then multiplying the result by two.

    +
    +
  3. +

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

    +
  4. +

    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]

    +
  5. +

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

    +
    +
    If the WebVTT cue writing direction is horizontal +
    +
    +
    If the computed position alignment is line-left alignment +
    +

    Let x-position be the computed position.

    +
    If the computed position alignment is center alignment +
    +

    Let x-position be the computed position minus half + of size.

    +
    If the computed position alignment is line-right alignment +
    +

    Let x-position be the computed position minus size.

    +
    +
    If the WebVTT cue writing direction is vertical growing left or vertical growing right +
    +
    +
    If the computed position alignment is line-left alignment +
    +

    Let y-position be the computed position.

    +
    If the computed position alignment is center alignment +
    +

    Let y-position be the computed position minus half + of size.

    +
    If the computed position alignment is line-right alignment +
    +

    Let y-position be the computed position minus size.

    +
    +
    +
  6. +

    Determine the value of whichever of x-position or y-position is not yet calculated for cue as per the appropriate rules from the following list:

    +
    +
    If the WebVTT cue snap-to-lines flag is false +
    +
    +
    If the WebVTT cue writing direction is horizontal +
    +

    Let y-position be the computed line.

    +
    If the WebVTT cue writing direction is vertical growing left or vertical growing right +
    +

    Let x-position be the computed line.

    +
    +
    If the WebVTT cue snap-to-lines flag is true +
    +
    +
    If the WebVTT cue writing direction is horizontal +
    +

    Let y-position be 0.

    +
    If the WebVTT cue writing direction is vertical growing left or vertical growing right +
    +

    Let x-position be 0.

    +
    +
    +

    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]

    +
  8. +

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

    +
  9. +

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

    +
  10. +

    Adjust the positions of boxes according to the appropriate steps from the following list:

    +
    +
    If cue’s WebVTT cue snap-to-lines flag is true +
    +

    Many of the steps in this algorithm vary according to the WebVTT cue writing + direction. Steps labeled "Horizontal" must be followed only when the WebVTT cue writing direction is horizontal, steps labeled "Vertical" must be followed when the WebVTT cue writing direction is either vertical growing left or vertical growing right, steps labeled "Vertical Growing Left" + must be followed only when the WebVTT cue writing direction is vertical growing left, and steps labeled "Vertical + Growing Right" must be followed only when the WebVTT cue writing direction is vertical growing right.

    +
      +
    1. +

      Horizontal: Let full dimension be the height of video’s rendering + area.

      +

      Vertical: Let full dimension be the width of video’s rendering + area.

      +
    2. +

      Horizontal: Let step be the height of the first line box in boxes.

      +

      Vertical: Let step be the width of the first line box in boxes.

      +
    3. +

      If step is zero, then jump to the step labeled done positioning below.

      +
    4. +

      Let line be cue’s computed line.

      +
    5. +

      Round line to an integer by adding 0.5 and then flooring it.

      +
    6. +

      Vertical Growing Left: Add one to line then negate it.

      +
    7. +

      Let position be the result of multiplying step and line.

      +
    8. +

      Vertical Growing Left: Decrease position by the width of the bounding + box of the boxes in boxes, then increase position by step.

      +
    9. +

      If line is less than zero then increase position by max dimension, and negate step.

      +
    10. +

      Horizontal: Move all the boxes in boxes down by the distance given by position.

      +

      Vertical: Move all the boxes in boxes right by the distance given by position.

      +
    11. +

      Remember the position of all the boxes in boxes as their specified + position.

      +
    12. +

      Let title area be a box that covers all of the video’s rendering area.

      +
    13. +

      Step loop: If none of the boxes in boxes would overlap any of the boxes in output, and all of the boxes in boxes are entirely within the title area box, then jump + to the step labeled done positioning below.

      +
    14. +

      Horizontal: If step is negative and the top of the first line box in boxes is now above the top of the title area, or if step is positive and the bottom of + the first line box in boxes is now below the bottom of the title area, jump to the step + labeled switch direction.

      +

      Vertical: If step is negative and the left edge of the first line box in boxes is now to the left of the left edge of the title area, or if step is positive and + the right edge of the first line box in boxes is now to the right of the right edge of the title area, jump to the step labeled switch direction.

      +
    15. +

      Horizontal: Move all the boxes in boxes down by the distance given by step. (If step is negative, then this will actually result in an upwards movement of the + boxes in absolute terms.)

      +

      Vertical: Move all the boxes in boxes right by the distance given by step. (If step is negative, then this will actually result in a leftwards movement of the + boxes in absolute terms.)

      +
    16. +

      Jump back to the step labeled step loop.

      +
    17. +

      Switch direction: If switched is true, then remove all the boxes in boxes, + and jump to the step labeled done positioning below.

      +
    18. +

      Otherwise, move all the boxes in boxes back to their specified position as + determined in the earlier step.

      +
    19. +

      Negate step.

      +
    20. +

      Set switched to true.

      +
    21. +

      Jump back to the step labeled step loop.

      +
    +
    If cue’s WebVTT cue snap-to-lines flag is false +
    +
      +
    1. +

      Let bounding box be the bounding box of the boxes in boxes.

      +
    2. +

      Run the appropriate steps from the following list:

      +
      +
      If the WebVTT cue writing direction is horizontal +
      +
      +
      If the WebVTT cue line alignment is center alignment +
      +

      Move all the boxes in boxes up by half of the height of bounding box.

      +
      If the WebVTT cue line alignment is end + alignment +
      +

      Move all the boxes in boxes up by the height of bounding box.

      +
      +
      If the WebVTT cue writing direction is vertical growing left or vertical growing right +
      +
      +
      If the WebVTT cue line alignment is center alignment +
      +

      Move all the boxes in boxes left by half of the width of bounding box.

      +
      If the WebVTT cue line alignment is end + alignment +
      +

      Move all the boxes in boxes left by the width of bounding box.

      +
      +
      +
    3. +

      If none of the boxes in boxes would overlap any of the boxes in output, and all the + boxes in boxes are within the video’s rendering area, then jump to the step labeled done + positioning below.

      +
    4. +

      If there is a position to which the boxes in boxes can be moved while maintaining the + relative positions of the boxes in boxes to each other such that none of the boxes in boxes would overlap any of the boxes in output, and all the boxes in boxes would be within the video’s rendering area, then move the boxes in boxes to the closest such position to their + current position, and then jump to the step labeled done positioning below. If there are + multiple such positions that are equidistant from their current position, use the highest one + amongst them; if there are several at that height, then use the leftmost one amongst + them.

      +
    5. +

      Otherwise, jump to the step labeled done positioning below. (The boxes will + unfortunately overlap.)

      +
    +
    +
  11. +

    Done positioning: Return boxes.

    +
+

7.3. Obtaining CSS boxes

+

When the processing algorithm above requires that the user agent obtain a set of CSS +boxes boxes, then apply the terms of the CSS specifications to nodes within the following +constraints: [CSS22]

+ +

Let boxes be the boxes generated as descendants of the initial 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 +layer as defined in this section. [CSS22]

+

Initialize the (root) list of WebVTT Node Objects with the following CSS settings:

+ +

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 +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 +corresponding cue’s WebVTT cue text alignment:

+ + + + + + + + + +
WebVTT cue text alignment + text-align value +
Start alignment + start +
Center alignment + center +
End alignment + end +
Left alignment + left +
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 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]

+

The white-space property on the (root) list of WebVTT Node Objects must be set to pre-line. [CSS22]

+

The font-style property on WebVTT Italic Objects must be set +to italic.

+

The font-weight property on WebVTT Bold Objects must be set to bold.

+

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

+

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 ruby-text. [CSS3-RUBY]

+

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

+ +

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 +which the WebVTT region object was constructed.

+

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

+ +

All other non-inherited properties must be set to their initial values; inherited properties on +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, +then they must be interpreted as defined in the next section.

+

8. CSS extensions

+

This section specifies some CSS pseudo-elements and pseudo-classes and how they +apply to WebVTT. This section does not apply to user agents that do not support CSS.

+

8.1. Introduction

+

This section is non-normative.

+

The ::cue pseudo-element represents a cue.

+

The ::cue(selector) pseudo-element represents a cue or element inside a cue that match the +given selector.

+

The ::cue-region pseudo-element represents a region.

+

The ::cue-region(selector) pseudo-element represents a region or element inside a region +that match the given selector.

+

Similarly to all other pseudo-elements, these pseudo-elements are not directly +present in the video element’s document tree.

+

The :past and :future pseudo-classes can be used in ::cue(selector) to match WebVTT Internal Node Objects based on the current playback position.

+
+ +

The following table shows examples of what can be selected with a given selector, together with + WebVTT syntax to produce the relevant objects.

+ + + + + + + + + + + + + +
Selector (CSS syntax example) + Matches (WebVTT syntax example) +
+

::cue

+
video::cue {
+  color: yellow;
+}
+ 		+

Any list of WebVTT Node Objects.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+Yellow!
+
+00:00:08.000 --> 00:00:16.000
+Also yellow!
+
+
+

ID selector in ::cue()

+
video::cue(#cue1) {
+  color: yellow;
+}
+ 		+

Any list of WebVTT Node Objects with the cue’s text track cue identifier matching the given ID.

+
WEBVTT
+
+cue1
+00:00:00.000 --> 00:00:08.000
+Yellow!
+
+
+

Type selector in ::cue()

+
video::cue(c),
+video::cue(i),
+video::cue(b),
+video::cue(u),
+video::cue(ruby),
+video::cue(rt),
+video::cue(v),
+video::cue(lang) {
+  color: yellow;
+}
+
+ 		+

WebVTT Internal Node Objects (except the root list of WebVTT Node Objects) + with the given name.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+<c>Yellow!</c>
+<i>Yellow!</i>
+<u>Yellow!</u>
+<b>Yellow!</b>
+<u>Yellow!</u>
+<ruby>Yellow! <rt>Yellow!</rt></ruby>
+<v Kathryn>Yellow!</v>
+<lang en>Yellow!</lang>
+
+
+

Class selector in ::cue()

+
video::cue(.loud) {
+  color: yellow;
+}
+ 		+

WebVTT Internal Node Objects (except the root list of WebVTT Node Objects) + with the given applicable classes.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+<c.loud>Yellow!</c>
+<i.loud>Yellow!</i>
+<u.loud>Yellow!</u>
+<b.loud>Yellow!</b>
+<u.loud>Yellow!</u>
+<ruby.loud>Yellow! <rt.loud>Yellow!</rt></ruby>
+<v.loud Kathryn>Yellow!</v>
+<lang.loud en>Yellow!</lang>
+
+
+

Attribute selector in ::cue()

+
video::cue([lang="en-US"]) {
+  color: yellow;
+}
+video::cue(lang[lang="en-GB"]) {
+  color: cyan;
+}
+video::cue(v[voice="Kathryn"] {
+  color: lime;
+}
+
+ 		+

For "lang", the root list of WebVTT Node Objects or WebVTT Language Object with the given applicable language; for + "voice", the WebVTT Voice Object with the given voice.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+Yellow!
+
+00:00:08.000 --> 00:00:16.000
+<lang en-GB>Cyan!</lang>
+
+00:00:16.000 --> 00:00:24.000
+<v Kathryn>I like lime.</v>
+
+

The applicable language for the list + of WebVTT Node Objects can be set by the srclang attribute in HTML.

+
<video ...>
+ <track src="example-attr.vtt"
+        srclang="en-US" default>
+</video>
+
+
+

:lang() pseudo-class in ::cue()

+
video::cue(:lang(en)) {
+  color: yellow;
+}
+video::cue(:lang(en-GB)) {
+  color: cyan;
+}
+
+ 		+

WebVTT Internal Node Objects with an applicable language matching the given language range.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+Yellow!
+
+00:00:08.000 --> 00:00:16.000
+<lang en-GB>Cyan!</lang>
+
+

As above, the applicable language for + the list of WebVTT Node Objects can be set by the srclang attribute in + HTML.

+
+

:past and :future pseudo-classes in ::cue()

+
video::cue(:past) {
+  color: yellow;
+}
+video::cue(:future) {
+  color: cyan;
+}
+
+ 		+

In cues that have WebVTT Timestamp Objects, WebVTT Internal Node Objects, + depending on the current playback position.

+
WEBVTT
+
+00:00:00.000 --> 00:00:08.000
+<c>No match (no timestamps)</c>
+
+00:00:08.000 --> 00:00:16.000
+No match <00:00:12.000> (no elements)
+
+00:00:16.000 --> 00:00:24.000
+<00:00:16.000> <c>This</c>
+<00:00:18.000> <c>can</c>
+<00:00:20.000> <c>match</c>
+<00:00:22.000> <c>:past/:future</c>
+<00:00:24.000>
+
+
+

::cue-region

+
video::cue-region {
+  color: yellow;
+}
+ 		+

Any region (list of WebVTT region objects).

+
WEBVTT
+
+REGION
+id:editor-comments
+regionanchor:0%,0%
+viewportanchor:0%,0%
+
+00:00:00.000 --> 00:00:08.000
+No match (normal cue)
+
+00:00:08.000 --> 00:00:16.000 region:editor-comments
+Yellow!
+
+
+

ID selector in ::cue-region()

+
video::cue-region(#scroll) {
+  color: cyan;
+}
+ 		+

Any region (list of WebVTT region objects) with a WebVTT region identifier matching the given ID.

+
WEBVTT
+
+REGION
+id:editor-comments
+width: 40%
+regionanchor:0%,100%
+viewportanchor:10%,90%
+
+REGION
+id:scroll
+width: 40%
+regionanchor:100%,100%
+viewportanchor:90%,90%
+scroll:up
+
+00:00:00.000 --> 00:00:08.000
+No match (normal cue)
+
+00:00:08.000 --> 00:00:16.000 region:editor-comments
+Yellow!
+
+00:00:10.000 --> 00:00:16.000 region:scroll
+Over here it’s Cyan!
+
+
+
+

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

+

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.

+

8.2.1. The ::cue pseudo-element

+

The ::cue pseudo-element (with no argument) matches any list of WebVTT Node +Objects constructed for the matched element, with the exception that the properties +corresponding to the background shorthand must be applied to the WebVTT cue background box rather than the list of WebVTT Node Objects.

+

The following properties apply to the ::cue pseudo-element with no argument; other properties +set on the pseudo-element must be ignored:

+ +

The ::cue(selector) pseudo-element with an argument must have an argument that +consists of a CSS selector [SELECTORS4]. It matches any WebVTT Internal Node Object constructed for the matched element that also matches the given CSS selector, with the nodes +being treated as follows:

+ +

The following properties apply to the ::cue() pseudo-element with an argument:

+ +

In addition, the following properties apply to the ::cue() pseudo-element with an argument +when the selector does not contain the :past and :future pseudo-classes:

+ +

Properties that do not apply must be ignored.

+

As a special exception, the properties corresponding to the background shorthand, when they +would have been applied to the list of WebVTT Node Objects, must instead be applied to the WebVTT cue background box.

+

8.2.2. The :past and :future pseudo-classes

+

The :past and :future pseudo-classes sometimes match WebVTT +Node Objects. [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, +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, +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

+

Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, +that element is the matched element. The pseudo-element defined below affects the styling of text +track regions that are being rendered for the matched element.

+

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

+

The ::cue-region pseudo-element (with no argument) matches any list of WebVTT region objects constructed for the matched element.

+

The ::cue-region(selector) pseudo-element with an argument must have an argument that +consists of a CSS selector [SELECTORS4]. It matches any list of WebVTT region objects constructed for the matched element that also matches the +given CSS selector as follows:

+ +

No other selector matching is defined for ::cue-region(selector).

+

The same properties that apply to ::cue apply to the ::cue-region pseudo-element; other +properties set on the pseudo-element must be ignored.

+

When a user agent is rendering one or more text track regions according to the rules for +updating the display of WebVTT text tracks, 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 +the region must be emptied and the text track’s rules for updating the text track +rendering must be immediately rerun.

+

9. API

+

9.1. The VTTCue interface

+

The following interface is used to expose WebVTT cues in the DOM API:

+
enum AutoKeyword { "auto" };
+typedef (double or AutoKeyword) LineAndPositionSetting;
+enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
+enum LineAlignSetting { "start", "center", "end" };
+enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
+enum AlignSetting { "start", "center", "end", "left", "right" };
+[Exposed=Window,
+ Constructor(double startTime, double endTime, DOMString text)]
+interface VTTCue : TextTrackCue {
+  attribute VTTRegion? region;
+  attribute DirectionSetting vertical;
+  attribute boolean snapToLines;
+  attribute LineAndPositionSetting line;
+  attribute LineAlignSetting lineAlign;
+  attribute LineAndPositionSetting position;
+  attribute PositionAlignSetting positionAlign;
+  attribute double size;
+  attribute AlignSetting align;
+  attribute DOMString text;
+  DocumentFragment getCueAsHTML();
+};
+
+
+
cue = new VTTCue( startTime, endTime, text ) +
+

Returns a new VTTCue object, for use with the addCue() method.

+

The startTime argument sets the text track cue start time.

+

The endTime argument sets the text track cue end time.

+

The text argument sets the cue text.

+
cue . region +
+

Returns the VTTRegion object to which this cue belongs, if any, or null otherwise.

+

Can be set.

+
cue . vertical [ = value ] +
+

Returns a string representing the WebVTT cue writing direction, as follows:

+
+
If it is horizontal +
+

The empty string.

+
If it is vertical growing + left +
+

The string "rl".

+
If it is vertical growing + right +
+

The string "lr".

+
+

Can be set.

+
cue . snapToLines [ = value ] +
+

Returns true if the WebVTT cue snap-to-lines flag is true, false otherwise.

+

Can be set.

+
cue . line [ = value ] +
+

Returns the WebVTT cue line. In the case of the value being auto, the string "auto" is returned.

+

Can be set.

+
cue . lineAlign [ = value ] +
+

Returns a string representing the WebVTT cue line alignment, as follows:

+
+
If it is start alignment +
+

The string "start".

+
If it is center alignment +
+

The string "center".

+
If it is end alignment +
+

The string "end".

+
+

Can be set.

+
cue . position [ = value ] +
+

Returns the WebVTT cue position. In the case of the value being auto, the string "auto" is returned.

+

Can be set.

+
cue . positionAlign [ = value ] +
+

Returns a string representing the WebVTT cue position alignment, as follows:

+
+
If it is line-left alignment +
+

The string "line-left".

+
If it is center alignment +
+

The string "center".

+
If it is line-right alignment +
+

The string "line-right".

+
If it is automatic alignment +
+

The string "auto".

+
+

Can be set.

+
cue . size [ = value ] +
+

Returns the WebVTT cue size.

+

Can be set.

+
cue . align [ = value ] +
+

Returns a string representing the WebVTT cue text alignment, as follows:

+
+
If it is start alignment +
+

The string "start".

+
If it is center alignment +
+

The string "center".

+
If it is end alignment +
+

The string "end".

+
If it is left alignment +
+

The string "left".

+
If it is right alignment +
+

The string "right".

+
+

Can be set.

+
cue . text [ = value ] +
+

Returns the cue text in raw unparsed form.

+

Can be set.

+
fragment = cue . getCueAsHTML() +
+

Returns the cue text as a DocumentFragment of HTML elements and other DOM + nodes.

+
+

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.

    +
  2. +

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

    +
  3. +

    Let cue’s text track cue end time be the value of the endTime argument, + interpreted as a time in seconds.

    +
  4. +

    Let cue’s cue text be the value of the text argument, and let the rules for + extracting the chapter title be the WebVTT rules for extracting the chapter + title.

    +
  5. +

    Let cue’s text track cue identifier be the empty string.

    +
  6. +

    Let cue’s text track cue pause-on-exit flag be false.

    +
  7. +

    Let cue’s WebVTT cue region be null.

    +
  8. +

    Let cue’s WebVTT cue writing direction be horizontal.

    +
  9. +

    Let cue’s WebVTT cue snap-to-lines flag be true.

    +
  10. +

    Let cue’s WebVTT cue line be auto.

    +
  11. +

    Let cue’s WebVTT cue line alignment be start alignment.

    +
  12. +

    Let cue’s WebVTT cue position be auto.

    +
  13. +

    Let cue’s WebVTT cue position alignment be auto.

    +
  14. +

    Let cue’s WebVTT cue size be 100.

    +
  15. +

    Let cue’s WebVTT cue text alignment be center + alignment.

    +
  16. +

    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 +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:

+ + + + + + + +
WebVTT cue writing direction + vertical value +
Horizontal + "" (the empty string) +
Vertical growing left + "rl" +
Vertical growing right + "lr" +
+

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 +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 +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:

+ + + + + + + +
WebVTT cue line alignment + lineAlign value +
Start alignment + "start" +
Center alignment + "center" +
End alignment + "end" +
+

On setting, the WebVTT cue line alignment 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 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". +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:

+ + + + + + + + +
WebVTT cue position alignment + positionAlign value +
Line-left alignment + "line-left" +
Center alignment + "center" +
Line-right alignment + "line-right" +
Automatic alignment + "auto" +
+

On setting, the WebVTT cue position alignment 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 size attribute, on getting, must return the WebVTT cue +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:

+ + + + + + + + + +
WebVTT cue text alignment + align value +
Start alignment + "start" +
Center alignment + "center" +
End alignment + "end" +
Left alignment + "left" +
Right alignment + "right" +
+

On setting, the WebVTT cue text alignment 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 text attribute, on getting, must return the raw 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 +the WebVTT cue text parsing rules to the cue text.

+

A fallback language is not provided for getCueAsHTML() since a DocumentFragment cannot expose language information.

+

9.2. The VTTRegion interface

+

The following interface is used to expose WebVTT regions in the DOM API:

+
enum ScrollSetting { "" /* none */, "up" };
+[Exposed=Window,
+ Constructor]
+interface VTTRegion {
+  attribute DOMString id;
+  attribute double width;
+  attribute unsigned long lines;
+  attribute double regionAnchorX;
+  attribute double regionAnchorY;
+  attribute double viewportAnchorX;
+  attribute double viewportAnchorY;
+  attribute ScrollSetting scroll;
+};
+
+
+
region = new VTTRegion() +
+

Returns a new VTTRegion object.

+
region . id +
+

Returns the text track region identifier. Can be set.

+
region . width +
+

Returns the WebVTT region width as a percentage of the video width. Can be set. Throws an IndexSizeError if the new value is not in the range 0..100.

+
region . lines +
+

Returns the text track region height as a number of lines. Can be set. Throws an IndexSizeError if the new value is negative.

+
region . regionAnchorX +
+

Returns the WebVTT region anchor X offset as a percentage of the region width. Can be set. + Throws an IndexSizeError if the new value is not in the range 0..100.

+
region . regionAnchorY +
+

Returns the WebVTT region anchor Y offset as a percentage of the region height. Can be set. + Throws an IndexSizeError if the new value is not in the range 0..100.

+
region . viewportAnchorX +
+

Returns the WebVTT region viewport anchor X offset as a percentage of the video width. Can be + set. Throws an IndexSizeError if the new value is not in the range 0..100.

+
region . viewportAnchorY +
+

Returns the WebVTT region viewport anchor Y offset as a percentage of the video height. Can be + set. Throws an IndexSizeError if the new value is not in the range 0..100.

+
region . scroll +
+

Returns a string representing the WebVTT region scroll as follows:

+
+
If it is unset +
+

The empty string.

+
If it is up +
+

The string "up".

+
+

Can be set.

+
+

The VTTRegion() constructor, when invoked, must run the +following steps:

+
    +
  1. +

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

    +
  2. +

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

    +
  3. +

    Let region’s WebVTT region width be 100.

    +
  4. +

    Let region’s WebVTT region lines be 3.

    +
  5. +

    Let region’s text track region regionAnchorX be + 0.

    +
  6. +

    Let region’s text track region regionAnchorY be + 100.

    +
  7. +

    Let region’s text track region viewportAnchorX be 0.

    +
  8. +

    Let region’s text track region viewportAnchorY be 100.

    +
  9. +

    Let region’s WebVTT region scroll be the empty string.

    +
  10. +

    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.

+

The width attribute, on getting, must return the WebVTT +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, +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 +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 +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 +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 +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:

+ + + + + + +
WebVTT region scroll + scroll value +
None + "" (the empty string) +
Up + "up" +
+

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

+

10. IANA considerations

+

10.1. text/vtt

+

This registration is for community review and will be submitted to the IESG for review, approval, +and registration with IANA.

+
+
Type name: +
text +
Subtype name: +
vtt +
Required parameters: +
No parameters +
Optional parameters: +
No parameters +
Encoding considerations: +
8bit (always UTF-8) +
Security considerations: +
+

Text track files themselves pose no immediate risk unless sensitive information is included + within the data. Implementations, however, are required to follow specific rules when processing + text tracks, to ensure that certain origin-based restrictions are honored. Failure to correctly + implement these rules can result in information leakage, cross-site scripting attacks, and the + like.

+
Interoperability considerations: +
+

Rules for processing both conforming and non-conforming content are defined in this + specification.

+
Published specification: +
This document is the relevant specification. +
Applications that use this media type: +
Web browsers and other video players. +
Additional information: +
+
+
Magic number(s): +
+

WebVTT files all begin with one of the following byte sequences (where "EOF" means the end of + the file):

+
    +
  • EF BB BF 57 45 42 56 54 54 0A +
  • EF BB BF 57 45 42 56 54 54 0D +
  • EF BB BF 57 45 42 56 54 54 20 +
  • EF BB BF 57 45 42 56 54 54 09 +
  • EF BB BF 57 45 42 56 54 54 EOF +
  • 57 45 42 56 54 54 0A +
  • 57 45 42 56 54 54 0D +
  • 57 45 42 56 54 54 20 +
  • 57 45 42 56 54 54 09 +
  • 57 45 42 56 54 54 EOF +
+

(An optional UTF-8 BOM, the ASCII string "WEBVTT", and finally a + space, tab, line break, or the end of the file.)

+
File extension(s): +
"vtt" +
Macintosh file type code(s): +
No specific Macintosh file type codes are recommended for this type. +
+
Person & email address to contact for further information: +
Silvia Pfeiffer <silviapfeiffer1@gmail.com> +
Intended usage: +
Common +
Restrictions on usage: +
No restrictions apply. +
Authors: +
Silvia Pfeiffer <silviapfeiffer1@gmail.com>, Simon Pieters <simonp@opera.com>, Philip + Jägenstedt <philipj@opera.com>, Ian Hickson <ian@hixie.ch> +
Change controller: +
W3C +
+

Fragment identifiers have no meaning with text/vtt resources.

+

Privacy and Security Considerations

+

Text-based format security

+

As with any text-based format, it is possible to construct malicious content that might cause +buffer over-runs, value overflows (e.g. string representations of integers that overflow a given +word length), and the like. Implementers should take care in implementing a parser that over-long +lines, field values, or encoded values do not cause security problems.

+

Styling-related privacy and security

+

WebVTT can embed CSS style sheets, which will be applied in user agents that support CSS. Under +these circumstances, the privacy and security considerations of CSS apply, with the following +caveats.

+

Such style sheets cannot fetch any external resources, +and it is important for privacy that user agents do not allow this. Otherwise, WebVTT files could be +authored such that a third party is notified when the user watches a particular video, and even the +current time in that video.

+

It is possible for a user agent to offer user style sheets, but their presence and nature will +not be detectable by scripts running in the same user agent (e.g. browser) since the CSS object +model for such style sheets is not exposed to script and there is no way to get the computed style +for pseudo-elements other than ::before and ::after with the getComputedStyle() API. [CSSOM]

+

Scripting-related security

+

WebVTT does not include or enable scripting. It is important that user agents do not support a +way to execute script embedded in a WebVTT file.

+

However, it is possible to construct and deliver a file that is designed not to present captions +or subtitles, but instead to provide timed input (‘triggers’) to a script system. A +poorly-written script or script system might then cause security, privacy or other problems; +however, this consideration really applies to the script system. Since WebVTT supplies these +triggers at their timestamps, a malicious file might present such triggers very rapidly, perhaps +causing undue resource consumption.

+

Privacy of preference

+

A user agent that selects, and causes to download or interpret a WebVTT file, might indicate to +the origin server that the user has a need for captions or subtitles, and also the language preference of the user for captions or +subtitles. That is a (small) piece of information about the user. However, the offering of a caption +file, and the choice whether to retrieve and consume it, are really characteristics of the format or +protocol which does the offer (e.g. the HTML element), rather than of the caption format itself. [HTML51]

+

Acknowledgements

+

Thanks to the SubRip community, including in particular Zuggy and ai4spam, for their work on the +SubRip software program whose SRT file format was used as the basis for the WebVTT text track file +format.

+

Thanks to Ian Hickson and many others for their work on the HTML standard, where WebVTT was +originally specified. [HTML51]

+

Thanks to + Addison Phillips, + Alastor Wu, + Andreas Tai, + Anna Cavender, + Anne van Kesteren, + Benjamin Schaaf, + Brian Quass, + Caitlin Potter, + Courtney Kennedy, + Cyril Concolato, + Dae Kim, + David Singer, + Eric Carlson, + fantasai, + Frank Olivier, + Fredrik Söderquist, + Giuseppe Pascale, + Glenn Adams, + Glenn Maynard, + John Foliot, + Kyle Huey, + Lawrence Forooghian, + Loretta Guarino Reid, + Ms2ger, + Nigel Megitt, + Ralph Giles, + Richard Ishida, + Rick Eyre, + Ronny Mennerich, + Theresa O’Connor, and + Victor Cărbune + for their useful comments.

+
+ +

Index

+

Terms defined by this specification

+ +

Terms defined by reference

+ +

References

+

Normative References

+
+
[BCP47] +
A. Phillips; M. Davis. Tags for Identifying Languages. September 2009. IETF Best Current Practice. URL: https://tools.ietf.org/html/bcp47 +
[BIDI] +
Mark Davis; Aharon Lanin; Andrew Glass. Unicode Bidirectional Algorithm. 14 May 2017. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-37.html +
[CSS-ALIGN-3] +
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://www.w3.org/TR/css-align-3/ +
[CSS-BACKGROUNDS-3] +
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://www.w3.org/TR/css-backgrounds-3/ +
[CSS-CASCADE-4] +
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. URL: https://www.w3.org/TR/css-cascade-4/ +
[CSS-COLOR-4] +
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. URL: https://www.w3.org/TR/css-color-4/ +
[CSS-DISPLAY-3] +
Elika Etemad. CSS Display Module Level 3. URL: https://www.w3.org/TR/css-display-3/ +
[CSS-FLEXBOX-1] +
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. URL: https://www.w3.org/TR/css-flexbox-1/ +
[CSS-FONTS-3] +
John Daggett. CSS Fonts Module Level 3. URL: https://www.w3.org/TR/css-fonts-3/ +
[CSS-FONTS-4] +
John Daggett; Myles Maxfield. CSS Fonts Module Level 4. URL: https://www.w3.org/TR/css-fonts-4/ +
[CSS-OVERFLOW-3] +
David Baron; Florian Rivoal. CSS Overflow Module Level 3. URL: https://www.w3.org/TR/css-overflow-3/ +
[CSS-POSITION-3] +
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. URL: https://www.w3.org/TR/css-position-3/ +
[CSS-SIZING-3] +
Elika Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3. URL: https://www.w3.org/TR/css-sizing-3/ +
[CSS-SYNTAX-3] +
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://www.w3.org/TR/css-syntax-3/ +
[CSS-TEXT-3] +
Elika Etemad; Koji Ishii. CSS Text Module Level 3. URL: https://www.w3.org/TR/css-text-3/ +
[CSS-TEXT-4] +
Elika Etemad; Koji Ishii; Alan Stearns. CSS Text Module Level 4. URL: https://www.w3.org/TR/css-text-4/ +
[CSS-TEXT-DECOR-3] +
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. URL: https://www.w3.org/TR/css-text-decor-3/ +
[CSS-TRANSITIONS-1] +
David Baron; Dean Jackson; Brian Birtles. CSS Transitions. URL: https://www.w3.org/TR/css-transitions-1/ +
[CSS-UI-4] +
Florian Rivoal. CSS Basic User Interface Module Level 4. URL: https://www.w3.org/TR/css-ui-4/ +
[CSS-VALUES] +
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. URL: https://www.w3.org/TR/css-values-3/ +
[CSS-WRITING-MODES-3] +
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: https://www.w3.org/TR/css-writing-modes-3/ +
[CSS-WRITING-MODES-4] +
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://www.w3.org/TR/css-writing-modes-4/ +
[CSS22] +
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. URL: https://www.w3.org/TR/CSS22/ +
[CSS3-COLOR] +
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 5 December 2017. CR. URL: https://www.w3.org/TR/css-color-3/ +
[CSS3-RUBY] +
Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1. URL: https://www.w3.org/TR/css-ruby-1/ +
[CSSOM] +
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). URL: https://www.w3.org/TR/cssom-1/ +
[DOM-20151119] +
Anne van Kesteren; et al. W3C DOM4. 19 November 2015. REC. URL: https://www.w3.org/TR/2015/REC-dom-20151119/ +
[ENCODING-CR] +
Anne van Kesteren; Joshua Bell; Addison Phillips. Encoding. 13 April 2017. CR. URL: https://www.w3.org/TR/2017/CR-encoding-20170413/ +
[HTML] +
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/ +
[HTML51] +
Steve Faulkner; et al. HTML 5.1 2nd Edition. URL: https://www.w3.org/TR/html51/ +
[RFC2119] +
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119 +
[RFC3629] +
F. Yergeau. UTF-8, a transformation format of ISO 10646. November 2003. Internet Standard. URL: https://tools.ietf.org/html/rfc3629 +
[SELECTORS-3] +
Tantek Çelik; et al. Selectors Level 3. URL: https://www.w3.org/TR/selectors-3/ +
[SELECTORS4] +
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://www.w3.org/TR/selectors-4/ +
[WebIDL] +
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL. URL: https://heycam.github.io/webidl/ +
[WEBIDL-1] +
Cameron McCormack. WebIDL Level 1. URL: https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/ +
+

Informative References

+
+
[MAUR] +
Shane McCarron; Michael Cooper; Mark Sadecki. Media Accessibility User Requirements. WD. URL: http://www.w3.org/TR/media-accessibility-reqs/ +
[WCAG20] +
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. REC. URL: https://www.w3.org/TR/WCAG20/ +
+

IDL Index

+
enum AutoKeyword { "auto" };
+typedef (double or AutoKeyword) LineAndPositionSetting;
+enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
+enum LineAlignSetting { "start", "center", "end" };
+enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
+enum AlignSetting { "start", "center", "end", "left", "right" };
+[Exposed=Window,
+ Constructor(double startTime, double endTime, DOMString text)]
+interface VTTCue : TextTrackCue {
+  attribute VTTRegion? region;
+  attribute DirectionSetting vertical;
+  attribute boolean snapToLines;
+  attribute LineAndPositionSetting line;
+  attribute LineAlignSetting lineAlign;
+  attribute LineAndPositionSetting position;
+  attribute PositionAlignSetting positionAlign;
+  attribute double size;
+  attribute AlignSetting align;
+  attribute DOMString text;
+  DocumentFragment getCueAsHTML();
+};
+
+enum ScrollSetting { "" /* none */, "up" };
+[Exposed=Window,
+ Constructor]
+interface VTTRegion {
+  attribute DOMString id;
+  attribute double width;
+  attribute unsigned long lines;
+  attribute double regionAnchorX;
+  attribute double regionAnchorY;
+  attribute double viewportAnchorX;
+  attribute double viewportAnchorY;
+  attribute ScrollSetting scroll;
+};
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/archives/2019-03-06/changes.html b/archives/2019-03-06/changes.html new file mode 100644 index 0000000..d71bb8f --- /dev/null +++ b/archives/2019-03-06/changes.html @@ -0,0 +1,170 @@ + + +WebVTT: The Web Video Text Tracks Format - List of changes + + + +

Jump to Table of Contents Collapse Sidebar

+

WebVTT: The Web Video Text Tracks Format Change Summary

+ + + +
+

1 Change History (Non-Normative)

+

Changes are ordered by GitHub issue number.

+ +
+

1.1 Changes from WebVTT CR to WebVTT First Public Working Draft

+

Technical Changes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GitHub Issue Title +
388 Clarify the "WebVTT cue settings list" definition. +
389 Add a "User agents that do not support CSS" conformance class. +
395 Add default color and background color names for applicable classes. +
400 Region clarification issue 376 +
408 Turn long alt text into longdesc. +
410 Add a paragraph about the reasons why limiting styles. +
411Update line height for lines in regions. +
417Unsigned long issue 414 +
418Class override +
419Timeranges clarification +
420Cue setting clarifications +
421Computed position alignment +
422Don't make edge margins depend on aesthetics. +
423Region lines cannot be negative now that they are unsigned long. +
+ + +

Editorial Changes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GitHub Issue Title +
390Move definition of chapter title text +
394Add some explanatory text about the different types of VTT files. +
396 Fix up algorithm markup and improve a bikeshed style. +
398 Break up section 6 a bit more to make it more readable. +
399 Clarify line cue setting specification. +
407 Add code of conduct as proposed by plh +
409 Add some introductory paragraphs to the Data model section. +
+ + + + +
+
+ + + + \ No newline at end of file diff --git a/archives/2019-03-06/diff.html b/archives/2019-03-06/diff.html new file mode 100644 index 0000000..3d901f8 --- /dev/null +++ b/archives/2019-03-06/diff.html @@ -0,0 +1,55235 @@ + + + + + WebVTT: The Web Video Text Tracks Format DIFF file + + + + + + + + + + + + + + + + +

WebVTT: The Web Video Text Tracks Format DIFF file

+

Diff between:

+

W3C Candidate Recommendation 15 April 2018

+

W3C Working Draft 08 August 2017

+ +

Prepared using diff2html by rtfpessoa

+ +
+
+
+ Files changed (1) + hide + show +
+
    +
  1. + + + {../2017-08-08 → .}/Overview.html + + +1579 + -1211 + + +
    2. +
+
+
+
+ + + {../2017-08-08 → .}/Overview.html + RENAMED +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -1210,6 +1210,9 @@
+
+
1210
+
1210
+ 		+
+ + color: inherit; +
+
+
1211
+
1211
+ 		+
+ + } +
+
+
1212
+
1212
+ 		+
+ + </style> +
+
+
+
1213
+ 		+
+ + + <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-CR" rel="stylesheet" type="text/css"> +
+
+
+
1214
+ 		+
+ + + <meta content="Bikeshed version 5dff6b06be1856d0a5e62cf40e9cc21c06bfb098" name="generator"> +
+
+
+
1215
+ 		+
+ + + <link href="https://www.w3.org/TR/webvtt1/" rel="canonical"> +
+
+
1213
+
1216
+ 		+
+ + <style> +
+
+
1214
+
1217
+ 		+
+ + samp { +
+
+
1215
+
1218
+ 		+
+ + font-family: inherit; +
+
+
@@ -1218,6 +1221,10 @@
+
+
1218
+
1221
+ 		+
+ + outline: 0.18em solid rgba(0, 0, 0, 0.7); +
+
+
1219
+
1222
+ 		+
+ + color: white; +
+
+
1220
+
1223
+ 		+
+ + } +
+
+
+
1224
+ 		+
+ + +
+
+
+
1225
+ 		+
+ + + [data-algorithm]:not(.heading) { +
+
+
+
1226
+ 		+
+ + + padding-left: 2em; +
+
+
+
1227
+ 		+
+ + + } +
+
+
1221
+
1228
+ 		+
+ + </style> +
+
+
1222
+
1229
+ 		+
+ + <style>/* style-md-lists */ +
+
+
1223
+
1230
+ 		+
+ +
+
+
@@ -1461,31 +1468,27 @@
+
+
1461
+
1468
+ 		+
+ + .highlight .vi { color: #0077aa } /* Name.Variable.Instance */ +
+
+
1462
+
1469
+ 		+
+ + .highlight .il { color: #000000 } /* Literal.Number.Integer.Long */ +
+
+
1463
+
1470
+ 		+
+ + </style> +
+
+
1464
+
+ 		+
+ - +
+
+
1465
+
+ 		+
+ - + <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css"> +
+
+
1466
+
+ 		+
+ - + <meta content="Bikeshed version 98d39f855addd7fd56ede57e54c21835cb0ff7de" name="generator"> +
+
+
1467
+
+ 		+
+ - + <link href="https://www.w3.org/TR/webvtt1/" rel="canonical"> +
+
+
1468
+
+ 		+
+ - +
+
+
1469
+
1471
+ 		+
+ + <body class="h-entry"> +
+
+
1470
+
1472
+ 		+
+ + <div class="head"> +
+
+
1471
+
1473
+ 		+
+ + <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p> +
+
+
1472
+
1474
+ 		+
+ + <h1 class="p-name no-ref" id="title">WebVTT: The Web Video Text Tracks Format</h1> +
+
+
1473
+
+ 		+
+ - + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft <time class="dt-updated" datetime="2017-08-08">08 August 2017</time></span></h2> +
+
+
+
1475
+ 		+
+ + + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation <time class="dt-updated" datetime="2018-04-15">15 April 2018</time></span></h2> +
+
+
1474
+
1476
+ 		+
+ + <div data-fill-with="spec-metadata"> +
+
+
1475
+
1477
+ 		+
+ + <dl> +
+
+
1476
+
1478
+ 		+
+ + <dt>This version: +
+
+
1477
+
+ 		+
+ - + <dd><a class="u-url" href="https://www.w3.org/TR/2017/WD-webvtt1-20170808/">https://www.w3.org/TR/2017/WD-webvtt1-20170808/</a> +
+
+
+
1479
+ 		+
+ + + <dd><a class="u-url" href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/">https://www.w3.org/TR/2018/CR-webvtt1-20180415/</a> +
+
+
1478
+
1480
+ 		+
+ + <dt>Latest published version: +
+
+
1479
+
1481
+ 		+
+ + <dd><a href="https://www.w3.org/TR/webvtt1/">https://www.w3.org/TR/webvtt1/</a> +
+
+
1480
+
1482
+ 		+
+ + <dt>Editor's Draft: +
+
+
1481
+
1483
+ 		+
+ + <dd><a href="https://w3c.github.io/webvtt/">https://w3c.github.io/webvtt/</a> +
+
+
1482
+
1484
+ 		+
+ + <dt>Previous Versions: +
+
+
1483
+
+ 		+
+ - + <dd><a href="https://www.w3.org/TR/2017/WD-webvtt1-20170713/" rel="prev">https://www.w3.org/TR/2017/WD-webvtt1-20170713/</a> +
+
+
+
1485
+ 		+
+ + + <dd><a href="https://www.w3.org/TR/2017/WD-webvtt1-20170808/" rel="prev">https://www.w3.org/TR/2017/WD-webvtt1-20170808/</a> +
+
+
1484
+
1486
+ 		+
+ + <dt>Test Suite: +
+
+
1485
+
1487
+ 		+
+ + <dd><a href="https://github.com/w3c/web-platform-tests/tree/master/webvtt">https://github.com/w3c/web-platform-tests/tree/master/webvtt</a> +
+
+
1486
+
1488
+ 		+
+ + <dt class="editor">Editor: +
+
+
1487
+
+ 		+
+ - + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com" data-editor-id="simonp">Simon Pieters</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software ASA</a>) +
+
+
+
1489
+ 		+
+ + + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:silvia.pfeiffer@data61.csiro.au">Silvia Pfeiffer</a> (<a class="p-org org" href="https://www.csiro.au/">CSIRO</a>) +
+
+
1488
+
1490
+ 		+
+ + <dt class="editor">Former Editors: +
+
+
+
1491
+ 		+
+ + + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com">Simon Pieters</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software AS</a>) +
+
+
1489
+
1492
+ 		+
+ + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:silviapfeiffer1@gmail.com">Silvia Pfeiffer</a> (<a class="p-org org" href="http://nicta.com.au/">NICTA</a>) +
+
+
1490
+
1493
+ 		+
+ + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:philipj@opera.com">Philip Jägenstedt</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software ASA</a>) +
+
+
1491
+
1494
+ 		+
+ + <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ian@hixie.ch">Ian Hickson</a> (<a class="p-org org" href="http://www.google.com/">Google</a>) +
+
+
@@ -1497,7 +1500,7 @@
+
+
1497
+
1500
+ 		+
+ + </dl> +
+
+
1498
+
1501
+ 		+
+ + </div> +
+
+
1499
+
1502
+ 		+
+ + <div data-fill-with="warning"></div> +
+
+
1500
+
+ 		+
+ - + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011-2017 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). +
+
+
+
1503
+ 		+
+ + + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011-2018 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). +
+
+
1501
+
1504
+ 		+
+ + W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p> +
+
+
1502
+
1505
+ 		+
+ + <hr title="Separator for header"> +
+
+
1503
+
1506
+ 		+
+ + </div> +
+
+
@@ -1509,33 +1512,64 @@
+
+
1509
+
1512
+ 		+
+ + </div> +
+
+
1510
+
1513
+ 		+
+ + <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> +
+
+
1511
+
1514
+ 		+
+ + <div data-fill-with="status"> +
+
+
1512
+
+ 		+
+ - + <p> <em>This section describes the status of this document at the time of +
+
+
1513
+
+ 		+
+ - + its publication. Other documents may supersede this document. A list of +
+
+
1514
+
+ 		+
+ - + current W3C publications and the latest revision of this technical report +
+
+
1515
+
+ 		+
+ - + can be found in the <a href="https://www.w3.org/TR/">W3C technical reports +
+
+
+
1515
+ 		+
+ + +
+
+
+
1516
+ 		+
+ + + <p> <em>This section describes the status of this document at the time of its publication. Other +
+
+
+
1517
+ 		+
+ + + documents may supersede this document. A list of current W3C publications and the latest revision +
+
+
+
1518
+ 		+
+ + + of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports +
+
+
1516
+
1519
+ 		+
+ + index at https://www.w3.org/TR/.</a></em> </p> +
+
+
1517
+
+ 		+
+ - + <p>Work on this specification is being undertaken both in the <a href="https://www.w3.org/community/texttracks/">Web Media Text Tracks Community Group</a> as well as +
+
+
1518
+
+ 		+
+ - + in the <a href="https://www.w3.org/AudioVideo/TT/"><abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a>. The latter group works towards a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation for reference purposes with +
+
+
1519
+
+ 		+
+ - + interoperability requirements, while the former is a Draft Community Group Report that continues to +
+
+
1520
+
+ 		+
+ - + evolve. </p> +
+
+
1521
+
+ 		+
+ - + <p>This document was published by the <a href="https://www.w3.org/AudioVideo/TT/"><abbr title="World Wide Web Consortium">W3C</abbr> Timed +
+
+
1522
+
+ 		+
+ - + Text Working Group</a> as a Working Draft. This document is intended to become a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation. If you wish to make comments regarding +
+
+
1523
+
+ 		+
+ - + this document, please send them to <a href="mailto:public-tt@w3.org?subject=%5Bwebvtt%5D">public-tt@w3.org</a> (<a href="mailto:public-tt-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-tt/">archives</a>) with <code>[webvtt]</code> at +
+
+
1524
+
+ 		+
+ - + the start of your email’s subject. All comments are welcome. </p> +
+
+
1525
+
1520
+ 		+
+ +
+
+
1526
+
+ 		+
+ - + <p>The Timed Text Working Group intends to recommend transition of this document to Candidate Recommendation and is offering this Working Draft for a public review period ending on 22 September 2017. A cumulative summary of all changes applied to this version since <a href="http://www.w3.org/TR/2014/WD-webvtt1-20141113/">WebVTT First Public Working Draft</a> was published is available at <a href="changes-FPWD.html">Changes from WebVTT (FPWD)</a>. +
+
+
1527
+
+ 		+
+ - + </p> +
+
+
1528
+
+ 		+
+ - + <p> Publication as a Working Draft does not imply endorsement by the W3C +
+
+
1529
+
+ 		+
+ - + Membership. This is a draft document and may be updated, replaced or +
+
+
1530
+
+ 		+
+ - + obsoleted by other documents at any time. It is inappropriate to cite this +
+
+
+
1521
+ 		+
+ + + <p>Work on this specification is being undertaken both in the +
+
+
+
1522
+ 		+
+ + + <a href="https://www.w3.org/community/texttracks/">Web Media Text Tracks Community Group</a> +
+
+
+
1523
+ 		+
+ + + as well as in the <a href="https://www.w3.org/AudioVideo/TT/"> +
+
+
+
1524
+ 		+
+ + + <abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a>. The latter group +
+
+
+
1525
+ 		+
+ + + works towards a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation for reference +
+
+
+
1526
+ 		+
+ + + purposes with interoperability requirements, while the former is a Draft Community Group Report +
+
+
+
1527
+ 		+
+ + + that continues to evolve. </p> +
+
+
+
1528
+ 		+
+ + +
+
+
+
1529
+ 		+
+ + + <p>This document was published by the <a href="https://www.w3.org/AudioVideo/TT/"> +
+
+
+
1530
+ 		+
+ + + <abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a> as a Working Draft. +
+
+
+
1531
+ 		+
+ + + This document is intended to become a <abbr title="World Wide Web Consortium">W3C</abbr> +
+
+
+
1532
+ 		+
+ + + Recommendation. If you wish to make comments regarding this document, please send them to +
+
+
+
1533
+ 		+
+ + + <a href="mailto:public-tt@w3.org?subject=%5Bwebvtt%5D">public-tt@w3.org</a> +
+
+
+
1534
+ 		+
+ + + (<a href="mailto:public-tt-request@w3.org?subject=subscribe">subscribe</a>, +
+
+
+
1535
+ 		+
+ + + <a href="http://lists.w3.org/Archives/Public/public-tt/">archives</a>) with <code>[webvtt]</code> +
+
+
+
1536
+ 		+
+ + + at the start of your email’s subject. All comments are welcome. +
+
+
+
1537
+ 		+
+ + + <abbr title="World Wide Web Consortium">W3C</abbr> publishes a Candidate Recommendation to indicate +
+
+
+
1538
+ 		+
+ + + that the document is believed to be stable and to encourage implementation by the developer +
+
+
+
1539
+ 		+
+ + + community. This Candidate Recommendation is expected to advance to Proposed Recommendation no +
+
+
+
1540
+ 		+
+ + + earlier than 15 July 2017. </p> +
+
+
+
1541
+ 		+
+ + +
+
+
+
1542
+ 		+
+ + + <p>Please see the Working Group's <a href="https://www.w3.org/wiki/TimedText/WebVTT_Implementation_Report">Implementation Report</a>.</p> +
+
+
+
1543
+ 		+
+ + +
+
+
+
1544
+ 		+
+ + + <p>For this specification to exit the CR stage, at least 2 independent implementations of every +
+
+
+
1545
+ 		+
+ + + feature defined in this specification need to be documented in the implementation report. The +
+
+
+
1546
+ 		+
+ + + implementation report is based on implementer-provided test results for the +
+
+
+
1547
+ 		+
+ + + <a href="https://github.com/w3c/web-platform-tests/tree/master/webvtt">test suite</a>. The Working +
+
+
+
1548
+ 		+
+ + + Group does not require that implementations are publicly available but encourages them to be so.</p> +
+
+
+
1549
+ 		+
+ + +
+
+
+
1550
+ 		+
+ + + <p>The Working Group has not identified features "at risk" for this specification.</p> +
+
+
+
1551
+ 		+
+ + +
+
+
+
1552
+ 		+
+ + + <p>A cumulative summary of all changes applied to this version since the +
+
+
+
1553
+ 		+
+ + + <a href="https://www.w3.org/TR/2014/WD-webvtt1-20141113/">WebVTT First Public Working Draft</a> +
+
+
+
1554
+ 		+
+ + + was published is available at <a href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/changes.html">Changes from FPWD WebVTT</a>.</p> +
+
+
+
1555
+ 		+
+ + +
+
+
+
1556
+ 		+
+ + + <p>For convenience, a complete diff between this version and the WebVTT previous Working Draft was published is found at <a href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/diff.html">Diff from previsou Workdin Draft WebVTT</a>.</p> +
+
+
+
1557
+ 		+
+ + +
+
+
+
1558
+ 		+
+ + + <p> Publication as a Candidate Recommendation does not imply endorsement by the +
+
+
+
1559
+ 		+
+ + + <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may be +
+
+
+
1560
+ 		+
+ + + updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this +
+
+
1531
+
1561
+ 		+
+ + document as other than work in progress. </p> +
+
+
+
1562
+ 		+
+ + +
+
+
1532
+
1563
+ 		+
+ + <p> This document was produced by a group operating under +
+
+
1533
+
1564
+ 		+
+ + the <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. +
+
+
1534
+
+ 		+
+ - + W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/34314/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; +
+
+
+
1565
+ 		+
+ + + W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/49309/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; +
+
+
1535
+
1566
+ 		+
+ + that page also includes instructions for disclosing a patent. +
+
+
+
1567
+ 		+
+ + + <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/34314/status">public list of any patent disclosures</a> made in connection with the +
+
+
+
1568
+ 		+
+ + + deliverables of the group; that page also includes instructions for disclosing a patent. +
+
+
1536
+
1569
+ 		+
+ + An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> +
+
+
+
1570
+ 		+
+ + +
+
+
1537
+
1571
+ 		+
+ + <p> This document is governed by the <a href="https://www.w3.org/2017/Process-20170301/" id="w3c_process_revision">1 March 2017 W3C Process Document</a>. </p> +
+
+
1538
+
+ 		+
+ - + <p></p> +
+
+
+
1572
+ 		+
+ + +
+
+
1539
+
1573
+ 		+
+ + </div> +
+
+
1540
+
1574
+ 		+
+ + <div class="snapshot" hidden=""> +
+
+
1541
+
1575
+ 		+
+ + <p> +
+
+
@@ -1551,10 +1585,13 @@
+
+
1551
+
1585
+ 		+
+ + <li> +
+
+
1552
+
1586
+ 		+
+ + <a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a> +
+
+
1553
+
1587
+ 		+
+ + <ol class="toc"> +
+
+
1554
+
+ 		+
+ - + <li><a href="#introduction-multiple-lines"><span class="secno">1.1</span> <span class="content">Cues with multiple lines</span></a> +
+
+
1555
+
+ 		+
+ - + <li><a href="#introduction-comments"><span class="secno">1.2</span> <span class="content">Comments</span></a> +
+
+
1556
+
+ 		+
+ - + <li><a href="#styling"><span class="secno">1.3</span> <span class="content">Styling</span></a> +
+
+
1557
+
+ 		+
+ - + <li><a href="#introduction-other-features"><span class="secno">1.4</span> <span class="content">Other features</span></a> +
+
+
+
1588
+ 		+
+ + + <li><a href="#introduction-caption"><span class="secno">1.1</span> <span class="content">A simple caption file</span></a> +
+
+
+
1589
+ 		+
+ + + <li><a href="#introduction-multiple-lines"><span class="secno">1.2</span> <span class="content">Caption cues with multiple lines</span></a> +
+
+
+
1590
+ 		+
+ + + <li><a href="#styling"><span class="secno">1.3</span> <span class="content">Styling captions</span></a> +
+
+
+
1591
+ 		+
+ + + <li><a href="#introduction-other-features"><span class="secno">1.4</span> <span class="content">Other caption and subtitling features</span></a> +
+
+
+
1592
+ 		+
+ + + <li><a href="#introduction-comments"><span class="secno">1.5</span> <span class="content">Comments in WebVTT</span></a> +
+
+
+
1593
+ 		+
+ + + <li><a href="#introduction-chapters"><span class="secno">1.6</span> <span class="content">Chapters example</span></a> +
+
+
+
1594
+ 		+
+ + + <li><a href="#introduction-metadata"><span class="secno">1.7</span> <span class="content">Metadata example</span></a> +
+
+
1558
+
1595
+ 		+
+ + </ol> +
+
+
1559
+
1596
+ 		+
+ + <li> +
+
+
1560
+
1597
+ 		+
+ + <a href="#conformance"><span class="secno">2</span> <span class="content">Conformance</span></a> +
+
+
@@ -1565,8 +1602,12 @@
+
+
1565
+
1602
+ 		+
+ + <li> +
+
+
1566
+
1603
+ 		+
+ + <a href="#data-model"><span class="secno">3</span> <span class="content">Data model</span></a> +
+
+
1567
+
1604
+ 		+
+ + <ol class="toc"> +
+
+
1568
+
+ 		+
+ - + <li><a href="#cues"><span class="secno">3.1</span> <span class="content">WebVTT cues</span></a> +
+
+
1569
+
+ 		+
+ - + <li><a href="#regions"><span class="secno">3.2</span> <span class="content">WebVTT regions</span></a> +
+
+
+
1605
+ 		+
+ + + <li><a href="#model-overview"><span class="secno">3.1</span> <span class="content">Overview</span></a> +
+
+
+
1606
+ 		+
+ + + <li><a href="#model-cues"><span class="secno">3.2</span> <span class="content">WebVTT cues</span></a> +
+
+
+
1607
+ 		+
+ + + <li><a href="#cues"><span class="secno">3.3</span> <span class="content">WebVTT caption or subtitle cues</span></a> +
+
+
+
1608
+ 		+
+ + + <li><a href="#regions"><span class="secno">3.4</span> <span class="content">WebVTT caption or subtitle regions</span></a> +
+
+
+
1609
+ 		+
+ + + <li><a href="#chapter-cues"><span class="secno">3.5</span> <span class="content">WebVTT chapter cues</span></a> +
+
+
+
1610
+ 		+
+ + + <li><a href="#metadata-cues"><span class="secno">3.6</span> <span class="content">WebVTT metadata cues</span></a> +
+
+
1570
+
1611
+ 		+
+ + </ol> +
+
+
1571
+
1612
+ 		+
+ + <li> +
+
+
1572
+
1613
+ 		+
+ + <a href="#syntax"><span class="secno">4</span> <span class="content">Syntax</span></a> +
+
+
@@ -1576,7 +1617,8 @@
+
+
1576
+
1617
+ 		+
+ + <a href="#types-of-webvtt-cue-payload"><span class="secno">4.2</span> <span class="content">Types of WebVTT cue payload</span></a> +
+
+
1577
+
1618
+ 		+
+ + <ol class="toc"> +
+
+
1578
+
1619
+ 		+
+ + <li><a href="#metadata-text"><span class="secno">4.2.1</span> <span class="content">WebVTT metadata text</span></a> +
+
+
1579
+
+ 		+
+ - + <li><a href="#cue-text"><span class="secno">4.2.2</span> <span class="content">WebVTT cue text</span></a> +
+
+
+
1620
+ 		+
+ + + <li><a href="#caption-text"><span class="secno">4.2.2</span> <span class="content">WebVTT caption or subtitle cue text</span></a> +
+
+
+
1621
+ 		+
+ + + <li><a href="#chapter-title-text"><span class="secno">4.2.3</span> <span class="content">WebVTT chapter title text</span></a> +
+
+
1580
+
1622
+ 		+
+ + </ol> +
+
+
1581
+
1623
+ 		+
+ + <li><a href="#region-settings"><span class="secno">4.3</span> <span class="content">WebVTT region settings</span></a> +
+
+
1582
+
1624
+ 		+
+ + <li><a href="#cue-settings"><span class="secno">4.4</span> <span class="content">WebVTT cue settings</span></a> +
+
+
@@ -1590,51 +1632,56 @@
+
+
1590
+
1632
+ 		+
+ + <ol class="toc"> +
+
+
1591
+
1633
+ 		+
+ + <li><a href="#file-using-metadata-content"><span class="secno">4.6.1</span> <span class="content">WebVTT file using metadata content</span></a> +
+
+
1592
+
1634
+ 		+
+ + <li><a href="#file-using-chapter-title-text"><span class="secno">4.6.2</span> <span class="content">WebVTT file using chapter title text</span></a> +
+
+
1593
+
+ 		+
+ - + <li><a href="#file-using-cue-text"><span class="secno">4.6.3</span> <span class="content">WebVTT file using cue text</span></a> +
+
+
+
1635
+ 		+
+ + + <li><a href="#file-using-cue-text"><span class="secno">4.6.3</span> <span class="content">WebVTT file using caption or subtitle cue text</span></a> +
+
+
1594
+
1636
+ 		+
+ + </ol> +
+
+
1595
+
1637
+ 		+
+ + </ol> +
+
+
1596
+
1638
+ 		+
+ + <li> +
+
+
1597
+
+ 		+
+ - + <a href="#parsing"><span class="secno">5</span> <span class="content">Parsing</span></a> +
+
+
+
1639
+ 		+
+ + + <a href="#default-classes"><span class="secno">5</span> <span class="content">Default classes for WebVTT Caption or Subtitle Cue Components</span></a> +
+
+
1598
+
1640
+ 		+
+ + <ol class="toc"> +
+
+
1599
+
+ 		+
+ - + <li><a href="#file-parsing"><span class="secno">5.1</span> <span class="content">WebVTT file parsing</span></a> +
+
+
1600
+
+ 		+
+ - + <li><a href="#region-settings-parsing"><span class="secno">5.2</span> <span class="content">WebVTT region settings parsing</span></a> +
+
+
+
1641
+ 		+
+ + + <li><a href="#default-text-color"><span class="secno">5.1</span> <span class="content">Default text colors</span></a> +
+
+
+
1642
+ 		+
+ + + <li><a href="#default-text-background"><span class="secno">5.2</span> <span class="content">Default text background colors</span></a> +
+
+
1601
+
+ 		+
+ - + <li><a href="#cue-timings-and-settings-parsing"><span class="secno">5.3</span> <span class="content">WebVTT cue timings and settings parsing</span></a> +
+
+
1602
+
+ 		+
+ - + <li><a href="#cue-text-parsing-rules"><span class="secno">5.4</span> <span class="content">WebVTT cue text parsing rules</span></a> +
+
+
1603
+
+ 		+
+ - + <li><a href="#dom-construction-rules"><span class="secno">5.5</span> <span class="content"><span>WebVTT cue text DOM construction rules</span></span></a> +
+
+
1604
+
+ 		+
+ - + <li><a href="#rules-for-extracting-the-chapter-title"><span class="secno">5.6</span> <span class="content">WebVTT rules for extracting the chapter +
+
+
1605
+
+ 		+
+ - + title</span></a> +
+
+
1606
+
1643
+ 		+
+ + </ol> +
+
+
1607
+
1644
+ 		+
+ + <li> +
+
+
1608
+
+ 		+
+ - + <a href="#rendering"><span class="secno">6</span> <span class="content">Rendering</span></a> +
+
+
+
1645
+ 		+
+ + + <a href="#parsing"><span class="secno">6</span> <span class="content">Parsing</span></a> +
+
+
1609
+
1646
+ 		+
+ + <ol class="toc"> +
+
+
+
1647
+ 		+
+ + + <li><a href="#file-parsing"><span class="secno">6.1</span> <span class="content">WebVTT file parsing</span></a> +
+
+
+
1648
+ 		+
+ + + <li><a href="#region-settings-parsing"><span class="secno">6.2</span> <span class="content">WebVTT region settings parsing</span></a> +
+
+
+
1649
+ 		+
+ + + <li><a href="#cue-timings-and-settings-parsing"><span class="secno">6.3</span> <span class="content">WebVTT cue timings and settings parsing</span></a> +
+
+
+
1650
+ 		+
+ + + <li><a href="#cue-text-parsing-rules"><span class="secno">6.4</span> <span class="content">WebVTT cue text parsing rules</span></a> +
+
+
+
1651
+ 		+
+ + + <li><a href="#dom-construction-rules"><span class="secno">6.5</span> <span class="content"><span>WebVTT cue text DOM construction rules</span></span></a> +
+
+
+
1652
+ 		+
+ + + <li><a href="#rules-for-extracting-the-chapter-title"><span class="secno">6.6</span> <span class="content">WebVTT rules for extracting the chapter +
+
+
+
1653
+ 		+
+ + + title</span></a> +
+
+
+
1654
+ 		+
+ + + </ol> +
+
+
1610
+
1655
+ 		+
+ + <li> +
+
+
1611
+
+ 		+
+ - + <a href="#processing-model"><span class="secno">6.1</span> <span class="content">Processing model</span></a> +
+
+
+
1656
+ 		+
+ + + <a href="#rendering"><span class="secno">7</span> <span class="content">Rendering</span></a> +
+
+
1612
+
1657
+ 		+
+ + <ol class="toc"> +
+
+
1613
+
+ 		+
+ - + <li><a href="#applying-css-properties"><span class="secno">6.1.1</span> <span class="content">Applying CSS properties to <span>WebVTT Node Objects</span></span></a> +
+
+
1614
+
+ 		+
+ - + </ol> +
+
+
+
1658
+ 		+
+ + + <li><a href="#processing-model"><span class="secno">7.1</span> <span class="content">Processing model</span></a> +
+
+
+
1659
+ 		+
+ + + <li><a href="#processing-cue-settings"><span class="secno">7.2</span> <span class="content">Processing cue settings</span></a> +
+
+
+
1660
+ 		+
+ + + <li><a href="#obtaining-css-boxes"><span class="secno">7.3</span> <span class="content">Obtaining CSS boxes</span></a> +
+
+
+
1661
+ 		+
+ + + <li><a href="#applying-css-properties"><span class="secno">7.4</span> <span class="content">Applying CSS properties to <span>WebVTT Node Objects</span></span></a> +
+
+
1615
+
1662
+ 		+
+ + </ol> +
+
+
1616
+
1663
+ 		+
+ + <li> +
+
+
1617
+
+ 		+
+ - + <a href="#css-extensions"><span class="secno">7</span> <span class="content">CSS extensions</span></a> +
+
+
+
1664
+ 		+
+ + + <a href="#css-extensions"><span class="secno">8</span> <span class="content">CSS extensions</span></a> +
+
+
1618
+
1665
+ 		+
+ + <ol class="toc"> +
+
+
1619
+
+ 		+
+ - + <li><a href="#css-extensions-introduction"><span class="secno">7.1</span> <span class="content">Introduction</span></a> +
+
+
+
1666
+ 		+
+ + + <li><a href="#css-extensions-introduction"><span class="secno">8.1</span> <span class="content">Introduction</span></a> +
+
+
1620
+
1667
+ 		+
+ + <li> +
+
+
1621
+
+ 		+
+ - + <a href="#css-extensions-processing-model"><span class="secno">7.2</span> <span class="content">Processing model</span></a> +
+
+
+
1668
+ 		+
+ + + <a href="#css-extensions-processing-model"><span class="secno">8.2</span> <span class="content">Processing model</span></a> +
+
+
1622
+
1669
+ 		+
+ + <ol class="toc"> +
+
+
1623
+
+ 		+
+ - + <li><a href="#the-cue-pseudo-element"><span class="secno">7.2.1</span> <span class="content">The <span class="css">::cue</span> pseudo-element</span></a> +
+
+
1624
+
+ 		+
+ - + <li><a href="#the-past-and-future-pseudo-classes"><span class="secno">7.2.2</span> <span class="content">The <span class="css">:past</span> and <span class="css">:future</span> pseudo-classes</span></a> +
+
+
1625
+
+ 		+
+ - + <li><a href="#the-cue-region-pseudo-element"><span class="secno">7.2.3</span> <span class="content">The <span class="css">::cue-region</span> pseudo-element</span></a> +
+
+
+
1670
+ 		+
+ + + <li><a href="#the-cue-pseudo-element"><span class="secno">8.2.1</span> <span class="content">The <span class="css">::cue</span> pseudo-element</span></a> +
+
+
+
1671
+ 		+
+ + + <li><a href="#the-past-and-future-pseudo-classes"><span class="secno">8.2.2</span> <span class="content">The <span class="css">:past</span> and <span class="css">:future</span> pseudo-classes</span></a> +
+
+
+
1672
+ 		+
+ + + <li><a href="#the-cue-region-pseudo-element"><span class="secno">8.2.3</span> <span class="content">The <span class="css">::cue-region</span> pseudo-element</span></a> +
+
+
1626
+
1673
+ 		+
+ + </ol> +
+
+
1627
+
1674
+ 		+
+ + </ol> +
+
+
1628
+
1675
+ 		+
+ + <li> +
+
+
1629
+
+ 		+
+ - + <a href="#api"><span class="secno">8</span> <span class="content">API</span></a> +
+
+
+
1676
+ 		+
+ + + <a href="#api"><span class="secno">9</span> <span class="content">API</span></a> +
+
+
1630
+
1677
+ 		+
+ + <ol class="toc"> +
+
+
1631
+
+ 		+
+ - + <li><a href="#the-vttcue-interface"><span class="secno">8.1</span> <span class="content">The <code class="idl"><span>VTTCue</span></code> interface</span></a> +
+
+
1632
+
+ 		+
+ - + <li><a href="#the-vttregion-interface"><span class="secno">8.2</span> <span class="content">The <code class="idl"><span>VTTRegion</span></code> interface</span></a> +
+
+
+
1678
+ 		+
+ + + <li><a href="#the-vttcue-interface"><span class="secno">9.1</span> <span class="content">The <code class="idl"><span>VTTCue</span></code> interface</span></a> +
+
+
+
1679
+ 		+
+ + + <li><a href="#the-vttregion-interface"><span class="secno">9.2</span> <span class="content">The <code class="idl"><span>VTTRegion</span></code> interface</span></a> +
+
+
1633
+
1680
+ 		+
+ + </ol> +
+
+
1634
+
1681
+ 		+
+ + <li> +
+
+
1635
+
+ 		+
+ - + <a href="#iana"><span class="secno">9</span> <span class="content">IANA considerations</span></a> +
+
+
+
1682
+ 		+
+ + + <a href="#iana"><span class="secno">10</span> <span class="content">IANA considerations</span></a> +
+
+
1636
+
1683
+ 		+
+ + <ol class="toc"> +
+
+
1637
+
+ 		+
+ - + <li><a href="#iana-text-vtt"><span class="secno">9.1</span> <span class="content"><span><code>text/vtt</code></span></span></a> +
+
+
+
1684
+ 		+
+ + + <li><a href="#iana-text-vtt"><span class="secno">10.1</span> <span class="content"><span><code>text/vtt</code></span></span></a> +
+
+
1638
+
1685
+ 		+
+ + </ol> +
+
+
1639
+
1686
+ 		+
+ + <li> +
+
+
1640
+
1687
+ 		+
+ + <a href="#privacy-and-security-considerations"><span class="secno"></span> <span class="content">Privacy and Security Considerations</span></a> +
+
+
@@ -1664,7 +1711,15 @@
+
+
1664
+
1711
+ 		+
+ + <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2> +
+
+
1665
+
1712
+ 		+
+ + <p><i>This section is non-normative.</i></p> +
+
+
1666
+
1713
+ 		+
+ + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt">WebVTT</dfn> (Web Video Text Tracks) format is intended for marking up external text +
+
+
1667
+
+ 		+
+ - + track resources.</p> +
+
+
+
1714
+ 		+
+ + + track resources in connection with the HTML &lt;track> element.</p> +
+
+
+
1715
+ 		+
+ + + <p>WebVTT files provide captions or subtitles for video content, and also text video descriptions <a data-link-type="biblio" href="#biblio-maur">[MAUR]</a>, chapters for content navigation, and more generally any form of metadata that is +
+
+
+
1716
+ 		+
+ + + time-aligned with audio or video content.</p> +
+
+
+
1717
+ 		+
+ + + <p>The majority of the current version of this specification is dedicated to describing how to use +
+
+
+
1718
+ 		+
+ + + WebVTT files for captioning or subtitling. There is minimal information about chapters and +
+
+
+
1719
+ 		+
+ + + time-aligned metadata and nothing about video descriptions at this stage.</p> +
+
+
+
1720
+ 		+
+ + + <p>In this section we provide some example WebVTT files as an introduction.</p> +
+
+
+
1721
+ 		+
+ + + <h3 class="heading settled" data-level="1.1" id="introduction-caption"><span class="secno">1.1. </span><span class="content">A simple caption file</span><a class="self-link" href="#introduction-caption"></a></h3> +
+
+
+
1722
+ 		+
+ + + <p><i>This section is non-normative.</i></p> +
+
+
1668
+
1723
+ 		+
+ + <p>The main use for WebVTT files is captioning or subtitling video content. Here is a sample file +
+
+
1669
+
1724
+ 		+
+ + that captions an interview:</p> +
+
+
1670
+
1725
+ 		+
+ + <pre>WEBVTT +
+
+
@@ -1708,7 +1763,21 @@
+
+
1708
+
1763
+ 		+
+ + 00:35.500 --> 00:38.000 +
+
+
1709
+
1764
+ 		+
+ + &lt;v Roger Bingham>You know I’m so excited my glasses are falling off here. +
+
+
1710
+
1765
+ 		+
+ + </pre> +
+
+
1711
+
+ 		+
+ - + <h3 class="heading settled" data-level="1.1" id="introduction-multiple-lines"><span class="secno">1.1. </span><span class="content">Cues with multiple lines</span><a class="self-link" href="#introduction-multiple-lines"></a></h3> +
+
+
+
1766
+ 		+
+ + + <p>You can see that a WebVTT file in general consists of a sequence of text segments associated with +
+
+
+
1767
+ 		+
+ + + a time-interval, called a cue (<a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-1">definition</a>). Beyond captioning and subtitling, +
+
+
+
1768
+ 		+
+ + + WebVTT can be used for time-aligned metadata, typically in use for delivering name-value pairs in +
+
+
+
1769
+ 		+
+ + + cues. WebVTT can also be used for delivering chapters, which helps with contextual navigation around +
+
+
+
1770
+ 		+
+ + + an audio/video file. Finally, WebVTT can be used for the delivery of text video descriptions, which +
+
+
+
1771
+ 		+
+ + + is text that describes the visual content of time-intervals and can be synthesized to speech to help +
+
+
+
1772
+ 		+
+ + + vision-impaired users understand context.</p> +
+
+
+
1773
+ 		+
+ + + <p class="note" role="note">This version of WebVTT focuses on solving the captioning and subtitling use cases. +
+
+
+
1774
+ 		+
+ + + More specification work is possible for the other use cases. A decision on what type of use case a +
+
+
+
1775
+ 		+
+ + + WebVTT file is being used for is made by the software that is using the file. For example, if in use +
+
+
+
1776
+ 		+
+ + + with a HTML file through a &lt;track> element, the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">kind</a> attribute +
+
+
+
1777
+ 		+
+ + + defines how the WebVTT file is to be interpreted.</p> +
+
+
+
1778
+ 		+
+ + + <p>The following subsections provide an overview of some of the key features of the WebVTT file +
+
+
+
1779
+ 		+
+ + + format, particularly when in use for captioning and subtitling.</p> +
+
+
+
1780
+ 		+
+ + + <h3 class="heading settled" data-level="1.2" id="introduction-multiple-lines"><span class="secno">1.2. </span><span class="content">Caption cues with multiple lines</span><a class="self-link" href="#introduction-multiple-lines"></a></h3> +
+
+
1712
+
1781
+ 		+
+ + <p><i>This section is non-normative.</i></p> +
+
+
1713
+
1782
+ 		+
+ + <p>Line breaks in cues are honored. User agents will also insert extra line breaks if necessary to +
+
+
1714
+
1783
+ 		+
+ + fit the cue in the cue’s width. In general, therefore, authors are encouraged to write cues all on +
+
+
@@ -1731,7 +1800,7 @@
+
+
1731
+
1800
+ 		+
+ + <p>The first cue is simple, it will probably just display on one line. The second will take two +
+
+
1732
+
1801
+ 		+
+ + lines, one for each speaker. The third will wrap to fit the width of the video, possibly taking +
+
+
1733
+
1802
+ 		+
+ + multiple lines. For example, the three cues could look like this:</p> +
+
+
1734
+
+ 		+
+ - + <pre> <samp>Never drink liquid nitrogen.</samp> +
+
+
+
1803
+ 		+
+ + + <pre>  <samp>Never drink liquid nitrogen.</samp> +
+
+
1735
+
1804
+ 		+
+ +
+
+
1736
+
1805
+ 		+
+ + <samp>— It will perforate your stomach.</samp> +
+
+
1737
+
1806
+ 		+
+ + <samp>— You could die.</samp> +
+
+
@@ -1744,7 +1813,7 @@
+
+
1744
+
1813
+ 		+
+ + </pre> +
+
+
1745
+
1814
+ 		+
+ + <p>If the width of the cues is smaller, the first two cues could wrap as well, as in the following +
+
+
1746
+
1815
+ 		+
+ + example. Note how the second cue’s explicit line break is still honored, however:</p> +
+
+
1747
+
+ 		+
+ - + <pre> <samp>Never drink</samp> +
+
+
+
1816
+ 		+
+ + + <pre>  <samp>Never drink</samp> +
+
+
1748
+
1817
+ 		+
+ + <samp>liquid nitrogen.</samp> +
+
+
1749
+
1818
+ 		+
+ +
+
+
1750
+
1819
+ 		+
+ + <samp>— It will perforate</samp> +
+
+
@@ -1764,53 +1833,7 @@
+
+
1764
+
1833
+ 		+
+ + </pre> +
+
+
1765
+
1834
+ 		+
+ + <p>Also notice how the wrapping is done so as to keep the line lengths balanced.</p> +
+
+
1766
+
1835
+ 		+
+ + </div> +
+
+
1767
+
+ 		+
+ - + <h3 class="heading settled" data-level="1.2" id="introduction-comments"><span class="secno">1.2. </span><span class="content">Comments</span><a class="self-link" href="#introduction-comments"></a></h3> +
+
+
+
1836
+ 		+
+ + + <h3 class="heading settled" data-level="1.3" id="styling"><span class="secno">1.3. </span><span class="content">Styling captions</span><a class="self-link" href="#styling"></a></h3> +
+
+
1768
+
+ 		+
+ - + <p><i>This section is non-normative.</i></p> +
+
+
1769
+
+ 		+
+ - + <p>Comments can be included in WebVTT files.</p> +
+
+
1770
+
+ 		+
+ - + <p>Comments are just blocks that are preceded by a blank line, start with the word +
+
+
1771
+
+ 		+
+ - + "<code>NOTE</code>" (followed by a space or newline), and end at the first blank line.</p> +
+
+
1772
+
+ 		+
+ - + <div class="example" id="example-44941b0b"> +
+
+
1773
+
+ 		+
+ - + <a class="self-link" href="#example-44941b0b"></a> +
+
+
1774
+
+ 		+
+ - + <p>Here, a one-line comment is used to note a possible problem with a cue.</p> +
+
+
1775
+
+ 		+
+ - + <pre>WEBVTT +
+
+
1776
+
+ 		+
+ - +
+
+
1777
+
+ 		+
+ - + 00:01.000 --> 00:04.000 +
+
+
1778
+
+ 		+
+ - + Never drink liquid nitrogen. +
+
+
1779
+
+ 		+
+ - +
+
+
1780
+
+ 		+
+ - + NOTE I’m not sure the timing is right on the following cue. +
+
+
1781
+
+ 		+
+ - +
+
+
1782
+
+ 		+
+ - + 00:05.000 --> 00:09.000 +
+
+
1783
+
+ 		+
+ - + — It will perforate your stomach. +
+
+
1784
+
+ 		+
+ - + — You could die. +
+
+
1785
+
+ 		+
+ - + </pre> +
+
+
1786
+
+ 		+
+ - + </div> +
+
+
1787
+
+ 		+
+ - + <div class="example" id="example-03a9f3ad"> +
+
+
1788
+
+ 		+
+ - + <a class="self-link" href="#example-03a9f3ad"></a> +
+
+
1789
+
+ 		+
+ - + <p>In this example, the author has written many comments.</p> +
+
+
1790
+
+ 		+
+ - + <pre>WEBVTT +
+
+
1791
+
+ 		+
+ - +
+
+
1792
+
+ 		+
+ - + NOTE +
+
+
1793
+
+ 		+
+ - + This file was written by Jill. I hope +
+
+
1794
+
+ 		+
+ - + you enjoy reading it. Some things to +
+
+
1795
+
+ 		+
+ - + bear in mind: +
+
+
1796
+
+ 		+
+ - + - I was lip-reading, so the cues may +
+
+
1797
+
+ 		+
+ - + not be 100% accurate +
+
+
1798
+
+ 		+
+ - + - I didn’t pay too close attention to +
+
+
1799
+
+ 		+
+ - + when the cues should start or end. +
+
+
1800
+
+ 		+
+ - +
+
+
1801
+
+ 		+
+ - + 00:01.000 --> 00:04.000 +
+
+
1802
+
+ 		+
+ - + Never drink liquid nitrogen. +
+
+
1803
+
+ 		+
+ - +
+
+
1804
+
+ 		+
+ - + NOTE check next cue +
+
+
1805
+
+ 		+
+ - +
+
+
1806
+
+ 		+
+ - + 00:05.000 --> 00:09.000 +
+
+
1807
+
+ 		+
+ - + — It will perforate your stomach. +
+
+
1808
+
+ 		+
+ - + — You could die. +
+
+
1809
+
+ 		+
+ - +
+
+
1810
+
+ 		+
+ - + NOTE end of file +
+
+
1811
+
+ 		+
+ - + </pre> +
+
+
1812
+
+ 		+
+ - + </div> +
+
+
1813
+
+ 		+
+ - + <h3 class="heading settled" data-level="1.3" id="styling"><span class="secno">1.3. </span><span class="content">Styling</span><a class="self-link" href="#styling"></a></h3> +
+
+
1814
+
1837
+ 		+
+ + <p><i>This section is non-normative.</i></p> +
+
+
1815
+
1838
+ 		+
+ + <p>CSS style sheets that apply to an HTML page that contains a <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element can +
+
+
1816
+
1839
+ 		+
+ + target WebVTT cues and regions in the video using the <span class="css">::cue</span>, <span class="css">::cue()</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region()</span> pseudo-elements.</p> +
+
+
@@ -1876,15 +1899,19 @@
+
+
1876
+
1899
+ 		+
+ + NOTE style blocks cannot appear after the first cue. +
+
+
1877
+
1900
+ 		+
+ + </pre> +
+
+
1878
+
1901
+ 		+
+ + </div> +
+
+
1879
+
+ 		+
+ - + <h3 class="heading settled" data-level="1.4" id="introduction-other-features"><span class="secno">1.4. </span><span class="content">Other features</span><a class="self-link" href="#introduction-other-features"></a></h3> +
+
+
+
1902
+ 		+
+ + + <h3 class="heading settled" data-level="1.4" id="introduction-other-features"><span class="secno">1.4. </span><span class="content">Other caption and subtitling features</span><a class="self-link" href="#introduction-other-features"></a></h3> +
+
+
1880
+
1903
+ 		+
+ + <p><i>This section is non-normative.</i></p> +
+
+
1881
+
1904
+ 		+
+ + <p>WebVTT also supports some less-often used features.</p> +
+
+
1882
+
+ 		+
+ - + <div class="example" id="example-5046f22f"> +
+
+
1883
+
+ 		+
+ - + <a class="self-link" href="#example-5046f22f"></a> +
+
+
+
1905
+ 		+
+ + + <div class="example" id="example-59f83607"> +
+
+
+
1906
+ 		+
+ + + <a class="self-link" href="#example-59f83607"></a> +
+
+
1884
+
1907
+ 		+
+ + <p>In this example, the cues have an identifier:</p> +
+
+
1885
+
1908
+ 		+
+ + <pre>WEBVTT +
+
+
1886
+
1909
+ 		+
+ +
+
+
1887
+
+ 		+
+ - + 1 +
+
+
+
1910
+ 		+
+ + + test +
+
+
+
1911
+ 		+
+ + + 00:00.000 --> 00:02.000 +
+
+
+
1912
+ 		+
+ + + This is a test. +
+
+
+
1913
+ 		+
+ + +
+
+
+
1914
+ 		+
+ + + 123 +
+
+
1888
+
1915
+ 		+
+ + 00:00.000 --> 00:02.000 +
+
+
1889
+
1916
+ 		+
+ + That’s an, an, that’s an L! +
+
+
1890
+
1917
+ 		+
+ +
+
+
@@ -1892,9 +1919,16 @@
+
+
1892
+
1919
+ 		+
+ + 00:04.000 --> 00:05.000 +
+
+
1893
+
1920
+ 		+
+ + Transcrit par Célestes™ +
+
+
1894
+
1921
+ 		+
+ + </pre> +
+
+
1895
+
+ 		+
+ - + <p>This allows a style sheet to specifically target the cues (notice the use of CSS character +
+
+
1896
+
+ 		+
+ - + escape sequences):</p> +
+
+
1897
+
+ 		+
+ - + <pre>::cue(#\31) { color: lime; } +
+
+
+
1922
+ 		+
+ + + <p>This allows a style sheet to specifically target the cues.</p> +
+
+
+
1923
+ 		+
+ + + <pre>/* style for cue: test */ +
+
+
+
1924
+ 		+
+ + + ::cue(#test) { color: lime; } +
+
+
+
1925
+ 		+
+ + + </pre> +
+
+
+
1926
+ 		+
+ + + <p>Due to the syntax rules of CSS, some characters need to be escaped with CSS character escape +
+
+
+
1927
+ 		+
+ + + sequences. For example, an ID that starts with a number 0-9 needs to be escaped. The ID <code>123</code> can be represented as "\31 23" (31 refers to the Unicode code point for "1"). See <a href="https://www.w3.org/International/questions/qa-escapes">Using character escapes in markup +
+
+
+
1928
+ 		+
+ + + and CSS</a> for more information on CSS escapes.</p> +
+
+
+
1929
+ 		+
+ + + <pre>/* style for cue: 123 */ +
+
+
+
1930
+ 		+
+ + + ::cue(#\31 23) { color: lime; } +
+
+
+
1931
+ 		+
+ + + /* style for cue: crédit de transcription */ +
+
+
1898
+
1932
+ 		+
+ + ::cue(#crédit\ de\ transcription) { color: red; } +
+
+
1899
+
1933
+ 		+
+ + </pre> +
+
+
1900
+
1934
+ 		+
+ + </div> +
+
+
@@ -1940,8 +1974,8 @@
+
+
1940
+
1974
+ 		+
+ + ::cue(.loud) { font-size: 2em } +
+
+
1941
+
1975
+ 		+
+ + </pre> +
+
+
1942
+
1976
+ 		+
+ + </div> +
+
+
1943
+
+ 		+
+ - + <div class="example" id="example-0c2976c9"> +
+
+
1944
+
+ 		+
+ - + <a class="self-link" href="#example-0c2976c9"></a> +
+
+
+
1977
+ 		+
+ + + <div class="example" id="example-b30cb609"> +
+
+
+
1978
+ 		+
+ + + <a class="self-link" href="#example-b30cb609"></a> +
+
+
1945
+
1979
+ 		+
+ + <p>This example shows how to position cues at explicit positions in the video viewport.</p> +
+
+
1946
+
1980
+ 		+
+ + <pre>WEBVTT +
+
+
1947
+
1981
+ 		+
+ +
+
+
@@ -1956,7 +1990,7 @@
+
+
1956
+
1990
+ 		+
+ + </pre> +
+
+
1957
+
1991
+ 		+
+ + <p>Since the cues in these examples are horizontal, the "position" setting refers to a percentage +
+
+
1958
+
1992
+ 		+
+ + of the width of the video viewpoint. If the text were vertical, the "position" setting would refer +
+
+
1959
+
+ 		+
+ - + to the height of the viewport.</p> +
+
+
+
1993
+ 		+
+ + + to the height of the video viewport.</p> +
+
+
1960
+
1994
+ 		+
+ + <p>The "line-left" or "line-right" only refers to the physical side of the box to which the +
+
+
1961
+
1995
+ 		+
+ + "position" setting applies, in a way which is agnostic regarding the horizontal or vertical +
+
+
1962
+
1996
+ 		+
+ + direction of the cue. It does not affect or relate to the direction or position of the text itself +
+
+
@@ -2025,6 +2059,118 @@
+
+
2025
+
2059
+ 		+
+ + </pre> +
+
+
2026
+
2060
+ 		+
+ + <p>Note that regions are only defined for horizontal cues.</p> +
+
+
2027
+
2061
+ 		+
+ + </div> +
+
+
+
2062
+ 		+
+ + + <h3 class="heading settled" data-level="1.5" id="introduction-comments"><span class="secno">1.5. </span><span class="content">Comments in WebVTT</span><a class="self-link" href="#introduction-comments"></a></h3> +
+
+
+
2063
+ 		+
+ + + <p><i>This section is non-normative.</i></p> +
+
+
+
2064
+ 		+
+ + + <p>Comments can be included in WebVTT files.</p> +
+
+
+
2065
+ 		+
+ + + <p>Comments are just blocks that are preceded by a blank line, start with the word +
+
+
+
2066
+ 		+
+ + + "<code>NOTE</code>" (followed by a space or newline), and end at the first blank line.</p> +
+
+
+
2067
+ 		+
+ + + <div class="example" id="example-44941b0b"> +
+
+
+
2068
+ 		+
+ + + <a class="self-link" href="#example-44941b0b"></a> +
+
+
+
2069
+ 		+
+ + + <p>Here, a one-line comment is used to note a possible problem with a cue.</p> +
+
+
+
2070
+ 		+
+ + + <pre>WEBVTT +
+
+
+
2071
+ 		+
+ + +
+
+
+
2072
+ 		+
+ + + 00:01.000 --> 00:04.000 +
+
+
+
2073
+ 		+
+ + + Never drink liquid nitrogen. +
+
+
+
2074
+ 		+
+ + +
+
+
+
2075
+ 		+
+ + + NOTE I’m not sure the timing is right on the following cue. +
+
+
+
2076
+ 		+
+ + +
+
+
+
2077
+ 		+
+ + + 00:05.000 --> 00:09.000 +
+
+
+
2078
+ 		+
+ + + — It will perforate your stomach. +
+
+
+
2079
+ 		+
+ + + — You could die. +
+
+
+
2080
+ 		+
+ + + </pre> +
+
+
+
2081
+ 		+
+ + + </div> +
+
+
+
2082
+ 		+
+ + + <div class="example" id="example-03a9f3ad"> +
+
+
+
2083
+ 		+
+ + + <a class="self-link" href="#example-03a9f3ad"></a> +
+
+
+
2084
+ 		+
+ + + <p>In this example, the author has written many comments.</p> +
+
+
+
2085
+ 		+
+ + + <pre>WEBVTT +
+
+
+
2086
+ 		+
+ + +
+
+
+
2087
+ 		+
+ + + NOTE +
+
+
+
2088
+ 		+
+ + + This file was written by Jill. I hope +
+
+
+
2089
+ 		+
+ + + you enjoy reading it. Some things to +
+
+
+
2090
+ 		+
+ + + bear in mind: +
+
+
+
2091
+ 		+
+ + + - I was lip-reading, so the cues may +
+
+
+
2092
+ 		+
+ + + not be 100% accurate +
+
+
+
2093
+ 		+
+ + + - I didn’t pay too close attention to +
+
+
+
2094
+ 		+
+ + + when the cues should start or end. +
+
+
+
2095
+ 		+
+ + +
+
+
+
2096
+ 		+
+ + + 00:01.000 --> 00:04.000 +
+
+
+
2097
+ 		+
+ + + Never drink liquid nitrogen. +
+
+
+
2098
+ 		+
+ + +
+
+
+
2099
+ 		+
+ + + NOTE check next cue +
+
+
+
2100
+ 		+
+ + +
+
+
+
2101
+ 		+
+ + + 00:05.000 --> 00:09.000 +
+
+
+
2102
+ 		+
+ + + — It will perforate your stomach. +
+
+
+
2103
+ 		+
+ + + — You could die. +
+
+
+
2104
+ 		+
+ + +
+
+
+
2105
+ 		+
+ + + NOTE end of file +
+
+
+
2106
+ 		+
+ + + </pre> +
+
+
+
2107
+ 		+
+ + + </div> +
+
+
+
2108
+ 		+
+ + + <h3 class="heading settled" data-level="1.6" id="introduction-chapters"><span class="secno">1.6. </span><span class="content">Chapters example</span><a class="self-link" href="#introduction-chapters"></a></h3> +
+
+
+
2109
+ 		+
+ + + <p><i>This section is non-normative.</i></p> +
+
+
+
2110
+ 		+
+ + + <p>A WebVTT file can consist of chapters, which are navigation markers for the video.</p> +
+
+
+
2111
+ 		+
+ + + <p>Chapters are plain text, typically just a single line.</p> +
+
+
+
2112
+ 		+
+ + + <div class="example" id="example-5b78f944"> +
+
+
+
2113
+ 		+
+ + + <a class="self-link" href="#example-5b78f944"></a> +
+
+
+
2114
+ 		+
+ + + <p>In this example, a talk is split into each slide being a chapter.</p> +
+
+
+
2115
+ 		+
+ + + <pre>WEBVTT +
+
+
+
2116
+ 		+
+ + +
+
+
+
2117
+ 		+
+ + + NOTE +
+
+
+
2118
+ 		+
+ + + This is from a talk Silvia gave about WebVTT. +
+
+
+
2119
+ 		+
+ + +
+
+
+
2120
+ 		+
+ + + Slide 1 +
+
+
+
2121
+ 		+
+ + + 00:00:00.000 --> 00:00:10.700 +
+
+
+
2122
+ 		+
+ + + Title Slide +
+
+
+
2123
+ 		+
+ + +
+
+
+
2124
+ 		+
+ + + Slide 2 +
+
+
+
2125
+ 		+
+ + + 00:00:10.700 --> 00:00:47.600 +
+
+
+
2126
+ 		+
+ + + Introduction by Naomi Black +
+
+
+
2127
+ 		+
+ + +
+
+
+
2128
+ 		+
+ + + Slide 3 +
+
+
+
2129
+ 		+
+ + + 00:00:47.600 --> 00:01:50.100 +
+
+
+
2130
+ 		+
+ + + Impact of Captions on the Web +
+
+
+
2131
+ 		+
+ + +
+
+
+
2132
+ 		+
+ + + Slide 4 +
+
+
+
2133
+ 		+
+ + + 00:01:50.100 --> 00:03:33.000 +
+
+
+
2134
+ 		+
+ + + Requirements of a Video text format +
+
+
+
2135
+ 		+
+ + + </pre> +
+
+
+
2136
+ 		+
+ + + </div> +
+
+
+
2137
+ 		+
+ + + <h3 class="heading settled" data-level="1.7" id="introduction-metadata"><span class="secno">1.7. </span><span class="content">Metadata example</span><a class="self-link" href="#introduction-metadata"></a></h3> +
+
+
+
2138
+ 		+
+ + + <p><i>This section is non-normative.</i></p> +
+
+
+
2139
+ 		+
+ + + <p>A WebVTT file can consist of time-aligned metadata.</p> +
+
+
+
2140
+ 		+
+ + + <p>Metadata can be any string and is often provided as a JSON construct.</p> +
+
+
+
2141
+ 		+
+ + + <p>Note that you cannot provide blank lines inside a metadata block, because the blank line +
+
+
+
2142
+ 		+
+ + + signifies the end of the WebVTT cue.</p> +
+
+
+
2143
+ 		+
+ + + <div class="example" id="example-7e3f730b"> +
+
+
+
2144
+ 		+
+ + + <a class="self-link" href="#example-7e3f730b"></a> +
+
+
+
2145
+ 		+
+ + + <p>In this example, a talk is split into each slide being a chapter.</p> +
+
+
+
2146
+ 		+
+ + + <pre>WEBVTT +
+
+
+
2147
+ 		+
+ + +
+
+
+
2148
+ 		+
+ + + NOTE +
+
+
+
2149
+ 		+
+ + + Thanks to http://output.jsbin.com/mugibo +
+
+
+
2150
+ 		+
+ + +
+
+
+
2151
+ 		+
+ + + 1 +
+
+
+
2152
+ 		+
+ + + 00:00:00.100 --> 00:00:07.342 +
+
+
+
2153
+ 		+
+ + + { +
+
+
+
2154
+ 		+
+ + + "type": "WikipediaPage", +
+
+
+
2155
+ 		+
+ + + "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats" +
+
+
+
2156
+ 		+
+ + + } +
+
+
+
2157
+ 		+
+ + +
+
+
+
2158
+ 		+
+ + + 2 +
+
+
+
2159
+ 		+
+ + + 00:07.810 --> 00:09.221 +
+
+
+
2160
+ 		+
+ + + { +
+
+
+
2161
+ 		+
+ + + "type": "WikipediaPage", +
+
+
+
2162
+ 		+
+ + + "url" :"http://samuraipizzacats.wikia.com/wiki/Samurai_Pizza_Cats_Wiki" +
+
+
+
2163
+ 		+
+ + + } +
+
+
+
2164
+ 		+
+ + +
+
+
+
2165
+ 		+
+ + + 3 +
+
+
+
2166
+ 		+
+ + + 00:11.441 --> 00:14.441 +
+
+
+
2167
+ 		+
+ + + { +
+
+
+
2168
+ 		+
+ + + "type": "LongLat", +
+
+
+
2169
+ 		+
+ + + "lat" : "36.198269", +
+
+
+
2170
+ 		+
+ + + "long": "137.2315355" +
+
+
+
2171
+ 		+
+ + + } +
+
+
+
2172
+ 		+
+ + + </pre> +
+
+
+
2173
+ 		+
+ + + </div> +
+
+
2028
+
2174
+ 		+
+ + <h2 class="heading settled" data-level="2" id="conformance"><span class="secno">2. </span><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2> +
+
+
2029
+
2175
+ 		+
+ + <p>All diagrams, examples, and notes in this specification are non-normative, as are all sections +
+
+
2030
+
2176
+ 		+
+ + explicitly marked non-normative. Everything else in this specification is normative.</p> +
+
+
@@ -2043,7 +2189,7 @@
+
+
2043
+
2189
+ 		+
+ + <p>This specification describes the conformance criteria for user agents (relevant to implementors) +
+
+
2044
+
2190
+ 		+
+ + and <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-1">WebVTT files</a> (relevant to authors and authoring tool implementors).</p> +
+
+
2045
+
2191
+ 		+
+ + <p class="note" role="note"><a href="#syntax">§4 Syntax</a> defines what consists of a valid <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-2">WebVTT file</a>. Authors need to +
+
+
2046
+
+ 		+
+ - + follow the requirements therein, and are encouraged to use a conformance checker. <a href="#parsing">§5 Parsing</a> defines how user agents are to interpret a file labelled as <a data-link-type="dfn" href="#text-vtt" id="ref-for-text-vtt-1">text/vtt</a>, for both valid and +
+
+
+
2192
+ 		+
+ + + follow the requirements therein, and are encouraged to use a conformance checker. <a href="#parsing">§6 Parsing</a> defines how user agents are to interpret a file labelled as <a data-link-type="dfn" href="#text-vtt" id="ref-for-text-vtt-1">text/vtt</a>, for both valid and +
+
+
2047
+
2193
+ 		+
+ + invalid <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-3">WebVTT files</a>. The parsing rules are more tolerant to author errors than the syntax +
+
+
2048
+
2194
+ 		+
+ + allows, in order to provide for extensibility and to still render cues that have some syntax +
+
+
2049
+
2195
+ 		+
+ + errors.</p> +
+
+
@@ -2060,7 +2206,26 @@
+
+
2060
+
2206
+ 		+
+ + specification. <a data-link-type="biblio" href="#biblio-webidl-1">[WEBIDL-1]</a></p> +
+
+
2061
+
2207
+ 		+
+ + <dt>User agents with no scripting support +
+
+
2062
+
2208
+ 		+
+ + <dd> +
+
+
2063
+
+ 		+
+ - + <p>All processing requirements in this specification apply, except those in <a href="#api">§8 API</a>.</p> +
+
+
+
2209
+ 		+
+ + + <p>All processing requirements in this specification apply, except those in <a href="#dom-construction-rules">§6.5 WebVTT cue text DOM construction rules</a> and <a href="#api">§9 API</a>.</p> +
+
+
+
2210
+ 		+
+ + + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="user-agents-that-do-not-support-css">User agents that do not support CSS</dfn> +
+
+
+
2211
+ 		+
+ + + <dd> +
+
+
+
2212
+ 		+
+ + + <p>All processing requirements in this specification apply, except parts of <a href="#parsing">§6 Parsing</a> that +
+
+
+
2213
+ 		+
+ + + relate to stylesheets and CSS, and all of <a href="#rendering">§7 Rendering</a> and <a href="#css-extensions">§8 CSS extensions</a>. The user agent +
+
+
+
2214
+ 		+
+ + + must instead only render the text inside <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-1">WebVTT caption or subtitle cue text</a> in an +
+
+
+
2215
+ 		+
+ + + appropriate manner and specifically support the color classes defined in <a href="#default-classes">§5 Default classes for WebVTT Caption or Subtitle Cue Components</a>. Any +
+
+
+
2216
+ 		+
+ + + other styling instructions are optional.</p> +
+
+
+
2217
+ 		+
+ + + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="user-agents-that-do-not-support-a-full-html-css-engine">User agents that do not support a full HTML CSS engine</dfn> +
+
+
+
2218
+ 		+
+ + + <dd> +
+
+
+
2219
+ 		+
+ + + <p>All processing requirements in this specification apply, including the color classes defined +
+
+
+
2220
+ 		+
+ + + in <a href="#default-classes">§5 Default classes for WebVTT Caption or Subtitle Cue Components</a>. However, the user agent will need to apply the CSS related features in <a href="#parsing">§6 Parsing</a>, <a href="#rendering">§7 Rendering</a> and <a href="#css-extensions">§8 CSS extensions</a> in such a way that the rendered results are +
+
+
+
2221
+ 		+
+ + + equivalent to what a full CSS supporting renderer produces.</p> +
+
+
+
2222
+ 		+
+ + + <dt><dfn data-dfn-type="dfn" data-noexport="" id="user-agents-that-support-a-full-html-css-engine">User agents that support a full HTML CSS engine<a class="self-link" href="#user-agents-that-support-a-full-html-css-engine"></a></dfn> +
+
+
+
2223
+ 		+
+ + + <dd> +
+
+
+
2224
+ 		+
+ + + <p>All processing requirements in this specification apply. However, only a limited set of CSS +
+
+
+
2225
+ 		+
+ + + styles is allowed because <a data-link-type="dfn" href="#user-agents-that-do-not-support-a-full-html-css-engine" id="ref-for-user-agents-that-do-not-support-a-full-html-css-engine-1">user agents that do not support a full HTML CSS engine</a> will need +
+
+
+
2226
+ 		+
+ + + to implement CSS functionality equivalents. User agents that support a full CSS engine must +
+
+
+
2227
+ 		+
+ + + therefore limit the CSS styles they apply for WebVTT so as to enable identical rendering without +
+
+
+
2228
+ 		+
+ + + bleeding in extra CSS styles that are beyond the WebVTT specification.</p> +
+
+
2064
+
2229
+ 		+
+ + <dt>Conformance checkers +
+
+
2065
+
2230
+ 		+
+ + <dd> +
+
+
2066
+
2231
+ 		+
+ + <p>Conformance checkers must verify that a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-4">WebVTT file</a> conforms to the applicable +
+
+
@@ -2083,20 +2248,50 @@
+
+
2083
+
2248
+ 		+
+ + cue with an ID consisting of the character U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE (a +
+
+
2084
+
2249
+ 		+
+ + precomposed character).</p> +
+
+
2085
+
2250
+ 		+
+ + <h2 class="heading settled" data-level="3" id="data-model"><span class="secno">3. </span><span class="content">Data model</span><a class="self-link" href="#data-model"></a></h2> +
+
+
2086
+
+ 		+
+ - + <h3 class="heading settled" data-level="3.1" id="cues"><span class="secno">3.1. </span><span class="content">WebVTT cues</span><a class="self-link" href="#cues"></a></h3> +
+
+
2087
+
+ 		+
+ - + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue">WebVTT cue</dfn> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> that additionally consist of the following: <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a></p> +
+
+
+
2251
+ 		+
+ + + <p class="note" role="note">The box model of WebVTT consists of three key elements: the video viewport, cues, and +
+
+
+
2252
+ 		+
+ + + regions. The video viewport is the rendering area into which cues and regions are rendered. Cues are +
+
+
+
2253
+ 		+
+ + + boxes consisting of a set of cue lines. Regions are subareas of the video viewport that are used to +
+
+
+
2254
+ 		+
+ + + group cues together. Cues are positioned either inside the video viewport directly or inside a +
+
+
+
2255
+ 		+
+ + + region, which is positioned inside the video viewport.</p> +
+
+
+
2256
+ 		+
+ + + <p class="note" role="note">The position of a cue inside the video viewport is defined by a set of cue settings. +
+
+
+
2257
+ 		+
+ + + The position of a region inside the video viewport is defined by a set of region settings. Cues that +
+
+
+
2258
+ 		+
+ + + are inside regions can only use a limited set of their cue settings. Specifically, if the cue has a +
+
+
+
2259
+ 		+
+ + + "vertical", "line" or "size" setting, the cue drops out of the region. Otherwise, the cue’s width is +
+
+
+
2260
+ 		+
+ + + calculated to be relative to the region width rather than the viewport. </p> +
+
+
+
2261
+ 		+
+ + + <h3 class="heading settled" data-level="3.1" id="model-overview"><span class="secno">3.1. </span><span class="content">Overview</span><a class="self-link" href="#model-overview"></a></h3> +
+
+
+
2262
+ 		+
+ + + <p><i>This section is non-normative.</i></p> +
+
+
+
2263
+ 		+
+ + + <p>The WebVTT file is a container file for chunks of data that are time-aligned with a video or +
+
+
+
2264
+ 		+
+ + + audio resource. It can therefore be regarded as a serialisation format for time-aligned data.</p> +
+
+
+
2265
+ 		+
+ + + <p>A WebVTT file starts with a header and then contains a series of data blocks. If a data block has +
+
+
+
2266
+ 		+
+ + + a start and end time, it is called a WebVTT cue. A comment is another kind of data block.</p> +
+
+
+
2267
+ 		+
+ + + <p>Different kinds of data can be carried in WebVTT files. The HTML specification identifies +
+
+
+
2268
+ 		+
+ + + captions, subtitles, chapters, audio descriptions and metadata as data kinds and specifies which one +
+
+
+
2269
+ 		+
+ + + is being used in the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a> attribute of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> element <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a>.</p> +
+
+
+
2270
+ 		+
+ + + <p>A WebVTT file must only contain data of one kind, never a mix of different kinds of data. The +
+
+
+
2271
+ 		+
+ + + data kind of a WebVTT file is externally specified, such as in a HTML file’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> element. The environment is responsible for interpreting the data correctly.</p> +
+
+
+
2272
+ 		+
+ + + <p>WebVTT caption or subtitle cues are rendered as overlays on top of a video viewport or into a +
+
+
+
2273
+ 		+
+ + + region, which is a subarea of the video viewport.</p> +
+
+
+
2274
+ 		+
+ + + <h3 class="heading settled" data-level="3.2" id="model-cues"><span class="secno">3.2. </span><span class="content">WebVTT cues</span><a class="self-link" href="#model-cues"></a></h3> +
+
+
+
2275
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue">WebVTT cue</dfn> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a> that additionally consist of the +
+
+
+
2276
+ 		+
+ + + following: </p> +
+
+
2088
+
2277
+ 		+
+ + <dl> +
+
+
2089
+
+ 		+
+ - + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="text track cue text" data-noexport="" id="text-track-cue-text">A cue text</dfn> +
+
+
+
2278
+ 		+
+ + + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue text" data-noexport="" id="cue-text">A cue text</dfn> +
+
+
2090
+
2279
+ 		+
+ + <dd> +
+
+
2091
+
+ 		+
+ - + <p>The raw text of the cue, and rules for its interpretation, allowing the text to be rendered and +
+
+
2092
+
+ 		+
+ - + converted to a DOM fragment.</p> +
+
+
+
2280
+ 		+
+ + + <p>The raw text of the cue, and rules for its interpretation.</p> +
+
+
+
2281
+ 		+
+ + + </dl> +
+
+
+
2282
+ 		+
+ + + <h3 class="heading settled" data-level="3.3" id="cues"><span class="secno">3.3. </span><span class="content">WebVTT caption or subtitle cues</span><a class="self-link" href="#cues"></a></h3> +
+
+
+
2283
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue">WebVTT caption or subtitle cue</dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-2">WebVTT cue</a> that has the following +
+
+
+
2284
+ 		+
+ + + additional properties allowing the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-1">cue text</a> to be rendered and converted to a DOM +
+
+
+
2285
+ 		+
+ + + fragment:</p> +
+
+
+
2286
+ 		+
+ + + <dl> +
+
+
2093
+
2287
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue box" data-noexport="" id="webvtt-cue-box">A cue box</dfn> +
+
+
2094
+
2288
+ 		+
+ + <dd> +
+
+
2095
+
+ 		+
+ - + <p>The cue box of a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-1">WebVTT cue</a> is a box within which the text of all lines of the cue is to +
+
+
2096
+
+ 		+
+ - + be rendered.</p> +
+
+
+
2289
+ 		+
+ + + <p>The cue box of a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-3">WebVTT cue</a> is a box within which the text of all lines of the cue is to +
+
+
+
2290
+ 		+
+ + + be rendered. It is either rendered into the video’s viewport or a region inside the viewport if +
+
+
+
2291
+ 		+
+ + + the cue is part of a region.</p> +
+
+
2097
+
2292
+ 		+
+ + <p class="note" role="note">The position of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-6">cue box</a> within the video viewport’s +
+
+
2098
+
+ 		+
+ - + dimensions depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-1">WebVTT cue position</a> and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-1">WebVTT cue +
+
+
2099
+
+ 		+
+ - + line</a>.</p> +
+
+
+
2293
+ 		+
+ + + or region’s dimensions depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-1">WebVTT cue position</a> and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-1">WebVTT +
+
+
+
2294
+ 		+
+ + + cue line</a>.</p> +
+
+
2100
+
2295
+ 		+
+ + <p class="note" role="note">Lines are wrapped within the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-7">cue box</a>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-1">size</a> if lines' lengths make this necessary.</p> +
+
+
2101
+
2296
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue writing direction" data-noexport="" id="webvtt-cue-writing-direction">A writing direction</dfn> +
+
+
2102
+
2297
+ 		+
+ + <dd> +
+
+
@@ -2125,42 +2320,41 @@
+
+
2125
+
2320
+ 		+
+ + <p>A boolean indicating whether the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-3">line</a> is an integer number of lines +
+
+
2126
+
2321
+ 		+
+ + (using the line dimensions of the first line of the cue), or whether it is a percentage of the +
+
+
2127
+
2322
+ 		+
+ + dimension of the video. The flag is set to true when lines are counted, and false otherwise.</p> +
+
+
2128
+
+ 		+
+ - + <p>Cues whose <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-1">WebVTT cue snap-to-lines flag</a> is true will be placed within the title-safe +
+
+
2129
+
+ 		+
+ - + area on user agents that use overscan. Cues where the flag is false will be offset as requested +
+
+
2130
+
+ 		+
+ - + (modulo overlap avoidance if multiple cues are in the same place).</p> +
+
+
+
2323
+ 		+
+ + + <p>Cues where the flag is false will be offset as requested modulo overlap avoidance if multiple +
+
+
+
2324
+ 		+
+ + + cues are in the same place.</p> +
+
+
+
2325
+ 		+
+ + + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-1">snap-to-lines flag</a> is set to +
+
+
2131
+
+ 		+
+ - + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-2">snap-to-lines flag</a> is set to +
+
+
2132
+
2326
+ 		+
+ + true.</p> +
+
+
2133
+
2327
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line" data-noexport="" id="webvtt-cue-line">A line</dfn> +
+
+
2134
+
2328
+ 		+
+ + <dd> +
+
+
2135
+
2329
+ 		+
+ + <p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-4">line</a> defines positioning of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-8">cue +
+
+
2136
+
2330
+ 		+
+ + box</a>.</p> +
+
+
2137
+
2331
+ 		+
+ + <p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-5">line</a> offsets the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-9">cue box</a> from the +
+
+
2138
+
+ 		+
+ - + top, the right or left of the video viewport as defined by the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-3">writing direction</a>, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-3">snap-to-lines +
+
+
+
2332
+ 		+
+ + + top, the right or left of the video viewport as defined by the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-3">writing direction</a>, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-2">snap-to-lines +
+
+
2139
+
2333
+ 		+
+ + flag</a>, or the lines occupied by any other showing tracks.</p> +
+
+
2140
+
2334
+ 		+
+ + <p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-6">line</a> is set either as a number of lines, a percentage of the +
+
+
2141
+
2335
+ 		+
+ + video viewport height or width, or as the special value <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line +
+
+
2142
+
2336
+ 		+
+ + automatic" data-noexport="" id="webvtt-cue-line-automatic">auto</dfn>, which means the offset is to depend on the other showing tracks.</p> +
+
+
2143
+
2337
+ 		+
+ + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-7">line</a> is set to <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-1">auto</a>.</p> +
+
+
2144
+
2338
+ 		+
+ + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-4">writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-2">horizontal</a>, then the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-8">line</a> percentages are relative to the height of the video, otherwise to the width of the video.</p> +
+
+
2145
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-2">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed line" data-noexport="" id="cue-computed-line">computed line</dfn> whose value is that +
+
+
+
2339
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-4">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed line" data-noexport="" id="cue-computed-line">computed line</dfn> whose value is that +
+
+
2146
+
2340
+ 		+
+ + returned by the following algorithm, which is defined in terms of the other aspects of the +
+
+
2147
+
2341
+ 		+
+ + cue:</p> +
+
+
2148
+
2342
+ 		+
+ + <ol class="algorithm" data-algorithm="computed line"> +
+
+
2149
+
2343
+ 		+
+ + <li> +
+
+
2150
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-9">line</a> is numeric, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-4">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-3">WebVTT cue</a> is false, and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-10">line</a> is negative or +
+
+
+
2344
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-9">line</a> is numeric, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-3">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-5">WebVTT cue</a> is false, and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-10">line</a> is negative or +
+
+
2151
+
2345
+ 		+
+ + greater than 100, then return 100 and abort these steps.</p> +
+
+
2152
+
+ 		+
+ - + <p class="note" role="note">Although the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-1">WebVTT parser</a> will not set the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-11">line</a> to a number outside the range 0..100 and also set the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-5">WebVTT cue snap-to-lines +
+
+
+
2346
+ 		+
+ + + <p class="note" role="note">Although the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-1">WebVTT parser</a> will not set the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-11">line</a> to a number outside the range 0..100 and also set the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-4">WebVTT cue snap-to-lines +
+
+
2153
+
2347
+ 		+
+ + flag</a> to false, this can happen when using the DOM API’s <code class="idl"><a data-link-type="idl" href="#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-1">snapToLines</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-vttcue-line" id="ref-for-dom-vttcue-line-1">line</a></code> attributes.</p> +
+
+
2154
+
2348
+ 		+
+ + <li> +
+
+
2155
+
2349
+ 		+
+ + <p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-12">line</a> is numeric, return the value of the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-13">WebVTT cue +
+
+
2156
+
+ 		+
+ - + line</a> and abort these steps. (Either the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-6">WebVTT cue snap-to-lines flag</a> is true, so any +
+
+
+
2350
+ 		+
+ + + line</a> and abort these steps. (Either the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-5">WebVTT cue snap-to-lines flag</a> is true, so any +
+
+
2157
+
2351
+ 		+
+ + value, not just those in the range 0..100, is valid, or the value is in the range 0..100 and is +
+
+
2158
+
2352
+ 		+
+ + thus valid regardless of the value of that flag.)</p> +
+
+
2159
+
2353
+ 		+
+ + <li> +
+
+
2160
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-7">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-4">WebVTT cue</a> is false, return the +
+
+
+
2354
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-6">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-6">WebVTT cue</a> is false, return the +
+
+
2161
+
2355
+ 		+
+ + value 100 and abort these steps. (The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-14">line</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-2">auto</a>.)</p> +
+
+
2162
+
2356
+ 		+
+ + <li> +
+
+
2163
+
+ 		+
+ - + <p>Let <var>cue</var> be the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-5">WebVTT cue</a>.</p> +
+
+
+
2357
+ 		+
+ + + <p>Let <var>cue</var> be the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-7">WebVTT cue</a>.</p> +
+
+
2164
+
2358
+ 		+
+ + <li> +
+
+
2165
+
2359
+ 		+
+ + <p>If <var>cue</var> is not in a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">list of cues</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text +
+
+
2166
+
2360
+ 		+
+ + track</a>, or if that <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> is not in the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-text-tracks">list of text tracks</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media +
+
+
@@ -2177,7 +2371,7 @@
+
+
2177
+
2371
+ 		+
+ + <li> +
+
+
2178
+
2372
+ 		+
+ + <p>Return <var>n</var>.</p> +
+
+
2179
+
2373
+ 		+
+ + </ol> +
+
+
2180
+
+ 		+
+ - + <p class="example" id="example-d1c46c31"><a class="self-link" href="#example-d1c46c31"></a>For example, if two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#modedef-track-showing">showing</a> at the same time in one <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, and each <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> currently has an active <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-6">WebVTT cue</a> whose <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-15">line</a> are both <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-3">auto</a>, then the first <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s cue’s <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-1">computed line</a> will be −1 and the second will be −2.</p> +
+
+
+
2374
+ 		+
+ + + <p class="example" id="example-d1c46c31"><a class="self-link" href="#example-d1c46c31"></a>For example, if two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#modedef-track-showing">showing</a> at the same time in one <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, and each <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> currently has an active <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-8">WebVTT cue</a> whose <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-15">line</a> are both <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-3">auto</a>, then the first <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s cue’s <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-1">computed line</a> will be −1 and the second will be −2.</p> +
+
+
2181
+
2375
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line alignment" data-noexport="" id="webvtt-cue-line-alignment">A line alignment</dfn> +
+
+
2182
+
2376
+ 		+
+ + <dd> +
+
+
2183
+
2377
+ 		+
+ + <p>An alignment for the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-10">cue box</a>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-16">line</a>, one +
+
+
@@ -2204,12 +2398,13 @@
+
+
2204
+
2398
+ 		+
+ + dimensions.</p> +
+
+
2205
+
2399
+ 		+
+ + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-5">position</a> is set to <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-1">auto</a>.</p> +
+
+
2206
+
2400
+ 		+
+ + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-6">writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-5">horizontal</a>, then the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-6">position</a> percentages are relative to the width of the video, otherwise to the height of the video.</p> +
+
+
2207
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-7">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position" data-noexport="" id="cue-computed-position">computed position</dfn> whose value +
+
+
+
2401
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-9">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position" data-noexport="" id="cue-computed-position">computed position</dfn> whose value +
+
+
2208
+
2402
+ 		+
+ + is that returned by the following algorithm, which is defined in terms of the other aspects of the +
+
+
2209
+
2403
+ 		+
+ + cue:</p> +
+
+
2210
+
2404
+ 		+
+ + <ol class="algorithm" data-algorithm="computed position"> +
+
+
2211
+
2405
+ 		+
+ + <li> +
+
+
2212
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-7">position</a> is numeric, then return the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-8">position</a> and abort these steps. (Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-9">position</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-2">auto</a>.)</p> +
+
+
+
2406
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-7">position</a> is numeric between 0 and 100, then return +
+
+
+
2407
+ 		+
+ + + the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-8">position</a> and abort these steps. (Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-9">position</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-2">auto</a>.)</p> +
+
+
2213
+
2408
+ 		+
+ + <li> +
+
+
2214
+
2409
+ 		+
+ + <p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-3">cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-1">left</a>, return 0 and abort these steps.</p> +
+
+
2215
+
2410
+ 		+
+ + <li> +
+
+
@@ -2222,12 +2417,12 @@
+
+
2222
+
2417
+ 		+
+ + right-to-left cue text, the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-16">cue box</a> is positioned from the left edge of +
+
+
2223
+
2418
+ 		+
+ + the video viewport. This allows defining a rendering space template which can be filled with +
+
+
2224
+
2419
+ 		+
+ + either left-to-right or right-to-left cue text, or both.</p> +
+
+
2225
+
+ 		+
+ - + <p>For <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-8">WebVTT cues</a> that have a <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-3">size</a> other than 100%, and a <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-6">text alignment</a> of <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-1">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-1">end</a>, authors must not use the default <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-3">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-11">position</a>.</p> +
+
+
+
2420
+ 		+
+ + + <p>For <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-10">WebVTT cues</a> that have a <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-3">size</a> other than 100%, and a <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-6">text alignment</a> of <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-1">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-1">end</a>, authors must not use the default <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-3">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-11">position</a>.</p> +
+
+
2226
+
2421
+ 		+
+ + <p class="note" role="note">When the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-7">text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-2">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-2">end</a>, the <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-4">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-12">position</a> is 50%. This is different +
+
+
2227
+
2422
+ 		+
+ + from <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-2">left</a> and <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-2">right</a> aligned text, where the <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-5">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-13">position</a> is 0% and 100%, respectively. The above requirement is present because it +
+
+
2228
+
+ 		+
+ - + can be surprising that automatic positioning doesn’t work for <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-3">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-3">end</a> aligned text. Since <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-1">cue text</a> can consist of text with left-to-right base direction, or right-to-left +
+
+
2229
+
+ 		+
+ - + base direction, or both (on different lines), such automatic positioning would have unexpected +
+
+
2230
+
+ 		+
+ - + results.</p> +
+
+
+
2423
+ 		+
+ + + can be surprising that automatic positioning doesn’t work for <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-3">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-3">end</a> aligned text. Since <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-2">cue +
+
+
+
2424
+ 		+
+ + + text</a> can consist of text with left-to-right base direction, or right-to-left base direction, +
+
+
+
2425
+ 		+
+ + + or both (on different lines), such automatic positioning would have unexpected results.</p> +
+
+
2231
+
2426
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue position alignment" data-noexport="" id="webvtt-cue-position-alignment">A position alignment</dfn> +
+
+
2232
+
2427
+ 		+
+ + <dd> +
+
+
2233
+
2428
+ 		+
+ + <p>An alignment for the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-17">cue box</a> in the dimension of the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-7">writing direction</a>, describing what the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-14">position</a> is anchored to, one of:</p> +
+
+
@@ -2242,7 +2437,7 @@
+
+
2242
+
2437
+ 		+
+ + <dd>The <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-21">cue box</a>’s alignment depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-8">text alignment</a> of the cue. +
+
+
2243
+
2438
+ 		+
+ + </dl> +
+
+
2244
+
2439
+ 		+
+ + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-2">position alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-position-automatic-alignment" id="ref-for-webvtt-cue-position-automatic-alignment-1">auto</a>.</p> +
+
+
2245
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-9">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position alignment" data-noexport="" id="cue-computed-position-alignment">computed position +
+
+
+
2440
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-11">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position alignment" data-noexport="" id="cue-computed-position-alignment">computed position +
+
+
2246
+
2441
+ 		+
+ + alignment</dfn> whose value is that returned by the following algorithm, which is defined in terms +
+
+
2247
+
2442
+ 		+
+ + of other aspects of the cue:</p> +
+
+
2248
+
2443
+ 		+
+ + <ol class="algorithm" data-algorithm="computed position alignment"> +
+
+
@@ -2258,11 +2453,19 @@
+
+
2258
+
2453
+ 		+
+ + return <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-1">line-right</a> and abort these +
+
+
2259
+
2454
+ 		+
+ + steps.</p> +
+
+
2260
+
2455
+ 		+
+ + <li> +
+
+
+
2456
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-11">WebVTT cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-4">start</a>, +
+
+
+
2457
+ 		+
+ + + return <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-2">line-left</a> if the base direction of the +
+
+
+
2458
+ 		+
+ + + cue text is left-to-right, <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-2">line-right</a> otherwise.</p> +
+
+
+
2459
+ 		+
+ + + <li> +
+
+
+
2460
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-12">WebVTT cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-4">end</a>, +
+
+
+
2461
+ 		+
+ + + return <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-3">line-right</a> if the base direction of +
+
+
+
2462
+ 		+
+ + + the cue text is left-to-right, <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-3">line-left</a> otherwise.</p> +
+
+
+
2463
+ 		+
+ + + <li> +
+
+
2261
+
2464
+ 		+
+ + <p>Otherwise, return <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-2">center</a>.</p> +
+
+
2262
+
2465
+ 		+
+ + </ol> +
+
+
2263
+
2466
+ 		+
+ + <p class="note" role="note">Since the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-18">position</a> always measures from the left +
+
+
2264
+
2467
+ 		+
+ + of the video (for <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-9">horizontal</a> cues) or the top +
+
+
2265
+
+ 		+
+ - + (otherwise), the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-5">WebVTT cue position alignment</a> <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-2">line-left</a> value varies between left and top for horizontal and vertical cues.</p> +
+
+
+
2468
+ 		+
+ + + (otherwise), the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-5">WebVTT cue position alignment</a> <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-4">line-left</a> value varies between left and top for horizontal and vertical cues.</p> +
+
+
2266
+
2469
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue size" data-noexport="" id="webvtt-cue-size">A size</dfn> +
+
+
2267
+
2470
+ 		+
+ + <dd> +
+
+
2268
+
2471
+ 		+
+ + <p>A number giving the size of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-22">cue box</a>, to be interpreted as a +
+
+
@@ -2289,7 +2492,7 @@
+
+
2289
+
2492
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue right alignment" data-noexport="" id="webvtt-cue-right-alignment">Right alignment</dfn> +
+
+
2290
+
2493
+ 		+
+ + <dd>The text is aligned to the box’s right side (for <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-12">horizontal</a> cues) or bottom side (otherwise). +
+
+
2291
+
2494
+ 		+
+ + </dl> +
+
+
2292
+
+ 		+
+ - + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-11">text alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-3">center</a>.</p> +
+
+
+
2495
+ 		+
+ + + <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-13">text alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-3">center</a>.</p> +
+
+
2293
+
2496
+ 		+
+ + <p class="note" role="note">The base direction of each line in a cue (which is used by the Unicode Bidirectional +
+
+
2294
+
2497
+ 		+
+ + Algorithm to determine the order in which to display the characters in the line) is determined by +
+
+
2295
+
2498
+ 		+
+ + looking up the first strong directional character in each line, using the CSS <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-unicode-bidi-plaintext">plaintext</a> algorithm. In the occasional cases where the first strong character on +
+
+
@@ -2334,11 +2537,11 @@
+
+
2334
+
2537
+ 		+
+ + </div> +
+
+
2335
+
2538
+ 		+
+ + <p class="note" role="note">The default text alignment is <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-4">center +
+
+
2336
+
2539
+ 		+
+ + alignment</a> regardless of the base direction of the cue text. To make the text alignment of each +
+
+
2337
+
+ 		+
+ - + line match the base direction of the line (e.g. left for English, right for Hebrew), use <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-4">start alignment</a>, or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-4">end +
+
+
+
2540
+ 		+
+ + + line match the base direction of the line (e.g. left for English, right for Hebrew), use <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-5">start alignment</a>, or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-5">end +
+
+
2338
+
2541
+ 		+
+ + alignment</a> for the opposite alignment.</p> +
+
+
2339
+
2542
+ 		+
+ + <div class="example" id="example-73203b99"> +
+
+
2340
+
2543
+ 		+
+ + <a class="self-link" href="#example-73203b99"></a> +
+
+
2341
+
+ 		+
+ - + <p>In this example, <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-5">start alignment</a> is used. The first +
+
+
+
2544
+ 		+
+ + + <p>In this example, <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-6">start alignment</a> is used. The first +
+
+
2342
+
2545
+ 		+
+ + line is left-aligned because the base direction is left-to-right, and the second line is +
+
+
2343
+
2546
+ 		+
+ + right-aligned because the base direction is right-to-left.</p> +
+
+
2344
+
2547
+ 		+
+ + <pre>WEBVTT +
+
+
@@ -2359,23 +2562,25 @@
+
+
2359
+
2562
+ 		+
+ + <p>An optional <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-2">WebVTT region</a> to which a cue belongs.</p> +
+
+
2360
+
2563
+ 		+
+ + <p>By default, the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-3">region</a> is set to null.</p> +
+
+
2361
+
2564
+ 		+
+ + </dl> +
+
+
2362
+
+ 		+
+ - + <p>The associated <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-10">WebVTT +
+
+
+
2565
+ 		+
+ + + <p>The associated <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-12">WebVTT +
+
+
2363
+
2566
+ 		+
+ + cues</a> are the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-1">rules for updating the display of WebVTT text tracks</a>.</p> +
+
+
2364
+
2567
+ 		+
+ + <div class="impl"> +
+
+
2365
+
+ 		+
+ - + <p>When a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-11">WebVTT cue</a> whose <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">active flag</a> is set has its <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-11">writing direction</a>, <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-8">snap-to-lines flag</a>, <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-20">line</a>, <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-4">line alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-19">position</a>, <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-6">position alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-6">size</a>, <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-12">text alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-1">region</a>, or <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-1">text</a> change value, then the user agent must empty the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display +
+
+
2366
+
+ 		+
+ - + state</a>, and then immediately run the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">rules for updating the display of +
+
+
2367
+
+ 		+
+ - + WebVTT text tracks</a>.</p> +
+
+
+
2568
+ 		+
+ + + <p>When a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-13">WebVTT cue</a> whose <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">active flag</a> is set has its <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-11">writing direction</a>, <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-7">snap-to-lines flag</a>, <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-20">line</a>, <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-4">line alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-19">position</a>, <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-6">position alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-6">size</a>, <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-14">text alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-1">region</a>, or <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-3">text</a> change value, then the user agent must empty the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a>, and then +
+
+
+
2569
+ 		+
+ + + immediately run the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">rules for updating the display of WebVTT text +
+
+
+
2570
+ 		+
+ + + tracks</a>.</p> +
+
+
2368
+
2571
+ 		+
+ + </div> +
+
+
2369
+
+ 		+
+ - + <h3 class="heading settled" data-level="3.2" id="regions"><span class="secno">3.2. </span><span class="content">WebVTT regions</span><a class="self-link" href="#regions"></a></h3> +
+
+
2370
+
+ 		+
+ - + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region">WebVTT region</dfn> represents a subpart of the video viewport and provides a rendering +
+
+
2371
+
+ 		+
+ - + area for <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-12">WebVTT cues</a>.</p> +
+
+
+
2572
+ 		+
+ + + <h3 class="heading settled" data-level="3.4" id="regions"><span class="secno">3.4. </span><span class="content">WebVTT caption or subtitle regions</span><a class="self-link" href="#regions"></a></h3> +
+
+
+
2573
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region">WebVTT region</dfn> represents a subpart of the video viewport and provides a limited +
+
+
+
2574
+ 		+
+ + + rendering area for <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue" id="ref-for-webvtt-caption-or-subtitle-cue-1">WebVTT caption or subtitle cues</a>.</p> +
+
+
+
2575
+ 		+
+ + + <p class="note" role="note">Regions provide a means to group caption or subtitle cues so the cues can be rendered +
+
+
+
2576
+ 		+
+ + + together, which is particularly important when scrolling up.</p> +
+
+
2372
+
2577
+ 		+
+ + <p>Each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-4">WebVTT region</a> consists of:</p> +
+
+
2373
+
2578
+ 		+
+ + <dl> +
+
+
2374
+
2579
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region identifier" data-noexport="" id="webvtt-region-identifier">An identifier</dfn> +
+
+
2375
+
2580
+ 		+
+ + <dd> +
+
+
2376
+
+ 		+
+ - + <p>An arbitrary string of one or more characters other than U+0020 SPACE or U+0009 CHARACTER +
+
+
+
2581
+ 		+
+ + + <p>An arbitrary string of zero or more characters other than U+0020 SPACE or U+0009 CHARACTER +
+
+
2377
+
2582
+ 		+
+ + TABULATION character. The string must not contain the substring "-->" (U+002D HYPHEN-MINUS, U+002D +
+
+
2378
+
+ 		+
+ - + HYPHEN-MINUS, U+003E GREATER-THAN SIGN). An identifier is required for a region to exist.</p> +
+
+
+
2583
+ 		+
+ + + HYPHEN-MINUS, U+003E GREATER-THAN SIGN). Defaults to the empty string.</p> +
+
+
2379
+
2584
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region width" data-noexport="" id="webvtt-region-width">A width</dfn> +
+
+
2380
+
2585
+ 		+
+ + <dd> +
+
+
2381
+
2586
+ 		+
+ + <p>A number giving the width of the box within which the text of each line of the containing cues +
+
+
@@ -2384,6 +2589,9 @@
+
+
2384
+
2589
+ 		+
+ + <dd> +
+
+
2385
+
2590
+ 		+
+ + <p>A number giving the number of lines of the box within which the text of each line of the +
+
+
2386
+
2591
+ 		+
+ + containing cues is to be rendered. Defaults to 3.</p> +
+
+
+
2592
+ 		+
+ + + <p class="note" role="note">Since a WebVTT region defines a fixed rendering area, a cue that has more lines +
+
+
+
2593
+ 		+
+ + + than the region allows will be clipped. For scrolling regions, the clipping happens at the top, +
+
+
+
2594
+ 		+
+ + + for non-scrolling regions it happens at the bottom.</p> +
+
+
2387
+
2595
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region anchor" data-noexport="" id="webvtt-region-anchor">A region anchor point</dfn> +
+
+
2388
+
2596
+ 		+
+ + <dd> +
+
+
2389
+
2597
+ 		+
+ + <p>Two numbers giving the x and y coordinates within the region which is anchored to the video +
+
+
@@ -2392,7 +2600,7 @@
+
+
2392
+
2600
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region viewport anchor" data-noexport="" id="webvtt-region-viewport-anchor">A region viewport anchor point</dfn> +
+
+
2393
+
2601
+ 		+
+ + <dd> +
+
+
2394
+
2602
+ 		+
+ + <p>Two numbers giving the x and y coordinates within the video viewport to which the region anchor +
+
+
2395
+
+ 		+
+ - + point is anchored. Defaults to (0,100), i.e. the bottom left corner of the viewport.</p> +
+
+
+
2603
+ 		+
+ + + point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video viewport.</p> +
+
+
2396
+
2604
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region scroll" data-noexport="" id="webvtt-region-scroll">A scroll value</dfn> +
+
+
2397
+
2605
+ 		+
+ + <dd> +
+
+
2398
+
2606
+ 		+
+ + <p>One of the following:</p> +
+
+
@@ -2409,14 +2617,15 @@
+
+
2409
+
2617
+ 		+
+ + <div class="note" role="note"> +
+
+
2410
+
2618
+ 		+
+ + <p>The following diagram illustrates how anchoring of a region to a video viewport works. The black +
+
+
2411
+
2619
+ 		+
+ + cross is the anchor, orange explains the anchor’s offset within the region and green the anchor’s +
+
+
2412
+
+ 		+
+ - + offset within the viewport. Think of it as sticking a pin through a note onto a board:</p> +
+
+
2413
+
+ 		+
+ - + <p><img alt="Within the video viewport, there is a WebVTT region. +
+
+
+
2620
+ 		+
+ + + offset within the video viewport. Think of it as sticking a pin through a note onto a board:</p> +
+
+
+
2621
+ 		+
+ + + <p><img alt="visual explanation of WebVTT regions" longdesc="#regionsExplained" src="webvtt-region-diagram.png"></p> +
+
+
+
2622
+ 		+
+ + + <p id="regionsExplained">Image description: Within the video viewport, there is a WebVTT region. +
+
+
2414
+
2623
+ 		+
+ + Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal +
+
+
2415
+
2624
+ 		+
+ + distance from the video viewport’s edges to the anchor is marked with green arrows, representing +
+
+
2416
+
2625
+ 		+
+ + the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region’s +
+
+
2417
+
2626
+ 		+
+ + edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets. +
+
+
2418
+
2627
+ 		+
+ + The size of the region is represented by the region width for the horizontal axis, and region lines +
+
+
2419
+
+ 		+
+ - + for the vertical axis." src="webvtt-region-diagram.png"></p> +
+
+
+
2628
+ 		+
+ + + for the vertical axis.</p> +
+
+
2420
+
2629
+ 		+
+ + </div> +
+
+
2421
+
2630
+ 		+
+ + <p>For parsing, we also need the following:</p> +
+
+
2422
+
2631
+ 		+
+ + <dl> +
+
+
@@ -2424,12 +2633,21 @@
+
+
2424
+
2633
+ 		+
+ + <dd> +
+
+
2425
+
2634
+ 		+
+ + <p>A list of zero or more <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-5">WebVTT regions</a>.</p> +
+
+
2426
+
2635
+ 		+
+ + </dl> +
+
+
+
2636
+ 		+
+ + + <h3 class="heading settled" data-level="3.5" id="chapter-cues"><span class="secno">3.5. </span><span class="content">WebVTT chapter cues</span><a class="self-link" href="#chapter-cues"></a></h3> +
+
+
+
2637
+ 		+
+ + + <p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-cue">WebVTT chapter cue<a class="self-link" href="#webvtt-chapter-cue"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-14">WebVTT cue</a> whose <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-4">cue text</a> is interpreted as a +
+
+
+
2638
+ 		+
+ + + chapter title that describes the chapter as a navigation target.</p> +
+
+
+
2639
+ 		+
+ + + <p>Chapter cues mark up the timeline of a audio or video file in consecutive, non-overlapping +
+
+
+
2640
+ 		+
+ + + intervals. It is further possible to subdivide these intervals into sub-chapters building a +
+
+
+
2641
+ 		+
+ + + navigation tree.</p> +
+
+
+
2642
+ 		+
+ + + <h3 class="heading settled" data-level="3.6" id="metadata-cues"><span class="secno">3.6. </span><span class="content">WebVTT metadata cues</span><a class="self-link" href="#metadata-cues"></a></h3> +
+
+
+
2643
+ 		+
+ + + <p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-metadata-cue">WebVTT metadata cue<a class="self-link" href="#webvtt-metadata-cue"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-15">WebVTT cue</a> whose <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-5">cue text</a> is interpreted as +
+
+
+
2644
+ 		+
+ + + time-aligned metadata.</p> +
+
+
2427
+
2645
+ 		+
+ + <h2 class="heading settled" data-level="4" id="syntax"><span class="secno">4. </span><span class="content">Syntax</span><a class="self-link" href="#syntax"></a></h2> +
+
+
2428
+
2646
+ 		+
+ + <h3 class="heading settled" data-level="4.1" id="file-structure"><span class="secno">4.1. </span><span class="content">WebVTT file structure</span><a class="self-link" href="#file-structure"></a></h3> +
+
+
2429
+
2647
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-file">WebVTT file</dfn> must consist of a <a data-link-type="dfn" href="#webvtt-file-body" id="ref-for-webvtt-file-body-1">WebVTT file body</a> encoded as UTF-8 and labeled +
+
+
2430
+
2648
+ 		+
+ + with the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#mime-type">MIME type</a> <code>text/vtt</code>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p> +
+
+
2431
+
2649
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-file-body">WebVTT file body</dfn> consists of the following components, in the following order:</p> +
+
+
2432
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
2650
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT file body"> +
+
+
2433
+
2651
+ 		+
+ + <li>An optional U+FEFF BYTE ORDER MARK (BOM) character. +
+
+
2434
+
2652
+ 		+
+ + <li>The string "<code>WEBVTT</code>". +
+
+
2435
+
2653
+ 		+
+ + <li>Optionally, either a U+0020 SPACE character or a U+0009 CHARACTER TABULATION (tab) character +
+
+
@@ -2481,8 +2699,9 @@
+
+
2481
+
2699
+ 		+
+ + <li>Optionally, one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters +
+
+
2482
+
2700
+ 		+
+ + followed by a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-1">WebVTT cue settings list</a>. +
+
+
2483
+
2701
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-12">WebVTT line terminator</a>. +
+
+
2484
+
+ 		+
+ - + <li>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-payload">cue payload</dfn>: either <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-2">WebVTT cue text</a>, <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-1">WebVTT chapter title text</a>, or <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-1">WebVTT metadata text</a>, but it must not contain the substring "<code>--></code>" (U+002D +
+
+
2485
+
+ 		+
+ - + HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN). +
+
+
+
2702
+ 		+
+ + + <li>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-payload">cue payload</dfn>: either <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-2">WebVTT caption or subtitle cue text</a>, <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-1">WebVTT +
+
+
+
2703
+ 		+
+ + + chapter title text</a>, or <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-1">WebVTT metadata text</a>, but it must not contain the substring +
+
+
+
2704
+ 		+
+ + + "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN). +
+
+
2486
+
2705
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-13">WebVTT line terminator</a>. +
+
+
2487
+
2706
+ 		+
+ + </ol> +
+
+
2488
+
2707
+ 		+
+ + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-block" id="ref-for-webvtt-cue-block-2">WebVTT cue block</a> corresponds to one piece of time-aligned text or data in +
+
+
@@ -2491,7 +2710,7 @@
+
+
2491
+
2710
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-identifier">WebVTT cue identifier</dfn> is any sequence of one or more characters not containing the +
+
+
2492
+
2711
+ 		+
+ + substring "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN), +
+
+
2493
+
2712
+ 		+
+ + nor containing any U+000A LINE FEED (LF) characters or U+000D CARRIAGE RETURN (CR) characters.</p> +
+
+
2494
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-2">WebVTT cue identifier</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-3">WebVTT cue identifiers</a> of all <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-13">WebVTT cues</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-8">WebVTT +
+
+
+
2713
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-2">WebVTT cue identifier</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-3">WebVTT cue identifiers</a> of all <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-16">WebVTT cues</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-8">WebVTT +
+
+
2495
+
2714
+ 		+
+ + file</a>.</p> +
+
+
2496
+
2715
+ 		+
+ + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-4">WebVTT cue identifier</a> can be used to reference a specific cue, for example +
+
+
2497
+
2716
+ 		+
+ + from script or CSS.</p> +
+
+
@@ -2519,10 +2738,10 @@
+
+
2519
+
2738
+ 		+
+ + <li>A U+003A COLON character (:) +
+
+
2520
+
2739
+ 		+
+ + </ol> +
+
+
2521
+
2740
+ 		+
+ + <li>Two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the <var>minutes</var> as a base ten integer in the range +
+
+
2522
+
+ 		+
+ - + 0 ≤ <var>minutes</var> ≤ 59. +
+
+
+
2741
+ 		+
+ + + 0 ≤ <var>minutes</var> ≤ 59. +
+
+
2523
+
2742
+ 		+
+ + <li>A U+003A COLON character (:) +
+
+
2524
+
2743
+ 		+
+ + <li>Two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the <var>seconds</var> as a base ten integer in the range +
+
+
2525
+
+ 		+
+ - + 0 ≤ <var>seconds</var> ≤ 59. +
+
+
+
2744
+ 		+
+ + + 0 ≤ <var>seconds</var> ≤ 59. +
+
+
2526
+
2745
+ 		+
+ + <li>A U+002E FULL STOP character (.). +
+
+
2527
+
2746
+ 		+
+ + <li>Three <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the thousandths of a second <var>seconds-frac</var> as a base +
+
+
2528
+
2747
+ 		+
+ + ten integer. +
+
+
@@ -2582,12 +2801,12 @@
+
+
2582
+
2801
+ 		+
+ + separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-17">WebVTT line terminator</a>. (In other words, any text that does not +
+
+
2583
+
2802
+ 		+
+ + have two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-18">WebVTT line terminators</a> and does not start +
+
+
2584
+
2803
+ 		+
+ + or end with a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-19">WebVTT line terminator</a>.)</p> +
+
+
2585
+
+ 		+
+ - + <p><a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-2">WebVTT metadata text</a> cues are only useful for scripted applications (using the <code>metadata</code> <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a>).</p> +
+
+
2586
+
+ 		+
+ - + <h4 class="heading settled" data-level="4.2.2" id="cue-text"><span class="secno">4.2.2. </span><span class="content">WebVTT cue text</span><a class="self-link" href="#cue-text"></a></h4> +
+
+
2587
+
+ 		+
+ - + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text">WebVTT cue text</dfn> is <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-2">cue payload</a> that consists of zero or more <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-1">WebVTT cue +
+
+
2588
+
+ 		+
+ - + components</a>, in any order, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-20">WebVTT line +
+
+
2589
+
+ 		+
+ - + terminator</a>.</p> +
+
+
2590
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-components">WebVTT cue components</dfn> are:</p> +
+
+
+
2804
+ 		+
+ + + <p><a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-2">WebVTT metadata text</a> cues are only useful for scripted applications (e.g. using the <code>metadata</code> <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a> in a HTML <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>).</p> +
+
+
+
2805
+ 		+
+ + + <h4 class="heading settled" data-level="4.2.2" id="caption-text"><span class="secno">4.2.2. </span><span class="content">WebVTT caption or subtitle cue text</span><a class="self-link" href="#caption-text"></a></h4> +
+
+
+
2806
+ 		+
+ + + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue-text">WebVTT caption or subtitle cue text</dfn> is <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-2">cue payload</a> that consists of zero or +
+
+
+
2807
+ 		+
+ + + more <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-1">WebVTT caption or subtitle cue components</a>, in any order, each optionally separated from +
+
+
+
2808
+ 		+
+ + + the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-20">WebVTT line terminator</a>.</p> +
+
+
+
2809
+ 		+
+ + + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue-components">WebVTT caption or subtitle cue components</dfn> are:</p> +
+
+
2591
+
2810
+ 		+
+ + <ul> +
+
+
2592
+
2811
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-1">WebVTT cue class span</a>. +
+
+
2593
+
2812
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-1">WebVTT cue italics span</a>. +
+
+
@@ -2601,8 +2820,13 @@
+
+
2601
+
2820
+ 		+
+ + <li>An <a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a>, representing one or two Unicode +
+
+
2602
+
2821
+ 		+
+ + code points, as defined in HTML, in the text of the cue. <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a> +
+
+
2603
+
2822
+ 		+
+ + </ul> +
+
+
+
2823
+ 		+
+ + + <p>All <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-2">WebVTT caption or subtitle cue components</a> bar the HTML character reference may have +
+
+
+
2824
+ 		+
+ + + one or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-component-class-names">cue component class names</dfn> attached to it by separating the cue component +
+
+
+
2825
+ 		+
+ + + class name from the cue component start tag using the perido ('.') notation. The class name must +
+
+
+
2826
+ 		+
+ + + immediately follow the "period" (.).</p> +
+
+
2604
+
2827
+ 		+
+ + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-internal-text">WebVTT cue internal text</dfn> consists of an optional <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-21">WebVTT line terminator</a>, +
+
+
2605
+
+ 		+
+ - + followed by zero or more <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-2">WebVTT cue components</a>, in any order, each optionally followed by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-22">WebVTT line terminator</a>.</p> +
+
+
+
2828
+ 		+
+ + + followed by zero or more <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-3">WebVTT caption or subtitle cue components</a>, in any order, each +
+
+
+
2829
+ 		+
+ + + optionally followed by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-22">WebVTT line terminator</a>.</p> +
+
+
2606
+
2830
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-class-span">WebVTT cue class span</dfn> consists of a <a data-link-type="dfn" href="#webvtt-cue-span-start-tag" id="ref-for-webvtt-cue-span-start-tag-1">WebVTT cue span start tag</a> "<code>c</code>" that disallows an annotation, <a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-1">WebVTT cue internal text</a> representing cue +
+
+
2607
+
2831
+ 		+
+ + text, and a <a data-link-type="dfn" href="#webvtt-cue-span-end-tag" id="ref-for-webvtt-cue-span-end-tag-1">WebVTT cue span end tag</a> "<code>c</code>".</p> +
+
+
2608
+
2832
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-italics-span">WebVTT cue italics span</dfn> consists of a <a data-link-type="dfn" href="#webvtt-cue-span-start-tag" id="ref-for-webvtt-cue-span-start-tag-2">WebVTT cue span start tag</a> "<code>i</code>" that disallows an annotation, <a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-2">WebVTT cue internal text</a> representing the +
+
+
@@ -2642,8 +2866,8 @@
+
+
2642
+
2866
+ 		+
+ + represents the name of the voice. +
+
+
2643
+
2867
+ 		+
+ + <li><a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-7">WebVTT cue internal text</a>. +
+
+
2644
+
2868
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-cue-span-end-tag" id="ref-for-webvtt-cue-span-end-tag-7">WebVTT cue span end tag</a> "<code>v</code>". If this <a data-link-type="dfn" href="#webvtt-cue-voice-span" id="ref-for-webvtt-cue-voice-span-2">WebVTT cue voice span</a> is the +
+
+
2645
+
+ 		+
+ - + only <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-3">component</a> of its <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-3">WebVTT cue text</a> sequence, then the +
+
+
2646
+
+ 		+
+ - + end tag may be omitted for brevity. +
+
+
+
2869
+ 		+
+ + + only <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-4">component</a> of its <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-3">WebVTT caption or +
+
+
+
2870
+ 		+
+ + + subtitle cue text</a> sequence, then the end tag may be omitted for brevity. +
+
+
2647
+
2871
+ 		+
+ + </ol> +
+
+
2648
+
2872
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-language-span">WebVTT cue language span</dfn> consists of the following components, in the order +
+
+
2649
+
2873
+ 		+
+ + given:</p> +
+
+
@@ -2705,13 +2929,21 @@
+
+
2705
+
2929
+ 		+
+ + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-span-start-tag-annotation-text">WebVTT cue span start tag annotation text</dfn> consists of one or more characters other +
+
+
2706
+
2930
+ 		+
+ + than U+000A LINE FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND +
+
+
2707
+
2931
+ 		+
+ + characters (&amp;), and U+003E GREATER-THAN SIGN characters (>).</p> +
+
+
+
2932
+ 		+
+ + + <h4 class="heading settled" data-level="4.2.3" id="chapter-title-text"><span class="secno">4.2.3. </span><span class="content">WebVTT chapter title text</span><a class="self-link" href="#chapter-title-text"></a></h4> +
+
+
+
2933
+ 		+
+ + + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-title-text">WebVTT chapter title text</dfn> is <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-6">cue text</a> that makes use of zero or more of the +
+
+
+
2934
+ 		+
+ + + following components, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-25">WebVTT line +
+
+
+
2935
+ 		+
+ + + terminator</a>:</p> +
+
+
+
2936
+ 		+
+ + + <ul> +
+
+
+
2937
+ 		+
+ + + <li><a data-link-type="dfn" href="#webvtt-cue-text-span" id="ref-for-webvtt-cue-text-span-2">WebVTT cue text span</a> +
+
+
+
2938
+ 		+
+ + + <li><a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a> +
+
+
+
2939
+ 		+
+ + + </ul> +
+
+
2708
+
2940
+ 		+
+ + <h3 class="heading settled" data-level="4.3" id="region-settings"><span class="secno">4.3. </span><span class="content">WebVTT region settings</span><a class="self-link" href="#region-settings"></a></h3> +
+
+
2709
+
2941
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-2">WebVTT cue settings list</a> can contain a reference to a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-6">WebVTT region</a>. To define a +
+
+
2710
+
2942
+ 		+
+ + region, a <a data-link-type="dfn" href="#webvtt-region-definition-block" id="ref-for-webvtt-region-definition-block-2">WebVTT region definition block</a> is specified.</p> +
+
+
2711
+
2943
+ 		+
+ + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-settings-list">WebVTT region settings list</dfn> consists of zero or more of the following components, +
+
+
2712
+
2944
+ 		+
+ + in any order, separated from each other by one or more U+0020 SPACE characters, U+0009 CHARACTER +
+
+
2713
+
+ 		+
+ - + TABULATION (tab) characters, or <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-25">WebVTT line terminators</a>, except that the string must not +
+
+
2714
+
+ 		+
+ - + contain two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-26">WebVTT line terminators</a>. Each component must not be included more +
+
+
+
2945
+ 		+
+ + + TABULATION (tab) characters, or <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-26">WebVTT line terminators</a>, except that the string must not +
+
+
+
2946
+ 		+
+ + + contain two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-27">WebVTT line terminators</a>. Each component must not be included more +
+
+
2715
+
2947
+ 		+
+ + than once per <a data-link-type="dfn" href="#webvtt-region-settings-list" id="ref-for-webvtt-region-settings-list-2">WebVTT region settings list</a> string.</p> +
+
+
2716
+
2948
+ 		+
+ + <ul> +
+
+
2717
+
2949
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-1">WebVTT region identifier setting</a>. +
+
+
@@ -2738,9 +2970,10 @@
+
+
2738
+
2970
+ 		+
+ + GREATER-THAN SIGN).</p> +
+
+
2739
+
2971
+ 		+
+ + </ol> +
+
+
2740
+
2972
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-2">WebVTT region identifier setting</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-3">WebVTT region identifier settings</a> of all <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-7">WebVTT +
+
+
2741
+
+ 		+
+ - + regions</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-9">WebVTT file</a>. For a region to exist, a region identifier setting has to be +
+
+
2742
+
+ 		+
+ - + provided.</p> +
+
+
2743
+
+ 		+
+ - + <p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-4">WebVTT region identifier setting</a> gives a name to the region so it can be +
+
+
+
2973
+ 		+
+ + + regions</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-9">WebVTT file</a>.</p> +
+
+
+
2974
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-4">WebVTT region identifier setting</a> must be present in each <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-3">WebVTT cue settings +
+
+
+
2975
+ 		+
+ + + list</a>. Without an identifier, it is not possible to associate a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-17">WebVTT cue</a> with a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-8">WebVTT region</a> in the syntax.</p> +
+
+
+
2976
+ 		+
+ + + <p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-5">WebVTT region identifier setting</a> gives a name to the region so it can be +
+
+
2744
+
2977
+ 		+
+ + referenced by the cues that belong to the region.</p> +
+
+
2745
+
2978
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-width-setting">WebVTT region width setting</dfn> consists of the following components, in the order +
+
+
2746
+
2979
+ 		+
+ + given:</p> +
+
+
@@ -2803,8 +3036,8 @@
+
+
2803
+
3036
+ 		+
+ + <p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-viewport-anchor-setting" id="ref-for-webvtt-region-viewport-anchor-setting-2">WebVTT region viewport anchor setting</a> provides a tuple of two percentages +
+
+
2804
+
3037
+ 		+
+ + that specify the point within the video viewport that the region anchor point is anchored to. The +
+
+
2805
+
3038
+ 		+
+ + first percentage measures the x-dimension and the second percentage measures the y-dimension from +
+
+
2806
+
+ 		+
+ - + the top left corner of the video viewport box. If no viewport anchor is given, it defaults to 0%, +
+
+
2807
+
+ 		+
+ - + 100% (i.e. the bottom left corner).</p> +
+
+
+
3039
+ 		+
+ + + the top left corner of the video viewport box. If no region viewport anchor is given, it defaults to +
+
+
+
3040
+ 		+
+ + + 0%, 100% (i.e. the bottom left corner).</p> +
+
+
2808
+
3041
+ 		+
+ + <p class="note" role="note">For browsers, the region maps to an absolute positioned CSS box relative to the +
+
+
2809
+
3042
+ 		+
+ + video viewport, i.e. there is a relative positioned box that represents the video viewport relative +
+
+
2810
+
3043
+ 		+
+ + to which the regions are absolutely positioned. Overflow is hidden.</p> +
+
+
@@ -2832,8 +3065,13 @@
+
+
2832
+
3065
+ 		+
+ + the line in the bottom of the region. If no empty line is available, the oldest line is +
+
+
2833
+
3066
+ 		+
+ + replaced.</p> +
+
+
2834
+
3067
+ 		+
+ + <h3 class="heading settled" data-level="4.4" id="cue-settings"><span class="secno">4.4. </span><span class="content">WebVTT cue settings</span><a class="self-link" href="#cue-settings"></a></h3> +
+
+
2835
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-3">WebVTT cue settings list</a> consists of zero or more of the following settings. Each +
+
+
2836
+
+ 		+
+ - + setting must not be included more than once per <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-4">WebVTT cue settings list</a>.</p> +
+
+
+
3068
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-1">WebVTT cue setting</a> is part of a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-4">WebVTT cue settings list</a> and provides +
+
+
+
3069
+ 		+
+ + + configuration options regarding the position and alignment of the cue box and the cue text +
+
+
+
3070
+ 		+
+ + + within.</p> +
+
+
+
3071
+ 		+
+ + + <p class="note" role="note">For example, a set of WebVTT cue settings may allow a cue box to be aligned to the +
+
+
+
3072
+ 		+
+ + + left or positioned at the top right with the cue text within center aligned.</p> +
+
+
+
3073
+ 		+
+ + + <p>The current available <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-2">WebVTT cue settings</a> that may appear in a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-5">WebVTT cue settings +
+
+
+
3074
+ 		+
+ + + list</a> are:</p> +
+
+
2837
+
3075
+ 		+
+ + <ul class="brief"> +
+
+
2838
+
3076
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-1">WebVTT vertical text cue setting</a>. +
+
+
2839
+
3077
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-1">WebVTT line cue setting</a>. +
+
+
@@ -2842,10 +3080,9 @@
+
+
2842
+
3080
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-1">WebVTT alignment cue setting</a>. +
+
+
2843
+
3081
+ 		+
+ + <li>A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-1">WebVTT region cue setting</a>. +
+
+
2844
+
3082
+ 		+
+ + </ul> +
+
+
2845
+
+ 		+
+ - + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-5">WebVTT cue settings list</a> gives configuration options regarding the position +
+
+
2846
+
+ 		+
+ - + and alignment of the cue box and the cue text within. For example, it allows a cue box to be aligned +
+
+
2847
+
+ 		+
+ - + to the left or positioned at the top right with the cue text within center aligned.</p> +
+
+
+
3083
+ 		+
+ + + <p>Each of these setting must not be included more than once per <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-6">WebVTT cue settings +
+
+
+
3084
+ 		+
+ + + list</a>.</p> +
+
+
+
3085
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</dfn> is a <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-3">WebVTT cue setting</a> that consists of the +
+
+
2848
+
+ 		+
+ - + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</dfn> is a <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-1">WebVTT cue setting</a> that consists of the +
+
+
2849
+
3086
+ 		+
+ + following components, in the order given:</p> +
+
+
2850
+
3087
+ 		+
+ + <ol> +
+
+
2851
+
3088
+ 		+
+ + <li>The string "<code>vertical</code>" as the <a data-link-type="dfn" href="#webvtt-cue-setting-name" id="ref-for-webvtt-cue-setting-name-2">WebVTT cue setting name</a>. +
+
+
@@ -2890,13 +3127,13 @@
+
+
2890
+
3127
+ 		+
+ + </ol> +
+
+
2891
+
3128
+ 		+
+ + </ol> +
+
+
2892
+
3129
+ 		+
+ + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-2">WebVTT line cue setting</a> configures the offset of the cue box from the video +
+
+
2893
+
+ 		+
+ - + viewport’s edge in the direction opposite to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-12">writing +
+
+
2894
+
+ 		+
+ - + direction</a>. For horizontal cues, this is the vertical offset from the top of the video viewport. +
+
+
2895
+
+ 		+
+ - + The offset is for the <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-2">start</a>, <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-line-end-alignment" id="ref-for-webvtt-cue-line-end-alignment-1">end</a> of the cue box, +
+
+
2896
+
+ 		+
+ - + depending on the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-5">WebVTT cue line alignment</a> value - <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-3">start</a> by default. The offset can be given either as a percentage of the video +
+
+
2897
+
+ 		+
+ - + dimension or as a line number. Line numbers are based on the size of the first line of the cue. +
+
+
2898
+
+ 		+
+ - + Positive line numbers count from the start of the video viewport (the first line is numbered 0), +
+
+
2899
+
+ 		+
+ - + negative line numbers from the end of the viewport (the last line is numbered −1).</p> +
+
+
+
3130
+ 		+
+ + + viewport’s edge in the direction orthogonal to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-12">writing +
+
+
+
3131
+ 		+
+ + + direction</a>. For horizontal cues, this is the vertical offset from the top of the video viewport, +
+
+
+
3132
+ 		+
+ + + for vertical cues, it’s the horizontal offset. The offset is for the <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-2">start</a>, <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-line-end-alignment" id="ref-for-webvtt-cue-line-end-alignment-1">end</a> of the cue box, depending on the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-5">WebVTT cue line alignment</a> value - <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-3">start</a> by default. The offset can be given either as a +
+
+
+
3133
+ 		+
+ + + percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line +
+
+
+
3134
+ 		+
+ + + numbers are based on the size of the first line of the cue. Positive line numbers count from the +
+
+
+
3135
+ 		+
+ + + start of the video viewport (the first line is numbered 0), negative line numbers from the end of +
+
+
+
3136
+ 		+
+ + + the video viewport (the last line is numbered −1).</p> +
+
+
2900
+
3137
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-position-cue-setting">WebVTT position cue setting</dfn> consists of the following components, in the order +
+
+
2901
+
3138
+ 		+
+ + given:</p> +
+
+
2902
+
3139
+ 		+
+ + <ol> +
+
+
@@ -2919,7 +3156,7 @@
+
+
2919
+
3156
+ 		+
+ + </ol> +
+
+
2920
+
3157
+ 		+
+ + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-2">WebVTT position cue setting</a> configures the indent position of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-24">cue box</a> in the direction orthogonal to the <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-3">WebVTT line cue setting</a>. +
+
+
2921
+
3158
+ 		+
+ + For horizontal cues, this is the horizontal position. The cue position is given as a percentage of +
+
+
2922
+
+ 		+
+ - + the video viewport. The positioning is for the <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-3">line-left</a>, <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-2">line-right</a> of the cue box, depending on the cue’s <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-1">computed position alignment</a>, which is overridden by the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-3">WebVTT +
+
+
+
3159
+ 		+
+ + + the video viewport. The positioning is for the <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-5">line-left</a>, <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-4">line-right</a> of the cue box, depending on the cue’s <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-1">computed position alignment</a>, which is overridden by the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-3">WebVTT +
+
+
2923
+
3160
+ 		+
+ + position cue setting</a>.</p> +
+
+
2924
+
3161
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-size-cue-setting">WebVTT size cue setting</dfn> consists of the following components, in the order +
+
+
2925
+
3162
+ 		+
+ + given:</p> +
+
+
@@ -2933,7 +3170,7 @@
+
+
2933
+
3170
+ 		+
+ + </ol> +
+
+
2934
+
3171
+ 		+
+ + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-2">WebVTT size cue setting</a> configures the size of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-25">cue box</a> in the same direction as the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-4">WebVTT position cue setting</a>. For horizontal +
+
+
2935
+
3172
+ 		+
+ + cues, this is the width of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-26">cue box</a>. It is given as a percentage of +
+
+
2936
+
+ 		+
+ - + the width of the viewport.</p> +
+
+
+
3173
+ 		+
+ + + the width of the video viewport.</p> +
+
+
2937
+
3174
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-alignment-cue-setting">WebVTT alignment cue setting</dfn> consists of the following components, in the order +
+
+
2938
+
3175
+ 		+
+ + given:</p> +
+
+
2939
+
3176
+ 		+
+ + <ol> +
+
+
@@ -2957,9 +3194,11 @@
+
+
2957
+
3194
+ 		+
+ + <li> +
+
+
2958
+
3195
+ 		+
+ + <p>As the <a data-link-type="dfn" href="#webvtt-cue-setting-value" id="ref-for-webvtt-cue-setting-value-7">WebVTT cue setting value</a>: a <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-1">WebVTT region identifier</a>.</p> +
+
+
2959
+
3196
+ 		+
+ + </ol> +
+
+
2960
+
+ 		+
+ - + <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-2">WebVTT region cue setting</a> configures a cue to become part of a region by +
+
+
2961
+
+ 		+
+ - + referencing the region’s identifier unless the cue has a <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-3">"vertical"</a>, <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-4">"line"</a> or <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-3">"size"</a> cue setting. If a cue is part of a region, its cue settings for <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-5">"position"</a> and <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-3">"align"</a> are +
+
+
2962
+
+ 		+
+ - + applied to the line boxes in the cue relative to the region box.</p> +
+
+
+
3197
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-2">WebVTT region cue setting</a> configures a cue to become part of a region by referencing the +
+
+
+
3198
+ 		+
+ + + region’s identifier unless the cue has a <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-3">"vertical"</a>, <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-4">"line"</a> or <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-3">"size"</a> cue setting. +
+
+
+
3199
+ 		+
+ + + If a cue is part of a region, its cue settings for <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-5">"position"</a> and <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-3">"align"</a> are applied to the line +
+
+
+
3200
+ 		+
+ + + boxes in the cue relative to the region box and the cue box width and height are calculated relative +
+
+
+
3201
+ 		+
+ + + to the region dimensions rather than the viewport dimensions.</p> +
+
+
2963
+
3202
+ 		+
+ + <h3 class="heading settled" data-level="4.5" id="properties-of-cue-sequences"><span class="secno">4.5. </span><span class="content">Properties of cue sequences</span><a class="self-link" href="#properties-of-cue-sequences"></a></h3> +
+
+
2964
+
3203
+ 		+
+ + <h4 class="heading settled" data-level="4.5.1" id="file-using-only-nested-cues"><span class="secno">4.5.1. </span><span class="content">WebVTT file using only nested cues</span><a class="self-link" href="#file-using-only-nested-cues"></a></h4> +
+
+
2965
+
3204
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-10">WebVTT file</a> whose cues all follow the following rules is said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT file using only nested cues" data-noexport="" id="webvtt-file-using-only-nested-cues">WebVTT file +
+
+
@@ -3033,29 +3272,123 @@
+
+
3033
+
3272
+ 		+
+ + <h4 class="heading settled" data-level="4.6.1" id="file-using-metadata-content"><span class="secno">4.6.1. </span><span class="content">WebVTT file using metadata content</span><a class="self-link" href="#file-using-metadata-content"></a></h4> +
+
+
3034
+
3273
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-12">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-3">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-3">WebVTT metadata text</a> is said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-metadata-content">WebVTT file using metadata content<a class="self-link" href="#webvtt-file-using-metadata-content"></a></dfn>.</p> +
+
+
3035
+
3274
+ 		+
+ + <h4 class="heading settled" data-level="4.6.2" id="file-using-chapter-title-text"><span class="secno">4.6.2. </span><span class="content">WebVTT file using chapter title text</span><a class="self-link" href="#file-using-chapter-title-text"></a></h4> +
+
+
3036
+
+ 		+
+ - + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-title-text">WebVTT chapter title text</dfn> is <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-4">WebVTT cue text</a> that makes use only of zero or +
+
+
3037
+
+ 		+
+ - + more of the following components, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-27">WebVTT line +
+
+
3038
+
+ 		+
+ - + terminator</a>:</p> +
+
+
3039
+
+ 		+
+ - + <ul> +
+
+
3040
+
+ 		+
+ - + <li><a data-link-type="dfn" href="#webvtt-cue-text-span" id="ref-for-webvtt-cue-text-span-2">WebVTT cue text span</a> +
+
+
3041
+
+ 		+
+ - + <li><a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a> +
+
+
3042
+
+ 		+
+ - + </ul> +
+
+
3043
+
3275
+ 		+
+ + <p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-chapter-title-text">WebVTT file using chapter title text<a class="self-link" href="#webvtt-file-using-chapter-title-text"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-file-using-only-nested-cues" id="ref-for-webvtt-file-using-only-nested-cues-3">WebVTT file using only nested cues</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-4">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-2">WebVTT chapter title text</a>.</p> +
+
+
3044
+
+ 		+
+ - + <h4 class="heading settled" data-level="4.6.3" id="file-using-cue-text"><span class="secno">4.6.3. </span><span class="content">WebVTT file using cue text</span><a class="self-link" href="#file-using-cue-text"></a></h4> +
+
+
3045
+
+ 		+
+ - + <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-13">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-5">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-5">WebVTT cue text</a> is +
+
+
3046
+
+ 		+
+ - + said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-cue-text">WebVTT file using cue text<a class="self-link" href="#webvtt-file-using-cue-text"></a></dfn>.</p> +
+
+
3047
+
+ 		+
+ - + <h2 class="heading settled" data-level="5" id="parsing"><span class="secno">5. </span><span class="content">Parsing</span><a class="self-link" href="#parsing"></a></h2> +
+
+
3048
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="WebVTT file parsing" data-level="5.1" id="file-parsing"><span class="secno">5.1. </span><span class="content">WebVTT file parsing</span><a class="self-link" href="#file-parsing"></a></h3> +
+
+
+
3276
+ 		+
+ + + <h4 class="heading settled" data-level="4.6.3" id="file-using-cue-text"><span class="secno">4.6.3. </span><span class="content">WebVTT file using caption or subtitle cue text</span><a class="self-link" href="#file-using-cue-text"></a></h4> +
+
+
+
3277
+ 		+
+ + + <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-13">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-5">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-4">WebVTT caption or +
+
+
+
3278
+ 		+
+ + + subtitle cue text</a> is said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-caption-or-subtitle-cue-text">WebVTT file using caption or subtitle cue text<a class="self-link" href="#webvtt-file-using-caption-or-subtitle-cue-text"></a></dfn>.</p> +
+
+
+
3279
+ 		+
+ + + <h2 class="heading settled" data-level="5" id="default-classes"><span class="secno">5. </span><span class="content">Default classes for WebVTT Caption or Subtitle Cue Components</span><a class="self-link" href="#default-classes"></a></h2> +
+
+
+
3280
+ 		+
+ + + <p>Many captioning formats have simple ways of specifying a limited subset of text colors and +
+
+
+
3281
+ 		+
+ + + background colors for text. Therefore, the WebVTT spec makes available a set of default <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-1">cue +
+
+
+
3282
+ 		+
+ + + component class names</a> for <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-5">WebVTT caption or subtitle cue components</a> that authors can use +
+
+
+
3283
+ 		+
+ + + in a standard way to mark up colored text and text background.</p> +
+
+
+
3284
+ 		+
+ + + <p class="note" role="note">User agents that support CSS style sheets may implement this section through adding +
+
+
+
3285
+ 		+
+ + + User Agent stylesheets.</p> +
+
+
+
3286
+ 		+
+ + + <h3 class="heading settled" data-level="5.1" id="default-text-color"><span class="secno">5.1. </span><span class="content">Default text colors</span><a class="self-link" href="#default-text-color"></a></h3> +
+
+
+
3287
+ 		+
+ + + <p><a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-6">WebVTT caption or subtitle cue components</a> that have one or more <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-2">class names</a> matching those in the first cell of a row in the table below must set their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> property as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints">presentational hints</a> to the value in the second cell of the +
+
+
+
3288
+ 		+
+ + + row:</p> +
+
+
+
3289
+ 		+
+ + + <table class="complex data"> +
+
+
+
3290
+ 		+
+ + + <thead> +
+
+
+
3291
+ 		+
+ + + <tr> +
+
+
+
3292
+ 		+
+ + + <th><a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-3">class names</a> +
+
+
+
3293
+ 		+
+ + + <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> value +
+
+
+
3294
+ 		+
+ + + <tbody> +
+
+
+
3295
+ 		+
+ + + <tr> +
+
+
+
3296
+ 		+
+ + + <td><code>white</code> +
+
+
+
3297
+ 		+
+ + + <td><span class="css">rgba(255,255,255,1)</span> +
+
+
+
3298
+ 		+
+ + + <tr> +
+
+
+
3299
+ 		+
+ + + <td><code>lime</code> +
+
+
+
3300
+ 		+
+ + + <td><span class="css">rgba(0,255,0,1)</span> +
+
+
+
3301
+ 		+
+ + + <tr> +
+
+
+
3302
+ 		+
+ + + <td><code>cyan</code> +
+
+
+
3303
+ 		+
+ + + <td><span class="css">rgba(0,255,255,1)</span> +
+
+
+
3304
+ 		+
+ + + <tr> +
+
+
+
3305
+ 		+
+ + + <td><code>red</code> +
+
+
+
3306
+ 		+
+ + + <td><span class="css">rgba(255,0,0,1)</span> +
+
+
+
3307
+ 		+
+ + + <tr> +
+
+
+
3308
+ 		+
+ + + <td><code>yellow</code> +
+
+
+
3309
+ 		+
+ + + <td><span class="css">rgba(255,255,0,1)</span> +
+
+
+
3310
+ 		+
+ + + <tr> +
+
+
+
3311
+ 		+
+ + + <td><code>magenta</code> +
+
+
+
3312
+ 		+
+ + + <td><span class="css">rgba(255,0,255,1)</span> +
+
+
+
3313
+ 		+
+ + + <tr> +
+
+
+
3314
+ 		+
+ + + <td><code>blue</code> +
+
+
+
3315
+ 		+
+ + + <td><span class="css">rgba(0,0,255,1)</span> +
+
+
+
3316
+ 		+
+ + + <tr> +
+
+
+
3317
+ 		+
+ + + <td><code>black</code> +
+
+
+
3318
+ 		+
+ + + <td><span class="css">rgba(0,0,0,1)</span> +
+
+
+
3319
+ 		+
+ + + </table> +
+
+
+
3320
+ 		+
+ + + <p class="note" role="note">If your background is captioning, don’t get confused: The color for the class <code>lime</code> is what has traditionally been used in captioning under the name <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-green">green</a> (e.g. +
+
+
+
3321
+ 		+
+ + + 608/708).</p> +
+
+
+
3322
+ 		+
+ + + <p class="note" role="note">Do not use the classes <code>blue</code> and <code>black</code> on the default dark +
+
+
+
3323
+ 		+
+ + + background, since they result in unreadable text. In general, please refer to WCAG for guidance on +
+
+
+
3324
+ 		+
+ + + color contrast <a data-link-type="biblio" href="#biblio-wcag20">[WCAG20]</a> and make sure to take into account the text color, background color and +
+
+
+
3325
+ 		+
+ + + also the video’s color.</p> +
+
+
+
3326
+ 		+
+ + + <h3 class="heading settled" data-level="5.2" id="default-text-background"><span class="secno">5.2. </span><span class="content">Default text background colors</span><a class="self-link" href="#default-text-background"></a></h3> +
+
+
+
3327
+ 		+
+ + + <p><a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-7">WebVTT caption or subtitle cue components</a> that have one or more <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-4">class names</a> matching those in the first cell of a row in the table below must set their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-color">background-color</a> property as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints">presentational hints</a> to the value in the second cell +
+
+
+
3328
+ 		+
+ + + of the row:</p> +
+
+
+
3329
+ 		+
+ + + <table class="complex data"> +
+
+
+
3330
+ 		+
+ + + <thead> +
+
+
+
3331
+ 		+
+ + + <tr> +
+
+
+
3332
+ 		+
+ + + <th><a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-5">class names</a> +
+
+
+
3333
+ 		+
+ + + <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> value +
+
+
+
3334
+ 		+
+ + + <tbody> +
+
+
+
3335
+ 		+
+ + + <tr> +
+
+
+
3336
+ 		+
+ + + <td><code>bg_white</code> +
+
+
+
3337
+ 		+
+ + + <td><span class="css">rgba(255,255,255,1)</span> +
+
+
+
3338
+ 		+
+ + + <tr> +
+
+
+
3339
+ 		+
+ + + <td><code>bg_lime</code> +
+
+
+
3340
+ 		+
+ + + <td><span class="css">rgba(0,255,0,1)</span> +
+
+
+
3341
+ 		+
+ + + <tr> +
+
+
+
3342
+ 		+
+ + + <td><code>bg_cyan</code> +
+
+
+
3343
+ 		+
+ + + <td><span class="css">rgba(0,255,255,1)</span> +
+
+
+
3344
+ 		+
+ + + <tr> +
+
+
+
3345
+ 		+
+ + + <td><code>bg_red</code> +
+
+
+
3346
+ 		+
+ + + <td><span class="css">rgba(255,0,0,1)</span> +
+
+
+
3347
+ 		+
+ + + <tr> +
+
+
+
3348
+ 		+
+ + + <td><code>bg_yellow</code> +
+
+
+
3349
+ 		+
+ + + <td><span class="css">rgba(255,255,0,1)</span> +
+
+
+
3350
+ 		+
+ + + <tr> +
+
+
+
3351
+ 		+
+ + + <td><code>bg_magenta</code> +
+
+
+
3352
+ 		+
+ + + <td><span class="css">rgba(255,0,255,1)</span> +
+
+
+
3353
+ 		+
+ + + <tr> +
+
+
+
3354
+ 		+
+ + + <td><code>bg_blue</code> +
+
+
+
3355
+ 		+
+ + + <td><span class="css">rgba(0,0,255,1)</span> +
+
+
+
3356
+ 		+
+ + + <tr> +
+
+
+
3357
+ 		+
+ + + <td><code>bg_black</code> +
+
+
+
3358
+ 		+
+ + + <td><span class="css">rgba(0,0,0,1)</span> +
+
+
+
3359
+ 		+
+ + + </table> +
+
+
+
3360
+ 		+
+ + + <p class="note" role="note">The color for the class <code>bg_lime</code> is what has traditionally been used in +
+
+
+
3361
+ 		+
+ + + captioning under the name <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-green">green</a> (e.g. 608/708).</p> +
+
+
+
3362
+ 		+
+ + + <p>For the purpose of determining the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade">cascade</a> of the color and background +
+
+
+
3363
+ 		+
+ + + classes, the order of appearance determines the cascade of the classes.</p> +
+
+
+
3364
+ 		+
+ + + <div class="example" id="example-a15d9824"> +
+
+
+
3365
+ 		+
+ + + <a class="self-link" href="#example-a15d9824"></a> +
+
+
+
3366
+ 		+
+ + + <p>This example shows how to use the classes.</p> +
+
+
+
3367
+ 		+
+ + + <pre>WEBVTT +
+
+
+
3368
+ 		+
+ + +
+
+
+
3369
+ 		+
+ + + 02:00.000 --> 02:05.000 +
+
+
+
3370
+ 		+
+ + + &lt;c.yellow.bg_blue>This is yellow text on a blue background&lt;/c> +
+
+
+
3371
+ 		+
+ + +
+
+
+
3372
+ 		+
+ + + 04:00.000 --> 04:05.000 +
+
+
+
3373
+ 		+
+ + + &lt;c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background&lt;/c> +
+
+
+
3374
+ 		+
+ + + </pre> +
+
+
+
3375
+ 		+
+ + + </div> +
+
+
+
3376
+ 		+
+ + + <p class="note" role="note">Default classes can be changed by authors, e.g. ::cue(.yellow) {color:cyan} would +
+
+
+
3377
+ 		+
+ + + change all .yellow classed text to cyan.</p> +
+
+
+
3378
+ 		+
+ + + <h2 class="heading settled" data-level="6" id="parsing"><span class="secno">6. </span><span class="content">Parsing</span><a class="self-link" href="#parsing"></a></h2> +
+
+
+
3379
+ 		+
+ + + <p>WebVTT file parsing is the same for all types of WebVTT files, including captions, subtitles, +
+
+
+
3380
+ 		+
+ + + chapters, or metadata. Most of the steps will be skipped for chapters or metadata files.</p> +
+
+
+
3381
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="WebVTT file parsing" data-level="6.1" id="file-parsing"><span class="secno">6.1. </span><span class="content">WebVTT file parsing</span><a class="self-link" href="#file-parsing"></a></h3> +
+
+
3049
+
3382
+ 		+
+ + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-parser">WebVTT parser</dfn>, given an input byte stream, a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>, and a collection of <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> <var>stylesheets</var>, must decode the byte +
+
+
3050
+
3383
+ 		+
+ + stream using the <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#utf-8-decode">UTF-8 decode</a> algorithm, and then must parse the resulting +
+
+
3051
+
+ 		+
+ - + string according to the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-1">WebVTT parser algorithm</a> below. This results in <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-14">WebVTT cues</a> being added to <var>output</var>, and <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> being added to <var>stylesheets</var>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p> +
+
+
+
3384
+ 		+
+ + + string according to the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-1">WebVTT parser algorithm</a> below. This results in <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-18">WebVTT cues</a> being added to <var>output</var>, and <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> being added to <var>stylesheets</var>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p> +
+
+
3052
+
3385
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-2">WebVTT parser</a>, specifically its conversion and parsing steps, is typically run +
+
+
3053
+
3386
+ 		+
+ + asynchronously, with the input byte stream being updated incrementally as the resource is +
+
+
3054
+
3387
+ 		+
+ + downloaded; this is called an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="incremental-webvtt-parser">incremental WebVTT parser</dfn>.</p> +
+
+
3055
+
3388
+ 		+
+ + <p>A <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-3">WebVTT parser</a> verifies a file signature before parsing the provided byte stream. If the +
+
+
3056
+
3389
+ 		+
+ + stream lacks this WebVTT file signature, then the parser aborts.</p> +
+
+
3057
+
3390
+ 		+
+ + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-parser-algorithm">WebVTT parser algorithm</dfn> is as follows:</p> +
+
+
3058
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3391
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT parser algorithm"> +
+
+
3059
+
3392
+ 		+
+ + <li> +
+
+
3060
+
3393
+ 		+
+ + <p>Let <var>input</var> be the string being parsed, after conversion to Unicode, and with the following +
+
+
3061
+
3394
+ 		+
+ + transformations applied:</p> +
+
+
@@ -3097,13 +3430,13 @@
+
+
3097
+
3430
+ 		+
+ + characters.</p> +
+
+
3098
+
3431
+ 		+
+ + <li> +
+
+
3099
+
3432
+ 		+
+ + <p>If <var>position</var> is past the end of <var>input</var>, then abort these steps. The file was successfully +
+
+
3100
+
+ 		+
+ - + processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-15">WebVTT cues</a> were added +
+
+
+
3433
+ 		+
+ + + processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-19">WebVTT cues</a> were added +
+
+
3101
+
3434
+ 		+
+ + to <var>output</var>.</p> +
+
+
3102
+
3435
+ 		+
+ + <li> +
+
+
3103
+
3436
+ 		+
+ + <p>The character indicated by <var>position</var> is a U+000A LINE FEED (LF) character. Advance <var>position</var> to the next character in <var>input</var>.</p> +
+
+
3104
+
3437
+ 		+
+ + <li> +
+
+
3105
+
3438
+ 		+
+ + <p>If <var>position</var> is past the end of <var>input</var>, then abort these steps. The file was successfully +
+
+
3106
+
+ 		+
+ - + processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-16">WebVTT cues</a> were added +
+
+
+
3439
+ 		+
+ + + processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-20">WebVTT cues</a> were added +
+
+
3107
+
3440
+ 		+
+ + to <var>output</var>.</p> +
+
+
3108
+
3441
+ 		+
+ + <li> +
+
+
3109
+
3442
+ 		+
+ + <p><i>Header</i>: If the character indicated by <var>position</var> is not a U+000A LINE FEED (LF) +
+
+
@@ -3119,7 +3452,7 @@
+
+
3119
+
3452
+ 		+
+ + <li> +
+
+
3120
+
3453
+ 		+
+ + <p><a data-link-type="dfn" href="#collect-a-webvtt-block" id="ref-for-collect-a-webvtt-block-2">Collect a WebVTT block</a>, and let <var>block</var> be the returned value.</p> +
+
+
3121
+
3454
+ 		+
+ + <li> +
+
+
3122
+
+ 		+
+ - + <p>If <var>block</var> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-17">WebVTT cue</a>, add <var>block</var> to the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>.</p> +
+
+
+
3455
+ 		+
+ + + <p>If <var>block</var> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-21">WebVTT cue</a>, add <var>block</var> to the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>.</p> +
+
+
3123
+
3456
+ 		+
+ + <li> +
+
+
3124
+
3457
+ 		+
+ + <p>Otherwise, if <var>block</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheet</a>, add <var>block</var> to <var>stylesheets</var>.</p> +
+
+
3125
+
3458
+ 		+
+ + <li> +
+
+
@@ -3187,7 +3520,7 @@
+
+
3187
+
3520
+ 		+
+ + <li> +
+
+
3188
+
3521
+ 		+
+ + <p>Let <var>previous position</var> be <var>position</var>.</p> +
+
+
3189
+
3522
+ 		+
+ + <li> +
+
+
3190
+
+ 		+
+ - + <p><i>Cue creation</i>: Let <var>cue</var> be a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-18">WebVTT cue</a> and initialize it as +
+
+
+
3523
+ 		+
+ + + <p><i>Cue creation</i>: Let <var>cue</var> be a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-22">WebVTT cue</a> and initialize it as +
+
+
3191
+
3524
+ 		+
+ + follows:</p> +
+
+
3192
+
3525
+ 		+
+ + <ol> +
+
+
3193
+
3526
+ 		+
+ + <li> +
+
+
@@ -3199,7 +3532,7 @@
+
+
3199
+
3532
+ 		+
+ + <li> +
+
+
3200
+
3533
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-13">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-13">horizontal</a>.</p> +
+
+
3201
+
3534
+ 		+
+ + <li> +
+
+
3202
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-9">WebVTT cue snap-to-lines flag</a> be true.</p> +
+
+
+
3535
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-8">WebVTT cue snap-to-lines flag</a> be true.</p> +
+
+
3203
+
3536
+ 		+
+ + <li> +
+
+
3204
+
3537
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-21">WebVTT cue line</a> be <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-4">auto</a>.</p> +
+
+
3205
+
3538
+ 		+
+ + <li> +
+
+
@@ -3211,9 +3544,9 @@
+
+
3211
+
3544
+ 		+
+ + <li> +
+
+
3212
+
3545
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-7">WebVTT cue size</a> be 100.</p> +
+
+
3213
+
3546
+ 		+
+ + <li> +
+
+
3214
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-13">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-5">center alignment</a>.</p> +
+
+
+
3547
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-15">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-5">center alignment</a>.</p> +
+
+
3215
+
3548
+ 		+
+ + <li> +
+
+
3216
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-2">text track cue text</a> be the empty string.</p> +
+
+
+
3549
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-7">cue text</a> be the empty string.</p> +
+
+
3217
+
3550
+ 		+
+ + </ol> +
+
+
3218
+
3551
+ 		+
+ + <li> +
+
+
3219
+
3552
+ 		+
+ + <p><a data-link-type="dfn" href="#collect-webvtt-cue-timings-and-settings" id="ref-for-collect-webvtt-cue-timings-and-settings-1">Collect WebVTT cue timings and settings</a> from <var>line</var> using <var>regions</var> for <var>cue</var>. +
+
+
@@ -3269,7 +3602,7 @@
+
+
3269
+
3602
+ 		+
+ + whitespace</a>, then run these substeps:</p> +
+
+
3270
+
3603
+ 		+
+ + <ol> +
+
+
3271
+
3604
+ 		+
+ + <li> +
+
+
3272
+
+ 		+
+ - + <p><i>Region creation</i>: Let <var>region</var> be a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-8">WebVTT region</a>.</p> +
+
+
+
3605
+ 		+
+ + + <p><i>Region creation</i>: Let <var>region</var> be a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-9">WebVTT region</a>.</p> +
+
+
3273
+
3606
+ 		+
+ + <li> +
+
+
3274
+
3607
+ 		+
+ + <p>Let <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-2">identifier</a> be the empty +
+
+
3275
+
3608
+ 		+
+ + string.</p> +
+
+
@@ -3299,7 +3632,7 @@
+
+
3299
+
3632
+ 		+
+ + <p>If <var>seen EOF</var> is true, break out of <i>loop</i>.</p> +
+
+
3300
+
3633
+ 		+
+ + </ol> +
+
+
3301
+
3634
+ 		+
+ + <li> +
+
+
3302
+
+ 		+
+ - + <p>If <var>cue</var> is not null, let the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-3">text track cue text</a> of <var>cue</var> be <var>buffer</var>, and return <var>cue</var>.</p> +
+
+
+
3635
+ 		+
+ + + <p>If <var>cue</var> is not null, let the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-8">cue text</a> of <var>cue</var> be <var>buffer</var>, and return <var>cue</var>.</p> +
+
+
3303
+
3636
+ 		+
+ + <li> +
+
+
3304
+
3637
+ 		+
+ + <p>Otherwise, if <var>stylesheet</var> is not null, then <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet0">Parse a stylesheet</a> from <var>buffer</var>. If it returned a list of rules, assign the list as <var>stylesheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-css-rules">CSS rules</a>; otherwise, set <var>stylesheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-css-rules">CSS +
+
+
3305
+
3638
+ 		+
+ + rules</a> to an empty list. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <a data-link-type="biblio" href="#biblio-css-syntax-3">[CSS-SYNTAX-3]</a> Finally, return <var>stylesheet</var>.</p> +
+
+
@@ -3309,14 +3642,13 @@
+
+
3309
+
3642
+ 		+
+ + <li> +
+
+
3310
+
3643
+ 		+
+ + <p>Otherwise, return null.</p> +
+
+
3311
+
3644
+ 		+
+ + </ol> +
+
+
3312
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="WebVTT region settings parsing" data-level="5.2" id="region-settings-parsing"><span class="secno">5.2. </span><span class="content">WebVTT region settings parsing</span><a class="self-link" href="#region-settings-parsing"></a></h3> +
+
+
3313
+
+ 		+
+ - + <p>When the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-5">WebVTT parser</a> requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="collect WebVTT region settings" data-noexport="" id="collect-webvtt-region-settings">collect WebVTT region +
+
+
3314
+
+ 		+
+ - + settings</dfn> from a string <var>input</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>, the user agent must run the following +
+
+
3315
+
+ 		+
+ - + algorithm.</p> +
+
+
+
3645
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="WebVTT region settings parsing" data-level="6.2" id="region-settings-parsing"><span class="secno">6.2. </span><span class="content">WebVTT region settings parsing</span><a class="self-link" href="#region-settings-parsing"></a></h3> +
+
+
+
3646
+ 		+
+ + + <p>When the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-2">WebVTT parser algorithm</a> says to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-webvtt-region-settings">collect WebVTT region settings</dfn> from a +
+
+
+
3647
+ 		+
+ + + string <var>input</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>, the user agent must run the following algorithm.</p> +
+
+
+
3648
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-object">WebVTT region object</dfn> is a conceptual construct to represent a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-10">WebVTT region</a> that is used as a root node for <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-1">lists of WebVTT node +
+
+
3316
+
+ 		+
+ - + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-object">WebVTT region object</dfn> is a conceptual construct to represent a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-9">WebVTT region</a> that is used as a root node for <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-1">lists of WebVTT node +
+
+
3317
+
3649
+ 		+
+ + objects</a>. This algorithm returns a list of <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-3">WebVTT Region +
+
+
3318
+
3650
+ 		+
+ + Objects</a>.</p> +
+
+
3319
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3651
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT region objects"> +
+
+
3320
+
3652
+ 		+
+ + <li> +
+
+
3321
+
3653
+ 		+
+ + <p>Let <var>settings</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#split-a-string-on-spaces">splitting <var>input</var> on +
+
+
3322
+
3654
+ 		+
+ + spaces</a>.</p> +
+
+
@@ -3406,7 +3738,7 @@
+
+
3406
+
3738
+ 		+
+ + <p>The rules to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="parse-a-percentage-string">parse a percentage string</dfn> are as follows. This will return either a +
+
+
3407
+
3739
+ 		+
+ + number in the range 0..100, or nothing. If at any point the algorithm says that it "fails", this +
+
+
3408
+
3740
+ 		+
+ + means that it is aborted at that point and returns nothing.</p> +
+
+
3409
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3741
+ 		+
+ + + <ol class="algorithm" data-algorithm="parse a percentage string"> +
+
+
3410
+
3742
+ 		+
+ + <li> +
+
+
3411
+
3743
+ 		+
+ + <p>Let <var>input</var> be the string being parsed.</p> +
+
+
3412
+
3744
+ 		+
+ + <li> +
+
+
@@ -3421,10 +3753,10 @@
+
+
3421
+
3753
+ 		+
+ + <li> +
+
+
3422
+
3754
+ 		+
+ + <p>Return <var>percentage</var>.</p> +
+
+
3423
+
3755
+ 		+
+ + </ol> +
+
+
3424
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="WebVTT cue timings and settings parsing" data-level="5.3" id="cue-timings-and-settings-parsing"><span class="secno">5.3. </span><span class="content">WebVTT cue timings and settings parsing</span><a class="self-link" href="#cue-timings-and-settings-parsing"></a></h3> +
+
+
3425
+
+ 		+
+ - + <p>When the algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="collect WebVTT cue timings and settings" data-noexport="" id="collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and +
+
+
3426
+
+ 		+
+ - + settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-2">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-19">WebVTT cue</a> <var>cue</var>, the user agent must run the following algorithm.</p> +
+
+
3427
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3756
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="WebVTT cue timings and settings parsing" data-level="6.3" id="cue-timings-and-settings-parsing"><span class="secno">6.3. </span><span class="content">WebVTT cue timings and settings parsing</span><a class="self-link" href="#cue-timings-and-settings-parsing"></a></h3> +
+
+
+
3757
+ 		+
+ + + <p>When the algorithm above says to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-2">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-23">WebVTT cue</a> <var>cue</var>, the user +
+
+
+
3758
+ 		+
+ + + agent must run the following algorithm.</p> +
+
+
+
3759
+ 		+
+ + + <ol class="algorithm" data-algorithm="collect WebVTT cue timings and settings"> +
+
+
3428
+
3760
+ 		+
+ + <li> +
+
+
3429
+
3761
+ 		+
+ + <p>Let <var>input</var> be the string being parsed.</p> +
+
+
3430
+
3762
+ 		+
+ + <li> +
+
+
@@ -3460,7 +3792,7 @@
+
+
3460
+
3792
+ 		+
+ + </ol> +
+
+
3461
+
3793
+ 		+
+ + <p>When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="parse-the-webvtt-cue-settings">parse the WebVTT cue settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-3">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> <var>cue</var>, the user agent must +
+
+
3462
+
3794
+ 		+
+ + run the following steps:</p> +
+
+
3463
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3795
+ 		+
+ + + <ol class="algorithm" data-algorithm="parse the WebVTT cue settings"> +
+
+
3464
+
3796
+ 		+
+ + <li> +
+
+
3465
+
3797
+ 		+
+ + <p>Let <var>settings</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#split-a-string-on-spaces">splitting <var>input</var> on +
+
+
3466
+
3798
+ 		+
+ + spaces</a>.</p> +
+
+
@@ -3484,7 +3816,7 @@
+
+
3484
+
3816
+ 		+
+ + <dd> +
+
+
3485
+
3817
+ 		+
+ + <ol> +
+
+
3486
+
3818
+ 		+
+ + <li> +
+
+
3487
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-3">WebVTT cue region</a> be the last <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-10">WebVTT region</a> in <var>regions</var> whose <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-4">WebVTT region identifier</a> is <var>value</var>, if any, or null otherwise.</p> +
+
+
+
3819
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-3">WebVTT cue region</a> be the last <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-11">WebVTT region</a> in <var>regions</var> whose <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-4">WebVTT region identifier</a> is <var>value</var>, if any, or null otherwise.</p> +
+
+
3488
+
3820
+ 		+
+ + </ol> +
+
+
3489
+
3821
+ 		+
+ + <dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>vertical</code>" +
+
+
3490
+
3822
+ 		+
+ + <dd> +
+
+
@@ -3494,6 +3826,9 @@
+
+
3494
+
3826
+ 		+
+ + <li> +
+
+
3495
+
3827
+ 		+
+ + <p>Otherwise, if <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string +
+
+
3496
+
3828
+ 		+
+ + "<code>lr</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-15">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-4">vertical growing right</a>.</p> +
+
+
+
3829
+ 		+
+ + + <li> +
+
+
+
3830
+ 		+
+ + + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-16">WebVTT cue writing direction</a> is not <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-14">horizontal</a>, let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-4">WebVTT cue region</a> be null (there are no +
+
+
+
3831
+ 		+
+ + + vertical regions).</p> +
+
+
3497
+
3832
+ 		+
+ + </ol> +
+
+
3498
+
3833
+ 		+
+ + <dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>line</code>" +
+
+
3499
+
3834
+ 		+
+ + <dd> +
+
+
@@ -3555,7 +3890,11 @@
+
+
3555
+
3890
+ 		+
+ + <li> +
+
+
3556
+
3891
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-22">WebVTT cue line</a> be <var>number</var>.</p> +
+
+
3557
+
3892
+ 		+
+ + <li> +
+
+
3558
+
+ 		+
+ - + <p>If the last character in <var>linepos</var> is a U+0025 PERCENT SIGN character (%), then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-10">WebVTT cue snap-to-lines flag</a> be false. Otherwise, let it be true.</p> +
+
+
+
3893
+ 		+
+ + + <p>If the last character in <var>linepos</var> is a U+0025 PERCENT SIGN character (%), then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-9">WebVTT cue snap-to-lines flag</a> be false. Otherwise, let it be true.</p> +
+
+
+
3894
+ 		+
+ + + <li> +
+
+
+
3895
+ 		+
+ + + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-23">WebVTT cue line</a> is not <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-5">auto</a>, +
+
+
+
3896
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-5">WebVTT cue region</a> be null (the cue has been explicitly positioned with a +
+
+
+
3897
+ 		+
+ + + line offset and thus drops out of the region).</p> +
+
+
3559
+
3898
+ 		+
+ + </ol> +
+
+
3560
+
3899
+ 		+
+ + <dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>position</code>" +
+
+
3561
+
3900
+ 		+
+ + <dd> +
+
+
@@ -3572,13 +3911,13 @@
+
+
3572
+
3911
+ 		+
+ + returned <var>percentage</var>, otherwise jump to the step labeled <i>next setting</i> (<a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-21">position</a>’s value remains the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-7">auto</a>).</p> +
+
+
3573
+
3912
+ 		+
+ + <li> +
+
+
3574
+
3913
+ 		+
+ + <p>If <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string +
+
+
3575
+
+ 		+
+ - + "<code>line-left</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-8">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-4">line-left alignment</a>.</p> +
+
+
+
3914
+ 		+
+ + + "<code>line-left</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-8">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-6">line-left alignment</a>.</p> +
+
+
3576
+
3915
+ 		+
+ + <li> +
+
+
3577
+
3916
+ 		+
+ + <p>Otherwise, if <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string +
+
+
3578
+
3917
+ 		+
+ + "<code>center</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-9">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-2">center alignment</a>.</p> +
+
+
3579
+
3918
+ 		+
+ + <li> +
+
+
3580
+
3919
+ 		+
+ + <p>Otherwise, if <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string +
+
+
3581
+
+ 		+
+ - + "<code>line-right</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-10">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-3">line-right alignment</a>.</p> +
+
+
+
3920
+ 		+
+ + + "<code>line-right</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-10">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-5">line-right alignment</a>.</p> +
+
+
3582
+
3921
+ 		+
+ + <li> +
+
+
3583
+
3922
+ 		+
+ + <p>Otherwise, if <var>colalign</var> is not null, then jump to the step labeled <i>next +
+
+
3584
+
3923
+ 		+
+ + setting</i>.</p> +
+
+
@@ -3593,29 +3932,32 @@
+
+
3593
+
3932
+ 		+
+ + returned <var>percentage</var>, otherwise jump to the step labeled <i>next setting</i>.</p> +
+
+
3594
+
3933
+ 		+
+ + <li> +
+
+
3595
+
3934
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-8">WebVTT cue size</a> be <var>number</var>.</p> +
+
+
+
3935
+ 		+
+ + + <li> +
+
+
+
3936
+ 		+
+ + + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-9">WebVTT cue size</a> is not 100, let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-6">WebVTT cue region</a> be +
+
+
+
3937
+ 		+
+ + + null (the cue has been explicitly sized and thus drops out of the region).</p> +
+
+
3596
+
3938
+ 		+
+ + </ol> +
+
+
3597
+
3939
+ 		+
+ + <dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>align</code>" +
+
+
3598
+
3940
+ 		+
+ + <dd> +
+
+
3599
+
3941
+ 		+
+ + <ol> +
+
+
3600
+
3942
+ 		+
+ + <li> +
+
+
3601
+
3943
+ 		+
+ + <p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>start</code>", then +
+
+
3602
+
+ 		+
+ - + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-14">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-6">start +
+
+
+
3944
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-16">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-7">start +
+
+
3603
+
3945
+ 		+
+ + alignment</a>.</p> +
+
+
3604
+
3946
+ 		+
+ + <li> +
+
+
3605
+
3947
+ 		+
+ + <p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>center</code>", then +
+
+
3606
+
+ 		+
+ - + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-15">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-6">center +
+
+
+
3948
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-17">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-6">center +
+
+
3607
+
3949
+ 		+
+ + alignment</a>.</p> +
+
+
3608
+
3950
+ 		+
+ + <li> +
+
+
3609
+
3951
+ 		+
+ + <p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>end</code>", then +
+
+
3610
+
+ 		+
+ - + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-16">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-5">end +
+
+
+
3952
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-18">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-6">end +
+
+
3611
+
3953
+ 		+
+ + alignment</a>.</p> +
+
+
3612
+
3954
+ 		+
+ + <li> +
+
+
3613
+
3955
+ 		+
+ + <p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>left</code>", then +
+
+
3614
+
+ 		+
+ - + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-17">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-5">left +
+
+
+
3956
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-19">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-5">left +
+
+
3615
+
3957
+ 		+
+ + alignment</a>.</p> +
+
+
3616
+
3958
+ 		+
+ + <li> +
+
+
3617
+
3959
+ 		+
+ + <p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>right</code>", then +
+
+
3618
+
+ 		+
+ - + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-18">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-5">right +
+
+
+
3960
+ 		+
+ + + let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-20">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-5">right +
+
+
3619
+
3961
+ 		+
+ + alignment</a>.</p> +
+
+
3620
+
3962
+ 		+
+ + </ol> +
+
+
3621
+
3963
+ 		+
+ + </dl> +
+
+
@@ -3625,7 +3967,7 @@
+
+
3625
+
3967
+ 		+
+ + </ol> +
+
+
3626
+
3968
+ 		+
+ + <p>When this specification says that a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-a-webvtt-timestamp">collect a WebVTT timestamp</dfn>, the +
+
+
3627
+
3969
+ 		+
+ + user agent must run the following steps:</p> +
+
+
3628
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
3970
+ 		+
+ + + <ol class="algorithm" data-algorithm="collect a WebVTT timestamp"> +
+
+
3629
+
3971
+ 		+
+ + <li> +
+
+
3630
+
3972
+ 		+
+ + <p>Let <var>input</var> and <var>position</var> be the same variables as those of the same name in the algorithm +
+
+
3631
+
3973
+ 		+
+ + that invoked these steps.</p> +
+
+
@@ -3695,18 +4037,18 @@
+
+
3695
+
4037
+ 		+
+ + <li> +
+
+
3696
+
4038
+ 		+
+ + <p>Return <var>result</var>.</p> +
+
+
3697
+
4039
+ 		+
+ + </ol> +
+
+
3698
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="WebVTT cue text parsing rules" data-level="5.4" id="cue-text-parsing-rules"><span class="secno">5.4. </span><span class="content">WebVTT cue text parsing rules</span><a class="self-link" href="#cue-text-parsing-rules"></a></h3> +
+
+
3699
+
+ 		+
+ - + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-node-object">WebVTT Node Object</dfn> is a conceptual construct used to represent components of <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-6">WebVTT cue text</a> so that its processing can be described without reference to the underlying +
+
+
3700
+
+ 		+
+ - + syntax.</p> +
+
+
+
4040
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="WebVTT cue text parsing rules" data-level="6.4" id="cue-text-parsing-rules"><span class="secno">6.4. </span><span class="content">WebVTT cue text parsing rules</span><a class="self-link" href="#cue-text-parsing-rules"></a></h3> +
+
+
+
4041
+ 		+
+ + + <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-node-object">WebVTT Node Object</dfn> is a conceptual construct used to represent components of <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-9">cue +
+
+
+
4042
+ 		+
+ + + text</a> so that its processing can be described without reference to the underlying syntax.</p> +
+
+
3701
+
4043
+ 		+
+ + <p>There are two broad classes of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-1">WebVTT Node Objects</a>: <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-1">WebVTT Internal Node Objects</a> and <a data-link-type="dfn" href="#webvtt-leaf-node-object" id="ref-for-webvtt-leaf-node-object-1">WebVTT +
+
+
3702
+
4044
+ 		+
+ + Leaf Node Objects</a>.</p> +
+
+
3703
+
4045
+ 		+
+ + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Internal Node Object" data-noexport="" id="webvtt-internal-node-object">WebVTT Internal Node Objects</dfn> are those that can +
+
+
3704
+
4046
+ 		+
+ + contain further <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-2">WebVTT Node Objects</a>. They are conceptually similar to +
+
+
3705
+
4047
+ 		+
+ + elements in HTML or the DOM. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-2">WebVTT Internal Node Objects</a> have an ordered list of child <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-3">WebVTT Node Objects</a>. The <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-3">WebVTT +
+
+
3706
+
4048
+ 		+
+ + Internal Node Object</a> is said to be the <i>parent</i> of the children. Cycles do not occur; the +
+
+
3707
+
+ 		+
+ - + parent-child relationships so constructed form a tree structure. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-4">WebVTT Internal Node Objects</a> also have an ordered list of class names, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable classes" data-noexport="" id="webvtt-node-objects-applicable-classes">applicable classes</dfn>, and a language, known as +
+
+
3708
+
+ 		+
+ - + their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable language" data-noexport="" id="webvtt-node-objects-applicable-language">applicable language</dfn>, which is to be +
+
+
3709
+
+ 		+
+ - + interpreted as a BCP 47 language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p> +
+
+
+
4049
+ 		+
+ + + parent-child relationships so constructed form a tree structure. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-4">WebVTT Internal Node Objects</a> also have an ordered list of <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-6">class names</a>, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable classes" data-noexport="" id="webvtt-node-objects-applicable-classes">applicable +
+
+
+
4050
+ 		+
+ + + classes</dfn>, and a language, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable +
+
+
+
4051
+ 		+
+ + + language" data-noexport="" id="webvtt-node-objects-applicable-language">applicable language</dfn>, which is to be interpreted as a BCP 47 language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p> +
+
+
3710
+
4052
+ 		+
+ + <p class="note" role="note">User agents will add a language tag as the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-1">applicable language</a> even if it is not a valid or not even well-formed language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p> +
+
+
3711
+
4053
+ 		+
+ + <p>There are several concrete classes of <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-5">WebVTT Internal Node +
+
+
3712
+
4054
+ 		+
+ + Objects</a>:</p> +
+
+
@@ -3717,37 +4059,39 @@
+
+
3717
+
4059
+ 		+
+ + Objects</a>.</p> +
+
+
3718
+
4060
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Class Object" data-noexport="" id="webvtt-class-object">WebVTT Class Objects</dfn> +
+
+
3719
+
4061
+ 		+
+ + <dd> +
+
+
3720
+
+ 		+
+ - + <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-2">WebVTT cue class span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-7">WebVTT cue text</a>, and +
+
+
3721
+
+ 		+
+ - + are used to annotate parts of the cue with <a data-link-type="dfn" href="#webvtt-node-objects-applicable-classes" id="ref-for-webvtt-node-objects-applicable-classes-1">applicable classes</a> without implying further meaning (such as italics or bold).</p> +
+
+
+
4062
+ 		+
+ + + <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-2">WebVTT cue class span</a>) in <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-10">cue text</a>, and are used +
+
+
+
4063
+ 		+
+ + + to annotate parts of the cue with <a data-link-type="dfn" href="#webvtt-node-objects-applicable-classes" id="ref-for-webvtt-node-objects-applicable-classes-1">applicable +
+
+
+
4064
+ 		+
+ + + classes</a> without implying further meaning (such as italics or bold).</p> +
+
+
3722
+
4065
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Italic Object" data-noexport="" id="webvtt-italic-object">WebVTT Italic Objects</dfn> +
+
+
3723
+
4066
+ 		+
+ + <dd> +
+
+
3724
+
+ 		+
+ - + <p>These represent spans of italic text (a <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-2">WebVTT cue italics span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-8">WebVTT cue +
+
+
3725
+
+ 		+
+ - + text</a>.</p> +
+
+
+
4067
+ 		+
+ + + <p>These represent spans of italic text (a <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-2">WebVTT cue italics span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-5">WebVTT caption or +
+
+
+
4068
+ 		+
+ + + subtitle cue text</a>.</p> +
+
+
3726
+
4069
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Bold Object" data-noexport="" id="webvtt-bold-object">WebVTT Bold Objects</dfn> +
+
+
3727
+
4070
+ 		+
+ + <dd> +
+
+
3728
+
+ 		+
+ - + <p>These represent spans of bold text (a <a data-link-type="dfn" href="#webvtt-cue-bold-span" id="ref-for-webvtt-cue-bold-span-2">WebVTT cue bold span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-9">WebVTT cue +
+
+
3729
+
+ 		+
+ - + text</a>.</p> +
+
+
+
4071
+ 		+
+ + + <p>These represent spans of bold text (a <a data-link-type="dfn" href="#webvtt-cue-bold-span" id="ref-for-webvtt-cue-bold-span-2">WebVTT cue bold span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-6">WebVTT caption or +
+
+
+
4072
+ 		+
+ + + subtitle cue text</a>.</p> +
+
+
3730
+
4073
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Underline Object" data-noexport="" id="webvtt-underline-object">WebVTT Underline Objects</dfn> +
+
+
3731
+
4074
+ 		+
+ + <dd> +
+
+
3732
+
+ 		+
+ - + <p>These represent spans of underline text (a <a data-link-type="dfn" href="#webvtt-cue-underline-span" id="ref-for-webvtt-cue-underline-span-2">WebVTT cue underline span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-10">WebVTT cue +
+
+
3733
+
+ 		+
+ - + text</a>.</p> +
+
+
+
4075
+ 		+
+ + + <p>These represent spans of underline text (a <a data-link-type="dfn" href="#webvtt-cue-underline-span" id="ref-for-webvtt-cue-underline-span-2">WebVTT cue underline span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-7">WebVTT +
+
+
+
4076
+ 		+
+ + + caption or subtitle cue text</a>.</p> +
+
+
3734
+
4077
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Ruby Object" data-noexport="" id="webvtt-ruby-object">WebVTT Ruby Objects</dfn> +
+
+
3735
+
4078
+ 		+
+ + <dd> +
+
+
3736
+
+ 		+
+ - + <p>These represent spans of ruby (a <a data-link-type="dfn" href="#webvtt-cue-ruby-span" id="ref-for-webvtt-cue-ruby-span-3">WebVTT cue ruby span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-11">WebVTT cue text</a>.</p> +
+
+
+
4079
+ 		+
+ + + <p>These represent spans of ruby (a <a data-link-type="dfn" href="#webvtt-cue-ruby-span" id="ref-for-webvtt-cue-ruby-span-3">WebVTT cue ruby span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-8">WebVTT caption or subtitle +
+
+
+
4080
+ 		+
+ + + cue text</a>.</p> +
+
+
3737
+
4081
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Ruby Text Object" data-noexport="" id="webvtt-ruby-text-object">WebVTT Ruby Text Objects</dfn> +
+
+
3738
+
4082
+ 		+
+ + <dd> +
+
+
3739
+
+ 		+
+ - + <p>These represent spans of ruby text (a <a data-link-type="dfn" href="#webvtt-cue-ruby-text-span" id="ref-for-webvtt-cue-ruby-text-span-1">WebVTT cue ruby text span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-12">WebVTT cue +
+
+
3740
+
+ 		+
+ - + text</a>.</p> +
+
+
+
4083
+ 		+
+ + + <p>These represent spans of ruby text (a <a data-link-type="dfn" href="#webvtt-cue-ruby-text-span" id="ref-for-webvtt-cue-ruby-text-span-1">WebVTT cue ruby text span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-9">WebVTT caption or +
+
+
+
4084
+ 		+
+ + + subtitle cue text</a>.</p> +
+
+
3741
+
4085
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Voice Object" data-noexport="" id="webvtt-voice-object">WebVTT Voice Objects</dfn> +
+
+
3742
+
4086
+ 		+
+ + <dd> +
+
+
3743
+
4087
+ 		+
+ + <p>These represent spans of text associated with a specific voice (a <a data-link-type="dfn" href="#webvtt-cue-voice-span" id="ref-for-webvtt-cue-voice-span-3">WebVTT cue voice span</a>) +
+
+
3744
+
+ 		+
+ - + in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-13">WebVTT cue text</a>. A <a data-link-type="dfn" href="#webvtt-voice-object" id="ref-for-webvtt-voice-object-1">WebVTT Voice Object</a> has a value, which is the name of the +
+
+
3745
+
+ 		+
+ - + voice.</p> +
+
+
+
4088
+ 		+
+ + + in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-10">WebVTT caption or subtitle cue text</a>. A <a data-link-type="dfn" href="#webvtt-voice-object" id="ref-for-webvtt-voice-object-1">WebVTT Voice Object</a> has a value, which is +
+
+
+
4089
+ 		+
+ + + the name of the voice.</p> +
+
+
3746
+
4090
+ 		+
+ + <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Language Object" data-noexport="" id="webvtt-language-object">WebVTT Language Objects</dfn> +
+
+
3747
+
4091
+ 		+
+ + <dd> +
+
+
3748
+
+ 		+
+ - + <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-language-span" id="ref-for-webvtt-cue-language-span-2">WebVTT cue language span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-14">WebVTT cue text</a>, +
+
+
3749
+
+ 		+
+ - + and are used to annotate parts of the cue where the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-2">applicable language</a> might be different than the surrounding text’s, without implying +
+
+
3750
+
+ 		+
+ - + further meaning (such as italics or bold).</p> +
+
+
+
4092
+ 		+
+ + + <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-language-span" id="ref-for-webvtt-cue-language-span-2">WebVTT cue language span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-11">WebVTT caption or +
+
+
+
4093
+ 		+
+ + + subtitle cue text</a>, and are used to annotate parts of the cue where the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-2">applicable language</a> might be different than the surrounding +
+
+
+
4094
+ 		+
+ + + text’s, without implying further meaning (such as italics or bold).</p> +
+
+
3751
+
4095
+ 		+
+ + </dl> +
+
+
3752
+
4096
+ 		+
+ + <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Leaf Node Object" data-noexport="" id="webvtt-leaf-node-object">WebVTT Leaf Node Objects</dfn> are those that contain data, +
+
+
3753
+
4097
+ 		+
+ + such as text, and cannot contain child <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-5">WebVTT Node Objects</a>.</p> +
+
+
@@ -3764,8 +4108,9 @@
+
+
3764
+
4108
+ 		+
+ + second, which is the time represented by the timestamp.</p> +
+
+
3765
+
4109
+ 		+
+ + </dl> +
+
+
3766
+
4110
+ 		+
+ + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-parsing-rules">WebVTT cue text parsing rules</dfn> consist of the following algorithm. The input is a +
+
+
3767
+
+ 		+
+ - + string <var>input</var> supposedly containing <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-15">WebVTT cue text</a>, and optionally a fallback language <var>language</var>. This algorithm returns a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-2">list of WebVTT Node Objects</a>.</p> +
+
+
3768
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
4111
+ 		+
+ + + string <var>input</var> supposedly containing <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-12">WebVTT caption or subtitle cue text</a>, and optionally a +
+
+
+
4112
+ 		+
+ + + fallback language <var>language</var>. This algorithm returns a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-2">list of WebVTT Node Objects</a>.</p> +
+
+
+
4113
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT cue text parsing"> +
+
+
3769
+
4114
+ 		+
+ + <li> +
+
+
3770
+
4115
+ 		+
+ + <p>Let <var>input</var> be the string being parsed.</p> +
+
+
3771
+
4116
+ 		+
+ + <li> +
+
+
@@ -3896,7 +4241,7 @@
+
+
3896
+
4241
+ 		+
+ + string (whose value is a sequence of characters), a start tag (with a tag name, a list of classes, +
+
+
3897
+
4242
+ 		+
+ + and optionally an annotation), an end tag (with a tag name), or a timestamp tag (with a tag +
+
+
3898
+
4243
+ 		+
+ + value).</p> +
+
+
3899
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
4244
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT cue text tokenizer"> +
+
+
3900
+
4245
+ 		+
+ + <li> +
+
+
3901
+
4246
+ 		+
+ + <p>Let <var>input</var> and <var>position</var> be the same variables as those of the same name in the algorithm +
+
+
3902
+
4247
+ 		+
+ + that invoked these steps.</p> +
+
+
@@ -4108,8 +4453,8 @@
+
+
4108
+
4453
+ 		+
+ + <p>When the HTML specification says to consume a character, in this context, it means to advance <var>position</var> to the next character in <var>input</var>. When it says to unconsume a character, it means to move <var>position</var> back to the previous character in <var>input</var>. "EOF" is equivalent to the end-of-file marker +
+
+
4109
+
4454
+ 		+
+ + in this specification. Finally, this context is <em>not</em> "as part of an attribute" (when it +
+
+
4110
+
4455
+ 		+
+ + comes to handling a missing semicolon).</p> +
+
+
4111
+
+ 		+
+ - + <h3 class="heading settled" data-level="5.5" id="dom-construction-rules"><span class="secno">5.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</dfn></span><a class="self-link" href="#dom-construction-rules"></a></h3> +
+
+
4112
+
+ 		+
+ - + <p class="note" role="note">For the purpose of retrieving a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-20">WebVTT cue</a>’s content via the <code class="idl"><a data-link-type="idl" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-1">getCueAsHTML()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-1">VTTCue</a></code> interface, it needs to be parsed to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code>. This section describes how.</p> +
+
+
+
4456
+ 		+
+ + + <h3 class="heading settled" data-level="6.5" id="dom-construction-rules"><span class="secno">6.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</dfn></span><a class="self-link" href="#dom-construction-rules"></a></h3> +
+
+
+
4457
+ 		+
+ + + <p class="note" role="note">For the purpose of retrieving a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-24">WebVTT cue</a>’s content via the <code class="idl"><a data-link-type="idl" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-1">getCueAsHTML()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-1">VTTCue</a></code> interface, it needs to be parsed to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code>. This section describes how.</p> +
+
+
4113
+
4458
+ 		+
+ + <p>To convert a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-4">list of WebVTT Node Objects</a> to a DOM tree for <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> <var>owner</var>, user +
+
+
4114
+
4459
+ 		+
+ + agents must create a tree of DOM nodes that is isomorphous to the tree of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-6">WebVTT Node Objects</a>, with the following mapping of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-7">WebVTT +
+
+
4115
+
4460
+ 		+
+ + Node Objects</a> to DOM nodes:</p> +
+
+
@@ -4171,25 +4516,27 @@
+
+
4171
+
4516
+ 		+
+ + <p>All characteristics of the DOM nodes that are not described above or dependent on characteristics +
+
+
4172
+
4517
+ 		+
+ + defined above must be left at their initial values.</p> +
+
+
4173
+
4518
+ 		+
+ + <h3 class="heading settled algorithm" data-algorithm="WebVTT rules for extracting the chapter +
+
+
4174
+
+ 		+
+ - + title" data-level="5.6" id="rules-for-extracting-the-chapter-title"><span class="secno">5.6. </span><span class="content">WebVTT rules for extracting the chapter +
+
+
+
4519
+ 		+
+ + + title" data-level="6.6" id="rules-for-extracting-the-chapter-title"><span class="secno">6.6. </span><span class="content">WebVTT rules for extracting the chapter +
+
+
4175
+
4520
+ 		+
+ + title</span><a class="self-link" href="#rules-for-extracting-the-chapter-title"></a></h3> +
+
+
4176
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</dfn> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-21">WebVTT cue</a> <var>cue</var> are as +
+
+
+
4521
+ 		+
+ + + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</dfn> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-25">WebVTT cue</a> <var>cue</var> are as +
+
+
4177
+
4522
+ 		+
+ + follows:</p> +
+
+
4178
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
4523
+ 		+
+ + + <ol class="algorithm" data-algorithm="WebVTT rules for extracting the chapter title"> +
+
+
4179
+
4524
+ 		+
+ + <li> +
+
+
4180
+
4525
+ 		+
+ + <p>Let <var>nodes</var> be the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-6">list of WebVTT Node Objects</a> obtained by applying the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-1">WebVTT cue +
+
+
4181
+
+ 		+
+ - + text parsing rules</a> to the <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-4">text track cue text</a>.</p> +
+
+
+
4526
+ 		+
+ + + text parsing rules</a> to the <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-11">cue text</a>.</p> +
+
+
4182
+
4527
+ 		+
+ + <li> +
+
+
4183
+
4528
+ 		+
+ + <p>Return the concatenation of the values of each <a data-link-type="dfn" href="#webvtt-text-object" id="ref-for-webvtt-text-object-6">WebVTT Text Object</a> in <var>nodes</var>, in a +
+
+
4184
+
4529
+ 		+
+ + pre-order, depth-first traversal, excluding <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-5">WebVTT Ruby Text +
+
+
4185
+
4530
+ 		+
+ + Objects</a> and their descendants.</p> +
+
+
4186
+
4531
+ 		+
+ + </ol> +
+
+
4187
+
+ 		+
+ - + <h2 class="heading settled" data-level="6" id="rendering"><span class="secno">6. </span><span class="content">Rendering</span><a class="self-link" href="#rendering"></a></h2> +
+
+
4188
+
+ 		+
+ - + <p class="note" role="note">This section describes in some detail how to visually render WebVTT cues in a user +
+
+
4189
+
+ 		+
+ - + agent. The processing model is quite tightly linked to media elements in HTML. When supporting +
+
+
4190
+
+ 		+
+ - + WebVTT in media players that don’t support CSS, equivalent visual rendering will need to be +
+
+
4191
+
+ 		+
+ - + implemented.</p> +
+
+
4192
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="Processing model" data-level="6.1" id="processing-model"><span class="secno">6.1. </span><span class="content">Processing model</span><a class="self-link" href="#processing-model"></a></h3> +
+
+
+
4532
+ 		+
+ + + <h2 class="heading settled" data-level="7" id="rendering"><span class="secno">7. </span><span class="content">Rendering</span><a class="self-link" href="#rendering"></a></h2> +
+
+
+
4533
+ 		+
+ + + <p class="note" role="note">This section describes in some detail how to visually render <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue" id="ref-for-webvtt-caption-or-subtitle-cue-2">WebVTT caption or +
+
+
+
4534
+ 		+
+ + + subtitle cues</a> in a user agent. The processing model is quite tightly linked to media elements in +
+
+
+
4535
+ 		+
+ + + HTML, where CSS is available. <a data-link-type="dfn" href="#user-agents-that-do-not-support-css" id="ref-for-user-agents-that-do-not-support-css-1">User agents that do not support CSS</a> are expected to render +
+
+
+
4536
+ 		+
+ + + plain text only, without styling and positioning features. <a data-link-type="dfn" href="#user-agents-that-do-not-support-a-full-html-css-engine" id="ref-for-user-agents-that-do-not-support-a-full-html-css-engine-2">User agents that do not support a full +
+
+
+
4537
+ 		+
+ + + HTML CSS engine</a> are expected to render an equivalent visual representation to what a user agent +
+
+
+
4538
+ 		+
+ + + with a full CSS engine would render.</p> +
+
+
+
4539
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="Processing model" data-level="7.1" id="processing-model"><span class="secno">7.1. </span><span class="content">Processing model</span><a class="self-link" href="#processing-model"></a></h3> +
+
+
4193
+
4540
+ 		+
+ + <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text tracks</dfn> render the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> (specifically, a <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element), or of another playback +
+
+
4194
+
4541
+ 		+
+ + mechanism, by applying the steps below. All the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> that use these +
+
+
4195
+
4542
+ 		+
+ + rules for a given <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, or other playback mechanism, are rendered together, to avoid +
+
+
@@ -4201,7 +4548,7 @@
+
+
4201
+
4548
+ 		+
+ + <p>The output of the steps below is a set of CSS boxes that covers the rendering area of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> or other playback mechanism, which user agents are expected to render in a +
+
+
4202
+
4549
+ 		+
+ + manner suiting the user.</p> +
+
+
4203
+
4550
+ 		+
+ + <p>The rules are as follows:</p> +
+
+
4204
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
4551
+ 		+
+ + + <ol class="algorithm" data-algorithm="rules for updating the display of WebVTT text tracks"> +
+
+
4205
+
4552
+ 		+
+ + <li> +
+
+
4206
+
4553
+ 		+
+ + <p>If the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> is an <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-audio-element">audio</a> element, or is another playback +
+
+
4207
+
4554
+ 		+
+ + mechanism with no rendering area, abort these steps.</p> +
+
+
@@ -4225,12 +4572,12 @@
+
+
4225
+
4572
+ 		+
+ + <p>For each track <var>track</var> in <var>tracks</var>, append to <var>cues</var> all the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">cues</a> from <var>track</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">list of cues</a> that have their <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">text track cue +
+
+
4226
+
4573
+ 		+
+ + active flag</a> set.</p> +
+
+
4227
+
4574
+ 		+
+ + <li> +
+
+
4228
+
+ 		+
+ - + <p>Let <var>regions</var> be an empty list of <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-11">WebVTT regions</a>.</p> +
+
+
+
4575
+ 		+
+ + + <p>Let <var>regions</var> be an empty list of <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-12">WebVTT regions</a>.</p> +
+
+
4229
+
4576
+ 		+
+ + <li> +
+
+
4230
+
+ 		+
+ - + <p>For each track <var>track</var> in <var>tracks</var>, append to <var>regions</var> all the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-12">regions</a> with an identifier from <var>track</var>’s <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-4">list of +
+
+
+
4577
+ 		+
+ + + <p>For each track <var>track</var> in <var>tracks</var>, append to <var>regions</var> all the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-13">regions</a> with an identifier from <var>track</var>’s <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-4">list of +
+
+
4231
+
4578
+ 		+
+ + regions</a>.</p> +
+
+
4232
+
4579
+ 		+
+ + <li> +
+
+
4233
+
+ 		+
+ - + <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-13">WebVTT region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-5">WebVTT region object</a>.</p> +
+
+
+
4580
+ 		+
+ + + <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-14">WebVTT region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-5">WebVTT region object</a>.</p> +
+
+
4234
+
4581
+ 		+
+ + <li> +
+
+
4235
+
4582
+ 		+
+ + <p>Apply the following steps for each <var>regionNode</var>:</p> +
+
+
4236
+
4583
+ 		+
+ + <ol> +
+
+
@@ -4240,7 +4587,8 @@
+
+
4240
+
4587
+ 		+
+ + <li> +
+
+
4241
+
4588
+ 		+
+ + <p>Let <var>regionWidth</var> be the <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-3">WebVTT region width</a>. Let <var>width</var> be <span class="css"><var>regionWidth</var> vw</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> is a CSS unit). <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p> +
+
+
4242
+
4589
+ 		+
+ + <li> +
+
+
4243
+
+ 		+
+ - + <p>Let <var>lineHeight</var> be <span class="css">5.33vh</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> is a CSS unit) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a> and <var>regionHeight</var> be the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-3">WebVTT region lines</a>. Let <var>lines</var> be <var>lineHeight</var> multiplied by <var>regionHeight</var>.</p> +
+
+
+
4590
+ 		+
+ + + <p>Let <var>lineHeight</var> be <span class="css">6vh</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> is a CSS unit) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a> and <var>regionHeight</var> be +
+
+
+
4591
+ 		+
+ + + the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-3">WebVTT region lines</a>. Let <var>lines</var> be <var>lineHeight</var> multiplied by <var>regionHeight</var>.</p> +
+
+
4244
+
4592
+ 		+
+ + <li> +
+
+
4245
+
4593
+ 		+
+ + <p>Let <var>viewportAnchorX</var> be the x dimension of the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-3">WebVTT region anchor</a> and <var>regionAnchorX</var> be the x dimension of the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-4">WebVTT region anchor</a>. Let <var>leftOffset</var> be <var>regionAnchorX</var> multiplied by <var>width</var> divided by 100.0. Let <var>left</var> be <var>leftOffset</var> subtracted +
+
+
4246
+
4594
+ 		+
+ + from <span class="css"><var>viewportAnchorX</var> vw</span>.</p> +
+
+
@@ -4260,29 +4608,29 @@
+
+
4260
+
4608
+ 		+
+ + section uses some of the variables whose values were calculated earlier in this +
+
+
4261
+
4609
+ 		+
+ + algorithm.)</p> +
+
+
4262
+
4610
+ 		+
+ + <li> +
+
+
4263
+
+ 		+
+ - + <p>The viewport (and initial containing block) is video’s rendering area.</p> +
+
+
+
4611
+ 		+
+ + + <p>The video viewport (and initial containing block) is video’s rendering area.</p> +
+
+
4264
+
4612
+ 		+
+ + </ol> +
+
+
4265
+
4613
+ 		+
+ + <li> +
+
+
4266
+
4614
+ 		+
+ + <p>Add the CSS box <var>box</var> to <var>output</var>.</p> +
+
+
4267
+
4615
+ 		+
+ + </ol> +
+
+
4268
+
4616
+ 		+
+ + <li> +
+
+
4269
+
+ 		+
+ - + <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-22">WebVTT cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track +
+
+
+
4617
+ 		+
+ + + <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-26">WebVTT cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track +
+
+
4270
+
4618
+ 		+
+ + cue display state</a> has a set of CSS boxes, then:</p> +
+
+
4271
+
4619
+ 		+
+ + <ul> +
+
+
4272
+
4620
+ 		+
+ + <li> +
+
+
4273
+
+ 		+
+ - + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-4">WebVTT cue region</a> is not null, add those boxes to that region’s <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p> +
+
+
+
4621
+ 		+
+ + + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-7">WebVTT cue region</a> is not null, add those boxes to that region’s <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p> +
+
+
4274
+
4622
+ 		+
+ + <li> +
+
+
4275
+
4623
+ 		+
+ + <p>Otherwise, add those boxes to <var>output</var> and remove <var>cue</var> from <var>cues</var>.</p> +
+
+
4276
+
4624
+ 		+
+ + </ul> +
+
+
4277
+
4625
+ 		+
+ + <li> +
+
+
4278
+
+ 		+
+ - + <p>For each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-23">WebVTT cue</a> <var>cue</var> in <var>cues</var> that has not yet had corresponding CSS boxes added +
+
+
+
4626
+ 		+
+ + + <p>For each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-27">WebVTT cue</a> <var>cue</var> in <var>cues</var> that has not yet had corresponding CSS boxes added +
+
+
4279
+
4627
+ 		+
+ + to <var>output</var>, in <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-order">text track cue order</a>, run the following substeps:</p> +
+
+
4280
+
4628
+ 		+
+ + <ol> +
+
+
4281
+
4629
+ 		+
+ + <li> +
+
+
4282
+
4630
+ 		+
+ + <p>Let <var>nodes</var> be the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-7">list of WebVTT Node Objects</a> obtained by applying the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-2">WebVTT +
+
+
4283
+
+ 		+
+ - + cue text parsing rules</a>, with the fallback language <var>language</var> if provided, to the <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-5">text track cue text</a>.</p> +
+
+
+
4631
+ 		+
+ + + cue text parsing rules</a>, with the fallback language <var>language</var> if provided, to the <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-12">cue text</a>.</p> +
+
+
4284
+
4632
+ 		+
+ + <li> +
+
+
4285
+
+ 		+
+ - + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-5">WebVTT cue region</a> is null, run the following substeps:</p> +
+
+
+
4633
+ 		+
+ + + <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-8">WebVTT cue region</a> is null, run the following substeps:</p> +
+
+
4286
+
4634
+ 		+
+ + <ol> +
+
+
4287
+
4635
+ 		+
+ + <li><a data-link-type="dfn" href="#apply-webvtt-cue-settings" id="ref-for-apply-webvtt-cue-settings-1">Apply WebVTT cue settings</a> to obtain CSS boxes <var>boxes</var> from <var>nodes</var>. +
+
+
4288
+
4636
+ 		+
+ + <li> +
+
+
@@ -4294,9 +4642,9 @@
+
+
4294
+
4642
+ 		+
+ + <p>Otherwise, run the following substeps:</p> +
+
+
4295
+
4643
+ 		+
+ + <ol> +
+
+
4296
+
4644
+ 		+
+ + <li> +
+
+
4297
+
+ 		+
+ - + <p>Let <var>region</var> be <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-6">WebVTT cue region</a>.</p> +
+
+
+
4645
+ 		+
+ + + <p>Let <var>region</var> be <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-9">WebVTT cue region</a>.</p> +
+
+
4298
+
4646
+ 		+
+ + <li> +
+
+
4299
+
+ 		+
+ - + <p>If <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-3">WebVTT region scroll</a> setting is <a data-link-type="dfn" href="#webvtt-region-scroll-up" id="ref-for-webvtt-region-scroll-up-2">up</a> and <var>region</var> already has one child, set <var>region</var>’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#transition-property">transition-property</a> to <span class="css">top</span> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#transition-duration">transition-duration</a> to <span class="css">0.433s</span>.</p> +
+
+
+
4647
+ 		+
+ + + <p>If <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-3">WebVTT region scroll</a> setting is <a data-link-type="dfn" href="#webvtt-region-scroll-up" id="ref-for-webvtt-region-scroll-up-2">up</a> and <var>region</var> already has one child, set <var>region</var>’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#propdef-transition-property">transition-property</a> to <span class="css">top</span> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#propdef-transition-duration">transition-duration</a> to <span class="css">0.433s</span>.</p> +
+
+
4300
+
4648
+ 		+
+ + <li> +
+
+
4301
+
4649
+ 		+
+ + <p>Let <var>offset</var> be <var>cue</var>’s <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-1">computed position</a> multiplied +
+
+
4302
+
4650
+ 		+
+ + by <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-4">WebVTT region width</a> and divided by 100 (i.e. interpret it as a percentage +
+
+
@@ -4308,17 +4656,15 @@
+
+
4308
+
4656
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-3">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-3">center alignment</a> +
+
+
4309
+
4657
+ 		+
+ + <dd> +
+
+
4310
+
4658
+ 		+
+ + <p>Subtract half of <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-5">WebVTT region width</a> from <var>offset</var>.</p> +
+
+
4311
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-4">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-4">line-right alignment</a> +
+
+
+
4659
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-4">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-6">line-right alignment</a> +
+
+
4312
+
4660
+ 		+
+ + <dd> +
+
+
4313
+
4661
+ 		+
+ + <p>Subtract <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-6">WebVTT region width</a> from <var>offset</var>.</p> +
+
+
4314
+
4662
+ 		+
+ + </dl> +
+
+
4315
+
4663
+ 		+
+ + <li> +
+
+
4316
+
4664
+ 		+
+ + <p>Let <var>left</var> be <span class="css"><var>offset</var> %</span>. <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p> +
+
+
4317
+
4665
+ 		+
+ + <li> +
+
+
4318
+
+ 		+
+ - + <p>Apply the terms of the CSS specifications to <var>nodes</var> with the same constraints that are +
+
+
4319
+
+ 		+
+ - + used when they are applied to <var>nodes</var> of a <var>cue</var> that is not part of a region.</p> +
+
+
+
4666
+ 		+
+ + + <p><a data-link-type="dfn" href="#obtain-a-set-of-css-boxes" id="ref-for-obtain-a-set-of-css-boxes-1">Obtain a set of CSS boxes</a> <var>boxes</var> positioned relative to an initial containing +
+
+
+
4667
+ 		+
+ + + block.</p> +
+
+
4320
+
+ 		+
+ - + <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along +
+
+
4321
+
+ 		+
+ - + with their positions.</p> +
+
+
4322
+
4668
+ 		+
+ + <li> +
+
+
4323
+
4669
+ 		+
+ + <p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. +
+
+
4324
+
4670
+ 		+
+ + The cue is ignored.</p> +
+
+
@@ -4335,25 +4681,26 @@
+
+
4335
+
4681
+ 		+
+ + </ol> +
+
+
4336
+
4682
+ 		+
+ + <p>User agents may allow the user to override the above algorithm’s positioning of cues, e.g. by +
+
+
4337
+
4683
+ 		+
+ + dragging them to another location on the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a>, or even off the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> entirely.</p> +
+
+
4338
+
+ 		+
+ - + <p>When the algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="apply-webvtt-cue-settings">apply WebVTT cue settings</dfn> to +
+
+
4339
+
+ 		+
+ - + obtain CSS boxes from a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-8">list of WebVTT Node Objects</a> <var>nodes</var>, the user agent must run the +
+
+
4340
+
+ 		+
+ - + following algorithm.</p> +
+
+
4341
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
4684
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="Processing cue settings" data-level="7.2" id="processing-cue-settings"><span class="secno">7.2. </span><span class="content">Processing cue settings</span><a class="self-link" href="#processing-cue-settings"></a></h3> +
+
+
+
4685
+ 		+
+ + + <p>When the processing algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="apply WebVTT cue settings" data-noexport="" id="apply-webvtt-cue-settings">apply WebVTT cue +
+
+
+
4686
+ 		+
+ + + settings</dfn> to obtain CSS boxes from a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-8">list of WebVTT Node Objects</a> <var>nodes</var>, the user agent +
+
+
+
4687
+ 		+
+ + + must run the following algorithm.</p> +
+
+
+
4688
+ 		+
+ + + <ol class="algorithm" data-algorithm="apply WebVTT cue settings"> +
+
+
4342
+
4689
+ 		+
+ + <li> +
+
+
4343
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-16">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-14">horizontal</a>, then let <var>writing-mode</var> be "horizontal-tb". Otherwise, if the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-17">WebVTT +
+
+
+
4690
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-17">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-15">horizontal</a>, then let <var>writing-mode</var> be "horizontal-tb". Otherwise, if the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-18">WebVTT +
+
+
4344
+
4691
+ 		+
+ + cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-5">vertical +
+
+
4345
+
+ 		+
+ - + growing left</a>, then let <var>writing-mode</var> be "vertical-rl". Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-18">WebVTT cue writing +
+
+
+
4692
+ 		+
+ + + growing left</a>, then let <var>writing-mode</var> be "vertical-rl". Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-19">WebVTT cue writing +
+
+
4346
+
4693
+ 		+
+ + direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-5">vertical growing +
+
+
4347
+
4694
+ 		+
+ + right</a>; let <var>writing-mode</var> be "vertical-lr".</p> +
+
+
4348
+
4695
+ 		+
+ + <li> +
+
+
4349
+
4696
+ 		+
+ + <p>Determine the value of <var>maximum size</var> for <var>cue</var> as per the appropriate rules from the following +
+
+
4350
+
4697
+ 		+
+ + list:</p> +
+
+
4351
+
4698
+ 		+
+ + <dl class="switch"> +
+
+
4352
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-5">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-5">line-left</a> +
+
+
+
4699
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-5">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-7">line-left</a> +
+
+
4353
+
4700
+ 		+
+ + <dd> +
+
+
4354
+
4701
+ 		+
+ + <p>Let <var>maximum size</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-2">computed position</a> subtracted from +
+
+
4355
+
4702
+ 		+
+ + 100.</p> +
+
+
4356
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-6">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-5">line-right</a> +
+
+
+
4703
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-6">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-7">line-right</a> +
+
+
4357
+
4704
+ 		+
+ + <dd> +
+
+
4358
+
4705
+ 		+
+ + <p>Let <var>maximum size</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-3">computed position</a>.</p> +
+
+
4359
+
4706
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-7">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-4">center</a>, and the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-4">computed position</a> is less than or equal to 50 +
+
+
@@ -4366,40 +4713,40 @@
+
+
4366
+
4713
+ 		+
+ + position</a> from 100 and then multiplying the result by two.</p> +
+
+
4367
+
4714
+ 		+
+ + </dl> +
+
+
4368
+
4715
+ 		+
+ + <li> +
+
+
4369
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-9">WebVTT cue size</a> is less than <var>maximum size</var>, then let <var>size</var> be <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-10">WebVTT cue +
+
+
+
4716
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-10">WebVTT cue size</a> is less than <var>maximum size</var>, then let <var>size</var> be <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-11">WebVTT cue +
+
+
4370
+
4717
+ 		+
+ + size</a>. Otherwise, let <var>size</var> be <var>maximum size</var>.</p> +
+
+
4371
+
4718
+ 		+
+ + <li> +
+
+
4372
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-19">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-15">horizontal</a>, then let <var>width</var> be <span class="css"><var>size</var> vw</span> and <var>height</var> be <span class="css">auto</span>. Otherwise, let <var>width</var> be <span class="css">auto</span> and <var>height</var> be <span class="css"><var>size</var> vh</span>. +
+
+
+
4719
+ 		+
+ + + <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-20">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-16">horizontal</a>, then let <var>width</var> be <span class="css"><var>size</var> vw</span> and <var>height</var> be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a>. Otherwise, let <var>width</var> be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a> and <var>height</var> be <span class="css"><var>size</var> vh</span>. +
+
+
4373
+
4720
+ 		+
+ + (These are CSS values used by the next section to set CSS properties for the rendering; <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> are CSS units.) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p> +
+
+
4374
+
4721
+ 		+
+ + <li> +
+
+
4375
+
4722
+ 		+
+ + <p>Determine the value of <var>x-position</var> or <var>y-position</var> for <var>cue</var> as per the appropriate rules from +
+
+
4376
+
4723
+ 		+
+ + the following list:</p> +
+
+
4377
+
4724
+ 		+
+ + <dl class="switch"> +
+
+
4378
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-20">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-16">horizontal</a> +
+
+
+
4725
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-21">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-17">horizontal</a> +
+
+
4379
+
4726
+ 		+
+ + <dd> +
+
+
4380
+
4727
+ 		+
+ + <dl class="switch"> +
+
+
4381
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-9">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-6">line-left alignment</a> +
+
+
+
4728
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-9">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-8">line-left alignment</a> +
+
+
4382
+
4729
+ 		+
+ + <dd> +
+
+
4383
+
4730
+ 		+
+ + <p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-8">computed position</a>.</p> +
+
+
4384
+
4731
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-10">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-6">center alignment</a> +
+
+
4385
+
4732
+ 		+
+ + <dd> +
+
+
4386
+
4733
+ 		+
+ + <p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-9">computed position</a> minus half +
+
+
4387
+
4734
+ 		+
+ + of <var>size</var>.</p> +
+
+
4388
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-11">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-6">line-right alignment</a> +
+
+
+
4735
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-11">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-8">line-right alignment</a> +
+
+
4389
+
4736
+ 		+
+ + <dd> +
+
+
4390
+
4737
+ 		+
+ + <p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-10">computed position</a> minus <var>size</var>.</p> +
+
+
4391
+
4738
+ 		+
+ + </dl> +
+
+
4392
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-21">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">vertical growing right</a> +
+
+
+
4739
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-22">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">vertical growing right</a> +
+
+
4393
+
4740
+ 		+
+ + <dd> +
+
+
4394
+
4741
+ 		+
+ + <dl class="switch"> +
+
+
4395
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-12">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-7">line-left alignment</a> +
+
+
+
4742
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-12">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-9">line-left alignment</a> +
+
+
4396
+
4743
+ 		+
+ + <dd> +
+
+
4397
+
4744
+ 		+
+ + <p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-11">computed position</a>.</p> +
+
+
4398
+
4745
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-13">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-7">center alignment</a> +
+
+
4399
+
4746
+ 		+
+ + <dd> +
+
+
4400
+
4747
+ 		+
+ + <p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-12">computed position</a> minus half +
+
+
4401
+
4748
+ 		+
+ + of <var>size</var>.</p> +
+
+
4402
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-14">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-7">line-right alignment</a> +
+
+
+
4749
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-14">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-9">line-right alignment</a> +
+
+
4403
+
4750
+ 		+
+ + <dd> +
+
+
4404
+
4751
+ 		+
+ + <p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-13">computed position</a> minus <var>size</var>.</p> +
+
+
4405
+
4752
+ 		+
+ + </dl> +
+
+
@@ -4407,23 +4754,23 @@
+
+
4407
+
4754
+ 		+
+ + <li> +
+
+
4408
+
4755
+ 		+
+ + <p>Determine the value of whichever of <var>x-position</var> or <var>y-position</var> is not yet calculated for <var>cue</var> as per the appropriate rules from the following list:</p> +
+
+
4409
+
4756
+ 		+
+ + <dl class="switch"> +
+
+
4410
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-11">WebVTT cue snap-to-lines flag</a> is false +
+
+
+
4757
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-10">WebVTT cue snap-to-lines flag</a> is false +
+
+
4411
+
4758
+ 		+
+ + <dd> +
+
+
4412
+
4759
+ 		+
+ + <dl class="switch"> +
+
+
4413
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-22">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-17">horizontal</a> +
+
+
+
4760
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-23">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-18">horizontal</a> +
+
+
4414
+
4761
+ 		+
+ + <dd> +
+
+
4415
+
4762
+ 		+
+ + <p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-2">computed line</a>.</p> +
+
+
4416
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-23">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">vertical growing right</a> +
+
+
+
4763
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-24">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">vertical growing right</a> +
+
+
4417
+
4764
+ 		+
+ + <dd> +
+
+
4418
+
4765
+ 		+
+ + <p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-3">computed line</a>.</p> +
+
+
4419
+
4766
+ 		+
+ + </dl> +
+
+
4420
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-12">WebVTT cue snap-to-lines flag</a> is true +
+
+
+
4767
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-11">WebVTT cue snap-to-lines flag</a> is true +
+
+
4421
+
4768
+ 		+
+ + <dd> +
+
+
4422
+
4769
+ 		+
+ + <dl class="switch"> +
+
+
4423
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-24">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-18">horizontal</a> +
+
+
+
4770
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-25">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-19">horizontal</a> +
+
+
4424
+
4771
+ 		+
+ + <dd> +
+
+
4425
+
4772
+ 		+
+ + <p>Let <var>y-position</var> be 0.</p> +
+
+
4426
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-25">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">vertical growing right</a> +
+
+
+
4773
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-26">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">vertical growing right</a> +
+
+
4427
+
4774
+ 		+
+ + <dd> +
+
+
4428
+
4775
+ 		+
+ + <p>Let <var>x-position</var> be 0.</p> +
+
+
4429
+
4776
+ 		+
+ + </dl> +
+
+
@@ -4431,157 +4778,30 @@
+
+
4431
+
4778
+ 		+
+ + <p class="note" role="note">These are not final positions, they are merely temporary positions used to +
+
+
4432
+
4779
+ 		+
+ + calculate box dimensions below.</p> +
+
+
4433
+
4780
+ 		+
+ + <li> +
+
+
4434
+
+ 		+
+ - + <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-13">WebVTT cue snap-to-lines flag</a> is true, then run the appropriate steps from the +
+
+
4435
+
+ 		+
+ - + following list:</p> +
+
+
4436
+
+ 		+
+ - + <dl class="switch"> +
+
+
4437
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-26">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-19">horizontal</a> +
+
+
4438
+
+ 		+
+ - + <dd> +
+
+
4439
+
+ 		+
+ - + <ol> +
+
+
4440
+
+ 		+
+ - + <li> +
+
+
4441
+
+ 		+
+ - + <p>Let <var>edge margin</var> be a user-agent-defined horizontal length, expressed as a percentage +
+
+
4442
+
+ 		+
+ - + of the width of the <var>video</var>’s rendering area, which will be used to define a margin at the left +
+
+
4443
+
+ 		+
+ - + and right edges of the video into which this cue will not be placed. In situations with +
+
+
4444
+
+ 		+
+ - + overscan, this margin should be sufficient to place the cue within the title-safe area. In the +
+
+
4445
+
+ 		+
+ - + absence of overscan, this value should be picked for aesthetics (to avoid text being aligned +
+
+
4446
+
+ 		+
+ - + precisely on the left or right edge of the video, which can be ugly).</p> +
+
+
4447
+
+ 		+
+ - + <li> +
+
+
4448
+
+ 		+
+ - + <p>If <var>x-position</var> is less than <var>edge margin</var> and the sum of <var>x-position</var> and <var>size</var> is +
+
+
4449
+
+ 		+
+ - + more than <var>edge margin</var>, then increase <var>x-position</var> by <var>edge margin</var> and decrease <var>size</var> by the +
+
+
4450
+
+ 		+
+ - + same amount.</p> +
+
+
4451
+
+ 		+
+ - + <li> +
+
+
4452
+
+ 		+
+ - + <p>Let <var>right margin edge</var> be 100 minus <var>edge margin</var>.</p> +
+
+
4453
+
+ 		+
+ - + <li> +
+
+
4454
+
+ 		+
+ - + <p>If <var>x-position</var> is less than <var>right margin edge</var>, and the sum of <var>x-position</var> and <var>size</var> is more than <var>right margin edge</var>, then decrease <var>size</var> by <var>edge margin</var>.</p> +
+
+
4455
+
+ 		+
+ - + </ol> +
+
+
4456
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-27">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">vertical growing right</a> +
+
+
4457
+
+ 		+
+ - + <dd> +
+
+
4458
+
+ 		+
+ - + <ol> +
+
+
4459
+
+ 		+
+ - + <li> +
+
+
4460
+
+ 		+
+ - + <p>Let <var>edge margin</var> be a user-agent-defined vertical length, expressed as a percentage of +
+
+
4461
+
+ 		+
+ - + the height of the <var>video</var>’s rendering area, which will be used to define a margin at the top +
+
+
4462
+
+ 		+
+ - + and bottom edges of the video into which this cue will not be placed. In situations with +
+
+
4463
+
+ 		+
+ - + overscan, this margin should be sufficient to place the cue within the title-safe area. In the +
+
+
4464
+
+ 		+
+ - + absence of overscan, this value should be picked for aesthetics (to avoid text being aligned +
+
+
4465
+
+ 		+
+ - + precisely on the top or bottom edge of the video, which can be ugly).</p> +
+
+
4466
+
+ 		+
+ - + <li> +
+
+
4467
+
+ 		+
+ - + <p>If <var>y-position</var> is less than <var>edge margin</var> and the sum of <var>y-position</var> and <var>size</var> is +
+
+
4468
+
+ 		+
+ - + more than <var>edge margin</var>, then increase <var>y-position</var> by <var>edge margin</var> and decrease <var>size</var> by the +
+
+
4469
+
+ 		+
+ - + same amount.</p> +
+
+
4470
+
+ 		+
+ - + <li> +
+
+
4471
+
+ 		+
+ - + <p>Let <var>bottom margin edge</var> be 100 minus <var>edge margin</var>.</p> +
+
+
4472
+
+ 		+
+ - + <li> +
+
+
4473
+
+ 		+
+ - + <p>If <var>y-position</var> is less than <var>bottom margin edge</var>, and the sum of <var>y-position</var> and <var>size</var> is more than <var>right margin edge</var>, then decrease <var>size</var> by <var>edge margin</var>.</p> +
+
+
4474
+
+ 		+
+ - + </ol> +
+
+
4475
+
+ 		+
+ - + </dl> +
+
+
4476
+
+ 		+
+ - + <li> +
+
+
4477
+
4781
+ 		+
+ + <p>Let <var>left</var> be <span class="css"><var>x-position</var> vw</span> and <var>top</var> be <span class="css"><var>y-position</var> vh</span>. (These are +
+
+
4478
+
4782
+ 		+
+ + CSS values used by the next section to set CSS properties for the rendering; <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> are +
+
+
4479
+
4783
+ 		+
+ + CSS units.) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p> +
+
+
4480
+
4784
+ 		+
+ + <li> +
+
+
4481
+
+ 		+
+ - + <p>Apply the terms of the CSS specifications to <var>nodes</var> within the following constraints, thus +
+
+
4482
+
+ 		+
+ - + obtaining a set of CSS boxes positioned relative to an initial containing block: <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p> +
+
+
+
4785
+ 		+
+ + + <p><a data-link-type="dfn" href="#obtain-a-set-of-css-boxes" id="ref-for-obtain-a-set-of-css-boxes-2">Obtain a set of CSS boxes</a> <var>boxes</var> positioned relative to an initial containing +
+
+
+
4786
+ 		+
+ + + block.</p> +
+
+
4483
+
+ 		+
+ - + <ul> +
+
+
4484
+
+ 		+
+ - + <li> +
+
+
4485
+
+ 		+
+ - + <p>The <i>document tree</i> is the tree of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-9">WebVTT Node Objects</a> rooted at <var>nodes</var>.</p> +
+
+
4486
+
+ 		+
+ - + <li> +
+
+
4487
+
+ 		+
+ - + <p>For the purpose of selectors in STYLE blocks of a WebVTT file, the style sheet must apply to +
+
+
4488
+
+ 		+
+ - + a hypothetical document that contains a single empty element with no explicit name, no +
+
+
4489
+
+ 		+
+ - + namespace, no attributes, no classes, no IDs, and unknown primary language, that acts like the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> for the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> that were sourced from the given WebVTT file. +
+
+
4490
+
+ 		+
+ - + The selectors must not match other <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> for the same <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>. In this +
+
+
4491
+
+ 		+
+ - + hypothetical document, the element must not match any selector that would match the element +
+
+
4492
+
+ 		+
+ - + itself.</p> +
+
+
4493
+
+ 		+
+ - + <p class="note" role="note">This element exists only to be the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#originating-element">originating element</a> for +
+
+
4494
+
+ 		+
+ - + the <span class="css">::cue</span>, <span class="css">::cue()</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region()</span> pseudo-elements.</p> +
+
+
4495
+
+ 		+
+ - + <li> +
+
+
4496
+
+ 		+
+ - + <p>For the purpose of determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade">cascade</a> of the declarations in +
+
+
4497
+
+ 		+
+ - + STYLE blocks of a WebVTT file, the relative order of appearance of the style sheets must be the +
+
+
4498
+
+ 		+
+ - + same order as they were added to the collection, and the order of appearance of the collection +
+
+
4499
+
+ 		+
+ - + must be after any style sheets that apply to the associated <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element’s +
+
+
4500
+
+ 		+
+ - + document.</p> +
+
+
4501
+
+ 		+
+ - + <div class="example" id="example-29aea910"> +
+
+
4502
+
+ 		+
+ - + <a class="self-link" href="#example-29aea910"></a> +
+
+
4503
+
+ 		+
+ - + <p>For example, given the following (invalid) HTML document:</p> +
+
+
4504
+
+ 		+
+ - + <pre>&lt;!doctype html> +
+
+
4505
+
+ 		+
+ - + &lt;title>Invalid cascade example&lt;/title> +
+
+
4506
+
+ 		+
+ - + &lt;video controls autoplay src="video.webm"> +
+
+
4507
+
+ 		+
+ - + &lt;track default src="track.vtt"> +
+
+
4508
+
+ 		+
+ - + &lt;/video> +
+
+
4509
+
+ 		+
+ - + &lt;style> +
+
+
4510
+
+ 		+
+ - + ::cue { color:red } +
+
+
4511
+
+ 		+
+ - + &lt;/style> +
+
+
4512
+
+ 		+
+ - + </pre> +
+
+
4513
+
+ 		+
+ - + <p>...and the "track.vtt" file contains:</p> +
+
+
4514
+
+ 		+
+ - + <pre>WEBVTT +
+
+
4515
+
+ 		+
+ - +
+
+
4516
+
+ 		+
+ - + STYLE +
+
+
4517
+
+ 		+
+ - + ::cue { color:lime } +
+
+
4518
+
+ 		+
+ - +
+
+
4519
+
+ 		+
+ - + 00:00:00.000 --> 00:00:25.000 +
+
+
4520
+
+ 		+
+ - + Red or green? +
+
+
4521
+
+ 		+
+ - + </pre> +
+
+
4522
+
+ 		+
+ - + <p>The <span class="css">color:lime</span> declaration would win, because it is last in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade">cascade</a>, even though the <a data-link-type="element" href="https://www.w3.org/TR/html51/document-metadata.html#the-style-element">style</a> element is after the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element in the document order.</p> +
+
+
4523
+
+ 		+
+ - + </div> +
+
+
4524
+
+ 		+
+ - + <li> +
+
+
4525
+
+ 		+
+ - + <p id="style-no-external-resources">For the purpose of resolving URLs in STYLE blocks of a WebVTT +
+
+
4526
+
+ 		+
+ - + file, or any URLs in resources referenced from STYLE blocks of a WebVTT file, if the URL’s +
+
+
4527
+
+ 		+
+ - + scheme is not "<code>data</code>", then the user agent must act as if the URL failed to +
+
+
4528
+
+ 		+
+ - + resolve.</p> +
+
+
4529
+
+ 		+
+ - + <p><strong class="advisement">Supporting external resources with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#at-ruledef-import">@import</a> or <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-image">background-image</a> would be a new ability for <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media elements</a> and <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-track-element">track</a> elements to issue +
+
+
4530
+
+ 		+
+ - + network requests as the user watches the video, which could be a privacy issue.</strong></p> +
+
+
4531
+
+ 		+
+ - + <li> +
+
+
4532
+
+ 		+
+ - + <p>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-9">WebVTT Internal Node Objects</a> are equivalent to elements with the same +
+
+
4533
+
+ 		+
+ - + contents.</p> +
+
+
4534
+
+ 		+
+ - + <li>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-text-object" id="ref-for-webvtt-text-object-7">WebVTT +
+
+
4535
+
+ 		+
+ - + Text Objects</a> are equivalent to <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes. +
+
+
4536
+
+ 		+
+ - + <li>No style sheets are associated with <var>nodes</var>. (The nodes are subsequently restyled using style +
+
+
4537
+
+ 		+
+ - + sheets after their boxes are generated, as described below.) +
+
+
4538
+
+ 		+
+ - + <li>The children of the <var>nodes</var> must be wrapped in an anonymous box whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has +
+
+
4539
+
+ 		+
+ - + the value <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-inline">inline</a>. This is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-background-box">WebVTT cue background box</dfn>. +
+
+
4540
+
+ 		+
+ - + <li>Runs of children of <a data-link-type="dfn" href="#webvtt-ruby-object" id="ref-for-webvtt-ruby-object-5">WebVTT Ruby Objects</a> that are not <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-6">WebVTT Ruby Text Objects</a> must be wrapped in anonymous boxes +
+
+
4541
+
+ 		+
+ - + whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-display-ruby-base">ruby-base</a>. <a data-link-type="biblio" href="#biblio-css3-ruby">[CSS3-RUBY]</a> +
+
+
4542
+
+ 		+
+ - + <li>Properties on <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-10">WebVTT Node Objects</a> have their values set as +
+
+
4543
+
+ 		+
+ - + defined in the next section. (That section uses some of the variables whose values were +
+
+
4544
+
+ 		+
+ - + calculated earlier in this algorithm.) +
+
+
4545
+
+ 		+
+ - + <li>Text runs must be wrapped according to the CSS line-wrapping rules. +
+
+
4546
+
+ 		+
+ - + <li>The viewport (and initial containing block) is <var>video</var>’s rendering area. +
+
+
4547
+
+ 		+
+ - + </ul> +
+
+
4548
+
+ 		+
+ - + <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with +
+
+
4549
+
+ 		+
+ - + their positions.</p> +
+
+
4550
+
4787
+ 		+
+ + <li> +
+
+
4551
+
4788
+ 		+
+ + <p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. The +
+
+
4552
+
4789
+ 		+
+ + cue is ignored.</p> +
+
+
4553
+
4790
+ 		+
+ + <li> +
+
+
4554
+
4791
+ 		+
+ + <p>Adjust the positions of <var>boxes</var> according to the appropriate steps from the following list:</p> +
+
+
4555
+
4792
+ 		+
+ + <dl class="switch"> +
+
+
4556
+
+ 		+
+ - + <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-14">WebVTT cue snap-to-lines flag</a> is true +
+
+
+
4793
+ 		+
+ + + <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-12">WebVTT cue snap-to-lines flag</a> is true +
+
+
4557
+
4794
+ 		+
+ + <dd> +
+
+
4558
+
+ 		+
+ - + <p>Many of the steps in this algorithm vary according to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-28">WebVTT cue writing +
+
+
4559
+
+ 		+
+ - + direction</a>. Steps labeled "<strong>Horizontal</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-29">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-20">horizontal</a>, steps labeled "<strong>Vertical</strong>" must be followed when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-30">WebVTT cue writing direction</a> is either <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">vertical growing right</a>, steps labeled "<strong>Vertical Growing Left</strong>" +
+
+
4560
+
+ 		+
+ - + must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-31">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">vertical growing left</a>, and steps labeled "<strong>Vertical +
+
+
4561
+
+ 		+
+ - + Growing Right</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-32">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">vertical growing right</a>.</p> +
+
+
4562
+
+ 		+
+ - + <ol> +
+
+
+
4795
+ 		+
+ + + <p>Many of the steps in this algorithm vary according to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-27">WebVTT cue writing +
+
+
+
4796
+ 		+
+ + + direction</a>. Steps labeled "<strong>Horizontal</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-28">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-20">horizontal</a>, steps labeled "<strong>Vertical</strong>" must be followed when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-29">WebVTT cue writing direction</a> is either <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">vertical growing right</a>, steps labeled "<strong>Vertical Growing Left</strong>" +
+
+
+
4797
+ 		+
+ + + must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-30">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">vertical growing left</a>, and steps labeled "<strong>Vertical +
+
+
+
4798
+ 		+
+ + + Growing Right</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-31">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">vertical growing right</a>.</p> +
+
+
+
4799
+ 		+
+ + + <ol> +
+
+
4563
+
+ 		+
+ - + <li> +
+
+
4564
+
+ 		+
+ - + <p><strong>Horizontal</strong>: Let <var>margin</var> be a user-agent-defined vertical length which +
+
+
4565
+
+ 		+
+ - + will be used to define a margin at the top and bottom edges of the video into which cues will +
+
+
4566
+
+ 		+
+ - + not be placed. In situations with overscan, this margin should be sufficient to place all cues +
+
+
4567
+
+ 		+
+ - + within the title-safe area. In the absence of overscan, this value should be picked for +
+
+
4568
+
+ 		+
+ - + aesthetics (to avoid text being aligned precisely on the bottom edge of the video, which can +
+
+
4569
+
+ 		+
+ - + be ugly).</p> +
+
+
4570
+
+ 		+
+ - + <p><strong>Vertical</strong>: Let <var>margin</var> be a user-agent-defined horizontal length which +
+
+
4571
+
+ 		+
+ - + will be used to define a margin at the left and right edges of the video into which cues will +
+
+
4572
+
+ 		+
+ - + not be placed. In situations with overscan, this margin should be sufficient to place all cues +
+
+
4573
+
+ 		+
+ - + within the title-safe area. In the absence of overscan, this value should be picked for +
+
+
4574
+
+ 		+
+ - + aesthetics (to avoid text being aligned precisely on the left or right edges of the video, +
+
+
4575
+
+ 		+
+ - + which can be ugly).</p> +
+
+
4576
+
4800
+ 		+
+ + <li> +
+
+
4577
+
4801
+ 		+
+ + <p><strong>Horizontal</strong>: Let <var>full dimension</var> be the height of <var>video</var>’s rendering +
+
+
4578
+
4802
+ 		+
+ + area.</p> +
+
+
4579
+
4803
+ 		+
+ + <p><strong>Vertical</strong>: Let <var>full dimension</var> be the width of <var>video</var>’s rendering +
+
+
4580
+
4804
+ 		+
+ + area.</p> +
+
+
4581
+
+ 		+
+ - + <p>These dimensions must not be adjusted for overscan. (The algorithm does that +
+
+
4582
+
+ 		+
+ - + separately.)</p> +
+
+
4583
+
+ 		+
+ - + <li> +
+
+
4584
+
+ 		+
+ - + <p>Let <var>max dimension</var> be <var>full dimension</var> - (2 × <var>margin</var>).</p> +
+
+
4585
+
4805
+ 		+
+ + <li> +
+
+
4586
+
4806
+ 		+
+ + <p><strong>Horizontal</strong>: Let <var>step</var> be the height of the first line box in <var>boxes</var>.</p> +
+
+
4587
+
4807
+ 		+
+ + <p><strong>Vertical</strong>: Let <var>step</var> be the width of the first line box in <var>boxes</var>.</p> +
+
+
@@ -4600,7 +4820,6 @@
+
+
4600
+
4820
+ 		+
+ + box of the boxes in <var>boxes</var>, then increase <var>position</var> by <var>step</var>.</p> +
+
+
4601
+
4821
+ 		+
+ + <li> +
+
+
4602
+
4822
+ 		+
+ + <p>If <var>line</var> is less than zero then increase <var>position</var> by <var>max dimension</var>, and negate <var>step</var>.</p> +
+
+
4603
+
+ 		+
+ - + <p>Otherwise, increase <var>position</var> by <var>margin</var>.</p> +
+
+
4604
+
4823
+ 		+
+ + <li> +
+
+
4605
+
4824
+ 		+
+ + <p><strong>Horizontal</strong>: Move all the boxes in <var>boxes</var> down by the distance given by <var>position</var>.</p> +
+
+
4606
+
4825
+ 		+
+ + <p><strong>Vertical</strong>: Move all the boxes in <var>boxes</var> right by the distance given by <var>position</var>.</p> +
+
+
@@ -4608,11 +4827,7 @@
+
+
4608
+
4827
+ 		+
+ + <p>Remember the position of all the boxes in <var>boxes</var> as their <var>specified +
+
+
4609
+
4828
+ 		+
+ + position</var>.</p> +
+
+
4610
+
4829
+ 		+
+ + <li> +
+
+
4611
+
+ 		+
+ - + <p><strong>Horizontal</strong>: Let <var>title area</var> be a box that covers all of the <var>video</var>’s +
+
+
+
4830
+ 		+
+ + + <p>Let <var>title area</var> be a box that covers all of the <var>video</var>’s rendering area.</p> +
+
+
4612
+
+ 		+
+ - + rendering area except for a height of <var>margin</var> at the top of the rendering area and a height +
+
+
4613
+
+ 		+
+ - + of <var>margin</var> at the bottom of the rendering area.</p> +
+
+
4614
+
+ 		+
+ - + <p><strong>Vertical</strong>: Let <var>title area</var> be a box that covers all of the <var>video</var>’s +
+
+
4615
+
+ 		+
+ - + rendering area except for a width of <var>margin</var> at the left of the rendering area and a width of <var>margin</var> at the right of the rendering area.</p> +
+
+
4616
+
4831
+ 		+
+ + <li> +
+
+
4617
+
4832
+ 		+
+ + <p><i>Step loop</i>: If none of the boxes in <var>boxes</var> would overlap any of the boxes in <var>output</var>, and all of the boxes in <var>boxes</var> are entirely within the <var>title area</var> box, then jump +
+
+
4618
+
4833
+ 		+
+ + to the step labeled <i>done positioning</i> below.</p> +
+
+
@@ -4642,7 +4857,7 @@
+
+
4642
+
4857
+ 		+
+ + <li> +
+
+
4643
+
4858
+ 		+
+ + <p>Jump back to the step labeled <i>step loop</i>.</p> +
+
+
4644
+
4859
+ 		+
+ + </ol> +
+
+
4645
+
+ 		+
+ - + <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-15">WebVTT cue snap-to-lines flag</a> is false +
+
+
+
4860
+ 		+
+ + + <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-13">WebVTT cue snap-to-lines flag</a> is false +
+
+
4646
+
4861
+ 		+
+ + <dd> +
+
+
4647
+
4862
+ 		+
+ + <ol> +
+
+
4648
+
4863
+ 		+
+ + <li> +
+
+
@@ -4650,7 +4865,7 @@
+
+
4650
+
4865
+ 		+
+ + <li> +
+
+
4651
+
4866
+ 		+
+ + <p>Run the appropriate steps from the following list:</p> +
+
+
4652
+
4867
+ 		+
+ + <dl class="switch"> +
+
+
4653
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-33">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-21">horizontal</a> +
+
+
+
4868
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-32">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-21">horizontal</a> +
+
+
4654
+
4869
+ 		+
+ + <dd> +
+
+
4655
+
4870
+ 		+
+ + <dl class="switch"> +
+
+
4656
+
4871
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-10">WebVTT cue line alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-3">center alignment</a> +
+
+
@@ -4661,7 +4876,7 @@
+
+
4661
+
4876
+ 		+
+ + <dd> +
+
+
4662
+
4877
+ 		+
+ + <p>Move all the boxes in <var>boxes</var> up by the height of <var>bounding box</var>.</p> +
+
+
4663
+
4878
+ 		+
+ + </dl> +
+
+
4664
+
+ 		+
+ - + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-34">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-12">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-12">vertical growing right</a> +
+
+
+
4879
+ 		+
+ + + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-33">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">vertical growing right</a> +
+
+
4665
+
4880
+ 		+
+ + <dd> +
+
+
4666
+
4881
+ 		+
+ + <dl class="switch"> +
+
+
4667
+
4882
+ 		+
+ + <dt>If the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-12">WebVTT cue line alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-4">center alignment</a> +
+
+
@@ -4692,7 +4907,74 @@
+
+
4692
+
4907
+ 		+
+ + <li> +
+
+
4693
+
4908
+ 		+
+ + <p><i>Done positioning</i>: Return <var>boxes</var>.</p> +
+
+
4694
+
4909
+ 		+
+ + </ol> +
+
+
4695
+
+ 		+
+ - + <h4 class="heading settled algorithm" data-algorithm="Applying CSS properties to WebVTT Node Objects" data-level="6.1.1" id="applying-css-properties"><span class="secno">6.1.1. </span><span class="content">Applying CSS properties to <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-11">WebVTT Node Objects</a></span><a class="self-link" href="#applying-css-properties"></a></h4> +
+
+
+
4910
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="Obtaining CSS boxes" data-level="7.3" id="obtaining-css-boxes"><span class="secno">7.3. </span><span class="content">Obtaining CSS boxes</span><a class="self-link" href="#obtaining-css-boxes"></a></h3> +
+
+
+
4911
+ 		+
+ + + <p>When the processing algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="obtain a set of CSS boxes" data-noexport="" id="obtain-a-set-of-css-boxes">obtain a set of CSS +
+
+
+
4912
+ 		+
+ + + boxes</dfn> <var>boxes</var>, then apply the terms of the CSS specifications to <var>nodes</var> within the following +
+
+
+
4913
+ 		+
+ + + constraints: <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p> +
+
+
+
4914
+ 		+
+ + + <ul> +
+
+
+
4915
+ 		+
+ + + <li> +
+
+
+
4916
+ 		+
+ + + <p>The <i>document tree</i> is the tree of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-9">WebVTT Node Objects</a> rooted at <var>nodes</var>.</p> +
+
+
+
4917
+ 		+
+ + + <li> +
+
+
+
4918
+ 		+
+ + + <p>For the purpose of selectors in STYLE blocks of a WebVTT file, the style sheet must apply to a +
+
+
+
4919
+ 		+
+ + + hypothetical document that contains a single empty element with no explicit name, no namespace, no +
+
+
+
4920
+ 		+
+ + + attributes, no classes, no IDs, and unknown primary language, that acts like the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media +
+
+
+
4921
+ 		+
+ + + element</a> for the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> that were sourced from the given WebVTT file. The selectors +
+
+
+
4922
+ 		+
+ + + must not match other <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> for the same <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>. In this hypothetical +
+
+
+
4923
+ 		+
+ + + document, the element must not match any selector that would match the element itself.</p> +
+
+
+
4924
+ 		+
+ + + <p class="note" role="note">This element exists only to be the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#originating-element">originating element</a> for the <span class="css">::cue</span>, <span class="css">::cue()</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region()</span> pseudo-elements.</p> +
+
+
+
4925
+ 		+
+ + + <li> +
+
+
+
4926
+ 		+
+ + + <p>For the purpose of determining the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade">cascade</a> of the declarations in STYLE +
+
+
+
4927
+ 		+
+ + + blocks of a WebVTT file, the relative order of appearance of the style sheets must be the same +
+
+
+
4928
+ 		+
+ + + order as they were added to the collection, and the order of appearance of the collection must be +
+
+
+
4929
+ 		+
+ + + after any style sheets that apply to the associated <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element’s document.</p> +
+
+
+
4930
+ 		+
+ + + <div class="example" id="example-01d14f75"> +
+
+
+
4931
+ 		+
+ + + <a class="self-link" href="#example-01d14f75"></a> +
+
+
+
4932
+ 		+
+ + + <p>For example, given the following (invalid) HTML document:</p> +
+
+
+
4933
+ 		+
+ + + <pre>&lt;!doctype html> +
+
+
+
4934
+ 		+
+ + + &lt;title>Invalid cascade example&lt;/title> +
+
+
+
4935
+ 		+
+ + + &lt;video controls autoplay src="video.webm"> +
+
+
+
4936
+ 		+
+ + + &lt;track default src="track.vtt"> +
+
+
+
4937
+ 		+
+ + + &lt;/video> +
+
+
+
4938
+ 		+
+ + + &lt;style> +
+
+
+
4939
+ 		+
+ + + ::cue { color:red } +
+
+
+
4940
+ 		+
+ + + &lt;/style> +
+
+
+
4941
+ 		+
+ + + </pre> +
+
+
+
4942
+ 		+
+ + + <p>...and the "track.vtt" file contains:</p> +
+
+
+
4943
+ 		+
+ + + <pre>WEBVTT +
+
+
+
4944
+ 		+
+ + +
+
+
+
4945
+ 		+
+ + + STYLE +
+
+
+
4946
+ 		+
+ + + ::cue { color:lime } +
+
+
+
4947
+ 		+
+ + +
+
+
+
4948
+ 		+
+ + + 00:00:00.000 --> 00:00:25.000 +
+
+
+
4949
+ 		+
+ + + Red or green? +
+
+
+
4950
+ 		+
+ + + </pre> +
+
+
+
4951
+ 		+
+ + + <p>The <span class="css">color:lime</span> declaration would win, because it is last in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade">cascade</a>, even though the <a data-link-type="element" href="https://www.w3.org/TR/html51/document-metadata.html#the-style-element">style</a> element is after the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element in the document order.</p> +
+
+
+
4952
+ 		+
+ + + </div> +
+
+
+
4953
+ 		+
+ + + <li> +
+
+
+
4954
+ 		+
+ + + <p id="style-no-external-resources">For the purpose of resolving URLs in STYLE blocks of a WebVTT +
+
+
+
4955
+ 		+
+ + + file, or any URLs in resources referenced from STYLE blocks of a WebVTT file, if the URL’s scheme +
+
+
+
4956
+ 		+
+ + + is not "<code>data</code>", then the user agent must act as if the URL failed to resolve.</p> +
+
+
+
4957
+ 		+
+ + + <p><strong class="advisement">Supporting external resources with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-4/#at-ruledef-import">@import</a> or <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-image">background-image</a> would be a new ability for <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media elements</a> and <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-track-element">track</a> elements to issue +
+
+
+
4958
+ 		+
+ + + network requests as the user watches the video, which could be a privacy issue.</strong></p> +
+
+
+
4959
+ 		+
+ + + <li> +
+
+
+
4960
+ 		+
+ + + <p>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-9">WebVTT Internal Node Objects</a> are equivalent to elements with the same +
+
+
+
4961
+ 		+
+ + + contents.</p> +
+
+
+
4962
+ 		+
+ + + <li>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-text-object" id="ref-for-webvtt-text-object-7">WebVTT Text +
+
+
+
4963
+ 		+
+ + + Objects</a> are equivalent to <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes. +
+
+
+
4964
+ 		+
+ + + <li>No style sheets are associated with <var>nodes</var>. (The nodes are subsequently restyled using style +
+
+
+
4965
+ 		+
+ + + sheets after their boxes are generated, as described below.) +
+
+
+
4966
+ 		+
+ + + <li>The children of the <var>nodes</var> must be wrapped in an anonymous box whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has +
+
+
+
4967
+ 		+
+ + + the value <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-inline">inline</a>. This is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-background-box">WebVTT cue background box</dfn>. +
+
+
+
4968
+ 		+
+ + + <li>Runs of children of <a data-link-type="dfn" href="#webvtt-ruby-object" id="ref-for-webvtt-ruby-object-5">WebVTT Ruby Objects</a> that are not <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-6">WebVTT Ruby Text Objects</a> must be wrapped in anonymous boxes whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-display-ruby-base">ruby-base</a>. <a data-link-type="biblio" href="#biblio-css3-ruby">[CSS3-RUBY]</a> +
+
+
+
4969
+ 		+
+ + + <li>Properties on <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-10">WebVTT Node Objects</a> have their values set as +
+
+
+
4970
+ 		+
+ + + defined in the next section. (That section uses some of the variables whose values were calculated +
+
+
+
4971
+ 		+
+ + + earlier in this algorithm.) +
+
+
+
4972
+ 		+
+ + + <li>Text runs must be wrapped according to the CSS line-wrapping rules. +
+
+
+
4973
+ 		+
+ + + <li>The video viewport (and initial containing block) is <var>video</var>’s rendering area. +
+
+
+
4974
+ 		+
+ + + </ul> +
+
+
+
4975
+ 		+
+ + + <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with +
+
+
+
4976
+ 		+
+ + + their positions.</p> +
+
+
+
4977
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="Applying CSS properties to WebVTT Node Objects" data-level="7.4" id="applying-css-properties"><span class="secno">7.4. </span><span class="content">Applying CSS properties to <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-11">WebVTT Node Objects</a></span><a class="self-link" href="#applying-css-properties"></a></h3> +
+
+
4696
+
4978
+ 		+
+ + <p>When following the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-4">rules for updating the display of WebVTT text tracks</a>, user agents must +
+
+
4697
+
4979
+ 		+
+ + set properties of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-12">WebVTT Node Objects</a> at the CSS user agent cascade +
+
+
4698
+
4980
+ 		+
+ + layer as defined in this section. <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p> +
+
+
@@ -4705,45 +4987,45 @@
+
+
4705
+
4987
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-left">left</a> property must be set to <var>left</var> +
+
+
4706
+
4988
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-width">width</a> property must be set to <var>width</var> +
+
+
4707
+
4989
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-height">height</a> property must be set to <var>height</var> +
+
+
4708
+
+ 		+
+ - + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#overflow-wrap">overflow-wrap</a> property must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
+
4990
+ 		+
+ + + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">overflow-wrap</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
4709
+
4991
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc">text-wrap</a> property must be set to <span class="css">balance</span> <a data-link-type="biblio" href="#biblio-css-text-4">[CSS-TEXT-4]</a> +
+
+
4710
+
4992
+ 		+
+ + </ul> +
+
+
4711
+
4993
+ 		+
+ + <p>The variables <var>writing-mode</var>, <var>top</var>, <var>left</var>, <var>width</var>, and <var>height</var> are the values with those +
+
+
4712
+
+ 		+
+ - + names determined by the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-5">rules for updating the display of WebVTT text tracks</a> for the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-24">WebVTT cue</a> from whose <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-6">text</a> the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-10">list of WebVTT Node +
+
+
4713
+
+ 		+
+ - + Objects</a> was constructed.</p> +
+
+
4714
+
+ 		+
+ - + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-11">list of WebVTT Node Objects</a> must be set to the +
+
+
+
4994
+ 		+
+ + + names determined by the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-5">rules for updating the display of WebVTT text tracks</a> for the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-28">WebVTT cue</a> from whose <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-13">text</a> the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-10">list of WebVTT Node Objects</a> was +
+
+
+
4995
+ 		+
+ + + constructed.</p> +
+
+
+
4996
+ 		+
+ + + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">text-align</a> property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-11">list of WebVTT Node Objects</a> must be set to the +
+
+
4715
+
4997
+ 		+
+ + value in the second cell of the row of the table below whose first cell is the value of the +
+
+
4716
+
+ 		+
+ - + corresponding <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">cue</a>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-19">WebVTT cue text alignment</a>:</p> +
+
+
+
4998
+ 		+
+ + + corresponding <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">cue</a>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-21">WebVTT cue text alignment</a>:</p> +
+
+
4717
+
4999
+ 		+
+ + <table class="complex data"> +
+
+
4718
+
5000
+ 		+
+ + <thead> +
+
+
4719
+
5001
+ 		+
+ + <tr> +
+
+
4720
+
+ 		+
+ - + <th><a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-20">WebVTT cue text alignment</a> +
+
+
4721
+
+ 		+
+ - + <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> value +
+
+
+
5002
+ 		+
+ + + <th><a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-22">WebVTT cue text alignment</a> +
+
+
+
5003
+ 		+
+ + + <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">text-align</a> value +
+
+
4722
+
5004
+ 		+
+ + <tbody> +
+
+
4723
+
5005
+ 		+
+ + <tr> +
+
+
4724
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-7">Start alignment</a> +
+
+
4725
+
+ 		+
+ - + <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-start">start</a> +
+
+
+
5006
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-8">Start alignment</a> +
+
+
+
5007
+ 		+
+ + + <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-text-align-start">start</a> +
+
+
4726
+
5008
+ 		+
+ + <tr> +
+
+
4727
+
5009
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-7">Center alignment</a> +
+
+
4728
+
+ 		+
+ - + <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-center">center</a> +
+
+
+
5010
+ 		+
+ + + <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-text-align-center">center</a> +
+
+
4729
+
5011
+ 		+
+ + <tr> +
+
+
4730
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-6">End alignment</a> +
+
+
4731
+
+ 		+
+ - + <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-end">end</a> +
+
+
+
5012
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-7">End alignment</a> +
+
+
+
5013
+ 		+
+ + + <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-text-align-end">end</a> +
+
+
4732
+
5014
+ 		+
+ + <tr> +
+
+
4733
+
5015
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-6">Left alignment</a> +
+
+
4734
+
+ 		+
+ - + <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-left">left</a> +
+
+
+
5016
+ 		+
+ + + <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-text-align-left">left</a> +
+
+
4735
+
5017
+ 		+
+ + <tr> +
+
+
4736
+
5018
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-6">Right alignment</a> +
+
+
4737
+
+ 		+
+ - + <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-right">right</a> +
+
+
+
5019
+ 		+
+ + + <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-text-align-right">right</a> +
+
+
4738
+
5020
+ 		+
+ + </table> +
+
+
4739
+
5021
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-12">list of WebVTT Node Objects</a> must be set to <span class="css">5vh sans-serif</span>. <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p> +
+
+
4740
+
5022
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-13">list of WebVTT Node Objects</a> must be set to <span class="css">rgba(255,255,255,1)</span>. <a data-link-type="biblio" href="#biblio-css3-color">[CSS3-COLOR]</a></p> +
+
+
4741
+
+ 		+
+ - + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand property on the <a data-link-type="dfn" href="#webvtt-cue-background-box" id="ref-for-webvtt-cue-background-box-1">WebVTT cue background box</a> and on <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-7">WebVTT Ruby +
+
+
+
5023
+ 		+
+ + + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand property on the <a data-link-type="dfn" href="#webvtt-cue-background-box" id="ref-for-webvtt-cue-background-box-1">WebVTT cue background box</a> and on <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-7">WebVTT Ruby +
+
+
4742
+
5024
+ 		+
+ + Text Objects</a> must be set to <span class="css">rgba(0,0,0,0.8)</span>. <a data-link-type="biblio" href="#biblio-css3-color">[CSS3-COLOR]</a></p> +
+
+
4743
+
+ 		+
+ - + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-14">list of WebVTT Node Objects</a> must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">pre-line</a>. <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p> +
+
+
+
5025
+ 		+
+ + + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> property on the (root) <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-14">list of WebVTT Node Objects</a> must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-white-space-pre-line">pre-line</a>. <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p> +
+
+
4744
+
5026
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-style">font-style</a> property on <a data-link-type="dfn" href="#webvtt-italic-object" id="ref-for-webvtt-italic-object-4">WebVTT Italic Objects</a> must be set +
+
+
4745
+
+ 		+
+ - + to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic">italic</a>.</p> +
+
+
4746
+
+ 		+
+ - + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-weight">font-weight</a> property on <a data-link-type="dfn" href="#webvtt-bold-object" id="ref-for-webvtt-bold-object-5">WebVTT Bold Objects</a> must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bold">bold</a>.</p> +
+
+
+
5027
+ 		+
+ + + to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-style-italic">italic</a>.</p> +
+
+
+
5028
+ 		+
+ + + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-weight">font-weight</a> property on <a data-link-type="dfn" href="#webvtt-bold-object" id="ref-for-webvtt-bold-object-5">WebVTT Bold Objects</a> must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-weight-bold">bold</a>.</p> +
+
+
4747
+
5029
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration">text-decoration</a> property on <a data-link-type="dfn" href="#webvtt-underline-object" id="ref-for-webvtt-underline-object-4">WebVTT Underline Objects</a> must be set to <span class="css">underline</span>.</p> +
+
+
4748
+
5030
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property on <a data-link-type="dfn" href="#webvtt-ruby-object" id="ref-for-webvtt-ruby-object-6">WebVTT Ruby Objects</a> must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-display-ruby">ruby</a>. <a data-link-type="biblio" href="#biblio-css3-ruby">[CSS3-RUBY]</a></p> +
+
+
4749
+
5031
+ 		+
+ + <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property on <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-8">WebVTT Ruby Text Objects</a> must be +
+
+
@@ -4752,8 +5034,8 @@
+
+
4752
+
5034
+ 		+
+ + <ul> +
+
+
4753
+
5035
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-positioning/#valdef-position-absolute">absolute</a> +
+
+
4754
+
5036
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">writing-mode</a> property must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-writing-mode-horizontal-tb">horizontal-tb</a> +
+
+
4755
+
+ 		+
+ - + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand property must be set to <span class="css">rgba(0,0,0,0.8)</span> +
+
+
4756
+
+ 		+
+ - + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#overflow-wrap">overflow-wrap</a> property must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
+
5037
+ 		+
+ + + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand property must be set to <span class="css">rgba(0,0,0,0.8)</span> +
+
+
+
5038
+ 		+
+ + + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">overflow-wrap</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
4757
+
5039
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand property must be set to <span class="css">5vh sans-serif</span> +
+
+
4758
+
5040
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> property must be set to <span class="css">rgba(255,255,255,1)</span> +
+
+
4759
+
5041
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">overflow</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden">hidden</a> +
+
+
@@ -4767,29 +5049,29 @@
+
+
4767
+
5049
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-align/#propdef-justify-content">justify-content</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-flexbox-1/#valdef-justify-content-flex-end">flex-end</a> +
+
+
4768
+
5050
+ 		+
+ + </ul> +
+
+
4769
+
5051
+ 		+
+ + <p>The variables <var>width</var>, <var>height</var>, <var>top</var>, and <var>left</var> are the values with those names determined by +
+
+
4770
+
+ 		+
+ - + the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-6">rules for updating the display of WebVTT text tracks</a> for the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-14">WebVTT region</a> from +
+
+
+
5052
+ 		+
+ + + the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-6">rules for updating the display of WebVTT text tracks</a> for the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-15">WebVTT region</a> from +
+
+
4771
+
5053
+ 		+
+ + which the <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-7">WebVTT region object</a> was constructed.</p> +
+
+
4772
+
5054
+ 		+
+ + <p>The children of every <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-8">WebVTT region object</a> are further initialized with these CSS +
+
+
4773
+
5055
+ 		+
+ + settings:</p> +
+
+
4774
+
5056
+ 		+
+ + <ul> +
+
+
4775
+
5057
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position">position</a> property must be set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-positioning/#valdef-position-relative">relative</a> +
+
+
4776
+
5058
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a> property must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-unicode-bidi-plaintext">plaintext</a> +
+
+
4777
+
+ 		+
+ - + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-width">width</a> property must be set to <span class="css">auto</span> +
+
+
+
5059
+ 		+
+ + + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-width">width</a> property must be set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a> +
+
+
4778
+
5060
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-height">height</a> property must be set to <var>height</var> +
+
+
4779
+
5061
+ 		+
+ + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-left">left</a> property must be set to <var>left</var> +
+
+
4780
+
+ 		+
+ - + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property must be set as described for the root <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-15">List of WebVTT Node +
+
+
+
5062
+ 		+
+ + + <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">text-align</a> property must be set as described for the root <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-15">List of WebVTT Node +
+
+
4781
+
5063
+ 		+
+ + Objects</a> not part of a region +
+
+
4782
+
5064
+ 		+
+ + </ul> +
+
+
4783
+
5065
+ 		+
+ + <p>All other non-inherited properties must be set to their initial values; inherited properties on +
+
+
4784
+
+ 		+
+ - + the root <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-16">list of WebVTT Node Objects</a> must inherit their values from the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> for which the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-25">WebVTT cue</a> is being rendered, if any. If there is no <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> (i.e. +
+
+
+
5066
+ 		+
+ + + the root <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-16">list of WebVTT Node Objects</a> must inherit their values from the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> for which the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-29">WebVTT cue</a> is being rendered, if any. If there is no <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> (i.e. +
+
+
4785
+
5067
+ 		+
+ + if the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> is being rendered for another media playback mechanism), then inherited +
+
+
4786
+
5068
+ 		+
+ + properties on the root <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-17">list of WebVTT Node Objects</a> and the <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-9">WebVTT region objects</a> must take their initial values.</p> +
+
+
4787
+
5069
+ 		+
+ + <p>If there are style sheets that apply to the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> or other playback mechanism, +
+
+
4788
+
5070
+ 		+
+ + then they must be interpreted as defined in the next section.</p> +
+
+
4789
+
+ 		+
+ - + <h2 class="heading settled" data-level="7" id="css-extensions"><span class="secno">7. </span><span class="content">CSS extensions</span><a class="self-link" href="#css-extensions"></a></h2> +
+
+
+
5071
+ 		+
+ + + <h2 class="heading settled" data-level="8" id="css-extensions"><span class="secno">8. </span><span class="content">CSS extensions</span><a class="self-link" href="#css-extensions"></a></h2> +
+
+
4790
+
5072
+ 		+
+ + <p class="note" role="note">This section specifies some CSS pseudo-elements and pseudo-classes and how they +
+
+
4791
+
+ 		+
+ - + apply to WebVTT. This section does not apply to user agents that don’t support CSS.</p> +
+
+
4792
+
+ 		+
+ - + <h3 class="heading settled" data-level="7.1" id="css-extensions-introduction"><span class="secno">7.1. </span><span class="content">Introduction</span><a class="self-link" href="#css-extensions-introduction"></a></h3> +
+
+
+
5073
+ 		+
+ + + apply to WebVTT. This section does not apply to <a data-link-type="dfn" href="#user-agents-that-do-not-support-css" id="ref-for-user-agents-that-do-not-support-css-2">user agents that do not support CSS</a>.</p> +
+
+
+
5074
+ 		+
+ + + <h3 class="heading settled" data-level="8.1" id="css-extensions-introduction"><span class="secno">8.1. </span><span class="content">Introduction</span><a class="self-link" href="#css-extensions-introduction"></a></h3> +
+
+
4793
+
5075
+ 		+
+ + <p><i>This section is non-normative.</i></p> +
+
+
4794
+
5076
+ 		+
+ + <p>The <span class="css">::cue</span> pseudo-element represents a cue.</p> +
+
+
4795
+
5077
+ 		+
+ + <p>The <span class="css">::cue(<var>selector</var>)</span> pseudo-element represents a cue or element inside a cue that match the +
+
+
@@ -4799,7 +5081,7 @@
+
+
4799
+
5081
+ 		+
+ + that match the given selector.</p> +
+
+
4800
+
5082
+ 		+
+ + <p class="note" role="note">Similarly to all other pseudo-elements, these pseudo-elements are not directly +
+
+
4801
+
5083
+ 		+
+ + present in the <code><a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a></code> element’s document tree.</p> +
+
+
4802
+
+ 		+
+ - + <p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes can be used in <span class="css">::cue(<var>selector</var>)</span> to match <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-10">WebVTT Internal Node Objects</a> based on the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#current-position">current playback position</a>.</p> +
+
+
+
5084
+ 		+
+ + + <p>The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes can be used in <span class="css">::cue(<var>selector</var>)</span> to match <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-10">WebVTT Internal Node Objects</a> based on the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#current-position">current playback position</a>.</p> +
+
+
4803
+
5085
+ 		+
+ + <div class="example" id="example-cue-selector"> +
+
+
4804
+
5086
+ 		+
+ + <a class="self-link" href="#example-cue-selector"></a> +
+
+
4805
+
5087
+ 		+
+ + <p>The following table shows examples of what can be selected with a given selector, together with +
+
+
@@ -4828,7 +5110,7 @@
+
+
4828
+
5110
+ 		+
+ + </pre> +
+
+
4829
+
5111
+ 		+
+ + <tr> +
+
+
4830
+
5112
+ 		+
+ + <td class="long"> +
+
+
4831
+
+ 		+
+ - + <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#id-selector">ID selector</a> in <span class="css">::cue()</span></p> +
+
+
+
5113
+ 		+
+ + + <p><a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#id-selector">ID selector</a> in <span class="css">::cue()</span></p> +
+
+
4832
+
5114
+ 		+
+ + <pre>video::cue(#cue1) { +
+
+
4833
+
5115
+ 		+
+ + color: yellow; +
+
+
4834
+
5116
+ 		+
+ + }</pre> +
+
+
@@ -4842,7 +5124,7 @@
+
+
4842
+
5124
+ 		+
+ + </pre> +
+
+
4843
+
5125
+ 		+
+ + <tr> +
+
+
4844
+
5126
+ 		+
+ + <td class="long"> +
+
+
4845
+
+ 		+
+ - + <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector">Type selector</a> in <span class="css">::cue()</span></p> +
+
+
+
5127
+ 		+
+ + + <p><a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#type-selector">Type selector</a> in <span class="css">::cue()</span></p> +
+
+
4846
+
5128
+ 		+
+ + <pre>video::cue(c), +
+
+
4847
+
5129
+ 		+
+ + video::cue(i), +
+
+
4848
+
5130
+ 		+
+ + video::cue(b), +
+
+
@@ -4871,7 +5153,7 @@
+
+
4871
+
5153
+ 		+
+ + </pre> +
+
+
4872
+
5154
+ 		+
+ + <tr> +
+
+
4873
+
5155
+ 		+
+ + <td class="long"> +
+
+
4874
+
+ 		+
+ - + <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#class-selector">Class selector</a> in <span class="css">::cue()</span></p> +
+
+
+
5156
+ 		+
+ + + <p><a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#class-selector">Class selector</a> in <span class="css">::cue()</span></p> +
+
+
4875
+
5157
+ 		+
+ + <pre>video::cue(.loud) { +
+
+
4876
+
5158
+ 		+
+ + color: yellow; +
+
+
4877
+
5159
+ 		+
+ + }</pre> +
+
+
@@ -4892,7 +5174,7 @@
+
+
4892
+
5174
+ 		+
+ + </pre> +
+
+
4893
+
5175
+ 		+
+ + <tr> +
+
+
4894
+
5176
+ 		+
+ + <td class="long"> +
+
+
4895
+
+ 		+
+ - + <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#attribute-selector">Attribute selector</a> in <span class="css">::cue()</span></p> +
+
+
+
5177
+ 		+
+ + + <p><a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#attribute-selector">Attribute selector</a> in <span class="css">::cue()</span></p> +
+
+
4896
+
5178
+ 		+
+ + <pre>video::cue([lang="en-US"]) { +
+
+
4897
+
5179
+ 		+
+ + color: yellow; +
+
+
4898
+
5180
+ 		+
+ + } +
+
+
@@ -4921,7 +5203,7 @@
+
+
4921
+
5203
+ 		+
+ + of WebVTT Node Objects</a> can be set by the <code><a data-link-type="element-sub" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#dom-htmltrackelement-srclang">srclang</a></code> attribute in HTML.</p> +
+
+
4922
+
5204
+ 		+
+ + <pre>&lt;video ...> +
+
+
4923
+
5205
+ 		+
+ + &lt;track src="example-attr.vtt" +
+
+
4924
+
+ 		+
+ - + <mark>srclang="en-US"</mark> default> +
+
+
+
5206
+ 		+
+ + + srclang="en-US" default> +
+
+
4925
+
5207
+ 		+
+ + &lt;/video> +
+
+
4926
+
5208
+ 		+
+ + </pre> +
+
+
4927
+
5209
+ 		+
+ + <tr> +
+
+
@@ -4949,7 +5231,7 @@
+
+
4949
+
5231
+ 		+
+ + HTML.</p> +
+
+
4950
+
5232
+ 		+
+ + <tr> +
+
+
4951
+
5233
+ 		+
+ + <td class="long"> +
+
+
4952
+
+ 		+
+ - + <p><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes in <span class="css">::cue()</span></p> +
+
+
+
5234
+ 		+
+ + + <p><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes in <span class="css">::cue()</span></p> +
+
+
4953
+
5235
+ 		+
+ + <pre>video::cue(:past) { +
+
+
4954
+
5236
+ 		+
+ + color: yellow; +
+
+
4955
+
5237
+ 		+
+ + } +
+
+
@@ -4998,7 +5280,7 @@
+
+
4998
+
5280
+ 		+
+ + </pre> +
+
+
4999
+
5281
+ 		+
+ + <tr> +
+
+
5000
+
5282
+ 		+
+ + <td class="long"> +
+
+
5001
+
+ 		+
+ - + <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#id-selector">ID selector</a> in <span class="css">::cue-region()</span></p> +
+
+
+
5283
+ 		+
+ + + <p><a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#id-selector">ID selector</a> in <span class="css">::cue-region()</span></p> +
+
+
5002
+
5284
+ 		+
+ + <pre>video::cue-region(#scroll) { +
+
+
5003
+
5285
+ 		+
+ + color: cyan; +
+
+
5004
+
5286
+ 		+
+ + }</pre> +
+
+
@@ -5030,25 +5312,25 @@
+
+
5030
+
5312
+ 		+
+ + </pre> +
+
+
5031
+
5313
+ 		+
+ + </table> +
+
+
5032
+
5314
+ 		+
+ + </div> +
+
+
5033
+
+ 		+
+ - + <h3 class="heading settled" data-level="7.2" id="css-extensions-processing-model"><span class="secno">7.2. </span><span class="content">Processing model</span><a class="self-link" href="#css-extensions-processing-model"></a></h3> +
+
+
5034
+
+ 		+
+ - + <p>When a user agent is rendering one or more <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-26">WebVTT cues</a> according to the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-7">rules for updating the display of WebVTT text tracks</a>, <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-13">WebVTT Node +
+
+
+
5315
+ 		+
+ + + <h3 class="heading settled" data-level="8.2" id="css-extensions-processing-model"><span class="secno">8.2. </span><span class="content">Processing model</span><a class="self-link" href="#css-extensions-processing-model"></a></h3> +
+
+
+
5316
+ 		+
+ + + <p>When a user agent is rendering one or more <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-30">WebVTT cues</a> according to the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-7">rules for updating the display of WebVTT text tracks</a>, <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-13">WebVTT Node +
+
+
5035
+
5317
+ 		+
+ + Objects</a> in the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-25">list of WebVTT Node Objects</a> used in the rendering can be matched by +
+
+
5036
+
5318
+ 		+
+ + certain pseudo-selectors as defined below. These selectors can begin or stop matching individual <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-14">WebVTT Node Objects</a> while a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">cue</a> is being +
+
+
5037
+
5319
+ 		+
+ + rendered, even in between applications of the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-8">rules for updating the display of WebVTT text +
+
+
5038
+
5320
+ 		+
+ + tracks</a> (which are only run when the set of active cues changes). User agents that support the +
+
+
5039
+
+ 		+
+ - + pseudo-element described below must dynamically update renderings accordingly. When either <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> or one of the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand (including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a>) changes value, then the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-27">WebVTT cue</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a> must +
+
+
+
5321
+ 		+
+ + + pseudo-element described below must dynamically update renderings accordingly. When either <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> or one of the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand (including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a>) changes value, then the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-31">WebVTT cue</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a> must +
+
+
5040
+
5322
+ 		+
+ + be emptied and the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> must be +
+
+
5041
+
5323
+ 		+
+ + immediately rerun.</p> +
+
+
5042
+
5324
+ 		+
+ + <p>Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, +
+
+
5043
+
5325
+ 		+
+ + that element is the <i>matched element</i>. The pseudo-elements defined in the following sections +
+
+
5044
+
+ 		+
+ - + affect the styling of parts of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-28">WebVTT cues</a> that are being rendered for the <i>matched element</i>.</p> +
+
+
+
5326
+ 		+
+ + + affect the styling of parts of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-32">WebVTT cues</a> that are being rendered for the <i>matched element</i>.</p> +
+
+
5045
+
5327
+ 		+
+ + <p class="note" role="note">If the <i>matched element</i> is not a <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element, the +
+
+
5046
+
5328
+ 		+
+ + pseudo-elements defined below won’t have any effect according to this specification.</p> +
+
+
5047
+
+ 		+
+ - + <p>A CSS user agent that implements the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> model must implement the <span class="css">::cue</span>, <span class="css">::cue(<var>selector</var>)</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region(<var>selector</var>)</span> pseudo-elements, and the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes.</p> +
+
+
5048
+
+ 		+
+ - + <h4 class="heading settled" data-level="7.2.1" id="the-cue-pseudo-element"><span class="secno">7.2.1. </span><span class="content">The <span class="css">::cue</span> pseudo-element</span><a class="self-link" href="#the-cue-pseudo-element"></a></h4> +
+
+
+
5329
+ 		+
+ + + <p>A CSS user agent that implements the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> model must implement the <span class="css">::cue</span>, <span class="css">::cue(<var>selector</var>)</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region(<var>selector</var>)</span> pseudo-elements, and the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes.</p> +
+
+
+
5330
+ 		+
+ + + <h4 class="heading settled" data-level="8.2.1" id="the-cue-pseudo-element"><span class="secno">8.2.1. </span><span class="content">The <span class="css">::cue</span> pseudo-element</span><a class="self-link" href="#the-cue-pseudo-element"></a></h4> +
+
+
5049
+
5331
+ 		+
+ + <p>The <dfn data-dfn-type="dfn" data-noexport="" id="cue">::cue<a class="self-link" href="#cue"></a></dfn> pseudo-element (with no argument) matches any <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-26">list of WebVTT Node +
+
+
5050
+
5332
+ 		+
+ + Objects</a> constructed for the <i>matched element</i>, with the exception that the properties +
+
+
5051
+
+ 		+
+ - + corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand must be applied to the <a data-link-type="dfn" href="#webvtt-cue-background-box" id="ref-for-webvtt-cue-background-box-2">WebVTT cue background box</a> rather than the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-27">list of WebVTT Node Objects</a>.</p> +
+
+
+
5333
+ 		+
+ + + corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand must be applied to the <a data-link-type="dfn" href="#webvtt-cue-background-box" id="ref-for-webvtt-cue-background-box-2">WebVTT cue background box</a> rather than the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-27">list of WebVTT Node Objects</a>.</p> +
+
+
5052
+
5334
+ 		+
+ + <p>The following properties apply to the <span class="css">::cue</span> pseudo-element with no argument; other properties +
+
+
5053
+
5335
+ 		+
+ + set on the pseudo-element must be ignored:</p> +
+
+
5054
+
5336
+ 		+
+ + <ul class="brief"> +
+
+
@@ -5057,10 +5339,10 @@
+
+
5057
+
5339
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-visibility">visibility</a> +
+
+
5058
+
5340
+ 		+
+ + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration">text-decoration</a> shorthand +
+
+
5059
+
5341
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow">text-shadow</a> +
+
+
5060
+
+ 		+
+ - + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand +
+
+
5061
+
+ 		+
+ - + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-outline">outline</a> shorthand +
+
+
+
5342
+ 		+
+ + + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand +
+
+
+
5343
+ 		+
+ + + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-outline">outline</a> shorthand +
+
+
5062
+
5344
+ 		+
+ + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand, including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a> +
+
+
5063
+
+ 		+
+ - + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> +
+
+
+
5345
+ 		+
+ + + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> +
+
+
5064
+
5346
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright">text-combine-upright</a> +
+
+
5065
+
5347
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-ruby-1/#propdef-ruby-position">ruby-position</a> +
+
+
5066
+
5348
+ 		+
+ + </ul> +
+
+
@@ -5143,36 +5425,36 @@
+
+
5143
+
5425
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-visibility">visibility</a> +
+
+
5144
+
5426
+ 		+
+ + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration">text-decoration</a> shorthand +
+
+
5145
+
5427
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow">text-shadow</a> +
+
+
5146
+
+ 		+
+ - + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand +
+
+
5147
+
+ 		+
+ - + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-outline">outline</a> shorthand +
+
+
+
5428
+ 		+
+ + + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand +
+
+
+
5429
+ 		+
+ + + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-outline">outline</a> shorthand +
+
+
5148
+
5430
+ 		+
+ + <li>properties relating to the transition and animation features +
+
+
5149
+
5431
+ 		+
+ + </ul> +
+
+
5150
+
5432
+ 		+
+ + <p>In addition, the following properties apply to the <span class="css">::cue()</span> pseudo-element with an argument +
+
+
5151
+
+ 		+
+ - + when the selector does not contain the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes:</p> +
+
+
+
5433
+ 		+
+ + + when the selector does not contain the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes:</p> +
+
+
5152
+
5434
+ 		+
+ + <ul class="brief"> +
+
+
5153
+
5435
+ 		+
+ + <li>the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand, including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a> +
+
+
5154
+
+ 		+
+ - + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> +
+
+
+
5436
+ 		+
+ + + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> +
+
+
5155
+
5437
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright">text-combine-upright</a> +
+
+
5156
+
5438
+ 		+
+ + <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-ruby-1/#propdef-ruby-position">ruby-position</a> +
+
+
5157
+
5439
+ 		+
+ + </ul> +
+
+
5158
+
5440
+ 		+
+ + <p>Properties that do not apply must be ignored.</p> +
+
+
5159
+
+ 		+
+ - + <p>As a special exception, the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background">background</a> shorthand, when they +
+
+
+
5441
+ 		+
+ + + <p>As a special exception, the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> shorthand, when they +
+
+
5160
+
5442
+ 		+
+ + would have been applied to the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-32">list of WebVTT Node Objects</a>, must instead be applied to the <a data-link-type="dfn" href="#webvtt-cue-background-box" id="ref-for-webvtt-cue-background-box-3">WebVTT cue background box</a>.</p> +
+
+
5161
+
+ 		+
+ - + <h4 class="heading settled" data-level="7.2.2" id="the-past-and-future-pseudo-classes"><span class="secno">7.2.2. </span><span class="content">The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes</span><a class="self-link" href="#the-past-and-future-pseudo-classes"></a></h4> +
+
+
5162
+
+ 		+
+ - + <p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes sometimes match <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-16">WebVTT +
+
+
+
5443
+ 		+
+ + + <h4 class="heading settled" data-level="8.2.2" id="the-past-and-future-pseudo-classes"><span class="secno">8.2.2. </span><span class="content">The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes</span><a class="self-link" href="#the-past-and-future-pseudo-classes"></a></h4> +
+
+
+
5444
+ 		+
+ + + <p>The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> pseudo-classes sometimes match <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-16">WebVTT +
+
+
5163
+
5445
+ 		+
+ + Node Objects</a>. <a data-link-type="biblio" href="#biblio-selectors4">[SELECTORS4]</a></p> +
+
+
5164
+
5446
+ 		+
+ + <p>The <dfn data-dfn-type="dfn" data-noexport="" id="past">:past<a class="self-link" href="#past"></a></dfn> pseudo-class only matches <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-17">WebVTT Node Objects</a> that are <i>in the past</i>.</p> +
+
+
5165
+
5447
+ 		+
+ + <p class="algorithm" data-algorithm="in the past">A <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-18">WebVTT Node Object</a> <var>c</var> is <dfn data-dfn-type="dfn" data-noexport="" id="in-the-past">in the past<a class="self-link" href="#in-the-past"></a></dfn> if, in a +
+
+
5166
+
+ 		+
+ - + pre-order, depth-first traversal of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-29">WebVTT cue</a>’s <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-33">list of WebVTT Node Objects</a>, +
+
+
+
5448
+ 		+
+ + + pre-order, depth-first traversal of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-33">WebVTT cue</a>’s <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-33">list of WebVTT Node Objects</a>, +
+
+
5167
+
5449
+ 		+
+ + there exists a <a data-link-type="dfn" href="#webvtt-timestamp-object" id="ref-for-webvtt-timestamp-object-6">WebVTT Timestamp Object</a> whose value is less than the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#current-position">current playback +
+
+
5168
+
5450
+ 		+
+ + position</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> that is the <i>matched element</i>, entirely after the <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-19">WebVTT Node Object</a> <var>c</var>.</p> +
+
+
5169
+
5451
+ 		+
+ + <p>The <dfn data-dfn-type="dfn" data-noexport="" id="future">:future<a class="self-link" href="#future"></a></dfn> pseudo-class only matches <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-20">WebVTT Node +
+
+
5170
+
5452
+ 		+
+ + Objects</a> that are <i>in the future</i>.</p> +
+
+
5171
+
5453
+ 		+
+ + <p class="algorithm" data-algorithm="in the future">A <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-21">WebVTT Node Object</a> <var>c</var> is <dfn data-dfn-type="dfn" data-noexport="" id="in-the-future">in the future<a class="self-link" href="#in-the-future"></a></dfn> if, in a +
+
+
5172
+
+ 		+
+ - + pre-order, depth-first traversal of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-30">WebVTT cue</a>’s <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-34">list of WebVTT Node Objects</a>, +
+
+
+
5454
+ 		+
+ + + pre-order, depth-first traversal of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-34">WebVTT cue</a>’s <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-34">list of WebVTT Node Objects</a>, +
+
+
5173
+
5455
+ 		+
+ + there exists a <a data-link-type="dfn" href="#webvtt-timestamp-object" id="ref-for-webvtt-timestamp-object-7">WebVTT Timestamp Object</a> whose value is greater than the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#current-position">current playback +
+
+
5174
+
5456
+ 		+
+ + position</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> that is the <i>matched element</i>, entirely before the <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-22">WebVTT Node Object</a> <var>c</var>.</p> +
+
+
5175
+
+ 		+
+ - + <h4 class="heading settled" data-level="7.2.3" id="the-cue-region-pseudo-element"><span class="secno">7.2.3. </span><span class="content">The <span class="css">::cue-region</span> pseudo-element</span><a class="self-link" href="#the-cue-region-pseudo-element"></a></h4> +
+
+
+
5457
+ 		+
+ + + <h4 class="heading settled" data-level="8.2.3" id="the-cue-region-pseudo-element"><span class="secno">8.2.3. </span><span class="content">The <span class="css">::cue-region</span> pseudo-element</span><a class="self-link" href="#the-cue-region-pseudo-element"></a></h4> +
+
+
5176
+
5458
+ 		+
+ + <p>Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, +
+
+
5177
+
5459
+ 		+
+ + that element is the matched element. The pseudo-element defined below affects the styling of text +
+
+
5178
+
5460
+ 		+
+ + track regions that are being rendered for the matched element.</p> +
+
+
@@ -5192,12 +5474,12 @@
+
+
5192
+
5474
+ 		+
+ + <p>When a user agent is rendering one or more text track regions according to the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-9">rules for +
+
+
5193
+
5475
+ 		+
+ + updating the display of WebVTT text tracks</a>, <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-15">WebVTT region +
+
+
5194
+
5476
+ 		+
+ + objects</a> used in the rendering can be matched by the above pseudo-element. User agents that +
+
+
5195
+
+ 		+
+ - + support the pseudo-element must dynamically update renderings accordingly. When either <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> or one of the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand (including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a>) changes +
+
+
5196
+
+ 		+
+ - + value, then the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a> of all the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-31">WebVTT cues</a> in +
+
+
+
5477
+ 		+
+ + + support the pseudo-element must dynamically update renderings accordingly. When either <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> or one of the properties corresponding to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font">font</a> shorthand (including <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visudet.html#propdef-line-height">line-height</a>) changes +
+
+
+
5478
+ 		+
+ + + value, then the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a> of all the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-35">WebVTT cues</a> in +
+
+
5197
+
5479
+ 		+
+ + the region must be emptied and the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track +
+
+
5198
+
5480
+ 		+
+ + rendering</a> must be immediately rerun.</p> +
+
+
5199
+
+ 		+
+ - + <h2 class="heading settled" data-level="8" id="api"><span class="secno">8. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2> +
+
+
5200
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="The VTTCue interface" data-level="8.1" id="the-vttcue-interface"><span class="secno">8.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-2">VTTCue</a></code> interface</span><a class="self-link" href="#the-vttcue-interface"></a></h3> +
+
+
+
5481
+ 		+
+ + + <h2 class="heading settled" data-level="9" id="api"><span class="secno">9. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2> +
+
+
+
5482
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="The VTTCue interface" data-level="9.1" id="the-vttcue-interface"><span class="secno">9.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-2">VTTCue</a></code> interface</span><a class="self-link" href="#the-vttcue-interface"></a></h3> +
+
+
5201
+
5483
+ 		+
+ + <p>The following interface is used to expose WebVTT cues in the DOM API:</p> +
+
+
5202
+
5484
+ 		+
+ + <pre class="idl highlight def"><span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-autokeyword"><code>AutoKeyword</code></dfn> { <dfn class="s idl-code" data-dfn-for="AutoKeyword" data-dfn-type="enum-value" data-export="" data-lt="&quot;auto&quot;|auto" id="dom-autokeyword-auto"><code>"auto"</code><a class="self-link" href="#dom-autokeyword-auto"></a></dfn> }; +
+
+
5203
+
5485
+ 		+
+ + <span class="kt">typedef</span> (<a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <span class="kt">or</span> <a class="n" data-link-type="idl-name" href="#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <dfn class="nv dfn-paneled idl-code" data-dfn-type="typedef" data-export="" id="typedefdef-lineandpositionsetting"><code>LineAndPositionSetting</code></dfn>; +
+
+
@@ -5205,7 +5487,8 @@
+
+
5205
+
5487
+ 		+
+ + <span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-linealignsetting"><code>LineAlignSetting</code></dfn> { <dfn class="s idl-code" data-dfn-for="LineAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;start&quot;|start" id="dom-linealignsetting-start"><code>"start"</code><a class="self-link" href="#dom-linealignsetting-start"></a></dfn>, <dfn class="s idl-code" data-dfn-for="LineAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;center&quot;|center" id="dom-linealignsetting-center"><code>"center"</code><a class="self-link" href="#dom-linealignsetting-center"></a></dfn>, <dfn class="s idl-code" data-dfn-for="LineAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;end&quot;|end" id="dom-linealignsetting-end"><code>"end"</code><a class="self-link" href="#dom-linealignsetting-end"></a></dfn> }; +
+
+
5206
+
5488
+ 		+
+ + <span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-positionalignsetting"><code>PositionAlignSetting</code></dfn> { <dfn class="s idl-code" data-dfn-for="PositionAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;line-left&quot;|line-left" id="dom-positionalignsetting-line-left"><code>"line-left"</code><a class="self-link" href="#dom-positionalignsetting-line-left"></a></dfn>, <dfn class="s idl-code" data-dfn-for="PositionAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;center&quot;|center" id="dom-positionalignsetting-center"><code>"center"</code><a class="self-link" href="#dom-positionalignsetting-center"></a></dfn>, <dfn class="s idl-code" data-dfn-for="PositionAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;line-right&quot;|line-right" id="dom-positionalignsetting-line-right"><code>"line-right"</code><a class="self-link" href="#dom-positionalignsetting-line-right"></a></dfn>, <dfn class="s idl-code" data-dfn-for="PositionAlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;auto&quot;|auto" id="dom-positionalignsetting-auto"><code>"auto"</code><a class="self-link" href="#dom-positionalignsetting-auto"></a></dfn> }; +
+
+
5207
+
5489
+ 		+
+ + <span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-alignsetting"><code>AlignSetting</code></dfn> { <dfn class="s idl-code" data-dfn-for="AlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;start&quot;|start" id="dom-alignsetting-start"><code>"start"</code><a class="self-link" href="#dom-alignsetting-start"></a></dfn>, <dfn class="s idl-code" data-dfn-for="AlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;center&quot;|center" id="dom-alignsetting-center"><code>"center"</code><a class="self-link" href="#dom-alignsetting-center"></a></dfn>, <dfn class="s idl-code" data-dfn-for="AlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;end&quot;|end" id="dom-alignsetting-end"><code>"end"</code><a class="self-link" href="#dom-alignsetting-end"></a></dfn>, <dfn class="s idl-code" data-dfn-for="AlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;left&quot;|left" id="dom-alignsetting-left"><code>"left"</code><a class="self-link" href="#dom-alignsetting-left"></a></dfn>, <dfn class="s idl-code" data-dfn-for="AlignSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;right&quot;|right" id="dom-alignsetting-right"><code>"right"</code><a class="self-link" href="#dom-alignsetting-right"></a></dfn> }; +
+
+
5208
+
+ 		+
+ - + [<a class="nv idl-code" data-link-type="constructor" href="#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(<a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-starttime"><code>startTime</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-starttime"></a></dfn>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-endtime"><code>endTime</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-endtime"></a></dfn>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-text"><code>text</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-text"></a></dfn>)] +
+
+
+
5490
+ 		+
+ + + [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Window</span>, +
+
+
+
5491
+ 		+
+ + + <a class="nv idl-code" data-link-type="constructor" href="#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(<a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-starttime"><code>startTime</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-starttime"></a></dfn>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-endtime"><code>endTime</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-endtime"></a></dfn>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <dfn class="nv idl-code" data-dfn-for="VTTCue/VTTCue(startTime, endTime, text)" data-dfn-type="argument" data-export="" id="dom-vttcue-vttcue-starttime-endtime-text-text"><code>text</code><a class="self-link" href="#dom-vttcue-vttcue-starttime-endtime-text-text"></a></dfn>)] +
+
+
5209
+
5492
+ 		+
+ + <span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="vttcue"><code>VTTCue</code></dfn> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#texttrackcue-texttrackcue">TextTrackCue</a> { +
+
+
5210
+
5493
+ 		+
+ + <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="nv idl-code" data-link-type="attribute" data-type="VTTRegion?" href="#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>; +
+
+
5211
+
5494
+ 		+
+ + <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="nv idl-code" data-link-type="attribute" data-type="DirectionSetting" href="#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>; +
+
+
@@ -5226,23 +5509,23 @@
+
+
5226
+
5509
+ 		+
+ + <p>Returns a new <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-3">VTTCue</a></code> object, for use with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#dom-texttrack-addcue">addCue()</a></code> method.</p> +
+
+
5227
+
5510
+ 		+
+ + <p>The <var>startTime</var> argument sets the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-start-time">text track cue start time</a>.</p> +
+
+
5228
+
5511
+ 		+
+ + <p>The <var>endTime</var> argument sets the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-end-time">text track cue end time</a>.</p> +
+
+
5229
+
+ 		+
+ - + <p>The <var>text</var> argument sets the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-7">text track cue text</a>.</p> +
+
+
+
5512
+ 		+
+ + + <p>The <var>text</var> argument sets the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-14">cue text</a>.</p> +
+
+
5230
+
5513
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-region" id="ref-for-dom-vttcue-region-2">region</a></code> +
+
+
5231
+
5514
+ 		+
+ + <dd> +
+
+
5232
+
5515
+ 		+
+ + <p>Returns the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-2">VTTRegion</a></code> object to which this cue belongs, if any, or null otherwise.</p> +
+
+
5233
+
5516
+ 		+
+ + <p>Can be set.</p> +
+
+
5234
+
5517
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-2">vertical</a></code> [ = <var>value</var> ] +
+
+
5235
+
5518
+ 		+
+ + <dd> +
+
+
5236
+
+ 		+
+ - + <p>Returns a string representing the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-35">WebVTT cue writing direction</a>, as follows:</p> +
+
+
+
5519
+ 		+
+ + + <p>Returns a string representing the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-34">WebVTT cue writing direction</a>, as follows:</p> +
+
+
5237
+
5520
+ 		+
+ + <dl class="switch"> +
+
+
5238
+
5521
+ 		+
+ + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-22">horizontal</a> +
+
+
5239
+
5522
+ 		+
+ + <dd> +
+
+
5240
+
5523
+ 		+
+ + <p>The empty string.</p> +
+
+
5241
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-13">vertical growing +
+
+
+
5524
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-12">vertical growing +
+
+
5242
+
5525
+ 		+
+ + left</a> +
+
+
5243
+
5526
+ 		+
+ + <dd> +
+
+
5244
+
5527
+ 		+
+ + <p>The string "<code>rl</code>".</p> +
+
+
5245
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-13">vertical growing +
+
+
+
5528
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-12">vertical growing +
+
+
5246
+
5529
+ 		+
+ + right</a> +
+
+
5247
+
5530
+ 		+
+ + <dd> +
+
+
5248
+
5531
+ 		+
+ + <p>The string "<code>lr</code>".</p> +
+
+
@@ -5250,11 +5533,11 @@
+
+
5250
+
5533
+ 		+
+ + <p>Can be set.</p> +
+
+
5251
+
5534
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-3">snapToLines</a></code> [ = <var>value</var> ] +
+
+
5252
+
5535
+ 		+
+ + <dd> +
+
+
5253
+
+ 		+
+ - + <p>Returns true if the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-16">WebVTT cue snap-to-lines flag</a> is true, false otherwise.</p> +
+
+
+
5536
+ 		+
+ + + <p>Returns true if the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-14">WebVTT cue snap-to-lines flag</a> is true, false otherwise.</p> +
+
+
5254
+
5537
+ 		+
+ + <p>Can be set.</p> +
+
+
5255
+
5538
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-line" id="ref-for-dom-vttcue-line-3">line</a></code> [ = <var>value</var> ] +
+
+
5256
+
5539
+ 		+
+ + <dd> +
+
+
5257
+
+ 		+
+ - + <p>Returns the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-23">WebVTT cue line</a>. In the case of the value being <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-5">auto</a>, the string "<code>auto</code>" is returned.</p> +
+
+
+
5540
+ 		+
+ + + <p>Returns the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-24">WebVTT cue line</a>. In the case of the value being <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-6">auto</a>, the string "<code>auto</code>" is returned.</p> +
+
+
5258
+
5541
+ 		+
+ + <p>Can be set.</p> +
+
+
5259
+
5542
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-2">lineAlign</a></code> [ = <var>value</var> ] +
+
+
5260
+
5543
+ 		+
+ + <dd> +
+
+
@@ -5279,13 +5562,13 @@
+
+
5279
+
5562
+ 		+
+ + <dd> +
+
+
5280
+
5563
+ 		+
+ + <p>Returns a string representing the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-11">WebVTT cue position alignment</a>, as follows:</p> +
+
+
5281
+
5564
+ 		+
+ + <dl class="switch"> +
+
+
5282
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-8">line-left alignment</a> +
+
+
+
5565
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-10">line-left alignment</a> +
+
+
5283
+
5566
+ 		+
+ + <dd> +
+
+
5284
+
5567
+ 		+
+ + <p>The string "<code>line-left</code>".</p> +
+
+
5285
+
5568
+ 		+
+ + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-8">center alignment</a> +
+
+
5286
+
5569
+ 		+
+ + <dd> +
+
+
5287
+
5570
+ 		+
+ + <p>The string "<code>center</code>".</p> +
+
+
5288
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-8">line-right alignment</a> +
+
+
+
5571
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-10">line-right alignment</a> +
+
+
5289
+
5572
+ 		+
+ + <dd> +
+
+
5290
+
5573
+ 		+
+ + <p>The string "<code>line-right</code>".</p> +
+
+
5291
+
5574
+ 		+
+ + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-position-automatic-alignment" id="ref-for-webvtt-cue-position-automatic-alignment-4">automatic alignment</a> +
+
+
@@ -5295,19 +5578,19 @@
+
+
5295
+
5578
+ 		+
+ + <p>Can be set.</p> +
+
+
5296
+
5579
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-size" id="ref-for-dom-vttcue-size-2">size</a></code> [ = <var>value</var> ] +
+
+
5297
+
5580
+ 		+
+ + <dd> +
+
+
5298
+
+ 		+
+ - + <p>Returns the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-11">WebVTT cue size</a>.</p> +
+
+
+
5581
+ 		+
+ + + <p>Returns the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-12">WebVTT cue size</a>.</p> +
+
+
5299
+
5582
+ 		+
+ + <p>Can be set.</p> +
+
+
5300
+
5583
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-align" id="ref-for-dom-vttcue-align-2">align</a></code> [ = <var>value</var> ] +
+
+
5301
+
5584
+ 		+
+ + <dd> +
+
+
5302
+
+ 		+
+ - + <p>Returns a string representing the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-21">WebVTT cue text alignment</a>, as follows:</p> +
+
+
+
5585
+ 		+
+ + + <p>Returns a string representing the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-23">WebVTT cue text alignment</a>, as follows:</p> +
+
+
5303
+
5586
+ 		+
+ + <dl class="switch"> +
+
+
5304
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-8">start alignment</a> +
+
+
+
5587
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-9">start alignment</a> +
+
+
5305
+
5588
+ 		+
+ + <dd> +
+
+
5306
+
5589
+ 		+
+ + <p>The string "<code>start</code>".</p> +
+
+
5307
+
5590
+ 		+
+ + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-8">center alignment</a> +
+
+
5308
+
5591
+ 		+
+ + <dd> +
+
+
5309
+
5592
+ 		+
+ + <p>The string "<code>center</code>".</p> +
+
+
5310
+
+ 		+
+ - + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-7">end alignment</a> +
+
+
+
5593
+ 		+
+ + + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-8">end alignment</a> +
+
+
5311
+
5594
+ 		+
+ + <dd> +
+
+
5312
+
5595
+ 		+
+ + <p>The string "<code>end</code>".</p> +
+
+
5313
+
5596
+ 		+
+ + <dt>If it is <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-7">left alignment</a> +
+
+
@@ -5320,17 +5603,17 @@
+
+
5320
+
5603
+ 		+
+ + <p>Can be set.</p> +
+
+
5321
+
5604
+ 		+
+ + <dt><var>cue</var> . <code class="idl"><a data-link-type="idl" href="#dom-vttcue-text" id="ref-for-dom-vttcue-text-2">text</a></code> [ = <var>value</var> ] +
+
+
5322
+
5605
+ 		+
+ + <dd> +
+
+
5323
+
+ 		+
+ - + <p>Returns the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-8">text track cue text</a> in raw unparsed form.</p> +
+
+
+
5606
+ 		+
+ + + <p>Returns the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-15">cue text</a> in raw unparsed form.</p> +
+
+
5324
+
5607
+ 		+
+ + <p>Can be set.</p> +
+
+
5325
+
5608
+ 		+
+ + <dt><var>fragment</var> = <var>cue</var> . <a class="idl-code" data-link-type="method" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-3">getCueAsHTML</a>() +
+
+
5326
+
5609
+ 		+
+ + <dd> +
+
+
5327
+
+ 		+
+ - + <p>Returns the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-9">text track cue text</a> as a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code> of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#html-element">HTML elements</a> and +
+
+
5328
+
+ 		+
+ - + other DOM nodes.</p> +
+
+
+
5610
+ 		+
+ + + <p>Returns the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-16">cue text</a> as a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code> of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#html-element">HTML elements</a> and other DOM +
+
+
+
5611
+ 		+
+ + + nodes.</p> +
+
+
5329
+
5612
+ 		+
+ + </dl> +
+
+
5330
+
5613
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="constructor" data-export="" data-lt="VTTCue(startTime, endTime, text)" id="dom-vttcue-vttcue"><code>VTTCue(<var>startTime</var>, <var>endTime</var>, <var>text</var>)</code></dfn> constructor, when invoked, must run the following steps:</p> +
+
+
5331
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
5614
+ 		+
+ + + <ol class="algorithm" data-algorithm="VTTCue construction"> +
+
+
5332
+
5615
+ 		+
+ + <li> +
+
+
5333
+
+ 		+
+ - + <p>Create a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-32">WebVTT cue</a>. Let <var>cue</var> be that <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-33">WebVTT cue</a>.</p> +
+
+
+
5616
+ 		+
+ + + <p>Create a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-36">WebVTT cue</a>. Let <var>cue</var> be that <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-37">WebVTT cue</a>.</p> +
+
+
5334
+
5617
+ 		+
+ + <li> +
+
+
5335
+
5618
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-start-time">text track cue start time</a> be the value of the <var>startTime</var> argument, +
+
+
5336
+
5619
+ 		+
+ + interpreted as a time in seconds.</p> +
+
+
@@ -5338,20 +5621,21 @@
+
+
5338
+
5621
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-end-time">text track cue end time</a> be the value of the <var>endTime</var> argument, +
+
+
5339
+
5622
+ 		+
+ + interpreted as a time in seconds.</p> +
+
+
5340
+
5623
+ 		+
+ + <li> +
+
+
5341
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-10">text track cue text</a> be the value of the <var>text</var> argument, and let the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-rules-for-extracting-the-chapter-title">rules for extracting the chapter title</a> be the <a data-link-type="dfn" href="#webvtt-rules-for-extracting-the-chapter-title" id="ref-for-webvtt-rules-for-extracting-the-chapter-title-1">WebVTT rules for extracting the chapter +
+
+
+
5624
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-17">cue text</a> be the value of the <var>text</var> argument, and let the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-rules-for-extracting-the-chapter-title">rules for +
+
+
+
5625
+ 		+
+ + + extracting the chapter title</a> be the <a data-link-type="dfn" href="#webvtt-rules-for-extracting-the-chapter-title" id="ref-for-webvtt-rules-for-extracting-the-chapter-title-1">WebVTT rules for extracting the chapter +
+
+
5342
+
5626
+ 		+
+ + title</a>.</p> +
+
+
5343
+
5627
+ 		+
+ + <li> +
+
+
5344
+
5628
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-identifier">text track cue identifier</a> be the empty string.</p> +
+
+
5345
+
5629
+ 		+
+ + <li> +
+
+
5346
+
5630
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#pause-on-exit-flag">text track cue pause-on-exit flag</a> be false.</p> +
+
+
5347
+
5631
+ 		+
+ + <li> +
+
+
5348
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-7">WebVTT cue region</a> be null.</p> +
+
+
+
5632
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-10">WebVTT cue region</a> be null.</p> +
+
+
5349
+
5633
+ 		+
+ + <li> +
+
+
5350
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-36">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-23">horizontal</a>.</p> +
+
+
+
5634
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-35">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-23">horizontal</a>.</p> +
+
+
5351
+
5635
+ 		+
+ + <li> +
+
+
5352
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-17">WebVTT cue snap-to-lines flag</a> be true.</p> +
+
+
+
5636
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-15">WebVTT cue snap-to-lines flag</a> be true.</p> +
+
+
5353
+
5637
+ 		+
+ + <li> +
+
+
5354
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-24">WebVTT cue line</a> be <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-6">auto</a>.</p> +
+
+
+
5638
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-25">WebVTT cue line</a> be <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-7">auto</a>.</p> +
+
+
5355
+
5639
+ 		+
+ + <li> +
+
+
5356
+
5640
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-15">WebVTT cue line alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-7">start alignment</a>.</p> +
+
+
5357
+
5641
+ 		+
+ + <li> +
+
+
@@ -5359,50 +5643,50 @@
+
+
5359
+
5643
+ 		+
+ + <li> +
+
+
5360
+
5644
+ 		+
+ + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-12">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-automatic-alignment" id="ref-for-webvtt-cue-position-automatic-alignment-5">auto</a>.</p> +
+
+
5361
+
5645
+ 		+
+ + <li> +
+
+
5362
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-12">WebVTT cue size</a> be 100.</p> +
+
+
+
5646
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-13">WebVTT cue size</a> be 100.</p> +
+
+
5363
+
5647
+ 		+
+ + <li> +
+
+
5364
+
+ 		+
+ - + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-22">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-9">center +
+
+
+
5648
+ 		+
+ + + <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-24">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-9">center +
+
+
5365
+
5649
+ 		+
+ + alignment</a>.</p> +
+
+
5366
+
5650
+ 		+
+ + <li> +
+
+
5367
+
5651
+ 		+
+ + <p>Return the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-4">VTTCue</a></code> object representing <var>cue</var>.</p> +
+
+
5368
+
5652
+ 		+
+ + </ol> +
+
+
5369
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-region"><code>region</code></dfn> attribute, on getting, must return the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-3">VTTRegion</a></code> object representing the <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-8">WebVTT cue region</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-34">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-5">VTTCue</a></code> object +
+
+
5370
+
+ 		+
+ - + represents, if any; or null otherwise. On setting, the <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-9">WebVTT cue region</a> must be set to the +
+
+
+
5653
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-region"><code>region</code></dfn> attribute, on getting, must return the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-3">VTTRegion</a></code> object representing the <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-11">WebVTT cue region</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-38">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-5">VTTCue</a></code> object +
+
+
+
5654
+ 		+
+ + + represents, if any; or null otherwise. On setting, the <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-12">WebVTT cue region</a> must be set to the +
+
+
5371
+
5655
+ 		+
+ + new value.</p> +
+
+
5372
+
5656
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-vertical"><code>vertical</code></dfn> attribute, on getting, must return the string from +
+
+
5373
+
+ 		+
+ - + the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-37">WebVTT cue writing +
+
+
5374
+
+ 		+
+ - + direction</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-35">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-6">VTTCue</a></code> object represents:</p> +
+
+
+
5657
+ 		+
+ + + the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-36">WebVTT cue writing +
+
+
+
5658
+ 		+
+ + + direction</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-39">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-6">VTTCue</a></code> object represents:</p> +
+
+
5375
+
5659
+ 		+
+ + <table class="complex data"> +
+
+
5376
+
5660
+ 		+
+ + <thead> +
+
+
5377
+
5661
+ 		+
+ + <tr> +
+
+
5378
+
+ 		+
+ - + <th><a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-38">WebVTT cue writing direction</a> +
+
+
+
5662
+ 		+
+ + + <th><a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-37">WebVTT cue writing direction</a> +
+
+
5379
+
5663
+ 		+
+ + <th><code class="idl"><a data-link-type="idl" href="#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-3">vertical</a></code> value +
+
+
5380
+
5664
+ 		+
+ + <tbody> +
+
+
5381
+
5665
+ 		+
+ + <tr> +
+
+
5382
+
5666
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-24">Horizontal</a> +
+
+
5383
+
5667
+ 		+
+ + <td>"<code></code>" (the empty string) +
+
+
5384
+
5668
+ 		+
+ + <tr> +
+
+
5385
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-14">Vertical growing left</a> +
+
+
+
5669
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-13">Vertical growing left</a> +
+
+
5386
+
5670
+ 		+
+ + <td>"<code>rl</code>" +
+
+
5387
+
5671
+ 		+
+ + <tr> +
+
+
5388
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-14">Vertical growing right</a> +
+
+
+
5672
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-13">Vertical growing right</a> +
+
+
5389
+
5673
+ 		+
+ + <td>"<code>lr</code>" +
+
+
5390
+
5674
+ 		+
+ + </table> +
+
+
5391
+
+ 		+
+ - + <p>On setting, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-39">WebVTT cue writing direction</a> must be set to the value given in the first +
+
+
+
5675
+ 		+
+ + + <p>On setting, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-38">WebVTT cue writing direction</a> must be set to the value given in the first +
+
+
5392
+
5676
+ 		+
+ + cell of the row in the table above whose second cell is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the new +
+
+
5393
+
5677
+ 		+
+ + value.</p> +
+
+
5394
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-snaptolines"><code>snapToLines</code></dfn> attribute, on getting, must return true if the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-18">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-36">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-7">VTTCue</a></code> object represents +
+
+
5395
+
+ 		+
+ - + is true; or false otherwise. On setting, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-19">WebVTT cue snap-to-lines flag</a> must be set to the +
+
+
+
5678
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-snaptolines"><code>snapToLines</code></dfn> attribute, on getting, must return true if the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-16">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-40">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-7">VTTCue</a></code> object represents +
+
+
+
5679
+ 		+
+ + + is true; or false otherwise. On setting, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-17">WebVTT cue snap-to-lines flag</a> must be set to the +
+
+
5396
+
5680
+ 		+
+ + new value.</p> +
+
+
5397
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-line"><code>line</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-25">WebVTT cue +
+
+
5398
+
+ 		+
+ - + line</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-37">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-8">VTTCue</a></code> object represents. The special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-7">auto</a> must be represented as the string "<code>auto</code>". On +
+
+
5399
+
+ 		+
+ - + setting, the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-26">WebVTT cue line</a> must be set to the new value; if the new value is the string +
+
+
5400
+
+ 		+
+ - + "<code>auto</code>", then it must be interpreted as the special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-8">auto</a>.</p> +
+
+
+
5681
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-line"><code>line</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-26">WebVTT cue +
+
+
+
5682
+ 		+
+ + + line</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-41">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-8">VTTCue</a></code> object represents. The special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-8">auto</a> must be represented as the string "<code>auto</code>". On +
+
+
+
5683
+ 		+
+ + + setting, the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-27">WebVTT cue line</a> must be set to the new value; if the new value is the string +
+
+
+
5684
+ 		+
+ + + "<code>auto</code>", then it must be interpreted as the special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-9">auto</a>.</p> +
+
+
5401
+
5685
+ 		+
+ + <p class="note" role="note">In order to be able to set the <code class="idl"><a data-link-type="idl" href="#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-4">snapToLines</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-vttcue-line" id="ref-for-dom-vttcue-line-4">line</a></code> attributes +
+
+
5402
+
5686
+ 		+
+ + in any order, the API does not reject setting <code class="idl"><a data-link-type="idl" href="#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-5">snapToLines</a></code> to false when <code class="idl"><a data-link-type="idl" href="#dom-vttcue-line" id="ref-for-dom-vttcue-line-5">line</a></code> has a value outside the range 0..100, or vice versa.</p> +
+
+
5403
+
5687
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-linealign"><code>lineAlign</code></dfn> attribute, on getting, must return the string from +
+
+
5404
+
5688
+ 		+
+ + the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-16">WebVTT cue line +
+
+
5405
+
+ 		+
+ - + alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-38">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-9">VTTCue</a></code> object represents:</p> +
+
+
+
5689
+ 		+
+ + + alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-42">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-9">VTTCue</a></code> object represents:</p> +
+
+
5406
+
5690
+ 		+
+ + <table class="complex data"> +
+
+
5407
+
5691
+ 		+
+ + <thead> +
+
+
5408
+
5692
+ 		+
+ + <tr> +
+
+
@@ -5423,13 +5707,13 @@
+
+
5423
+
5707
+ 		+
+ + of the row in the table above whose second cell is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the new +
+
+
5424
+
5708
+ 		+
+ + value.</p> +
+
+
5425
+
5709
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-position"><code>position</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-25">WebVTT cue +
+
+
5426
+
+ 		+
+ - + position</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-39">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-10">VTTCue</a></code> object represents. The special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-10">auto</a> must be represented as the string "<code>auto</code>". +
+
+
+
5710
+ 		+
+ + + position</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-43">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-10">VTTCue</a></code> object represents. The special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-10">auto</a> must be represented as the string "<code>auto</code>". +
+
+
5427
+
5711
+ 		+
+ + On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception +
+
+
5428
+
5712
+ 		+
+ + must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-26">WebVTT cue position</a> must be set to the new value; if the new +
+
+
5429
+
5713
+ 		+
+ + value is the string "<code>auto</code>", then it must be interpreted as the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-11">auto</a>.</p> +
+
+
5430
+
5714
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-positionalign"><code>positionAlign</code></dfn> attribute, on getting, must return the string +
+
+
5431
+
5715
+ 		+
+ + from the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-13">WebVTT cue position +
+
+
5432
+
+ 		+
+ - + alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-40">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-11">VTTCue</a></code> object represents:</p> +
+
+
+
5716
+ 		+
+ + + alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-44">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-11">VTTCue</a></code> object represents:</p> +
+
+
5433
+
5717
+ 		+
+ + <table class="complex data"> +
+
+
5434
+
5718
+ 		+
+ + <thead> +
+
+
5435
+
5719
+ 		+
+ + <tr> +
+
+
@@ -5437,13 +5721,13 @@
+
+
5437
+
5721
+ 		+
+ + <th><code class="idl"><a data-link-type="idl" href="#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-3">positionAlign</a></code> value +
+
+
5438
+
5722
+ 		+
+ + <tbody> +
+
+
5439
+
5723
+ 		+
+ + <tr> +
+
+
5440
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-9">Line-left alignment</a> +
+
+
+
5724
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-11">Line-left alignment</a> +
+
+
5441
+
5725
+ 		+
+ + <td>"<code>line-left</code>" +
+
+
5442
+
5726
+ 		+
+ + <tr> +
+
+
5443
+
5727
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-9">Center alignment</a> +
+
+
5444
+
5728
+ 		+
+ + <td>"<code>center</code>" +
+
+
5445
+
5729
+ 		+
+ + <tr> +
+
+
5446
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-9">Line-right alignment</a> +
+
+
+
5730
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-11">Line-right alignment</a> +
+
+
5447
+
5731
+ 		+
+ + <td>"<code>line-right</code>" +
+
+
5448
+
5732
+ 		+
+ + <tr> +
+
+
5449
+
5733
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-position-automatic-alignment" id="ref-for-webvtt-cue-position-automatic-alignment-6">Automatic alignment</a> +
+
+
@@ -5452,26 +5736,26 @@
+
+
5452
+
5736
+ 		+
+ + <p>On setting, the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-15">WebVTT cue position alignment</a> must be set to the value given in the first +
+
+
5453
+
5737
+ 		+
+ + cell of the row in the table above whose second cell is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the new +
+
+
5454
+
5738
+ 		+
+ + value.</p> +
+
+
5455
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-size"><code>size</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-13">WebVTT cue +
+
+
5456
+
+ 		+
+ - + size</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-41">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-12">VTTCue</a></code> object represents. On setting, if the new +
+
+
+
5739
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-size"><code>size</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-14">WebVTT cue +
+
+
+
5740
+ 		+
+ + + size</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-45">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-12">VTTCue</a></code> object represents. On setting, if the new +
+
+
5457
+
5741
+ 		+
+ + value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. +
+
+
5458
+
+ 		+
+ - + Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-14">WebVTT cue size</a> must be set to the new value.</p> +
+
+
+
5742
+ 		+
+ + + Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-15">WebVTT cue size</a> must be set to the new value.</p> +
+
+
5459
+
5743
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-align"><code>align</code></dfn> attribute, on getting, must return the string from the +
+
+
5460
+
+ 		+
+ - + second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-23">WebVTT cue text alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-42">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-13">VTTCue</a></code> object represents:</p> +
+
+
+
5744
+ 		+
+ + + second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-25">WebVTT cue text alignment</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-46">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-13">VTTCue</a></code> object represents:</p> +
+
+
5461
+
5745
+ 		+
+ + <table class="complex data"> +
+
+
5462
+
5746
+ 		+
+ + <thead> +
+
+
5463
+
5747
+ 		+
+ + <tr> +
+
+
5464
+
+ 		+
+ - + <th><a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-24">WebVTT cue text alignment</a> +
+
+
+
5748
+ 		+
+ + + <th><a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-26">WebVTT cue text alignment</a> +
+
+
5465
+
5749
+ 		+
+ + <th><code class="idl"><a data-link-type="idl" href="#dom-vttcue-align" id="ref-for-dom-vttcue-align-3">align</a></code> value +
+
+
5466
+
5750
+ 		+
+ + <tbody> +
+
+
5467
+
5751
+ 		+
+ + <tr> +
+
+
5468
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-9">Start alignment</a> +
+
+
+
5752
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-10">Start alignment</a> +
+
+
5469
+
5753
+ 		+
+ + <td>"<code>start</code>" +
+
+
5470
+
5754
+ 		+
+ + <tr> +
+
+
5471
+
5755
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-10">Center alignment</a> +
+
+
5472
+
5756
+ 		+
+ + <td>"<code>center</code>" +
+
+
5473
+
5757
+ 		+
+ + <tr> +
+
+
5474
+
+ 		+
+ - + <td><a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-8">End alignment</a> +
+
+
+
5758
+ 		+
+ + + <td><a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-9">End alignment</a> +
+
+
5475
+
5759
+ 		+
+ + <td>"<code>end</code>" +
+
+
5476
+
5760
+ 		+
+ + <tr> +
+
+
5477
+
5761
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-8">Left alignment</a> +
+
+
@@ -5480,25 +5764,25 @@
+
+
5480
+
5764
+ 		+
+ + <td><a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-8">Right alignment</a> +
+
+
5481
+
5765
+ 		+
+ + <td>"<code>right</code>" +
+
+
5482
+
5766
+ 		+
+ + </table> +
+
+
5483
+
+ 		+
+ - + <p>On setting, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-25">WebVTT cue text alignment</a> must be set to the value given in the first cell +
+
+
+
5767
+ 		+
+ + + <p>On setting, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-27">WebVTT cue text alignment</a> must be set to the value given in the first cell +
+
+
5484
+
5768
+ 		+
+ + of the row in the table above whose second cell is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the new +
+
+
5485
+
5769
+ 		+
+ + value.</p> +
+
+
5486
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-text"><code>text</code></dfn> attribute, on getting, must return the raw <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-11">text track +
+
+
5487
+
+ 		+
+ - + cue text</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-43">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-14">VTTCue</a></code> object represents. On setting, the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-12">text +
+
+
5488
+
+ 		+
+ - + track cue text</a> must be set to the new value.</p> +
+
+
5489
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="method" data-export="" id="dom-vttcue-getcueashtml"><code>getCueAsHTML()</code></dfn> method must convert the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-13">text track cue +
+
+
5490
+
+ 		+
+ - + text</a> to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code> for the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/webappapis.html#responsible-document">responsible document</a> specified by the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/webappapis.html#entry-settings-object">entry +
+
+
5491
+
+ 		+
+ - + settings object</a> by applying the <a data-link-type="dfn" href="#webvtt-cue-text-dom-construction-rules" id="ref-for-webvtt-cue-text-dom-construction-rules-1">WebVTT cue text DOM construction rules</a> to the result of +
+
+
+
5770
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="attribute" data-export="" id="dom-vttcue-text"><code>text</code></dfn> attribute, on getting, must return the raw <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-18">cue +
+
+
+
5771
+ 		+
+ + + text</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-47">WebVTT cue</a> that the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-14">VTTCue</a></code> object represents. On setting, the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-19">cue +
+
+
+
5772
+ 		+
+ + + text</a> must be set to the new value.</p> +
+
+
+
5773
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTCue" data-dfn-type="method" data-export="" id="dom-vttcue-getcueashtml"><code>getCueAsHTML()</code></dfn> method must convert the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-20">cue text</a> to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code> for the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/webappapis.html#responsible-document">responsible document</a> specified by the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/webappapis.html#entry-settings-object">entry settings +
+
+
+
5774
+ 		+
+ + + object</a> by applying the <a data-link-type="dfn" href="#webvtt-cue-text-dom-construction-rules" id="ref-for-webvtt-cue-text-dom-construction-rules-1">WebVTT cue text DOM construction rules</a> to the result of applying +
+
+
+
5775
+ 		+
+ + + the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-3">WebVTT cue text parsing rules</a> to the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-21">cue text</a>.</p> +
+
+
5492
+
+ 		+
+ - + applying the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-3">WebVTT cue text parsing rules</a> to the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-14">text track cue text</a>.</p> +
+
+
5493
+
5776
+ 		+
+ + <p class="note" role="note">A fallback language is not provided for <code class="idl"><a data-link-type="idl" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-4">getCueAsHTML()</a></code> since a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code> cannot expose language information.</p> +
+
+
5494
+
+ 		+
+ - + <h3 class="heading settled algorithm" data-algorithm="The VTTRegion interface" data-level="8.2" id="the-vttregion-interface"><span class="secno">8.2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-4">VTTRegion</a></code> interface</span><a class="self-link" href="#the-vttregion-interface"></a></h3> +
+
+
+
5777
+ 		+
+ + + <h3 class="heading settled algorithm" data-algorithm="The VTTRegion interface" data-level="9.2" id="the-vttregion-interface"><span class="secno">9.2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-4">VTTRegion</a></code> interface</span><a class="self-link" href="#the-vttregion-interface"></a></h3> +
+
+
5495
+
5778
+ 		+
+ + <p>The following interface is used to expose WebVTT regions in the DOM API:</p> +
+
+
5496
+
5779
+ 		+
+ + <pre class="idl highlight def"><span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-scrollsetting"><code>ScrollSetting</code></dfn> { <dfn class="s idl-code" data-dfn-for="ScrollSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;&quot;|" id="dom-scrollsetting"><code>""</code><a class="self-link" href="#dom-scrollsetting"></a></dfn> /* none */, <dfn class="s idl-code" data-dfn-for="ScrollSetting" data-dfn-type="enum-value" data-export="" data-lt="&quot;up&quot;|up" id="dom-scrollsetting-up"><code>"up"</code><a class="self-link" href="#dom-scrollsetting-up"></a></dfn> }; +
+
+
5497
+
+ 		+
+ - + [<a class="nv idl-code" data-link-type="constructor" href="#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] +
+
+
+
5780
+ 		+
+ + + [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Window</span>, +
+
+
+
5781
+ 		+
+ + + <a class="nv idl-code" data-link-type="constructor" href="#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] +
+
+
5498
+
5782
+ 		+
+ + <span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="vttregion"><code>VTTRegion</code></dfn> { +
+
+
5499
+
5783
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-vttregion-id" id="ref-for-dom-vttregion-id-1">id</a>; +
+
+
5500
+
5784
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; +
+
+
5501
+
+ 		+
+ - + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-long"><span class="kt">long</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="long" href="#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; +
+
+
+
5785
+ 		+
+ + + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long"><span class="kt">unsigned</span> <span class="kt">long</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; +
+
+
5502
+
5786
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>; +
+
+
5503
+
5787
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>; +
+
+
5504
+
5788
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>; +
+
+
@@ -5550,9 +5834,9 @@
+
+
5550
+
5834
+ 		+
+ + </dl> +
+
+
5551
+
5835
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="constructor" data-export="" id="dom-vttregion-vttregion"><code>VTTRegion()</code></dfn> constructor, when invoked, must run the +
+
+
5552
+
5836
+ 		+
+ + following steps:</p> +
+
+
5553
+
+ 		+
+ - + <ol class="algorithm"> +
+
+
+
5837
+ 		+
+ + + <ol class="algorithm" data-algorithm="VTTRegion construction"> +
+
+
5554
+
5838
+ 		+
+ + <li> +
+
+
5555
+
+ 		+
+ - + <p>Create a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-15">WebVTT region</a>. Let <var>region</var> be that <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-16">WebVTT region</a>.</p> +
+
+
+
5839
+ 		+
+ + + <p>Create a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-16">WebVTT region</a>. Let <var>region</var> be that <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-17">WebVTT region</a>.</p> +
+
+
5556
+
5840
+ 		+
+ + <li> +
+
+
5557
+
5841
+ 		+
+ + <p>Let <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-7">WebVTT region identifier</a> be the empty string.</p> +
+
+
5558
+
5842
+ 		+
+ + <li> +
+
+
@@ -5575,26 +5859,26 @@
+
+
5575
+
5859
+ 		+
+ + <p>Return the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-6">VTTRegion</a></code> object representing <var>region</var>.</p> +
+
+
5576
+
5860
+ 		+
+ + </ol> +
+
+
5577
+
5861
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-id"><code>id</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-8">WebVTT region +
+
+
5578
+
+ 		+
+ - + identifier</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-17">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-7">VTTRegion</a></code> object represents. On setting, the <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-9">WebVTT region identifier</a> must be set to the new value.</p> +
+
+
+
5862
+ 		+
+ + + identifier</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-18">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-7">VTTRegion</a></code> object represents. On setting, the <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-9">WebVTT region identifier</a> must be set to the new value.</p> +
+
+
5579
+
5863
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-width"><code>width</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-8">WebVTT +
+
+
5580
+
+ 		+
+ - + region width</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-18">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-8">VTTRegion</a></code> object represents. On setting, +
+
+
+
5864
+ 		+
+ + + region width</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-19">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-8">VTTRegion</a></code> object represents. On setting, +
+
+
5581
+
5865
+ 		+
+ + if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be +
+
+
5582
+
5866
+ 		+
+ + thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-9">WebVTT region width</a> must be set to the new value.</p> +
+
+
5583
+
5867
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-lines"><code>lines</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-5">WebVTT +
+
+
5584
+
+ 		+
+ - + region lines</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-19">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-9">VTTRegion</a></code> object represents. On setting, +
+
+
5585
+
+ 		+
+ - + if the new value is negative, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-6">WebVTT region lines</a> must be set to the new value.</p> +
+
+
5586
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-regionanchorx"><code>regionAnchorX</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-9">WebVTT region anchor</a> X offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-20">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-10">VTTRegion</a></code> object +
+
+
+
5868
+ 		+
+ + + region lines</a> of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-20">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-9">VTTRegion</a></code> object represents. On setting, +
+
+
+
5869
+ 		+
+ + + the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-6">WebVTT region lines</a> must be set to the new value.</p> +
+
+
+
5870
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-regionanchorx"><code>regionAnchorX</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-9">WebVTT region anchor</a> X offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-21">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-10">VTTRegion</a></code> object +
+
+
5587
+
5871
+ 		+
+ + represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-10">WebVTT region anchor</a> X distance must be set to the +
+
+
5588
+
5872
+ 		+
+ + new value.</p> +
+
+
5589
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-regionanchory"><code>regionAnchorY</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-11">WebVTT region anchor</a> Y offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-21">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-11">VTTRegion</a></code> object +
+
+
+
5873
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-regionanchory"><code>regionAnchorY</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-11">WebVTT region anchor</a> Y offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-22">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-11">VTTRegion</a></code> object +
+
+
5590
+
5874
+ 		+
+ + represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-12">WebVTT region anchor</a> Y distance must be set to the +
+
+
5591
+
5875
+ 		+
+ + new value.</p> +
+
+
5592
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-viewportanchorx"><code>viewportAnchorX</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-5">WebVTT region viewport anchor</a> X offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-22">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-12">VTTRegion</a></code> object represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-6">WebVTT region viewport anchor</a> X +
+
+
+
5876
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-viewportanchorx"><code>viewportAnchorX</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-5">WebVTT region viewport anchor</a> X offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-23">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-12">VTTRegion</a></code> object represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-6">WebVTT region viewport anchor</a> X +
+
+
5593
+
5877
+ 		+
+ + distance must be set to the new value.</p> +
+
+
5594
+
+ 		+
+ - + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-viewportanchory"><code>viewportAnchorY</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-7">WebVTT region viewport anchor</a> Y offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-23">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-13">VTTRegion</a></code> object represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-8">WebVTT region viewport anchor</a> Y +
+
+
+
5878
+ 		+
+ + + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-viewportanchory"><code>viewportAnchorY</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-7">WebVTT region viewport anchor</a> Y offset of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-24">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-13">VTTRegion</a></code> object represents. On setting, if the new value is negative or greater than 100, then an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a></code> exception must be thrown. Otherwise, the <a data-link-type="dfn" href="#webvtt-region-viewport-anchor" id="ref-for-webvtt-region-viewport-anchor-8">WebVTT region viewport anchor</a> Y +
+
+
5595
+
5879
+ 		+
+ + distance must be set to the new value.</p> +
+
+
5596
+
5880
+ 		+
+ + <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="VTTRegion" data-dfn-type="attribute" data-export="" id="dom-vttregion-scroll"><code>scroll</code></dfn> attribute, on getting, must return the string from +
+
+
5597
+
+ 		+
+ - + the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-6">WebVTT region scroll</a> setting of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-24">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-14">VTTRegion</a></code> object represents:</p> +
+
+
+
5881
+ 		+
+ + + the second cell of the row in the table below whose first cell is the <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-6">WebVTT region scroll</a> setting of the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-25">WebVTT region</a> that the <code class="idl"><a data-link-type="idl" href="#vttregion" id="ref-for-vttregion-14">VTTRegion</a></code> object represents:</p> +
+
+
5598
+
5882
+ 		+
+ + <table class="complex data"> +
+
+
5599
+
5883
+ 		+
+ + <thead> +
+
+
5600
+
5884
+ 		+
+ + <tr> +
+
+
@@ -5610,8 +5894,8 @@
+
+
5610
+
5894
+ 		+
+ + </table> +
+
+
5611
+
5895
+ 		+
+ + <p>On setting, the <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-8">WebVTT region scroll</a> must be set to the value given on the first cell of +
+
+
5612
+
5896
+ 		+
+ + the row in the table above whose second cell is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the new value.</p> +
+
+
5613
+
+ 		+
+ - + <h2 class="heading settled" data-level="9" id="iana"><span class="secno">9. </span><span class="content">IANA considerations</span><a class="self-link" href="#iana"></a></h2> +
+
+
5614
+
+ 		+
+ - + <h3 class="heading settled" data-level="9.1" id="iana-text-vtt"><span class="secno">9.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="text-vtt"><code>text/vtt</code></dfn></span><a class="self-link" href="#iana-text-vtt"></a></h3> +
+
+
+
5897
+ 		+
+ + + <h2 class="heading settled" data-level="10" id="iana"><span class="secno">10. </span><span class="content">IANA considerations</span><a class="self-link" href="#iana"></a></h2> +
+
+
+
5898
+ 		+
+ + + <h3 class="heading settled" data-level="10.1" id="iana-text-vtt"><span class="secno">10.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="text-vtt"><code>text/vtt</code></dfn></span><a class="self-link" href="#iana-text-vtt"></a></h3> +
+
+
5615
+
5899
+ 		+
+ + <p>This registration is for community review and will be submitted to the IESG for review, approval, +
+
+
5616
+
5900
+ 		+
+ + and registration with IANA.</p> +
+
+
5617
+
5901
+ 		+
+ + <dl> +
+
+
@@ -5696,7 +5980,7 @@
+
+
5696
+
5980
+ 		+
+ + <p>It is possible for a user agent to offer user style sheets, but their presence and nature will +
+
+
5697
+
5981
+ 		+
+ + not be detectable by scripts running in the same user agent (e.g. browser) since the CSS object +
+
+
5698
+
5982
+ 		+
+ + model for such style sheets is not exposed to script and there is no way to get the computed style +
+
+
5699
+
+ 		+
+ - + for pseudo-elements other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-3/#sel-before">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-3/#sel-after">::after</a> with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle">getComputedStyle()</a></code> API. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a></p> +
+
+
+
5983
+ 		+
+ + + for pseudo-elements other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-selectors/#sel-before">::before</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-selectors/#sel-after">::after</a> with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle">getComputedStyle()</a></code> API. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a></p> +
+
+
5700
+
5984
+ 		+
+ + <h3 class="heading settled" id="scripting-security"><span class="content">Scripting-related security</span><a class="self-link" href="#scripting-security"></a></h3> +
+
+
5701
+
5985
+ 		+
+ + <p>WebVTT does not include or enable scripting. It is important that user agents do not support a +
+
+
5702
+
5986
+ 		+
+ + way to execute script embedded in a WebVTT file.</p> +
+
+
@@ -5743,10 +6027,12 @@
+
+
5743
+
6027
+ 		+
+ + Lawrence Forooghian, +
+
+
5744
+
6028
+ 		+
+ + Loretta Guarino Reid, +
+
+
5745
+
6029
+ 		+
+ + Ms2ger, +
+
+
+
6030
+ 		+
+ + + Nigel Megitt, +
+
+
5746
+
6031
+ 		+
+ + Ralph Giles, +
+
+
5747
+
6032
+ 		+
+ + Richard Ishida, +
+
+
5748
+
6033
+ 		+
+ + Rick Eyre, +
+
+
5749
+
+ 		+
+ - + Ronny Mennerich, and +
+
+
+
6034
+ 		+
+ + + Ronny Mennerich, +
+
+
+
6035
+ 		+
+ + + Theresa O’Connor, and +
+
+
5750
+
6036
+ 		+
+ + Victor Cărbune +
+
+
5751
+
6037
+ 		+
+ + for their useful comments. </p> +
+
+
5752
+
6038
+ 		+
+ + </main> +
+
+
@@ -5757,250 +6043,258 @@
+
+
5757
+
6043
+ 		+
+ + <li> +
+
+
5758
+
6044
+ 		+
+ + "" +
+
+
5759
+
6045
+ 		+
+ + <ul> +
+
+
5760
+
+ 		+
+ - + <li><a href="#dom-directionsetting">enum-value for DirectionSetting</a><span>, in §8.1</span> +
+
+
5761
+
+ 		+
+ - + <li><a href="#dom-scrollsetting">enum-value for ScrollSetting</a><span>, in §8.2</span> +
+
+
+
6046
+ 		+
+ + + <li><a href="#dom-directionsetting">enum-value for DirectionSetting</a><span>, in §9.1</span> +
+
+
+
6047
+ 		+
+ + + <li><a href="#dom-scrollsetting">enum-value for ScrollSetting</a><span>, in §9.2</span> +
+
+
5762
+
6048
+ 		+
+ + </ul> +
+
+
5763
+
+ 		+
+ - + <li><a href="#dom-vttcue-align">align</a><span>, in §8.1</span> +
+
+
5764
+
+ 		+
+ - + <li><a href="#enumdef-alignsetting">AlignSetting</a><span>, in §8.1</span> +
+
+
5765
+
+ 		+
+ - + <li><a href="#apply-webvtt-cue-settings">apply WebVTT cue settings</a><span>, in §6.1</span> +
+
+
5766
+
+ 		+
+ - + <li><a href="#attach-a-webvtt-internal-node-object">attach a WebVTT Internal Node Object</a><span>, in §5.4</span> +
+
+
+
6049
+ 		+
+ + + <li><a href="#dom-vttcue-align">align</a><span>, in §9.1</span> +
+
+
+
6050
+ 		+
+ + + <li><a href="#enumdef-alignsetting">AlignSetting</a><span>, in §9.1</span> +
+
+
+
6051
+ 		+
+ + + <li><a href="#apply-webvtt-cue-settings">apply WebVTT cue settings</a><span>, in §7.2</span> +
+
+
+
6052
+ 		+
+ + + <li><a href="#attach-a-webvtt-internal-node-object">attach a WebVTT Internal Node Object</a><span>, in §6.4</span> +
+
+
5767
+
6053
+ 		+
+ + <li> +
+
+
5768
+
6054
+ 		+
+ + auto +
+
+
5769
+
6055
+ 		+
+ + <ul> +
+
+
5770
+
+ 		+
+ - + <li><a href="#dom-autokeyword-auto">enum-value for AutoKeyword</a><span>, in §8.1</span> +
+
+
5771
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-auto">enum-value for PositionAlignSetting</a><span>, in §8.1</span> +
+
+
+
6056
+ 		+
+ + + <li><a href="#dom-autokeyword-auto">enum-value for AutoKeyword</a><span>, in §9.1</span> +
+
+
+
6057
+ 		+
+ + + <li><a href="#dom-positionalignsetting-auto">enum-value for PositionAlignSetting</a><span>, in §9.1</span> +
+
+
5772
+
6058
+ 		+
+ + </ul> +
+
+
5773
+
6059
+ 		+
+ + <li> +
+
+
5774
+
6060
+ 		+
+ + "auto" +
+
+
5775
+
6061
+ 		+
+ + <ul> +
+
+
5776
+
+ 		+
+ - + <li><a href="#dom-autokeyword-auto">enum-value for AutoKeyword</a><span>, in §8.1</span> +
+
+
5777
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-auto">enum-value for PositionAlignSetting</a><span>, in §8.1</span> +
+
+
+
6062
+ 		+
+ + + <li><a href="#dom-autokeyword-auto">enum-value for AutoKeyword</a><span>, in §9.1</span> +
+
+
+
6063
+ 		+
+ + + <li><a href="#dom-positionalignsetting-auto">enum-value for PositionAlignSetting</a><span>, in §9.1</span> +
+
+
5778
+
6064
+ 		+
+ + </ul> +
+
+
5779
+
+ 		+
+ - + <li><a href="#enumdef-autokeyword">AutoKeyword</a><span>, in §8.1</span> +
+
+
+
6065
+ 		+
+ + + <li><a href="#enumdef-autokeyword">AutoKeyword</a><span>, in §9.1</span> +
+
+
5780
+
6066
+ 		+
+ + <li> +
+
+
5781
+
6067
+ 		+
+ + "center" +
+
+
5782
+
6068
+ 		+
+ + <ul> +
+
+
5783
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-center">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5784
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-center">enum-value for PositionAlignSetting</a><span>, in §8.1</span> +
+
+
5785
+
+ 		+
+ - + <li><a href="#dom-alignsetting-center">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
+
6069
+ 		+
+ + + <li><a href="#dom-linealignsetting-center">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6070
+ 		+
+ + + <li><a href="#dom-positionalignsetting-center">enum-value for PositionAlignSetting</a><span>, in §9.1</span> +
+
+
+
6071
+ 		+
+ + + <li><a href="#dom-alignsetting-center">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
5786
+
6072
+ 		+
+ + </ul> +
+
+
5787
+
6073
+ 		+
+ + <li> +
+
+
5788
+
6074
+ 		+
+ + center +
+
+
5789
+
6075
+ 		+
+ + <ul> +
+
+
5790
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-center">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5791
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-center">enum-value for PositionAlignSetting</a><span>, in §8.1</span> +
+
+
5792
+
+ 		+
+ - + <li><a href="#dom-alignsetting-center">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
5793
+
+ 		+
+ - + </ul> +
+
+
5794
+
+ 		+
+ - + <li><a href="#collect-a-webvtt-block">collect a WebVTT block</a><span>, in §5.1</span> +
+
+
5795
+
+ 		+
+ - + <li><a href="#collect-a-webvtt-timestamp">collect a WebVTT timestamp</a><span>, in §5.3</span> +
+
+
5796
+
+ 		+
+ - + <li><a href="#collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and settings</a><span>, in §5.3</span> +
+
+
5797
+
+ 		+
+ - + <li><a href="#collect-webvtt-region-settings">collect WebVTT region settings</a><span>, in §5.2</span> +
+
+
5798
+
+ 		+
+ - + <li><a href="#consume-an-html-character-reference">consume an HTML character reference</a><span>, in §5.4</span> +
+
+
5799
+
+ 		+
+ - + <li><a href="#cue">::cue</a><span>, in §7.2.1</span> +
+
+
5800
+
+ 		+
+ - + <li><a href="#cue-computed-line">cue computed line</a><span>, in §3.1</span> +
+
+
5801
+
+ 		+
+ - + <li><a href="#cue-computed-position">cue computed position</a><span>, in §3.1</span> +
+
+
5802
+
+ 		+
+ - + <li><a href="#cue-computed-position-alignment">cue computed position alignment</a><span>, in §3.1</span> +
+
+
+
6076
+ 		+
+ + + <li><a href="#dom-linealignsetting-center">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6077
+ 		+
+ + + <li><a href="#dom-positionalignsetting-center">enum-value for PositionAlignSetting</a><span>, in §9.1</span> +
+
+
+
6078
+ 		+
+ + + <li><a href="#dom-alignsetting-center">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
+
6079
+ 		+
+ + + </ul> +
+
+
+
6080
+ 		+
+ + + <li><a href="#collect-a-webvtt-block">collect a WebVTT block</a><span>, in §6.1</span> +
+
+
+
6081
+ 		+
+ + + <li><a href="#collect-a-webvtt-timestamp">collect a WebVTT timestamp</a><span>, in §6.3</span> +
+
+
+
6082
+ 		+
+ + + <li><a href="#collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and settings</a><span>, in §6.3</span> +
+
+
+
6083
+ 		+
+ + + <li><a href="#collect-webvtt-region-settings">collect WebVTT region settings</a><span>, in §6.2</span> +
+
+
+
6084
+ 		+
+ + + <li><a href="#consume-an-html-character-reference">consume an HTML character reference</a><span>, in §6.4</span> +
+
+
+
6085
+ 		+
+ + + <li><a href="#cue">::cue</a><span>, in §8.2.1</span> +
+
+
+
6086
+ 		+
+ + + <li><a href="#cue-component-class-names">cue component class names</a><span>, in §4.2.2</span> +
+
+
+
6087
+ 		+
+ + + <li><a href="#cue-computed-line">cue computed line</a><span>, in §3.3</span> +
+
+
+
6088
+ 		+
+ + + <li><a href="#cue-computed-position">cue computed position</a><span>, in §3.3</span> +
+
+
+
6089
+ 		+
+ + + <li><a href="#cue-computed-position-alignment">cue computed position alignment</a><span>, in §3.3</span> +
+
+
5803
+
6090
+ 		+
+ + <li><a href="#cue-payload">cue payload</a><span>, in §4.1</span> +
+
+
5804
+
+ 		+
+ - + <li><a href="#cue-region">::cue-region</a><span>, in §7.2.3</span> +
+
+
5805
+
+ 		+
+ - + <li><a href="#cue-region-selector">::cue-region(selector)</a><span>, in §7.2.3</span> +
+
+
5806
+
+ 		+
+ - + <li><a href="#cue-selector">::cue(selector)</a><span>, in §7.2.1</span> +
+
+
5807
+
+ 		+
+ - + <li><a href="#enumdef-directionsetting">DirectionSetting</a><span>, in §8.1</span> +
+
+
+
6091
+ 		+
+ + + <li><a href="#cue-region">::cue-region</a><span>, in §8.2.3</span> +
+
+
+
6092
+ 		+
+ + + <li><a href="#cue-region-selector">::cue-region(selector)</a><span>, in §8.2.3</span> +
+
+
+
6093
+ 		+
+ + + <li><a href="#cue-selector">::cue(selector)</a><span>, in §8.2.1</span> +
+
+
+
6094
+ 		+
+ + + <li><a href="#cue-text">cue text</a><span>, in §3.2</span> +
+
+
+
6095
+ 		+
+ + + <li><a href="#enumdef-directionsetting">DirectionSetting</a><span>, in §9.1</span> +
+
+
5808
+
6096
+ 		+
+ + <li> +
+
+
5809
+
6097
+ 		+
+ + "end" +
+
+
5810
+
6098
+ 		+
+ + <ul> +
+
+
5811
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-end">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5812
+
+ 		+
+ - + <li><a href="#dom-alignsetting-end">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
+
6099
+ 		+
+ + + <li><a href="#dom-linealignsetting-end">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6100
+ 		+
+ + + <li><a href="#dom-alignsetting-end">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
5813
+
6101
+ 		+
+ + </ul> +
+
+
5814
+
6102
+ 		+
+ + <li> +
+
+
5815
+
6103
+ 		+
+ + end +
+
+
5816
+
6104
+ 		+
+ + <ul> +
+
+
5817
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-end">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5818
+
+ 		+
+ - + <li><a href="#dom-alignsetting-end">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
+
6105
+ 		+
+ + + <li><a href="#dom-linealignsetting-end">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6106
+ 		+
+ + + <li><a href="#dom-alignsetting-end">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
5819
+
6107
+ 		+
+ + </ul> +
+
+
5820
+
+ 		+
+ - + <li><a href="#future">:future</a><span>, in §7.2.2</span> +
+
+
5821
+
+ 		+
+ - + <li><a href="#dom-vttcue-getcueashtml">getCueAsHTML()</a><span>, in §8.1</span> +
+
+
5822
+
+ 		+
+ - + <li><a href="#html-character-reference-in-annotation-state">HTML character reference in annotation state</a><span>, in §5.4</span> +
+
+
5823
+
+ 		+
+ - + <li><a href="#html-character-reference-in-data-state">HTML character reference in data state</a><span>, in §5.4</span> +
+
+
5824
+
+ 		+
+ - + <li><a href="#dom-vttregion-id">id</a><span>, in §8.2</span> +
+
+
5825
+
+ 		+
+ - + <li><a href="#incremental-webvtt-parser">incremental WebVTT parser</a><span>, in §5.1</span> +
+
+
5826
+
+ 		+
+ - + <li><a href="#in-the-future">in the future</a><span>, in §7.2.2</span> +
+
+
5827
+
+ 		+
+ - + <li><a href="#in-the-past">in the past</a><span>, in §7.2.2</span> +
+
+
5828
+
+ 		+
+ - + <li><a href="#dom-alignsetting-left">"left"</a><span>, in §8.1</span> +
+
+
5829
+
+ 		+
+ - + <li><a href="#dom-alignsetting-left">left</a><span>, in §8.1</span> +
+
+
5830
+
+ 		+
+ - + <li><a href="#dom-vttcue-line">line</a><span>, in §8.1</span> +
+
+
5831
+
+ 		+
+ - + <li><a href="#dom-vttcue-linealign">lineAlign</a><span>, in §8.1</span> +
+
+
5832
+
+ 		+
+ - + <li><a href="#enumdef-linealignsetting">LineAlignSetting</a><span>, in §8.1</span> +
+
+
5833
+
+ 		+
+ - + <li><a href="#typedefdef-lineandpositionsetting">LineAndPositionSetting</a><span>, in §8.1</span> +
+
+
5834
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-line-left">"line-left"</a><span>, in §8.1</span> +
+
+
5835
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-line-left">line-left</a><span>, in §8.1</span> +
+
+
5836
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-line-right">"line-right"</a><span>, in §8.1</span> +
+
+
5837
+
+ 		+
+ - + <li><a href="#dom-positionalignsetting-line-right">line-right</a><span>, in §8.1</span> +
+
+
5838
+
+ 		+
+ - + <li><a href="#dom-vttregion-lines">lines</a><span>, in §8.2</span> +
+
+
5839
+
+ 		+
+ - + <li><a href="#list-of-webvtt-node-objects">List of WebVTT Node Objects</a><span>, in §5.4</span> +
+
+
5840
+
+ 		+
+ - + <li><a href="#dom-directionsetting-lr">"lr"</a><span>, in §8.1</span> +
+
+
5841
+
+ 		+
+ - + <li><a href="#dom-directionsetting-lr">lr</a><span>, in §8.1</span> +
+
+
5842
+
+ 		+
+ - + <li><a href="#parse-a-percentage-string">parse a percentage string</a><span>, in §5.2</span> +
+
+
5843
+
+ 		+
+ - + <li><a href="#parse-the-webvtt-cue-settings">parse the WebVTT cue settings</a><span>, in §5.3</span> +
+
+
5844
+
+ 		+
+ - + <li><a href="#past">:past</a><span>, in §7.2.2</span> +
+
+
5845
+
+ 		+
+ - + <li><a href="#dom-vttcue-position">position</a><span>, in §8.1</span> +
+
+
5846
+
+ 		+
+ - + <li><a href="#dom-vttcue-positionalign">positionAlign</a><span>, in §8.1</span> +
+
+
5847
+
+ 		+
+ - + <li><a href="#enumdef-positionalignsetting">PositionAlignSetting</a><span>, in §8.1</span> +
+
+
5848
+
+ 		+
+ - + <li><a href="#dom-vttcue-region">region</a><span>, in §8.1</span> +
+
+
5849
+
+ 		+
+ - + <li><a href="#dom-vttregion-regionanchorx">regionAnchorX</a><span>, in §8.2</span> +
+
+
5850
+
+ 		+
+ - + <li><a href="#dom-vttregion-regionanchory">regionAnchorY</a><span>, in §8.2</span> +
+
+
5851
+
+ 		+
+ - + <li><a href="#dom-alignsetting-right">right</a><span>, in §8.1</span> +
+
+
5852
+
+ 		+
+ - + <li><a href="#dom-alignsetting-right">"right"</a><span>, in §8.1</span> +
+
+
5853
+
+ 		+
+ - + <li><a href="#dom-directionsetting-rl">rl</a><span>, in §8.1</span> +
+
+
5854
+
+ 		+
+ - + <li><a href="#dom-directionsetting-rl">"rl"</a><span>, in §8.1</span> +
+
+
5855
+
+ 		+
+ - + <li><a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text tracks</a><span>, in §6.1</span> +
+
+
5856
+
+ 		+
+ - + <li><a href="#dom-vttregion-scroll">scroll</a><span>, in §8.2</span> +
+
+
5857
+
+ 		+
+ - + <li><a href="#enumdef-scrollsetting">ScrollSetting</a><span>, in §8.2</span> +
+
+
5858
+
+ 		+
+ - + <li><a href="#dom-vttcue-size">size</a><span>, in §8.1</span> +
+
+
5859
+
+ 		+
+ - + <li><a href="#dom-vttcue-snaptolines">snapToLines</a><span>, in §8.1</span> +
+
+
+
6108
+ 		+
+ + + <li><a href="#future">:future</a><span>, in §8.2.2</span> +
+
+
+
6109
+ 		+
+ + + <li><a href="#dom-vttcue-getcueashtml">getCueAsHTML()</a><span>, in §9.1</span> +
+
+
+
6110
+ 		+
+ + + <li><a href="#html-character-reference-in-annotation-state">HTML character reference in annotation state</a><span>, in §6.4</span> +
+
+
+
6111
+ 		+
+ + + <li><a href="#html-character-reference-in-data-state">HTML character reference in data state</a><span>, in §6.4</span> +
+
+
+
6112
+ 		+
+ + + <li><a href="#dom-vttregion-id">id</a><span>, in §9.2</span> +
+
+
+
6113
+ 		+
+ + + <li><a href="#incremental-webvtt-parser">incremental WebVTT parser</a><span>, in §6.1</span> +
+
+
+
6114
+ 		+
+ + + <li><a href="#in-the-future">in the future</a><span>, in §8.2.2</span> +
+
+
+
6115
+ 		+
+ + + <li><a href="#in-the-past">in the past</a><span>, in §8.2.2</span> +
+
+
+
6116
+ 		+
+ + + <li><a href="#dom-alignsetting-left">"left"</a><span>, in §9.1</span> +
+
+
+
6117
+ 		+
+ + + <li><a href="#dom-alignsetting-left">left</a><span>, in §9.1</span> +
+
+
+
6118
+ 		+
+ + + <li><a href="#dom-vttcue-line">line</a><span>, in §9.1</span> +
+
+
+
6119
+ 		+
+ + + <li><a href="#dom-vttcue-linealign">lineAlign</a><span>, in §9.1</span> +
+
+
+
6120
+ 		+
+ + + <li><a href="#enumdef-linealignsetting">LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6121
+ 		+
+ + + <li><a href="#typedefdef-lineandpositionsetting">LineAndPositionSetting</a><span>, in §9.1</span> +
+
+
+
6122
+ 		+
+ + + <li><a href="#dom-positionalignsetting-line-left">"line-left"</a><span>, in §9.1</span> +
+
+
+
6123
+ 		+
+ + + <li><a href="#dom-positionalignsetting-line-left">line-left</a><span>, in §9.1</span> +
+
+
+
6124
+ 		+
+ + + <li><a href="#dom-positionalignsetting-line-right">line-right</a><span>, in §9.1</span> +
+
+
+
6125
+ 		+
+ + + <li><a href="#dom-positionalignsetting-line-right">"line-right"</a><span>, in §9.1</span> +
+
+
+
6126
+ 		+
+ + + <li><a href="#dom-vttregion-lines">lines</a><span>, in §9.2</span> +
+
+
+
6127
+ 		+
+ + + <li><a href="#list-of-webvtt-node-objects">List of WebVTT Node Objects</a><span>, in §6.4</span> +
+
+
+
6128
+ 		+
+ + + <li><a href="#dom-directionsetting-lr">lr</a><span>, in §9.1</span> +
+
+
+
6129
+ 		+
+ + + <li><a href="#dom-directionsetting-lr">"lr"</a><span>, in §9.1</span> +
+
+
+
6130
+ 		+
+ + + <li><a href="#obtain-a-set-of-css-boxes">obtain a set of CSS boxes</a><span>, in §7.3</span> +
+
+
+
6131
+ 		+
+ + + <li><a href="#parse-a-percentage-string">parse a percentage string</a><span>, in §6.2</span> +
+
+
+
6132
+ 		+
+ + + <li><a href="#parse-the-webvtt-cue-settings">parse the WebVTT cue settings</a><span>, in §6.3</span> +
+
+
+
6133
+ 		+
+ + + <li><a href="#past">:past</a><span>, in §8.2.2</span> +
+
+
+
6134
+ 		+
+ + + <li><a href="#dom-vttcue-position">position</a><span>, in §9.1</span> +
+
+
+
6135
+ 		+
+ + + <li><a href="#dom-vttcue-positionalign">positionAlign</a><span>, in §9.1</span> +
+
+
+
6136
+ 		+
+ + + <li><a href="#enumdef-positionalignsetting">PositionAlignSetting</a><span>, in §9.1</span> +
+
+
+
6137
+ 		+
+ + + <li><a href="#dom-vttcue-region">region</a><span>, in §9.1</span> +
+
+
+
6138
+ 		+
+ + + <li><a href="#dom-vttregion-regionanchorx">regionAnchorX</a><span>, in §9.2</span> +
+
+
+
6139
+ 		+
+ + + <li><a href="#dom-vttregion-regionanchory">regionAnchorY</a><span>, in §9.2</span> +
+
+
+
6140
+ 		+
+ + + <li><a href="#dom-alignsetting-right">right</a><span>, in §9.1</span> +
+
+
+
6141
+ 		+
+ + + <li><a href="#dom-alignsetting-right">"right"</a><span>, in §9.1</span> +
+
+
+
6142
+ 		+
+ + + <li><a href="#dom-directionsetting-rl">rl</a><span>, in §9.1</span> +
+
+
+
6143
+ 		+
+ + + <li><a href="#dom-directionsetting-rl">"rl"</a><span>, in §9.1</span> +
+
+
+
6144
+ 		+
+ + + <li><a href="#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text tracks</a><span>, in §7.1</span> +
+
+
+
6145
+ 		+
+ + + <li><a href="#dom-vttregion-scroll">scroll</a><span>, in §9.2</span> +
+
+
+
6146
+ 		+
+ + + <li><a href="#enumdef-scrollsetting">ScrollSetting</a><span>, in §9.2</span> +
+
+
+
6147
+ 		+
+ + + <li><a href="#dom-vttcue-size">size</a><span>, in §9.1</span> +
+
+
+
6148
+ 		+
+ + + <li><a href="#dom-vttcue-snaptolines">snapToLines</a><span>, in §9.1</span> +
+
+
5860
+
6149
+ 		+
+ + <li> +
+
+
5861
+
6150
+ 		+
+ + "start" +
+
+
5862
+
6151
+ 		+
+ + <ul> +
+
+
5863
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-start">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5864
+
+ 		+
+ - + <li><a href="#dom-alignsetting-start">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
+
6152
+ 		+
+ + + <li><a href="#dom-linealignsetting-start">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6153
+ 		+
+ + + <li><a href="#dom-alignsetting-start">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
5865
+
6154
+ 		+
+ + </ul> +
+
+
5866
+
6155
+ 		+
+ + <li> +
+
+
5867
+
6156
+ 		+
+ + start +
+
+
5868
+
6157
+ 		+
+ + <ul> +
+
+
5869
+
+ 		+
+ - + <li><a href="#dom-linealignsetting-start">enum-value for LineAlignSetting</a><span>, in §8.1</span> +
+
+
5870
+
+ 		+
+ - + <li><a href="#dom-alignsetting-start">enum-value for AlignSetting</a><span>, in §8.1</span> +
+
+
+
6158
+ 		+
+ + + <li><a href="#dom-linealignsetting-start">enum-value for LineAlignSetting</a><span>, in §9.1</span> +
+
+
+
6159
+ 		+
+ + + <li><a href="#dom-alignsetting-start">enum-value for AlignSetting</a><span>, in §9.1</span> +
+
+
5871
+
6160
+ 		+
+ + </ul> +
+
+
5872
+
+ 		+
+ - + <li><a href="#dom-vttcue-text">text</a><span>, in §8.1</span> +
+
+
5873
+
+ 		+
+ - + <li><a href="#text-track-cue-text">text track cue text</a><span>, in §3.1</span> +
+
+
5874
+
+ 		+
+ - + <li><a href="#text-track-list-of-regions">text track list of regions</a><span>, in §3.2</span> +
+
+
5875
+
+ 		+
+ - + <li><a href="#text-vtt">text/vtt</a><span>, in §9.1</span> +
+
+
5876
+
+ 		+
+ - + <li><a href="#dom-scrollsetting-up">up</a><span>, in §8.2</span> +
+
+
5877
+
+ 		+
+ - + <li><a href="#dom-scrollsetting-up">"up"</a><span>, in §8.2</span> +
+
+
5878
+
+ 		+
+ - + <li><a href="#dom-vttcue-vertical">vertical</a><span>, in §8.1</span> +
+
+
5879
+
+ 		+
+ - + <li><a href="#dom-vttregion-viewportanchorx">viewportAnchorX</a><span>, in §8.2</span> +
+
+
5880
+
+ 		+
+ - + <li><a href="#dom-vttregion-viewportanchory">viewportAnchorY</a><span>, in §8.2</span> +
+
+
5881
+
+ 		+
+ - + <li><a href="#vttcue">VTTCue</a><span>, in §8.1</span> +
+
+
5882
+
+ 		+
+ - + <li><a href="#dom-vttcue-vttcue">VTTCue(startTime, endTime, text)</a><span>, in §8.1</span> +
+
+
5883
+
+ 		+
+ - + <li><a href="#dom-vttregion-vttregion">VTTRegion()</a><span>, in §8.2</span> +
+
+
5884
+
+ 		+
+ - + <li><a href="#vttregion">VTTRegion</a><span>, in §8.2</span> +
+
+
+
6161
+ 		+
+ + + <li><a href="#dom-vttcue-text">text</a><span>, in §9.1</span> +
+
+
+
6162
+ 		+
+ + + <li><a href="#text-track-list-of-regions">text track list of regions</a><span>, in §3.4</span> +
+
+
+
6163
+ 		+
+ + + <li><a href="#text-vtt">text/vtt</a><span>, in §10.1</span> +
+
+
+
6164
+ 		+
+ + + <li><a href="#dom-scrollsetting-up">up</a><span>, in §9.2</span> +
+
+
+
6165
+ 		+
+ + + <li><a href="#dom-scrollsetting-up">"up"</a><span>, in §9.2</span> +
+
+
+
6166
+ 		+
+ + + <li><a href="#user-agents-that-do-not-support-a-full-html-css-engine">User agents that do not support a full HTML CSS engine</a><span>, in §2.1</span> +
+
+
+
6167
+ 		+
+ + + <li><a href="#user-agents-that-do-not-support-css">User agents that do not support CSS</a><span>, in §2.1</span> +
+
+
+
6168
+ 		+
+ + + <li><a href="#user-agents-that-support-a-full-html-css-engine">User agents that support a full HTML CSS engine</a><span>, in §2.1</span> +
+
+
+
6169
+ 		+
+ + + <li><a href="#dom-vttcue-vertical">vertical</a><span>, in §9.1</span> +
+
+
+
6170
+ 		+
+ + + <li><a href="#dom-vttregion-viewportanchorx">viewportAnchorX</a><span>, in §9.2</span> +
+
+
+
6171
+ 		+
+ + + <li><a href="#dom-vttregion-viewportanchory">viewportAnchorY</a><span>, in §9.2</span> +
+
+
+
6172
+ 		+
+ + + <li><a href="#vttcue">VTTCue</a><span>, in §9.1</span> +
+
+
+
6173
+ 		+
+ + + <li><a href="#dom-vttcue-vttcue">VTTCue(startTime, endTime, text)</a><span>, in §9.1</span> +
+
+
+
6174
+ 		+
+ + + <li><a href="#dom-vttregion-vttregion">VTTRegion()</a><span>, in §9.2</span> +
+
+
+
6175
+ 		+
+ + + <li><a href="#vttregion">VTTRegion</a><span>, in §9.2</span> +
+
+
5885
+
6176
+ 		+
+ + <li><a href="#webvtt">WebVTT</a><span>, in §1</span> +
+
+
5886
+
6177
+ 		+
+ + <li><a href="#webvtt-alignment-cue-setting">WebVTT alignment cue setting</a><span>, in §4.4</span> +
+
+
5887
+
+ 		+
+ - + <li><a href="#webvtt-bold-object">WebVTT Bold Object</a><span>, in §5.4</span> +
+
+
5888
+
+ 		+
+ - + <li><a href="#webvtt-chapter-title-text">WebVTT chapter title text</a><span>, in §4.6.2</span> +
+
+
5889
+
+ 		+
+ - + <li><a href="#webvtt-class-object">WebVTT Class Object</a><span>, in §5.4</span> +
+
+
+
6178
+ 		+
+ + + <li><a href="#webvtt-bold-object">WebVTT Bold Object</a><span>, in §6.4</span> +
+
+
+
6179
+ 		+
+ + + <li><a href="#webvtt-caption-or-subtitle-cue">WebVTT caption or subtitle cue</a><span>, in §3.3</span> +
+
+
+
6180
+ 		+
+ + + <li><a href="#webvtt-caption-or-subtitle-cue-components">WebVTT caption or subtitle cue components</a><span>, in §4.2.2</span> +
+
+
+
6181
+ 		+
+ + + <li><a href="#webvtt-caption-or-subtitle-cue-text">WebVTT caption or subtitle cue text</a><span>, in §4.2.2</span> +
+
+
+
6182
+ 		+
+ + + <li><a href="#webvtt-chapter-cue">WebVTT chapter cue</a><span>, in §3.5</span> +
+
+
+
6183
+ 		+
+ + + <li><a href="#webvtt-chapter-title-text">WebVTT chapter title text</a><span>, in §4.2.3</span> +
+
+
+
6184
+ 		+
+ + + <li><a href="#webvtt-class-object">WebVTT Class Object</a><span>, in §6.4</span> +
+
+
5890
+
6185
+ 		+
+ + <li><a href="#webvtt-comment-block">WebVTT comment block</a><span>, in §4.1</span> +
+
+
5891
+
+ 		+
+ - + <li><a href="#webvtt-cue">WebVTT cue</a><span>, in §3.1</span> +
+
+
5892
+
+ 		+
+ - + <li><a href="#webvtt-cue-automatic-position">WebVTT cue automatic position</a><span>, in §3.1</span> +
+
+
5893
+
+ 		+
+ - + <li><a href="#webvtt-cue-background-box">WebVTT cue background box</a><span>, in §6.1</span> +
+
+
+
6186
+ 		+
+ + + <li><a href="#webvtt-cue">WebVTT cue</a><span>, in §3.2</span> +
+
+
+
6187
+ 		+
+ + + <li><a href="#webvtt-cue-automatic-position">WebVTT cue automatic position</a><span>, in §3.3</span> +
+
+
+
6188
+ 		+
+ + + <li><a href="#webvtt-cue-background-box">WebVTT cue background box</a><span>, in §7.3</span> +
+
+
5894
+
6189
+ 		+
+ + <li><a href="#webvtt-cue-block">WebVTT cue block</a><span>, in §4.1</span> +
+
+
5895
+
6190
+ 		+
+ + <li><a href="#webvtt-cue-bold-span">WebVTT cue bold span</a><span>, in §4.2.2</span> +
+
+
5896
+
+ 		+
+ - + <li><a href="#webvtt-cue-box">WebVTT cue box</a><span>, in §3.1</span> +
+
+
5897
+
+ 		+
+ - + <li><a href="#webvtt-cue-center-alignment">WebVTT cue center alignment</a><span>, in §3.1</span> +
+
+
+
6191
+ 		+
+ + + <li><a href="#webvtt-cue-box">WebVTT cue box</a><span>, in §3.3</span> +
+
+
+
6192
+ 		+
+ + + <li><a href="#webvtt-cue-center-alignment">WebVTT cue center alignment</a><span>, in §3.3</span> +
+
+
5898
+
6193
+ 		+
+ + <li><a href="#webvtt-cue-class-span">WebVTT cue class span</a><span>, in §4.2.2</span> +
+
+
5899
+
+ 		+
+ - + <li><a href="#webvtt-cue-components">WebVTT cue components</a><span>, in §4.2.2</span> +
+
+
5900
+
+ 		+
+ - + <li><a href="#webvtt-cue-end-alignment">WebVTT cue end alignment</a><span>, in §3.1</span> +
+
+
+
6194
+ 		+
+ + + <li><a href="#webvtt-cue-end-alignment">WebVTT cue end alignment</a><span>, in §3.3</span> +
+
+
+
6195
+ 		+
+ + + <li><a href="#webvtt-cue-horizontal-writing-direction">WebVTT cue horizontal writing direction</a><span>, in §3.3</span> +
+
+
5901
+
+ 		+
+ - + <li><a href="#webvtt-cue-horizontal-writing-direction">WebVTT cue horizontal writing direction</a><span>, in §3.1</span> +
+
+
5902
+
6196
+ 		+
+ + <li><a href="#webvtt-cue-identifier">WebVTT cue identifier</a><span>, in §4.1</span> +
+
+
5903
+
6197
+ 		+
+ + <li><a href="#webvtt-cue-internal-text">WebVTT cue internal text</a><span>, in §4.2.2</span> +
+
+
5904
+
6198
+ 		+
+ + <li><a href="#webvtt-cue-italics-span">WebVTT cue italics span</a><span>, in §4.2.2</span> +
+
+
5905
+
6199
+ 		+
+ + <li><a href="#webvtt-cue-language-span">WebVTT cue language span</a><span>, in §4.2.2</span> +
+
+
5906
+
+ 		+
+ - + <li><a href="#webvtt-cue-left-alignment">WebVTT cue left alignment</a><span>, in §3.1</span> +
+
+
5907
+
+ 		+
+ - + <li><a href="#webvtt-cue-line">WebVTT cue line</a><span>, in §3.1</span> +
+
+
5908
+
+ 		+
+ - + <li><a href="#webvtt-cue-line-alignment">WebVTT cue line alignment</a><span>, in §3.1</span> +
+
+
5909
+
+ 		+
+ - + <li><a href="#webvtt-cue-line-automatic">WebVTT cue line automatic</a><span>, in §3.1</span> +
+
+
5910
+
+ 		+
+ - + <li><a href="#webvtt-cue-line-center-alignment">WebVTT cue line center alignment</a><span>, in §3.1</span> +
+
+
5911
+
+ 		+
+ - + <li><a href="#webvtt-cue-line-end-alignment">WebVTT cue line end alignment</a><span>, in §3.1</span> +
+
+
5912
+
+ 		+
+ - + <li><a href="#webvtt-cue-line-start-alignment">WebVTT cue line start alignment</a><span>, in §3.1</span> +
+
+
5913
+
+ 		+
+ - + <li><a href="#webvtt-cue-position">WebVTT cue position</a><span>, in §3.1</span> +
+
+
5914
+
+ 		+
+ - + <li><a href="#webvtt-cue-position-alignment">WebVTT cue position alignment</a><span>, in §3.1</span> +
+
+
5915
+
+ 		+
+ - + <li><a href="#webvtt-cue-position-automatic-alignment">WebVTT cue position automatic alignment</a><span>, in §3.1</span> +
+
+
5916
+
+ 		+
+ - + <li><a href="#webvtt-cue-position-center-alignment">WebVTT cue position center alignment</a><span>, in §3.1</span> +
+
+
5917
+
+ 		+
+ - + <li><a href="#webvtt-cue-position-line-left-alignment">WebVTT cue position line-left alignment</a><span>, in §3.1</span> +
+
+
5918
+
+ 		+
+ - + <li><a href="#webvtt-cue-position-line-right-alignment">WebVTT cue position line-right alignment</a><span>, in §3.1</span> +
+
+
5919
+
+ 		+
+ - + <li><a href="#webvtt-cue-region">WebVTT cue region</a><span>, in §3.1</span> +
+
+
5920
+
+ 		+
+ - + <li><a href="#webvtt-cue-right-alignment">WebVTT cue right alignment</a><span>, in §3.1</span> +
+
+
+
6200
+ 		+
+ + + <li><a href="#webvtt-cue-left-alignment">WebVTT cue left alignment</a><span>, in §3.3</span> +
+
+
+
6201
+ 		+
+ + + <li><a href="#webvtt-cue-line">WebVTT cue line</a><span>, in §3.3</span> +
+
+
+
6202
+ 		+
+ + + <li><a href="#webvtt-cue-line-alignment">WebVTT cue line alignment</a><span>, in §3.3</span> +
+
+
+
6203
+ 		+
+ + + <li><a href="#webvtt-cue-line-automatic">WebVTT cue line automatic</a><span>, in §3.3</span> +
+
+
+
6204
+ 		+
+ + + <li><a href="#webvtt-cue-line-center-alignment">WebVTT cue line center alignment</a><span>, in §3.3</span> +
+
+
+
6205
+ 		+
+ + + <li><a href="#webvtt-cue-line-end-alignment">WebVTT cue line end alignment</a><span>, in §3.3</span> +
+
+
+
6206
+ 		+
+ + + <li><a href="#webvtt-cue-line-start-alignment">WebVTT cue line start alignment</a><span>, in §3.3</span> +
+
+
+
6207
+ 		+
+ + + <li><a href="#webvtt-cue-position">WebVTT cue position</a><span>, in §3.3</span> +
+
+
+
6208
+ 		+
+ + + <li><a href="#webvtt-cue-position-alignment">WebVTT cue position alignment</a><span>, in §3.3</span> +
+
+
+
6209
+ 		+
+ + + <li><a href="#webvtt-cue-position-automatic-alignment">WebVTT cue position automatic alignment</a><span>, in §3.3</span> +
+
+
+
6210
+ 		+
+ + + <li><a href="#webvtt-cue-position-center-alignment">WebVTT cue position center alignment</a><span>, in §3.3</span> +
+
+
+
6211
+ 		+
+ + + <li><a href="#webvtt-cue-position-line-left-alignment">WebVTT cue position line-left alignment</a><span>, in §3.3</span> +
+
+
+
6212
+ 		+
+ + + <li><a href="#webvtt-cue-position-line-right-alignment">WebVTT cue position line-right alignment</a><span>, in §3.3</span> +
+
+
+
6213
+ 		+
+ + + <li><a href="#webvtt-cue-region">WebVTT cue region</a><span>, in §3.3</span> +
+
+
+
6214
+ 		+
+ + + <li><a href="#webvtt-cue-right-alignment">WebVTT cue right alignment</a><span>, in §3.3</span> +
+
+
5921
+
6215
+ 		+
+ + <li><a href="#webvtt-cue-ruby-span">WebVTT cue ruby span</a><span>, in §4.2.2</span> +
+
+
5922
+
6216
+ 		+
+ + <li><a href="#webvtt-cue-ruby-text-span">WebVTT cue ruby text span</a><span>, in §4.2.2</span> +
+
+
5923
+
6217
+ 		+
+ + <li><a href="#webvtt-cue-setting">WebVTT cue setting</a><span>, in §4.1</span> +
+
+
5924
+
6218
+ 		+
+ + <li><a href="#webvtt-cue-setting-name">WebVTT cue setting name</a><span>, in §4.1</span> +
+
+
5925
+
6219
+ 		+
+ + <li><a href="#webvtt-cue-settings-list">WebVTT cue settings list</a><span>, in §4.1</span> +
+
+
5926
+
6220
+ 		+
+ + <li><a href="#webvtt-cue-setting-value">WebVTT cue setting value</a><span>, in §4.1</span> +
+
+
5927
+
+ 		+
+ - + <li><a href="#webvtt-cue-size">WebVTT cue size</a><span>, in §3.1</span> +
+
+
5928
+
+ 		+
+ - + <li><a href="#webvtt-cue-snap-to-lines-flag">WebVTT cue snap-to-lines flag</a><span>, in §3.1</span> +
+
+
+
6221
+ 		+
+ + + <li><a href="#webvtt-cue-size">WebVTT cue size</a><span>, in §3.3</span> +
+
+
+
6222
+ 		+
+ + + <li><a href="#webvtt-cue-snap-to-lines-flag">WebVTT cue snap-to-lines flag</a><span>, in §3.3</span> +
+
+
5929
+
6223
+ 		+
+ + <li><a href="#webvtt-cue-span-end-tag">WebVTT cue span end tag</a><span>, in §4.2.2</span> +
+
+
5930
+
6224
+ 		+
+ + <li><a href="#webvtt-cue-span-start-tag">WebVTT cue span start tag</a><span>, in §4.2.2</span> +
+
+
5931
+
6225
+ 		+
+ + <li><a href="#webvtt-cue-span-start-tag-annotation-text">WebVTT cue span start tag annotation text</a><span>, in §4.2.2</span> +
+
+
5932
+
+ 		+
+ - + <li><a href="#webvtt-cue-start-alignment">WebVTT cue start alignment</a><span>, in §3.1</span> +
+
+
5933
+
+ 		+
+ - + <li><a href="#webvtt-cue-text">WebVTT cue text</a><span>, in §4.2.2</span> +
+
+
5934
+
+ 		+
+ - + <li><a href="#webvtt-cue-text-alignment">WebVTT cue text alignment</a><span>, in §3.1</span> +
+
+
5935
+
+ 		+
+ - + <li><a href="#webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</a><span>, in §5.5</span> +
+
+
+
6226
+ 		+
+ + + <li><a href="#webvtt-cue-start-alignment">WebVTT cue start alignment</a><span>, in §3.3</span> +
+
+
+
6227
+ 		+
+ + + <li><a href="#webvtt-cue-text-alignment">WebVTT cue text alignment</a><span>, in §3.3</span> +
+
+
+
6228
+ 		+
+ + + <li><a href="#webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</a><span>, in §6.5</span> +
+
+
+
6229
+ 		+
+ + + <li><a href="#webvtt-cue-text-parsing-rules">WebVTT cue text parsing rules</a><span>, in §6.4</span> +
+
+
5936
+
+ 		+
+ - + <li><a href="#webvtt-cue-text-parsing-rules">WebVTT cue text parsing rules</a><span>, in §5.4</span> +
+
+
5937
+
6230
+ 		+
+ + <li><a href="#webvtt-cue-text-span">WebVTT cue text span</a><span>, in §4.2.2</span> +
+
+
5938
+
+ 		+
+ - + <li><a href="#webvtt-cue-text-tokenizer">WebVTT cue text tokenizer</a><span>, in §5.4</span> +
+
+
+
6231
+ 		+
+ + + <li><a href="#webvtt-cue-text-tokenizer">WebVTT cue text tokenizer</a><span>, in §6.4</span> +
+
+
5939
+
6232
+ 		+
+ + <li><a href="#webvtt-cue-timestamp">WebVTT cue timestamp</a><span>, in §4.2.2</span> +
+
+
5940
+
6233
+ 		+
+ + <li><a href="#webvtt-cue-timings">WebVTT cue timings</a><span>, in §4.1</span> +
+
+
5941
+
6234
+ 		+
+ + <li><a href="#webvtt-cue-underline-span">WebVTT cue underline span</a><span>, in §4.2.2</span> +
+
+
5942
+
+ 		+
+ - + <li><a href="#webvtt-cue-vertical-growing-left-writing-direction">WebVTT cue vertical growing left writing direction</a><span>, in §3.1</span> +
+
+
5943
+
+ 		+
+ - + <li><a href="#webvtt-cue-vertical-growing-right-writing-direction">WebVTT cue vertical growing right writing direction</a><span>, in §3.1</span> +
+
+
+
6235
+ 		+
+ + + <li><a href="#webvtt-cue-vertical-growing-left-writing-direction">WebVTT cue vertical growing left writing direction</a><span>, in §3.3</span> +
+
+
+
6236
+ 		+
+ + + <li><a href="#webvtt-cue-vertical-growing-right-writing-direction">WebVTT cue vertical growing right writing direction</a><span>, in §3.3</span> +
+
+
5944
+
6237
+ 		+
+ + <li><a href="#webvtt-cue-voice-span">WebVTT cue voice span</a><span>, in §4.2.2</span> +
+
+
5945
+
+ 		+
+ - + <li><a href="#webvtt-cue-writing-direction">WebVTT cue writing direction</a><span>, in §3.1</span> +
+
+
5946
+
+ 		+
+ - + <li><a href="#webvtt-data-state">WebVTT data state</a><span>, in §5.4</span> +
+
+
5947
+
+ 		+
+ - + <li><a href="#webvtt-end-tag-state">WebVTT end tag state</a><span>, in §5.4</span> +
+
+
+
6238
+ 		+
+ + + <li><a href="#webvtt-cue-writing-direction">WebVTT cue writing direction</a><span>, in §3.3</span> +
+
+
+
6239
+ 		+
+ + + <li><a href="#webvtt-data-state">WebVTT data state</a><span>, in §6.4</span> +
+
+
+
6240
+ 		+
+ + + <li><a href="#webvtt-end-tag-state">WebVTT end tag state</a><span>, in §6.4</span> +
+
+
5948
+
6241
+ 		+
+ + <li><a href="#webvtt-file">WebVTT file</a><span>, in §4.1</span> +
+
+
5949
+
6242
+ 		+
+ + <li><a href="#webvtt-file-body">WebVTT file body</a><span>, in §4.1</span> +
+
+
+
6243
+ 		+
+ + + <li><a href="#webvtt-file-using-caption-or-subtitle-cue-text">WebVTT file using caption or subtitle cue text</a><span>, in §4.6.3</span> +
+
+
5950
+
6244
+ 		+
+ + <li><a href="#webvtt-file-using-chapter-title-text">WebVTT file using chapter title text</a><span>, in §4.6.2</span> +
+
+
5951
+
+ 		+
+ - + <li><a href="#webvtt-file-using-cue-text">WebVTT file using cue text</a><span>, in §4.6.3</span> +
+
+
5952
+
6245
+ 		+
+ + <li><a href="#webvtt-file-using-metadata-content">WebVTT file using metadata content</a><span>, in §4.6.1</span> +
+
+
5953
+
6246
+ 		+
+ + <li><a href="#webvtt-file-using-only-nested-cues">WebVTT file using only nested cues</a><span>, in §4.5.1</span> +
+
+
5954
+
+ 		+
+ - + <li><a href="#webvtt-internal-node-object">WebVTT Internal Node Object</a><span>, in §5.4</span> +
+
+
5955
+
+ 		+
+ - + <li><a href="#webvtt-italic-object">WebVTT Italic Object</a><span>, in §5.4</span> +
+
+
5956
+
+ 		+
+ - + <li><a href="#webvtt-language-object">WebVTT Language Object</a><span>, in §5.4</span> +
+
+
5957
+
+ 		+
+ - + <li><a href="#webvtt-leaf-node-object">WebVTT Leaf Node Object</a><span>, in §5.4</span> +
+
+
+
6247
+ 		+
+ + + <li><a href="#webvtt-internal-node-object">WebVTT Internal Node Object</a><span>, in §6.4</span> +
+
+
+
6248
+ 		+
+ + + <li><a href="#webvtt-italic-object">WebVTT Italic Object</a><span>, in §6.4</span> +
+
+
+
6249
+ 		+
+ + + <li><a href="#webvtt-language-object">WebVTT Language Object</a><span>, in §6.4</span> +
+
+
+
6250
+ 		+
+ + + <li><a href="#webvtt-leaf-node-object">WebVTT Leaf Node Object</a><span>, in §6.4</span> +
+
+
5958
+
6251
+ 		+
+ + <li><a href="#webvtt-line-cue-setting">WebVTT line cue setting</a><span>, in §4.4</span> +
+
+
5959
+
6252
+ 		+
+ + <li><a href="#webvtt-line-terminator">WebVTT line terminator</a><span>, in §4.1</span> +
+
+
+
6253
+ 		+
+ + + <li><a href="#webvtt-metadata-cue">WebVTT metadata cue</a><span>, in §3.6</span> +
+
+
5960
+
6254
+ 		+
+ + <li><a href="#webvtt-metadata-text">WebVTT metadata text</a><span>, in §4.2.1</span> +
+
+
5961
+
+ 		+
+ - + <li><a href="#webvtt-node-object">WebVTT Node Object</a><span>, in §5.4</span> +
+
+
5962
+
+ 		+
+ - + <li><a href="#webvtt-node-objects-applicable-classes">WebVTT Node Object’s applicable classes</a><span>, in §5.4</span> +
+
+
5963
+
+ 		+
+ - + <li><a href="#webvtt-node-objects-applicable-language">WebVTT Node Object’s applicable language</a><span>, in §5.4</span> +
+
+
5964
+
+ 		+
+ - + <li><a href="#webvtt-parser">WebVTT parser</a><span>, in §5.1</span> +
+
+
5965
+
+ 		+
+ - + <li><a href="#webvtt-parser-algorithm">WebVTT parser algorithm</a><span>, in §5.1</span> +
+
+
+
6255
+ 		+
+ + + <li><a href="#webvtt-node-object">WebVTT Node Object</a><span>, in §6.4</span> +
+
+
+
6256
+ 		+
+ + + <li><a href="#webvtt-node-objects-applicable-classes">WebVTT Node Object’s applicable classes</a><span>, in §6.4</span> +
+
+
+
6257
+ 		+
+ + + <li><a href="#webvtt-node-objects-applicable-language">WebVTT Node Object’s applicable language</a><span>, in §6.4</span> +
+
+
+
6258
+ 		+
+ + + <li><a href="#webvtt-parser">WebVTT parser</a><span>, in §6.1</span> +
+
+
+
6259
+ 		+
+ + + <li><a href="#webvtt-parser-algorithm">WebVTT parser algorithm</a><span>, in §6.1</span> +
+
+
5966
+
6260
+ 		+
+ + <li><a href="#webvtt-percentage">WebVTT percentage</a><span>, in §4.1</span> +
+
+
5967
+
6261
+ 		+
+ + <li><a href="#webvtt-position-cue-setting">WebVTT position cue setting</a><span>, in §4.4</span> +
+
+
5968
+
+ 		+
+ - + <li><a href="#webvtt-region">WebVTT region</a><span>, in §3.2</span> +
+
+
5969
+
+ 		+
+ - + <li><a href="#webvtt-region-anchor">WebVTT region anchor</a><span>, in §3.2</span> +
+
+
+
6262
+ 		+
+ + + <li><a href="#webvtt-region">WebVTT region</a><span>, in §3.4</span> +
+
+
+
6263
+ 		+
+ + + <li><a href="#webvtt-region-anchor">WebVTT region anchor</a><span>, in §3.4</span> +
+
+
5970
+
6264
+ 		+
+ + <li><a href="#webvtt-region-anchor-setting">WebVTT region anchor setting</a><span>, in §4.3</span> +
+
+
5971
+
6265
+ 		+
+ + <li><a href="#webvtt-region-cue-setting">WebVTT region cue setting</a><span>, in §4.4</span> +
+
+
5972
+
6266
+ 		+
+ + <li><a href="#webvtt-region-definition-block">WebVTT region definition block</a><span>, in §4.1</span> +
+
+
5973
+
+ 		+
+ - + <li><a href="#webvtt-region-identifier">WebVTT region identifier</a><span>, in §3.2</span> +
+
+
+
6267
+ 		+
+ + + <li><a href="#webvtt-region-identifier">WebVTT region identifier</a><span>, in §3.4</span> +
+
+
5974
+
6268
+ 		+
+ + <li><a href="#webvtt-region-identifier-setting">WebVTT region identifier setting</a><span>, in §4.3</span> +
+
+
5975
+
+ 		+
+ - + <li><a href="#webvtt-region-lines">WebVTT region lines</a><span>, in §3.2</span> +
+
+
+
6269
+ 		+
+ + + <li><a href="#webvtt-region-lines">WebVTT region lines</a><span>, in §3.4</span> +
+
+
5976
+
6270
+ 		+
+ + <li><a href="#webvtt-region-lines-setting">WebVTT region lines setting</a><span>, in §4.3</span> +
+
+
5977
+
+ 		+
+ - + <li><a href="#webvtt-region-object">WebVTT region object</a><span>, in §5.2</span> +
+
+
5978
+
+ 		+
+ - + <li><a href="#webvtt-region-scroll">WebVTT region scroll</a><span>, in §3.2</span> +
+
+
5979
+
+ 		+
+ - + <li><a href="#webvtt-region-scroll-none">WebVTT region scroll none</a><span>, in §3.2</span> +
+
+
+
6271
+ 		+
+ + + <li><a href="#webvtt-region-object">WebVTT region object</a><span>, in §6.2</span> +
+
+
+
6272
+ 		+
+ + + <li><a href="#webvtt-region-scroll">WebVTT region scroll</a><span>, in §3.4</span> +
+
+
+
6273
+ 		+
+ + + <li><a href="#webvtt-region-scroll-none">WebVTT region scroll none</a><span>, in §3.4</span> +
+
+
5980
+
6274
+ 		+
+ + <li><a href="#webvtt-region-scroll-setting">WebVTT region scroll setting</a><span>, in §4.3</span> +
+
+
5981
+
+ 		+
+ - + <li><a href="#webvtt-region-scroll-up">WebVTT region scroll up</a><span>, in §3.2</span> +
+
+
+
6275
+ 		+
+ + + <li><a href="#webvtt-region-scroll-up">WebVTT region scroll up</a><span>, in §3.4</span> +
+
+
5982
+
6276
+ 		+
+ + <li><a href="#webvtt-region-settings-list">WebVTT region settings list</a><span>, in §4.3</span> +
+
+
5983
+
+ 		+
+ - + <li><a href="#webvtt-region-viewport-anchor">WebVTT region viewport anchor</a><span>, in §3.2</span> +
+
+
+
6277
+ 		+
+ + + <li><a href="#webvtt-region-viewport-anchor">WebVTT region viewport anchor</a><span>, in §3.4</span> +
+
+
5984
+
6278
+ 		+
+ + <li><a href="#webvtt-region-viewport-anchor-setting">WebVTT region viewport anchor setting</a><span>, in §4.3</span> +
+
+
5985
+
+ 		+
+ - + <li><a href="#webvtt-region-width">WebVTT region width</a><span>, in §3.2</span> +
+
+
+
6279
+ 		+
+ + + <li><a href="#webvtt-region-width">WebVTT region width</a><span>, in §3.4</span> +
+
+
5986
+
6280
+ 		+
+ + <li><a href="#webvtt-region-width-setting">WebVTT region width setting</a><span>, in §4.3</span> +
+
+
5987
+
+ 		+
+ - + <li><a href="#webvtt-ruby-object">WebVTT Ruby Object</a><span>, in §5.4</span> +
+
+
5988
+
+ 		+
+ - + <li><a href="#webvtt-ruby-text-object">WebVTT Ruby Text Object</a><span>, in §5.4</span> +
+
+
5989
+
+ 		+
+ - + <li><a href="#webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</a><span>, in §5.6</span> +
+
+
+
6281
+ 		+
+ + + <li><a href="#webvtt-ruby-object">WebVTT Ruby Object</a><span>, in §6.4</span> +
+
+
+
6282
+ 		+
+ + + <li><a href="#webvtt-ruby-text-object">WebVTT Ruby Text Object</a><span>, in §6.4</span> +
+
+
+
6283
+ 		+
+ + + <li><a href="#webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</a><span>, in §6.6</span> +
+
+
5990
+
6284
+ 		+
+ + <li><a href="#webvtt-size-cue-setting">WebVTT size cue setting</a><span>, in §4.4</span> +
+
+
5991
+
+ 		+
+ - + <li><a href="#webvtt-start-tag-annotation-state">WebVTT start tag annotation state</a><span>, in §5.4</span> +
+
+
5992
+
+ 		+
+ - + <li><a href="#webvtt-start-tag-class-state">WebVTT start tag class state</a><span>, in §5.4</span> +
+
+
5993
+
+ 		+
+ - + <li><a href="#webvtt-start-tag-state">WebVTT start tag state</a><span>, in §5.4</span> +
+
+
+
6285
+ 		+
+ + + <li><a href="#webvtt-start-tag-annotation-state">WebVTT start tag annotation state</a><span>, in §6.4</span> +
+
+
+
6286
+ 		+
+ + + <li><a href="#webvtt-start-tag-class-state">WebVTT start tag class state</a><span>, in §6.4</span> +
+
+
+
6287
+ 		+
+ + + <li><a href="#webvtt-start-tag-state">WebVTT start tag state</a><span>, in §6.4</span> +
+
+
5994
+
6288
+ 		+
+ + <li><a href="#webvtt-style-block">WebVTT style block</a><span>, in §4.1</span> +
+
+
5995
+
+ 		+
+ - + <li><a href="#webvtt-tag-state">WebVTT tag state</a><span>, in §5.4</span> +
+
+
5996
+
+ 		+
+ - + <li><a href="#webvtt-text-object">WebVTT Text Object</a><span>, in §5.4</span> +
+
+
+
6289
+ 		+
+ + + <li><a href="#webvtt-tag-state">WebVTT tag state</a><span>, in §6.4</span> +
+
+
+
6290
+ 		+
+ + + <li><a href="#webvtt-text-object">WebVTT Text Object</a><span>, in §6.4</span> +
+
+
5997
+
6291
+ 		+
+ + <li><a href="#webvtt-timestamp">WebVTT timestamp</a><span>, in §4.1</span> +
+
+
5998
+
+ 		+
+ - + <li><a href="#webvtt-timestamp-object">WebVTT Timestamp Object</a><span>, in §5.4</span> +
+
+
5999
+
+ 		+
+ - + <li><a href="#webvtt-timestamp-tag-state">WebVTT timestamp tag state</a><span>, in §5.4</span> +
+
+
6000
+
+ 		+
+ - + <li><a href="#webvtt-underline-object">WebVTT Underline Object</a><span>, in §5.4</span> +
+
+
+
6292
+ 		+
+ + + <li><a href="#webvtt-timestamp-object">WebVTT Timestamp Object</a><span>, in §6.4</span> +
+
+
+
6293
+ 		+
+ + + <li><a href="#webvtt-timestamp-tag-state">WebVTT timestamp tag state</a><span>, in §6.4</span> +
+
+
+
6294
+ 		+
+ + + <li><a href="#webvtt-underline-object">WebVTT Underline Object</a><span>, in §6.4</span> +
+
+
6001
+
6295
+ 		+
+ + <li><a href="#webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</a><span>, in §4.4</span> +
+
+
6002
+
+ 		+
+ - + <li><a href="#webvtt-voice-object">WebVTT Voice Object</a><span>, in §5.4</span> +
+
+
6003
+
+ 		+
+ - + <li><a href="#dom-vttregion-width">width</a><span>, in §8.2</span> +
+
+
+
6296
+ 		+
+ + + <li><a href="#webvtt-voice-object">WebVTT Voice Object</a><span>, in §6.4</span> +
+
+
+
6297
+ 		+
+ + + <li><a href="#dom-vttregion-width">width</a><span>, in §9.2</span> +
+
+
6004
+
6298
+ 		+
+ + </ul> +
+
+
6005
+
6299
+ 		+
+ + <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> +
+
+
6006
+
6300
+ 		+
+ + <ul class="index"> +
+
+
@@ -6012,19 +6306,21 @@
+
+
6012
+
6306
+ 		+
+ + <li> +
+
+
6013
+
6307
+ 		+
+ + <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms: +
+
+
6014
+
6308
+ 		+
+ + <ul> +
+
+
6015
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css3-background/#background">background</a> +
+
+
6016
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css3-background/#background-image">background-image</a> +
+
+
+
6309
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> +
+
+
+
6310
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-background/#propdef-background-color">background-color</a> +
+
+
+
6311
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-background/#propdef-background-image">background-image</a> +
+
+
6017
+
6312
+ 		+
+ + </ul> +
+
+
6018
+
6313
+ 		+
+ + <li> +
+
+
6019
+
6314
+ 		+
+ + <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms: +
+
+
6020
+
6315
+ 		+
+ + <ul> +
+
+
6021
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-cascade-4/#at-ruledef-import">@import</a> +
+
+
6022
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-cascade-4/#cascade">cascade</a> +
+
+
+
6316
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-cascade-4/#at-ruledef-import">@import</a> +
+
+
+
6317
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-cascade-4/#cascade">cascade</a> +
+
+
6023
+
6318
+ 		+
+ + </ul> +
+
+
6024
+
6319
+ 		+
+ + <li> +
+
+
6025
+
6320
+ 		+
+ + <a data-link-type="biblio">[css-color-4]</a> defines the following terms: +
+
+
6026
+
6321
+ 		+
+ + <ul> +
+
+
6027
+
6322
+ 		+
+ + <li><a href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> +
+
+
+
6323
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-color-4/#valdef-color-green">green</a> +
+
+
6028
+
6324
+ 		+
+ + <li><a href="https://www.w3.org/TR/css-color-4/#propdef-opacity">opacity</a> +
+
+
6029
+
6325
+ 		+
+ + </ul> +
+
+
6030
+
6326
+ 		+
+ + <li> +
+
+
@@ -6050,8 +6346,8 @@
+
+
6050
+
6346
+ 		+
+ + <li> +
+
+
6051
+
6347
+ 		+
+ + <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms: +
+
+
6052
+
6348
+ 		+
+ + <ul> +
+
+
6053
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bold">bold</a> +
+
+
6054
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic">italic</a> +
+
+
+
6349
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-fonts-4/#valdef-font-weight-bold">bold</a> +
+
+
+
6350
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-fonts-4/#valdef-font-style-italic">italic</a> +
+
+
6055
+
6351
+ 		+
+ + </ul> +
+
+
6056
+
6352
+ 		+
+ + <li> +
+
+
6057
+
6353
+ 		+
+ + <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms: +
+
+
@@ -6069,6 +6365,11 @@
+
+
6069
+
6365
+ 		+
+ + <li><a href="https://www.w3.org/TR/css3-positioning/#propdef-top">top</a> +
+
+
6070
+
6366
+ 		+
+ + </ul> +
+
+
6071
+
6367
+ 		+
+ + <li> +
+
+
+
6368
+ 		+
+ + + <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms: +
+
+
+
6369
+ 		+
+ + + <ul> +
+
+
+
6370
+ 		+
+ + + <li><a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a> +
+
+
+
6371
+ 		+
+ + + </ul> +
+
+
+
6372
+ 		+
+ + + <li> +
+
+
6072
+
6373
+ 		+
+ + <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: +
+
+
6073
+
6374
+ 		+
+ + <ul> +
+
+
6074
+
6375
+ 		+
+ + <li><a href="https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet0">parse a stylesheet</a> +
+
+
@@ -6076,16 +6377,16 @@
+
+
6076
+
6377
+ 		+
+ + <li> +
+
+
6077
+
6378
+ 		+
+ + <a data-link-type="biblio">[css-text-3]</a> defines the following terms: +
+
+
6078
+
6379
+ 		+
+ + <ul> +
+
+
6079
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
6080
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-center">center</a> +
+
+
6081
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-end">end</a> +
+
+
6082
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-left">left</a> +
+
+
6083
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css-text-3/#overflow-wrap">overflow-wrap</a> +
+
+
6084
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">pre-line</a> +
+
+
6085
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-right">right</a> +
+
+
6086
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/css-text-3/#valdef-text-align-start">start</a> +
+
+
6087
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> +
+
+
6088
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> +
+
+
+
6380
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-overflow-wrap-break-word">break-word</a> +
+
+
+
6381
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-text-align-center">center</a> +
+
+
+
6382
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-text-align-end">end</a> +
+
+
+
6383
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-text-align-left">left</a> +
+
+
+
6384
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">overflow-wrap</a> +
+
+
+
6385
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-white-space-pre-line">pre-line</a> +
+
+
+
6386
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-text-align-right">right</a> +
+
+
+
6387
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#valdef-text-align-start">start</a> +
+
+
+
6388
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#propdef-text-align">text-align</a> +
+
+
+
6389
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space</a> +
+
+
6089
+
6390
+ 		+
+ + </ul> +
+
+
6090
+
6391
+ 		+
+ + <li> +
+
+
6091
+
6392
+ 		+
+ + <a data-link-type="biblio">[css-text-decor-3]</a> defines the following terms: +
+
+
@@ -6096,13 +6397,13 @@
+
+
6096
+
6397
+ 		+
+ + <li> +
+
+
6097
+
6398
+ 		+
+ + <a data-link-type="biblio">[css-transitions-1]</a> defines the following terms: +
+
+
6098
+
6399
+ 		+
+ + <ul> +
+
+
6099
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css3-transitions/#transition-duration">transition-duration</a> +
+
+
6100
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css3-transitions/#transition-property">transition-property</a> +
+
+
+
6400
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-transitions/#propdef-transition-duration">transition-duration</a> +
+
+
+
6401
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-transitions/#propdef-transition-property">transition-property</a> +
+
+
6101
+
6402
+ 		+
+ + </ul> +
+
+
6102
+
6403
+ 		+
+ + <li> +
+
+
6103
+
+ 		+
+ - + <a data-link-type="biblio">[css-ui-3]</a> defines the following terms: +
+
+
+
6404
+ 		+
+ + + <a data-link-type="biblio">[css-ui-4]</a> defines the following terms: +
+
+
6104
+
6405
+ 		+
+ + <ul> +
+
+
6105
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/css3-ui/#propdef-outline">outline</a> +
+
+
+
6406
+ 		+
+ + + <li><a href="https://drafts.csswg.org/css-ui-4/#propdef-outline">outline</a> +
+
+
6106
+
6407
+ 		+
+ + </ul> +
+
+
6107
+
6408
+ 		+
+ + <li> +
+
+
6108
+
6409
+ 		+
+ + <a data-link-type="biblio">[CSS-VALUES]</a> defines the following terms: +
+
+
@@ -6175,22 +6476,33 @@
+
+
6175
+
6476
+ 		+
+ + <li><a href="https://www.w3.org/TR/encoding/#utf-8-decode">utf-8 decode</a> +
+
+
6176
+
6477
+ 		+
+ + </ul> +
+
+
6177
+
6478
+ 		+
+ + <li> +
+
+
+
6479
+ 		+
+ + + <a data-link-type="biblio">[HTML]</a> defines the following terms: +
+
+
+
6480
+ 		+
+ + + <ul> +
+
+
+
6481
+ 		+
+ + + <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints">presentational hints</a> +
+
+
+
6482
+ 		+
+ + + </ul> +
+
+
+
6483
+ 		+
+ + + <li> +
+
+
6178
+
6484
+ 		+
+ + <a data-link-type="biblio">[selectors-3]</a> defines the following terms: +
+
+
6179
+
6485
+ 		+
+ + <ul> +
+
+
6180
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-3/#sel-after">::after</a> +
+
+
6181
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-3/#sel-before">::before</a> +
+
+
+
6486
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-selectors/#sel-after">::after</a> +
+
+
+
6487
+ 		+
+ + + <li><a href="https://www.w3.org/TR/css3-selectors/#sel-before">::before</a> +
+
+
6182
+
6488
+ 		+
+ + </ul> +
+
+
6183
+
6489
+ 		+
+ + <li> +
+
+
6184
+
+ 		+
+ - + <a data-link-type="biblio">[selectors-4]</a> defines the following terms: +
+
+
+
6490
+ 		+
+ + + <a data-link-type="biblio">[SELECTORS4]</a> defines the following terms: +
+
+
6185
+
6491
+ 		+
+ + <ul> +
+
+
6186
+
6492
+ 		+
+ + <li><a href="https://www.w3.org/TR/selectors4/#future-pseudo">:future</a> +
+
+
6187
+
6493
+ 		+
+ + <li><a href="https://www.w3.org/TR/selectors4/#lang-pseudo">:lang()</a> +
+
+
6188
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-4/#past-pseudo">:past</a> +
+
+
6189
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-4/#attribute-selector">attribute selector</a> +
+
+
6190
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-4/#class-selector">class selector</a> +
+
+
6191
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-4/#id-selector">id selector</a> +
+
+
+
6494
+ 		+
+ + + <li><a href="https://www.w3.org/TR/selectors4/#past-pseudo">:past</a> +
+
+
+
6495
+ 		+
+ + + <li><a href="https://www.w3.org/TR/selectors4/#attribute-selector">attribute selector</a> +
+
+
+
6496
+ 		+
+ + + <li><a href="https://www.w3.org/TR/selectors4/#class-selector">class selector</a> +
+
+
+
6497
+ 		+
+ + + <li><a href="https://www.w3.org/TR/selectors4/#id-selector">id selector</a> +
+
+
6192
+
6498
+ 		+
+ + <li><a href="https://www.w3.org/TR/selectors4/#originating-element">originating element</a> +
+
+
6193
+
+ 		+
+ - + <li><a href="https://drafts.csswg.org/selectors-4/#type-selector">type selector</a> +
+
+
+
6499
+ 		+
+ + + <li><a href="https://www.w3.org/TR/selectors4/#type-selector">type selector</a> +
+
+
+
6500
+ 		+
+ + + </ul> +
+
+
+
6501
+ 		+
+ + + <li> +
+
+
+
6502
+ 		+
+ + + <a data-link-type="biblio">[WebIDL]</a> defines the following terms: +
+
+
+
6503
+ 		+
+ + + <ul> +
+
+
+
6504
+ 		+
+ + + <li><a href="https://heycam.github.io/webidl/#Exposed">Exposed</a> +
+
+
+
6505
+ 		+
+ + + <li><a href="https://heycam.github.io/webidl/#idl-unsigned-long">unsigned long</a> +
+
+
6194
+
6506
+ 		+
+ + </ul> +
+
+
6195
+
6507
+ 		+
+ + <li> +
+
+
6196
+
6508
+ 		+
+ + <a data-link-type="biblio">[WEBIDL-1]</a> defines the following terms: +
+
+
@@ -6199,7 +6511,6 @@
+
+
6199
+
6511
+ 		+
+ + <li><a href="https://www.w3.org/TR/WebIDL-1/#indexsizeerror">IndexSizeError</a> +
+
+
6200
+
6512
+ 		+
+ + <li><a href="https://www.w3.org/TR/WebIDL-1/#idl-boolean">boolean</a> +
+
+
6201
+
6513
+ 		+
+ + <li><a href="https://www.w3.org/TR/WebIDL-1/#idl-double">double</a> +
+
+
6202
+
+ 		+
+ - + <li><a href="https://www.w3.org/TR/WebIDL-1/#idl-long">long</a> +
+
+
6203
+
6514
+ 		+
+ + </ul> +
+
+
6204
+
6515
+ 		+
+ + </ul> +
+
+
6205
+
6516
+ 		+
+ + <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> +
+
+
@@ -6208,11 +6519,11 @@
+
+
6208
+
6519
+ 		+
+ + <dt id="biblio-bcp47">[BCP47] +
+
+
6209
+
6520
+ 		+
+ + <dd>A. Phillips; M. Davis. <a href="https://tools.ietf.org/html/bcp47">Tags for Identifying Languages</a>. September 2009. IETF Best Current Practice. URL: <a href="https://tools.ietf.org/html/bcp47">https://tools.ietf.org/html/bcp47</a> +
+
+
6210
+
6521
+ 		+
+ + <dt id="biblio-bidi">[BIDI] +
+
+
6211
+
+ 		+
+ - + <dd>Mark Davis; Aharon Lanin; Andrew Glass. <a href="http://www.unicode.org/reports/tr9/tr9-35.html">Unicode Bidirectional Algorithm</a>. 18 May 2016. Unicode Standard Annex #9. URL: <a href="http://www.unicode.org/reports/tr9/tr9-35.html">http://www.unicode.org/reports/tr9/tr9-35.html</a> +
+
+
+
6522
+ 		+
+ + + <dd>Mark Davis; Aharon Lanin; Andrew Glass. <a href="https://www.unicode.org/reports/tr9/tr9-37.html">Unicode Bidirectional Algorithm</a>. 14 May 2017. Unicode Standard Annex #9. URL: <a href="https://www.unicode.org/reports/tr9/tr9-37.html">https://www.unicode.org/reports/tr9/tr9-37.html</a> +
+
+
6212
+
6523
+ 		+
+ + <dt id="biblio-css-align-3">[CSS-ALIGN-3] +
+
+
6213
+
6524
+ 		+
+ + <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> +
+
+
6214
+
6525
+ 		+
+ + <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] +
+
+
6215
+
+ 		+
+ - + <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="https://www.w3.org/TR/css3-background/">https://www.w3.org/TR/css3-background/</a> +
+
+
+
6526
+ 		+
+ + + <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> +
+
+
6216
+
6527
+ 		+
+ + <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] +
+
+
6217
+
6528
+ 		+
+ + <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a> +
+
+
6218
+
6529
+ 		+
+ + <dt id="biblio-css-color-4">[CSS-COLOR-4] +
+
+
@@ -6224,11 +6535,13 @@
+
+
6224
+
6535
+ 		+
+ + <dt id="biblio-css-fonts-3">[CSS-FONTS-3] +
+
+
6225
+
6536
+ 		+
+ + <dd>John Daggett. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a> +
+
+
6226
+
6537
+ 		+
+ + <dt id="biblio-css-fonts-4">[CSS-FONTS-4] +
+
+
6227
+
+ 		+
+ - + <dd>CSS Fonts Module Level 4 URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> +
+
+
+
6538
+ 		+
+ + + <dd>John Daggett; Myles Maxfield. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a> +
+
+
6228
+
6539
+ 		+
+ + <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] +
+
+
6229
+
6540
+ 		+
+ + <dd>David Baron; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> +
+
+
6230
+
6541
+ 		+
+ + <dt id="biblio-css-position-3">[CSS-POSITION-3] +
+
+
6231
+
6542
+ 		+
+ + <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a> +
+
+
+
6543
+ 		+
+ + + <dt id="biblio-css-sizing-3">[CSS-SIZING-3] +
+
+
+
6544
+ 		+
+ + + <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a> +
+
+
6232
+
6545
+ 		+
+ + <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] +
+
+
6233
+
6546
+ 		+
+ + <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> +
+
+
6234
+
6547
+ 		+
+ + <dt id="biblio-css-text-3">[CSS-TEXT-3] +
+
+
@@ -6238,19 +6551,19 @@
+
+
6238
+
6551
+ 		+
+ + <dt id="biblio-css-text-decor-3">[CSS-TEXT-DECOR-3] +
+
+
6239
+
6552
+ 		+
+ + <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a> +
+
+
6240
+
6553
+ 		+
+ + <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] +
+
+
6241
+
+ 		+
+ - + <dd>CSS Transitions Module Level 1 URL: <a href="https://www.w3.org/TR/css3-transitions/">https://www.w3.org/TR/css3-transitions/</a> +
+
+
6242
+
+ 		+
+ - + <dt id="biblio-css-ui-3">[CSS-UI-3] +
+
+
6243
+
+ 		+
+ - + <dd>Tantek Çelik; Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-3/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a>. URL: <a href="https://www.w3.org/TR/css-ui-3/">https://www.w3.org/TR/css-ui-3/</a> +
+
+
+
6554
+ 		+
+ + + <dd>David Baron; Dean Jackson; Brian Birtles. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a> +
+
+
+
6555
+ 		+
+ + + <dt id="biblio-css-ui-4">[CSS-UI-4] +
+
+
+
6556
+ 		+
+ + + <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a> +
+
+
6244
+
6557
+ 		+
+ + <dt id="biblio-css-values">[CSS-VALUES] +
+
+
6245
+
6558
+ 		+
+ + <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> +
+
+
6246
+
6559
+ 		+
+ + <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] +
+
+
6247
+
6560
+ 		+
+ + <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> +
+
+
6248
+
6561
+ 		+
+ + <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] +
+
+
6249
+
+ 		+
+ - + <dd>CSS Writing Modes Module Level 4 URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> +
+
+
+
6562
+ 		+
+ + + <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> +
+
+
6250
+
6563
+ 		+
+ + <dt id="biblio-css22">[CSS22] +
+
+
6251
+
6564
+ 		+
+ + <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/">Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</a>. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> +
+
+
6252
+
6565
+ 		+
+ + <dt id="biblio-css3-color">[CSS3-COLOR] +
+
+
6253
+
+ 		+
+ - + <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css3-color">CSS Color Module Level 3</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/css3-color">https://www.w3.org/TR/css3-color</a> +
+
+
+
6566
+ 		+
+ + + <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 5 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a> +
+
+
6254
+
6567
+ 		+
+ + <dt id="biblio-css3-ruby">[CSS3-RUBY] +
+
+
6255
+
6568
+ 		+
+ + <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-ruby-1/">CSS Ruby Layout Module Level 1</a>. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a> +
+
+
6256
+
6569
+ 		+
+ + <dt id="biblio-cssom">[CSSOM] +
+
+
@@ -6259,6 +6572,8 @@
+
+
6259
+
6572
+ 		+
+ + <dd>Anne van Kesteren; et al. <a href="https://www.w3.org/TR/2015/REC-dom-20151119/">W3C DOM4</a>. 19 November 2015. REC. URL: <a href="https://www.w3.org/TR/2015/REC-dom-20151119/">https://www.w3.org/TR/2015/REC-dom-20151119/</a> +
+
+
6260
+
6573
+ 		+
+ + <dt id="biblio-encoding-cr">[ENCODING-CR] +
+
+
6261
+
6574
+ 		+
+ + <dd>Anne van Kesteren; Joshua Bell; Addison Phillips. <a href="https://www.w3.org/TR/2017/CR-encoding-20170413/">Encoding</a>. 13 April 2017. CR. URL: <a href="https://www.w3.org/TR/2017/CR-encoding-20170413/">https://www.w3.org/TR/2017/CR-encoding-20170413/</a> +
+
+
+
6575
+ 		+
+ + + <dt id="biblio-html">[HTML] +
+
+
+
6576
+ 		+
+ + + <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> +
+
+
6262
+
6577
+ 		+
+ + <dt id="biblio-html51">[HTML51] +
+
+
6263
+
6578
+ 		+
+ + <dd>Steve Faulkner; et al. <a href="https://www.w3.org/TR/html51/">HTML 5.1 2nd Edition</a>. URL: <a href="https://www.w3.org/TR/html51/">https://www.w3.org/TR/html51/</a> +
+
+
6264
+
6579
+ 		+
+ + <dt id="biblio-rfc2119">[RFC2119] +
+
+
@@ -6266,11 +6581,11 @@
+
+
6266
+
6581
+ 		+
+ + <dt id="biblio-rfc3629">[RFC3629] +
+
+
6267
+
6582
+ 		+
+ + <dd>F. Yergeau. <a href="https://tools.ietf.org/html/rfc3629">UTF-8, a transformation format of ISO 10646</a>. November 2003. Internet Standard. URL: <a href="https://tools.ietf.org/html/rfc3629">https://tools.ietf.org/html/rfc3629</a> +
+
+
6268
+
6583
+ 		+
+ + <dt id="biblio-selectors-3">[SELECTORS-3] +
+
+
6269
+
+ 		+
+ - + <dd>Selectors Level 3 URL: <a href="https://www.w3.org/TR/css3-selectors/">https://www.w3.org/TR/css3-selectors/</a> +
+
+
+
6584
+ 		+
+ + + <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> +
+
+
6270
+
+ 		+
+ - + <dt id="biblio-selectors-4">[SELECTORS-4] +
+
+
6271
+
+ 		+
+ - + <dd>Selectors Level 4 URL: <a href="https://www.w3.org/TR/selectors4/">https://www.w3.org/TR/selectors4/</a> +
+
+
6272
+
6585
+ 		+
+ + <dt id="biblio-selectors4">[SELECTORS4] +
+
+
6273
+
+ 		+
+ - + <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors4/">Selectors Level 4</a>. 2 May 2013. WD. URL: <a href="https://www.w3.org/TR/selectors4/">https://www.w3.org/TR/selectors4/</a> +
+
+
+
6586
+ 		+
+ + + <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> +
+
+
+
6587
+ 		+
+ + + <dt id="biblio-webidl">[WebIDL] +
+
+
+
6588
+ 		+
+ + + <dd>Cameron McCormack; Boris Zbarsky; Tobie Langel. <a href="https://heycam.github.io/webidl/">Web IDL</a>. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a> +
+
+
6274
+
6589
+ 		+
+ + <dt id="biblio-webidl-1">[WEBIDL-1] +
+
+
6275
+
6590
+ 		+
+ + <dd>Cameron McCormack. <a href="https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/">WebIDL Level 1</a>. URL: <a href="https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/">https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/</a> +
+
+
6276
+
6591
+ 		+
+ + </dl> +
+
+
@@ -6278,6 +6593,8 @@
+
+
6278
+
6593
+ 		+
+ + <dl> +
+
+
6279
+
6594
+ 		+
+ + <dt id="biblio-maur">[MAUR] +
+
+
6280
+
6595
+ 		+
+ + <dd>Shane McCarron; Michael Cooper; Mark Sadecki. <a href="http://www.w3.org/TR/media-accessibility-reqs/">Media Accessibility User Requirements</a>. WD. URL: <a href="http://www.w3.org/TR/media-accessibility-reqs/">http://www.w3.org/TR/media-accessibility-reqs/</a> +
+
+
+
6596
+ 		+
+ + + <dt id="biblio-wcag20">[WCAG20] +
+
+
+
6597
+ 		+
+ + + <dd>Ben Caldwell; et al. <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a>. 11 December 2008. REC. URL: <a href="https://www.w3.org/TR/WCAG20/">https://www.w3.org/TR/WCAG20/</a> +
+
+
6281
+
6598
+ 		+
+ + </dl> +
+
+
6282
+
6599
+ 		+
+ + <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2> +
+
+
6283
+
6600
+ 		+
+ + <pre class="idl highlight def"><span class="kt">enum</span> <a class="nv" href="#enumdef-autokeyword"><code>AutoKeyword</code></a> { <a class="s" href="#dom-autokeyword-auto"><code>"auto"</code></a> }; +
+
+
@@ -6286,7 +6603,8 @@
+
+
6286
+
6603
+ 		+
+ + <span class="kt">enum</span> <a class="nv" href="#enumdef-linealignsetting"><code>LineAlignSetting</code></a> { <a class="s" href="#dom-linealignsetting-start"><code>"start"</code></a>, <a class="s" href="#dom-linealignsetting-center"><code>"center"</code></a>, <a class="s" href="#dom-linealignsetting-end"><code>"end"</code></a> }; +
+
+
6287
+
6604
+ 		+
+ + <span class="kt">enum</span> <a class="nv" href="#enumdef-positionalignsetting"><code>PositionAlignSetting</code></a> { <a class="s" href="#dom-positionalignsetting-line-left"><code>"line-left"</code></a>, <a class="s" href="#dom-positionalignsetting-center"><code>"center"</code></a>, <a class="s" href="#dom-positionalignsetting-line-right"><code>"line-right"</code></a>, <a class="s" href="#dom-positionalignsetting-auto"><code>"auto"</code></a> }; +
+
+
6288
+
6605
+ 		+
+ + <span class="kt">enum</span> <a class="nv" href="#enumdef-alignsetting"><code>AlignSetting</code></a> { <a class="s" href="#dom-alignsetting-start"><code>"start"</code></a>, <a class="s" href="#dom-alignsetting-center"><code>"center"</code></a>, <a class="s" href="#dom-alignsetting-end"><code>"end"</code></a>, <a class="s" href="#dom-alignsetting-left"><code>"left"</code></a>, <a class="s" href="#dom-alignsetting-right"><code>"right"</code></a> }; +
+
+
6289
+
+ 		+
+ - + [<a class="nv idl-code" data-link-type="constructor" href="#dom-vttcue-vttcue">Constructor</a>(<a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-starttime"><code>startTime</code></a>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-endtime"><code>endTime</code></a>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-text"><code>text</code></a>)] +
+
+
+
6606
+ 		+
+ + + [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Window</span>, +
+
+
+
6607
+ 		+
+ + + <a class="nv idl-code" data-link-type="constructor" href="#dom-vttcue-vttcue">Constructor</a>(<a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-starttime"><code>startTime</code></a>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-endtime"><code>endTime</code></a>, <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <a class="nv" href="#dom-vttcue-vttcue-starttime-endtime-text-text"><code>text</code></a>)] +
+
+
6290
+
6608
+ 		+
+ + <span class="kt">interface</span> <a class="nv" href="#vttcue"><code>VTTCue</code></a> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#texttrackcue-texttrackcue">TextTrackCue</a> { +
+
+
6291
+
6609
+ 		+
+ + <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="#vttregion">VTTRegion</a>? <a class="nv idl-code" data-link-type="attribute" data-type="VTTRegion?" href="#dom-vttcue-region">region</a>; +
+
+
6292
+
6610
+ 		+
+ + <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="#enumdef-directionsetting">DirectionSetting</a> <a class="nv idl-code" data-link-type="attribute" data-type="DirectionSetting" href="#dom-vttcue-vertical">vertical</a>; +
+
+
@@ -6302,11 +6620,12 @@
+
+
6302
+
6620
+ 		+
+ + }; +
+
+
6303
+
6621
+ 		+
+ +
+
+
6304
+
6622
+ 		+
+ + <span class="kt">enum</span> <a class="nv" href="#enumdef-scrollsetting"><code>ScrollSetting</code></a> { <a class="s" href="#dom-scrollsetting"><code>""</code></a> /* none */, <a class="s" href="#dom-scrollsetting-up"><code>"up"</code></a> }; +
+
+
6305
+
+ 		+
+ - + [<a class="nv idl-code" data-link-type="constructor" href="#dom-vttregion-vttregion">Constructor</a>] +
+
+
+
6623
+ 		+
+ + + [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Window</span>, +
+
+
+
6624
+ 		+
+ + + <a class="nv idl-code" data-link-type="constructor" href="#dom-vttregion-vttregion">Constructor</a>] +
+
+
6306
+
6625
+ 		+
+ + <span class="kt">interface</span> <a class="nv" href="#vttregion"><code>VTTRegion</code></a> { +
+
+
6307
+
6626
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMString"><span class="kt">DOMString</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-vttregion-id">id</a>; +
+
+
6308
+
6627
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-width">width</a>; +
+
+
6309
+
+ 		+
+ - + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-long"><span class="kt">long</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="long" href="#dom-vttregion-lines">lines</a>; +
+
+
+
6628
+ 		+
+ + + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long"><span class="kt">unsigned</span> <span class="kt">long</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="#dom-vttregion-lines">lines</a>; +
+
+
6310
+
6629
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-regionanchorx">regionAnchorX</a>; +
+
+
6311
+
6630
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-regionanchory">regionAnchorY</a>; +
+
+
6312
+
6631
+ 		+
+ + <span class="kt">attribute</span> <a class="n idl-code" data-link-type="interface" href="https://www.w3.org/TR/WebIDL-1/#idl-double"><span class="kt">double</span></a> <a class="nv idl-code" data-link-type="attribute" data-type="double" href="#dom-vttregion-viewportanchorx">viewportAnchorX</a>; +
+
+
@@ -6321,400 +6640,434 @@
+
+
6321
+
6640
+ 		+
+ + <li><a href="#ref-for-webvtt-1">2.1. Conformance classes</a> +
+
+
6322
+
6641
+ 		+
+ + </ul> +
+
+
6323
+
6642
+ 		+
+ + </aside> +
+
+
+
6643
+ 		+
+ + + <aside class="dfn-panel" data-for="user-agents-that-do-not-support-css"> +
+
+
+
6644
+ 		+
+ + + <b><a href="#user-agents-that-do-not-support-css">#user-agents-that-do-not-support-css</a></b><b>Referenced in:</b> +
+
+
+
6645
+ 		+
+ + + <ul> +
+
+
+
6646
+ 		+
+ + + <li><a href="#ref-for-user-agents-that-do-not-support-css-1">7. Rendering</a> +
+
+
+
6647
+ 		+
+ + + <li><a href="#ref-for-user-agents-that-do-not-support-css-2">8. CSS extensions</a> +
+
+
+
6648
+ 		+
+ + + </ul> +
+
+
+
6649
+ 		+
+ + + </aside> +
+
+
+
6650
+ 		+
+ + + <aside class="dfn-panel" data-for="user-agents-that-do-not-support-a-full-html-css-engine"> +
+
+
+
6651
+ 		+
+ + + <b><a href="#user-agents-that-do-not-support-a-full-html-css-engine">#user-agents-that-do-not-support-a-full-html-css-engine</a></b><b>Referenced in:</b> +
+
+
+
6652
+ 		+
+ + + <ul> +
+
+
+
6653
+ 		+
+ + + <li><a href="#ref-for-user-agents-that-do-not-support-a-full-html-css-engine-1">2.1. Conformance classes</a> +
+
+
+
6654
+ 		+
+ + + <li><a href="#ref-for-user-agents-that-do-not-support-a-full-html-css-engine-2">7. Rendering</a> +
+
+
+
6655
+ 		+
+ + + </ul> +
+
+
+
6656
+ 		+
+ + + </aside> +
+
+
6324
+
6657
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue"> +
+
+
6325
+
6658
+ 		+
+ + <b><a href="#webvtt-cue">#webvtt-cue</a></b><b>Referenced in:</b> +
+
+
6326
+
6659
+ 		+
+ + <ul> +
+
+
6327
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-2">(2)</a> <a href="#ref-for-webvtt-cue-3">(3)</a> <a href="#ref-for-webvtt-cue-4">(4)</a> <a href="#ref-for-webvtt-cue-5">(5)</a> <a href="#ref-for-webvtt-cue-6">(6)</a> <a href="#ref-for-webvtt-cue-7">(7)</a> <a href="#ref-for-webvtt-cue-8">(8)</a> <a href="#ref-for-webvtt-cue-9">(9)</a> <a href="#ref-for-webvtt-cue-10">(10)</a> <a href="#ref-for-webvtt-cue-11">(11)</a> +
+
+
6328
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-12">3.2. WebVTT regions</a> +
+
+
6329
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-13">4.1. WebVTT file structure</a> +
+
+
6330
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-14">5.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-cue-15">(2)</a> <a href="#ref-for-webvtt-cue-16">(3)</a> <a href="#ref-for-webvtt-cue-17">(4)</a> <a href="#ref-for-webvtt-cue-18">(5)</a> +
+
+
6331
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-19">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6332
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-20">5.5. WebVTT cue text DOM construction rules</a> +
+
+
6333
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-21">5.6. WebVTT rules for extracting the chapter +
+
+
+
6660
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-1">1.1. A simple caption file</a> +
+
+
+
6661
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-2">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-3">(2)</a> <a href="#ref-for-webvtt-cue-4">(3)</a> <a href="#ref-for-webvtt-cue-5">(4)</a> <a href="#ref-for-webvtt-cue-6">(5)</a> <a href="#ref-for-webvtt-cue-7">(6)</a> <a href="#ref-for-webvtt-cue-8">(7)</a> <a href="#ref-for-webvtt-cue-9">(8)</a> <a href="#ref-for-webvtt-cue-10">(9)</a> <a href="#ref-for-webvtt-cue-11">(10)</a> <a href="#ref-for-webvtt-cue-12">(11)</a> <a href="#ref-for-webvtt-cue-13">(12)</a> +
+
+
+
6662
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-14">3.5. WebVTT chapter cues</a> +
+
+
+
6663
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-15">3.6. WebVTT metadata cues</a> +
+
+
+
6664
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-16">4.1. WebVTT file structure</a> +
+
+
+
6665
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-17">4.3. WebVTT region settings</a> +
+
+
+
6666
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-18">6.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-cue-19">(2)</a> <a href="#ref-for-webvtt-cue-20">(3)</a> <a href="#ref-for-webvtt-cue-21">(4)</a> <a href="#ref-for-webvtt-cue-22">(5)</a> +
+
+
+
6667
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-23">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6668
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-24">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
6669
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-25">6.6. WebVTT rules for extracting the chapter +
+
+
6334
+
6670
+ 		+
+ + title</a> +
+
+
6335
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-22">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-23">(2)</a> +
+
+
6336
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-24">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-cue-25">(2)</a> +
+
+
6337
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-26">7.2. Processing model</a> <a href="#ref-for-webvtt-cue-27">(2)</a> <a href="#ref-for-webvtt-cue-28">(3)</a> +
+
+
6338
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-29">7.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-cue-30">(2)</a> +
+
+
6339
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-31">7.2.3. The ::cue-region pseudo-element</a> +
+
+
6340
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-32">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-33">(2)</a> <a href="#ref-for-webvtt-cue-34">(3)</a> <a href="#ref-for-webvtt-cue-35">(4)</a> <a href="#ref-for-webvtt-cue-36">(5)</a> <a href="#ref-for-webvtt-cue-37">(6)</a> <a href="#ref-for-webvtt-cue-38">(7)</a> <a href="#ref-for-webvtt-cue-39">(8)</a> <a href="#ref-for-webvtt-cue-40">(9)</a> <a href="#ref-for-webvtt-cue-41">(10)</a> <a href="#ref-for-webvtt-cue-42">(11)</a> <a href="#ref-for-webvtt-cue-43">(12)</a> +
+
+
+
6671
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-26">7.1. Processing model</a> <a href="#ref-for-webvtt-cue-27">(2)</a> +
+
+
+
6672
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-28">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-cue-29">(2)</a> +
+
+
+
6673
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-30">8.2. Processing model</a> <a href="#ref-for-webvtt-cue-31">(2)</a> <a href="#ref-for-webvtt-cue-32">(3)</a> +
+
+
+
6674
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-33">8.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-cue-34">(2)</a> +
+
+
+
6675
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-35">8.2.3. The ::cue-region pseudo-element</a> +
+
+
+
6676
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-36">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-37">(2)</a> <a href="#ref-for-webvtt-cue-38">(3)</a> <a href="#ref-for-webvtt-cue-39">(4)</a> <a href="#ref-for-webvtt-cue-40">(5)</a> <a href="#ref-for-webvtt-cue-41">(6)</a> <a href="#ref-for-webvtt-cue-42">(7)</a> <a href="#ref-for-webvtt-cue-43">(8)</a> <a href="#ref-for-webvtt-cue-44">(9)</a> <a href="#ref-for-webvtt-cue-45">(10)</a> <a href="#ref-for-webvtt-cue-46">(11)</a> <a href="#ref-for-webvtt-cue-47">(12)</a> +
+
+
+
6677
+ 		+
+ + + </ul> +
+
+
+
6678
+ 		+
+ + + </aside> +
+
+
+
6679
+ 		+
+ + + <aside class="dfn-panel" data-for="cue-text"> +
+
+
+
6680
+ 		+
+ + + <b><a href="#cue-text">#cue-text</a></b><b>Referenced in:</b> +
+
+
+
6681
+ 		+
+ + + <ul> +
+
+
+
6682
+ 		+
+ + + <li><a href="#ref-for-cue-text-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-cue-text-2">(2)</a> <a href="#ref-for-cue-text-3">(3)</a> +
+
+
+
6683
+ 		+
+ + + <li><a href="#ref-for-cue-text-4">3.5. WebVTT chapter cues</a> +
+
+
+
6684
+ 		+
+ + + <li><a href="#ref-for-cue-text-5">3.6. WebVTT metadata cues</a> +
+
+
+
6685
+ 		+
+ + + <li><a href="#ref-for-cue-text-6">4.2.3. WebVTT chapter title text</a> +
+
+
+
6686
+ 		+
+ + + <li><a href="#ref-for-cue-text-7">6.1. WebVTT file parsing</a> <a href="#ref-for-cue-text-8">(2)</a> +
+
+
+
6687
+ 		+
+ + + <li><a href="#ref-for-cue-text-9">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-cue-text-10">(2)</a> +
+
+
+
6688
+ 		+
+ + + <li><a href="#ref-for-cue-text-11">6.6. WebVTT rules for extracting the chapter +
+
+
+
6689
+ 		+
+ + + title</a> +
+
+
+
6690
+ 		+
+ + + <li><a href="#ref-for-cue-text-12">7.1. Processing model</a> +
+
+
+
6691
+ 		+
+ + + <li><a href="#ref-for-cue-text-13">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6692
+ 		+
+ + + <li><a href="#ref-for-cue-text-14">9.1. The VTTCue interface</a> <a href="#ref-for-cue-text-15">(2)</a> <a href="#ref-for-cue-text-16">(3)</a> <a href="#ref-for-cue-text-17">(4)</a> <a href="#ref-for-cue-text-18">(5)</a> <a href="#ref-for-cue-text-19">(6)</a> <a href="#ref-for-cue-text-20">(7)</a> <a href="#ref-for-cue-text-21">(8)</a> +
+
+
6341
+
6693
+ 		+
+ + </ul> +
+
+
6342
+
6694
+ 		+
+ + </aside> +
+
+
6343
+
+ 		+
+ - + <aside class="dfn-panel" data-for="text-track-cue-text"> +
+
+
6344
+
+ 		+
+ - + <b><a href="#text-track-cue-text">#text-track-cue-text</a></b><b>Referenced in:</b> +
+
+
6345
+
+ 		+
+ - + <ul> +
+
+
6346
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-1">3.1. WebVTT cues</a> +
+
+
6347
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-2">5.1. WebVTT file parsing</a> <a href="#ref-for-text-track-cue-text-3">(2)</a> +
+
+
+
6695
+ 		+
+ + + <aside class="dfn-panel" data-for="webvtt-caption-or-subtitle-cue"> +
+
+
+
6696
+ 		+
+ + + <b><a href="#webvtt-caption-or-subtitle-cue">#webvtt-caption-or-subtitle-cue</a></b><b>Referenced in:</b> +
+
+
+
6697
+ 		+
+ + + <ul> +
+
+
+
6698
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-1">3.4. WebVTT caption or subtitle regions</a> +
+
+
+
6699
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-2">7. Rendering</a> +
+
+
6348
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-4">5.6. WebVTT rules for extracting the chapter +
+
+
6349
+
+ 		+
+ - + title</a> +
+
+
6350
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-5">6.1. Processing model</a> +
+
+
6351
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6352
+
+ 		+
+ - + <li><a href="#ref-for-text-track-cue-text-7">8.1. The VTTCue interface</a> <a href="#ref-for-text-track-cue-text-8">(2)</a> <a href="#ref-for-text-track-cue-text-9">(3)</a> <a href="#ref-for-text-track-cue-text-10">(4)</a> <a href="#ref-for-text-track-cue-text-11">(5)</a> <a href="#ref-for-text-track-cue-text-12">(6)</a> <a href="#ref-for-text-track-cue-text-13">(7)</a> <a href="#ref-for-text-track-cue-text-14">(8)</a> +
+
+
6353
+
6700
+ 		+
+ + </ul> +
+
+
6354
+
6701
+ 		+
+ + </aside> +
+
+
6355
+
6702
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-box"> +
+
+
6356
+
6703
+ 		+
+ + <b><a href="#webvtt-cue-box">#webvtt-cue-box</a></b><b>Referenced in:</b> +
+
+
6357
+
6704
+ 		+
+ + <ul> +
+
+
6358
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-box-1">1.4. Other features</a> <a href="#ref-for-webvtt-cue-box-2">(2)</a> <a href="#ref-for-webvtt-cue-box-3">(3)</a> <a href="#ref-for-webvtt-cue-box-4">(4)</a> <a href="#ref-for-webvtt-cue-box-5">(5)</a> +
+
+
6359
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-box-6">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-box-7">(2)</a> <a href="#ref-for-webvtt-cue-box-8">(3)</a> <a href="#ref-for-webvtt-cue-box-9">(4)</a> <a href="#ref-for-webvtt-cue-box-10">(5)</a> <a href="#ref-for-webvtt-cue-box-11">(6)</a> <a href="#ref-for-webvtt-cue-box-12">(7)</a> <a href="#ref-for-webvtt-cue-box-13">(8)</a> <a href="#ref-for-webvtt-cue-box-14">(9)</a> <a href="#ref-for-webvtt-cue-box-15">(10)</a> <a href="#ref-for-webvtt-cue-box-16">(11)</a> <a href="#ref-for-webvtt-cue-box-17">(12)</a> <a href="#ref-for-webvtt-cue-box-18">(13)</a> <a href="#ref-for-webvtt-cue-box-19">(14)</a> <a href="#ref-for-webvtt-cue-box-20">(15)</a> <a href="#ref-for-webvtt-cue-box-21">(16)</a> <a href="#ref-for-webvtt-cue-box-22">(17)</a> <a href="#ref-for-webvtt-cue-box-23">(18)</a> +
+
+
+
6705
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-box-1">1.4. Other caption and subtitling features</a> <a href="#ref-for-webvtt-cue-box-2">(2)</a> <a href="#ref-for-webvtt-cue-box-3">(3)</a> <a href="#ref-for-webvtt-cue-box-4">(4)</a> <a href="#ref-for-webvtt-cue-box-5">(5)</a> +
+
+
+
6706
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-box-6">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-box-7">(2)</a> <a href="#ref-for-webvtt-cue-box-8">(3)</a> <a href="#ref-for-webvtt-cue-box-9">(4)</a> <a href="#ref-for-webvtt-cue-box-10">(5)</a> <a href="#ref-for-webvtt-cue-box-11">(6)</a> <a href="#ref-for-webvtt-cue-box-12">(7)</a> <a href="#ref-for-webvtt-cue-box-13">(8)</a> <a href="#ref-for-webvtt-cue-box-14">(9)</a> <a href="#ref-for-webvtt-cue-box-15">(10)</a> <a href="#ref-for-webvtt-cue-box-16">(11)</a> <a href="#ref-for-webvtt-cue-box-17">(12)</a> <a href="#ref-for-webvtt-cue-box-18">(13)</a> <a href="#ref-for-webvtt-cue-box-19">(14)</a> <a href="#ref-for-webvtt-cue-box-20">(15)</a> <a href="#ref-for-webvtt-cue-box-21">(16)</a> <a href="#ref-for-webvtt-cue-box-22">(17)</a> <a href="#ref-for-webvtt-cue-box-23">(18)</a> +
+
+
6360
+
6707
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-box-24">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-cue-box-25">(2)</a> <a href="#ref-for-webvtt-cue-box-26">(3)</a> +
+
+
6361
+
6708
+ 		+
+ + </ul> +
+
+
6362
+
6709
+ 		+
+ + </aside> +
+
+
6363
+
6710
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-writing-direction"> +
+
+
6364
+
6711
+ 		+
+ + <b><a href="#webvtt-cue-writing-direction">#webvtt-cue-writing-direction</a></b><b>Referenced in:</b> +
+
+
6365
+
6712
+ 		+
+ + <ul> +
+
+
6366
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-writing-direction-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-3">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-4">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-5">(5)</a> <a href="#ref-for-webvtt-cue-writing-direction-6">(6)</a> <a href="#ref-for-webvtt-cue-writing-direction-7">(7)</a> <a href="#ref-for-webvtt-cue-writing-direction-8">(8)</a> <a href="#ref-for-webvtt-cue-writing-direction-9">(9)</a> <a href="#ref-for-webvtt-cue-writing-direction-10">(10)</a> <a href="#ref-for-webvtt-cue-writing-direction-11">(11)</a> +
+
+
+
6713
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-writing-direction-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-3">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-4">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-5">(5)</a> <a href="#ref-for-webvtt-cue-writing-direction-6">(6)</a> <a href="#ref-for-webvtt-cue-writing-direction-7">(7)</a> <a href="#ref-for-webvtt-cue-writing-direction-8">(8)</a> <a href="#ref-for-webvtt-cue-writing-direction-9">(9)</a> <a href="#ref-for-webvtt-cue-writing-direction-10">(10)</a> <a href="#ref-for-webvtt-cue-writing-direction-11">(11)</a> +
+
+
6367
+
6714
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-writing-direction-12">4.4. WebVTT cue settings</a> +
+
+
6368
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-writing-direction-13">5.1. WebVTT file parsing</a> +
+
+
6369
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-writing-direction-14">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-writing-direction-15">(2)</a> +
+
+
6370
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-writing-direction-16">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-writing-direction-17">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-18">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-19">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-20">(5)</a> <a href="#ref-for-webvtt-cue-writing-direction-21">(6)</a> <a href="#ref-for-webvtt-cue-writing-direction-22">(7)</a> <a href="#ref-for-webvtt-cue-writing-direction-23">(8)</a> <a href="#ref-for-webvtt-cue-writing-direction-24">(9)</a> <a href="#ref-for-webvtt-cue-writing-direction-25">(10)</a> <a href="#ref-for-webvtt-cue-writing-direction-26">(11)</a> <a href="#ref-for-webvtt-cue-writing-direction-27">(12)</a> <a href="#ref-for-webvtt-cue-writing-direction-28">(13)</a> <a href="#ref-for-webvtt-cue-writing-direction-29">(14)</a> <a href="#ref-for-webvtt-cue-writing-direction-30">(15)</a> <a href="#ref-for-webvtt-cue-writing-direction-31">(16)</a> <a href="#ref-for-webvtt-cue-writing-direction-32">(17)</a> <a href="#ref-for-webvtt-cue-writing-direction-33">(18)</a> <a href="#ref-for-webvtt-cue-writing-direction-34">(19)</a> +
+
+
6371
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-writing-direction-35">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-writing-direction-36">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-37">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-38">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-39">(5)</a> +
+
+
+
6715
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-writing-direction-13">6.1. WebVTT file parsing</a> +
+
+
+
6716
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-writing-direction-14">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-writing-direction-15">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-16">(3)</a> +
+
+
+
6717
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-writing-direction-17">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-writing-direction-18">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-19">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-20">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-21">(5)</a> <a href="#ref-for-webvtt-cue-writing-direction-22">(6)</a> <a href="#ref-for-webvtt-cue-writing-direction-23">(7)</a> <a href="#ref-for-webvtt-cue-writing-direction-24">(8)</a> <a href="#ref-for-webvtt-cue-writing-direction-25">(9)</a> <a href="#ref-for-webvtt-cue-writing-direction-26">(10)</a> <a href="#ref-for-webvtt-cue-writing-direction-27">(11)</a> <a href="#ref-for-webvtt-cue-writing-direction-28">(12)</a> <a href="#ref-for-webvtt-cue-writing-direction-29">(13)</a> <a href="#ref-for-webvtt-cue-writing-direction-30">(14)</a> <a href="#ref-for-webvtt-cue-writing-direction-31">(15)</a> <a href="#ref-for-webvtt-cue-writing-direction-32">(16)</a> <a href="#ref-for-webvtt-cue-writing-direction-33">(17)</a> +
+
+
+
6718
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-writing-direction-34">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-writing-direction-35">(2)</a> <a href="#ref-for-webvtt-cue-writing-direction-36">(3)</a> <a href="#ref-for-webvtt-cue-writing-direction-37">(4)</a> <a href="#ref-for-webvtt-cue-writing-direction-38">(5)</a> +
+
+
6372
+
6719
+ 		+
+ + </ul> +
+
+
6373
+
6720
+ 		+
+ + </aside> +
+
+
6374
+
6721
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-horizontal-writing-direction"> +
+
+
6375
+
6722
+ 		+
+ + <b><a href="#webvtt-cue-horizontal-writing-direction">#webvtt-cue-horizontal-writing-direction</a></b><b>Referenced in:</b> +
+
+
6376
+
6723
+ 		+
+ + <ul> +
+
+
6377
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-3">(3)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-4">(4)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-5">(5)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-6">(6)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-7">(7)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-8">(8)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-9">(9)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-10">(10)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-11">(11)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-12">(12)</a> +
+
+
6378
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-13">5.1. WebVTT file parsing</a> +
+
+
6379
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-14">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-15">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-16">(3)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-17">(4)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-18">(5)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-19">(6)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-20">(7)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-21">(8)</a> +
+
+
6380
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-22">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-23">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-24">(3)</a> +
+
+
+
6724
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-3">(3)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-4">(4)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-5">(5)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-6">(6)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-7">(7)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-8">(8)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-9">(9)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-10">(10)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-11">(11)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-12">(12)</a> +
+
+
+
6725
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-13">6.1. WebVTT file parsing</a> +
+
+
+
6726
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-14">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6727
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-15">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-16">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-17">(3)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-18">(4)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-19">(5)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-20">(6)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-21">(7)</a> +
+
+
+
6728
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-horizontal-writing-direction-22">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-23">(2)</a> <a href="#ref-for-webvtt-cue-horizontal-writing-direction-24">(3)</a> +
+
+
6381
+
6729
+ 		+
+ + </ul> +
+
+
6382
+
6730
+ 		+
+ + </aside> +
+
+
6383
+
6731
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-vertical-growing-left-writing-direction"> +
+
+
6384
+
6732
+ 		+
+ + <b><a href="#webvtt-cue-vertical-growing-left-writing-direction">#webvtt-cue-vertical-growing-left-writing-direction</a></b><b>Referenced in:</b> +
+
+
6385
+
6733
+ 		+
+ + <ul> +
+
+
6386
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-3">(3)</a> +
+
+
6387
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-4">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6388
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-5">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">(3)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">(4)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">(5)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">(6)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">(7)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-12">(8)</a> +
+
+
6389
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-13">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-14">(2)</a> +
+
+
+
6734
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-3">(3)</a> +
+
+
+
6735
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-4">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6736
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-5">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">(3)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">(4)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">(5)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">(6)</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">(7)</a> +
+
+
+
6737
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-12">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-vertical-growing-left-writing-direction-13">(2)</a> +
+
+
6390
+
6738
+ 		+
+ + </ul> +
+
+
6391
+
6739
+ 		+
+ + </aside> +
+
+
6392
+
6740
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-vertical-growing-right-writing-direction"> +
+
+
6393
+
6741
+ 		+
+ + <b><a href="#webvtt-cue-vertical-growing-right-writing-direction">#webvtt-cue-vertical-growing-right-writing-direction</a></b><b>Referenced in:</b> +
+
+
6394
+
6742
+ 		+
+ + <ul> +
+
+
6395
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-3">(3)</a> +
+
+
6396
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-4">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6397
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-5">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">(3)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">(4)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">(5)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">(6)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">(7)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-12">(8)</a> +
+
+
6398
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-13">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-14">(2)</a> +
+
+
+
6743
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-2">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-3">(3)</a> +
+
+
+
6744
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-4">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6745
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-5">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">(2)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">(3)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">(4)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">(5)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">(6)</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">(7)</a> +
+
+
+
6746
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-12">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-vertical-growing-right-writing-direction-13">(2)</a> +
+
+
6399
+
6747
+ 		+
+ + </ul> +
+
+
6400
+
6748
+ 		+
+ + </aside> +
+
+
6401
+
6749
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-snap-to-lines-flag"> +
+
+
6402
+
6750
+ 		+
+ + <b><a href="#webvtt-cue-snap-to-lines-flag">#webvtt-cue-snap-to-lines-flag</a></b><b>Referenced in:</b> +
+
+
6403
+
6751
+ 		+
+ + <ul> +
+
+
6404
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-2">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-3">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-4">(4)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-5">(5)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-6">(6)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-7">(7)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-8">(8)</a> +
+
+
6405
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-9">5.1. WebVTT file parsing</a> +
+
+
6406
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-10">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6407
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-11">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-12">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-13">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-14">(4)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-15">(5)</a> +
+
+
6408
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-16">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-17">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-18">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-19">(4)</a> +
+
+
+
6752
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-2">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-3">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-4">(4)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-5">(5)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-6">(6)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-7">(7)</a> +
+
+
+
6753
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-8">6.1. WebVTT file parsing</a> +
+
+
+
6754
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-9">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6755
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-10">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-11">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-12">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-13">(4)</a> +
+
+
+
6756
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-snap-to-lines-flag-14">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-15">(2)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-16">(3)</a> <a href="#ref-for-webvtt-cue-snap-to-lines-flag-17">(4)</a> +
+
+
6409
+
6757
+ 		+
+ + </ul> +
+
+
6410
+
6758
+ 		+
+ + </aside> +
+
+
6411
+
6759
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line"> +
+
+
6412
+
6760
+ 		+
+ + <b><a href="#webvtt-cue-line">#webvtt-cue-line</a></b><b>Referenced in:</b> +
+
+
6413
+
6761
+ 		+
+ + <ul> +
+
+
6414
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-line-2">(2)</a> <a href="#ref-for-webvtt-cue-line-3">(3)</a> <a href="#ref-for-webvtt-cue-line-4">(4)</a> <a href="#ref-for-webvtt-cue-line-5">(5)</a> <a href="#ref-for-webvtt-cue-line-6">(6)</a> <a href="#ref-for-webvtt-cue-line-7">(7)</a> <a href="#ref-for-webvtt-cue-line-8">(8)</a> <a href="#ref-for-webvtt-cue-line-9">(9)</a> <a href="#ref-for-webvtt-cue-line-10">(10)</a> <a href="#ref-for-webvtt-cue-line-11">(11)</a> <a href="#ref-for-webvtt-cue-line-12">(12)</a> <a href="#ref-for-webvtt-cue-line-13">(13)</a> <a href="#ref-for-webvtt-cue-line-14">(14)</a> <a href="#ref-for-webvtt-cue-line-15">(15)</a> <a href="#ref-for-webvtt-cue-line-16">(16)</a> <a href="#ref-for-webvtt-cue-line-17">(17)</a> <a href="#ref-for-webvtt-cue-line-18">(18)</a> <a href="#ref-for-webvtt-cue-line-19">(19)</a> <a href="#ref-for-webvtt-cue-line-20">(20)</a> +
+
+
6415
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-21">5.1. WebVTT file parsing</a> +
+
+
6416
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-22">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6417
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-23">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-24">(2)</a> <a href="#ref-for-webvtt-cue-line-25">(3)</a> <a href="#ref-for-webvtt-cue-line-26">(4)</a> +
+
+
+
6762
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-line-2">(2)</a> <a href="#ref-for-webvtt-cue-line-3">(3)</a> <a href="#ref-for-webvtt-cue-line-4">(4)</a> <a href="#ref-for-webvtt-cue-line-5">(5)</a> <a href="#ref-for-webvtt-cue-line-6">(6)</a> <a href="#ref-for-webvtt-cue-line-7">(7)</a> <a href="#ref-for-webvtt-cue-line-8">(8)</a> <a href="#ref-for-webvtt-cue-line-9">(9)</a> <a href="#ref-for-webvtt-cue-line-10">(10)</a> <a href="#ref-for-webvtt-cue-line-11">(11)</a> <a href="#ref-for-webvtt-cue-line-12">(12)</a> <a href="#ref-for-webvtt-cue-line-13">(13)</a> <a href="#ref-for-webvtt-cue-line-14">(14)</a> <a href="#ref-for-webvtt-cue-line-15">(15)</a> <a href="#ref-for-webvtt-cue-line-16">(16)</a> <a href="#ref-for-webvtt-cue-line-17">(17)</a> <a href="#ref-for-webvtt-cue-line-18">(18)</a> <a href="#ref-for-webvtt-cue-line-19">(19)</a> <a href="#ref-for-webvtt-cue-line-20">(20)</a> +
+
+
+
6763
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-21">6.1. WebVTT file parsing</a> +
+
+
+
6764
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-22">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-line-23">(2)</a> +
+
+
+
6765
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-24">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-25">(2)</a> <a href="#ref-for-webvtt-cue-line-26">(3)</a> <a href="#ref-for-webvtt-cue-line-27">(4)</a> +
+
+
6418
+
6766
+ 		+
+ + </ul> +
+
+
6419
+
6767
+ 		+
+ + </aside> +
+
+
6420
+
6768
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line-automatic"> +
+
+
6421
+
6769
+ 		+
+ + <b><a href="#webvtt-cue-line-automatic">#webvtt-cue-line-automatic</a></b><b>Referenced in:</b> +
+
+
6422
+
6770
+ 		+
+ + <ul> +
+
+
6423
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-automatic-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-line-automatic-2">(2)</a> <a href="#ref-for-webvtt-cue-line-automatic-3">(3)</a> +
+
+
6424
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-automatic-4">5.1. WebVTT file parsing</a> +
+
+
6425
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-automatic-5">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-automatic-6">(2)</a> <a href="#ref-for-webvtt-cue-line-automatic-7">(3)</a> <a href="#ref-for-webvtt-cue-line-automatic-8">(4)</a> +
+
+
+
6771
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-automatic-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-line-automatic-2">(2)</a> <a href="#ref-for-webvtt-cue-line-automatic-3">(3)</a> +
+
+
+
6772
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-automatic-4">6.1. WebVTT file parsing</a> +
+
+
+
6773
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-automatic-5">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6774
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-automatic-6">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-automatic-7">(2)</a> <a href="#ref-for-webvtt-cue-line-automatic-8">(3)</a> <a href="#ref-for-webvtt-cue-line-automatic-9">(4)</a> +
+
+
6426
+
6775
+ 		+
+ + </ul> +
+
+
6427
+
6776
+ 		+
+ + </aside> +
+
+
6428
+
6777
+ 		+
+ + <aside class="dfn-panel" data-for="cue-computed-line"> +
+
+
6429
+
6778
+ 		+
+ + <b><a href="#cue-computed-line">#cue-computed-line</a></b><b>Referenced in:</b> +
+
+
6430
+
6779
+ 		+
+ + <ul> +
+
+
6431
+
+ 		+
+ - + <li><a href="#ref-for-cue-computed-line-1">3.1. WebVTT cues</a> +
+
+
6432
+
+ 		+
+ - + <li><a href="#ref-for-cue-computed-line-2">6.1. Processing model</a> <a href="#ref-for-cue-computed-line-3">(2)</a> <a href="#ref-for-cue-computed-line-4">(3)</a> +
+
+
+
6780
+ 		+
+ + + <li><a href="#ref-for-cue-computed-line-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
+
6781
+ 		+
+ + + <li><a href="#ref-for-cue-computed-line-2">7.2. Processing cue settings</a> <a href="#ref-for-cue-computed-line-3">(2)</a> <a href="#ref-for-cue-computed-line-4">(3)</a> +
+
+
6433
+
6782
+ 		+
+ + </ul> +
+
+
6434
+
6783
+ 		+
+ + </aside> +
+
+
6435
+
6784
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line-alignment"> +
+
+
6436
+
6785
+ 		+
+ + <b><a href="#webvtt-cue-line-alignment">#webvtt-cue-line-alignment</a></b><b>Referenced in:</b> +
+
+
6437
+
6786
+ 		+
+ + <ul> +
+
+
6438
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-line-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-4">(4)</a> +
+
+
+
6787
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-line-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-4">(4)</a> +
+
+
6439
+
6788
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-line-alignment-5">4.4. WebVTT cue settings</a> +
+
+
6440
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-alignment-6">5.1. WebVTT file parsing</a> +
+
+
6441
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-alignment-7">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-line-alignment-8">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-9">(3)</a> +
+
+
6442
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-alignment-10">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-line-alignment-11">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-12">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-13">(4)</a> +
+
+
6443
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-alignment-14">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-alignment-15">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-16">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-17">(4)</a> <a href="#ref-for-webvtt-cue-line-alignment-18">(5)</a> +
+
+
+
6789
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-alignment-6">6.1. WebVTT file parsing</a> +
+
+
+
6790
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-alignment-7">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-line-alignment-8">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-9">(3)</a> +
+
+
+
6791
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-alignment-10">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-line-alignment-11">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-12">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-13">(4)</a> +
+
+
+
6792
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-alignment-14">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-alignment-15">(2)</a> <a href="#ref-for-webvtt-cue-line-alignment-16">(3)</a> <a href="#ref-for-webvtt-cue-line-alignment-17">(4)</a> <a href="#ref-for-webvtt-cue-line-alignment-18">(5)</a> +
+
+
6444
+
6793
+ 		+
+ + </ul> +
+
+
6445
+
6794
+ 		+
+ + </aside> +
+
+
6446
+
6795
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line-start-alignment"> +
+
+
6447
+
6796
+ 		+
+ + <b><a href="#webvtt-cue-line-start-alignment">#webvtt-cue-line-start-alignment</a></b><b>Referenced in:</b> +
+
+
6448
+
6797
+ 		+
+ + <ul> +
+
+
6449
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-start-alignment-1">3.1. WebVTT cues</a> +
+
+
+
6798
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-start-alignment-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
6450
+
6799
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-line-start-alignment-2">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-cue-line-start-alignment-3">(2)</a> +
+
+
6451
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-start-alignment-4">5.1. WebVTT file parsing</a> +
+
+
6452
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-start-alignment-5">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6453
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-start-alignment-6">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-start-alignment-7">(2)</a> <a href="#ref-for-webvtt-cue-line-start-alignment-8">(3)</a> +
+
+
+
6800
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-start-alignment-4">6.1. WebVTT file parsing</a> +
+
+
+
6801
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-start-alignment-5">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6802
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-start-alignment-6">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-start-alignment-7">(2)</a> <a href="#ref-for-webvtt-cue-line-start-alignment-8">(3)</a> +
+
+
6454
+
6803
+ 		+
+ + </ul> +
+
+
6455
+
6804
+ 		+
+ + </aside> +
+
+
6456
+
6805
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line-center-alignment"> +
+
+
6457
+
6806
+ 		+
+ + <b><a href="#webvtt-cue-line-center-alignment">#webvtt-cue-line-center-alignment</a></b><b>Referenced in:</b> +
+
+
6458
+
6807
+ 		+
+ + <ul> +
+
+
6459
+
6808
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-line-center-alignment-1">4.4. WebVTT cue settings</a> +
+
+
6460
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-center-alignment-2">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6461
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-center-alignment-3">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-line-center-alignment-4">(2)</a> +
+
+
6462
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-center-alignment-5">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-center-alignment-6">(2)</a> +
+
+
+
6809
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-center-alignment-2">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6810
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-center-alignment-3">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-line-center-alignment-4">(2)</a> +
+
+
+
6811
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-center-alignment-5">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-center-alignment-6">(2)</a> +
+
+
6463
+
6812
+ 		+
+ + </ul> +
+
+
6464
+
6813
+ 		+
+ + </aside> +
+
+
6465
+
6814
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-line-end-alignment"> +
+
+
6466
+
6815
+ 		+
+ + <b><a href="#webvtt-cue-line-end-alignment">#webvtt-cue-line-end-alignment</a></b><b>Referenced in:</b> +
+
+
6467
+
6816
+ 		+
+ + <ul> +
+
+
6468
+
6817
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-line-end-alignment-1">4.4. WebVTT cue settings</a> +
+
+
6469
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-end-alignment-2">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6470
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-end-alignment-3">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-line-end-alignment-4">(2)</a> +
+
+
6471
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-line-end-alignment-5">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-end-alignment-6">(2)</a> +
+
+
+
6818
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-end-alignment-2">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6819
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-end-alignment-3">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-line-end-alignment-4">(2)</a> +
+
+
+
6820
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-line-end-alignment-5">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-line-end-alignment-6">(2)</a> +
+
+
6472
+
6821
+ 		+
+ + </ul> +
+
+
6473
+
6822
+ 		+
+ + </aside> +
+
+
6474
+
6823
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position"> +
+
+
6475
+
6824
+ 		+
+ + <b><a href="#webvtt-cue-position">#webvtt-cue-position</a></b><b>Referenced in:</b> +
+
+
6476
+
6825
+ 		+
+ + <ul> +
+
+
6477
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-position-2">(2)</a> <a href="#ref-for-webvtt-cue-position-3">(3)</a> <a href="#ref-for-webvtt-cue-position-4">(4)</a> <a href="#ref-for-webvtt-cue-position-5">(5)</a> <a href="#ref-for-webvtt-cue-position-6">(6)</a> <a href="#ref-for-webvtt-cue-position-7">(7)</a> <a href="#ref-for-webvtt-cue-position-8">(8)</a> <a href="#ref-for-webvtt-cue-position-9">(9)</a> <a href="#ref-for-webvtt-cue-position-10">(10)</a> <a href="#ref-for-webvtt-cue-position-11">(11)</a> <a href="#ref-for-webvtt-cue-position-12">(12)</a> <a href="#ref-for-webvtt-cue-position-13">(13)</a> <a href="#ref-for-webvtt-cue-position-14">(14)</a> <a href="#ref-for-webvtt-cue-position-15">(15)</a> <a href="#ref-for-webvtt-cue-position-16">(16)</a> <a href="#ref-for-webvtt-cue-position-17">(17)</a> <a href="#ref-for-webvtt-cue-position-18">(18)</a> <a href="#ref-for-webvtt-cue-position-19">(19)</a> +
+
+
6478
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-20">5.1. WebVTT file parsing</a> +
+
+
6479
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-21">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-position-22">(2)</a> +
+
+
6480
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-23">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-24">(2)</a> <a href="#ref-for-webvtt-cue-position-25">(3)</a> <a href="#ref-for-webvtt-cue-position-26">(4)</a> +
+
+
+
6826
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-position-2">(2)</a> <a href="#ref-for-webvtt-cue-position-3">(3)</a> <a href="#ref-for-webvtt-cue-position-4">(4)</a> <a href="#ref-for-webvtt-cue-position-5">(5)</a> <a href="#ref-for-webvtt-cue-position-6">(6)</a> <a href="#ref-for-webvtt-cue-position-7">(7)</a> <a href="#ref-for-webvtt-cue-position-8">(8)</a> <a href="#ref-for-webvtt-cue-position-9">(9)</a> <a href="#ref-for-webvtt-cue-position-10">(10)</a> <a href="#ref-for-webvtt-cue-position-11">(11)</a> <a href="#ref-for-webvtt-cue-position-12">(12)</a> <a href="#ref-for-webvtt-cue-position-13">(13)</a> <a href="#ref-for-webvtt-cue-position-14">(14)</a> <a href="#ref-for-webvtt-cue-position-15">(15)</a> <a href="#ref-for-webvtt-cue-position-16">(16)</a> <a href="#ref-for-webvtt-cue-position-17">(17)</a> <a href="#ref-for-webvtt-cue-position-18">(18)</a> <a href="#ref-for-webvtt-cue-position-19">(19)</a> +
+
+
+
6827
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-20">6.1. WebVTT file parsing</a> +
+
+
+
6828
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-21">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-position-22">(2)</a> +
+
+
+
6829
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-23">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-24">(2)</a> <a href="#ref-for-webvtt-cue-position-25">(3)</a> <a href="#ref-for-webvtt-cue-position-26">(4)</a> +
+
+
6481
+
6830
+ 		+
+ + </ul> +
+
+
6482
+
6831
+ 		+
+ + </aside> +
+
+
6483
+
6832
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-automatic-position"> +
+
+
6484
+
6833
+ 		+
+ + <b><a href="#webvtt-cue-automatic-position">#webvtt-cue-automatic-position</a></b><b>Referenced in:</b> +
+
+
6485
+
6834
+ 		+
+ + <ul> +
+
+
6486
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-automatic-position-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-automatic-position-2">(2)</a> <a href="#ref-for-webvtt-cue-automatic-position-3">(3)</a> <a href="#ref-for-webvtt-cue-automatic-position-4">(4)</a> <a href="#ref-for-webvtt-cue-automatic-position-5">(5)</a> +
+
+
6487
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-automatic-position-6">5.1. WebVTT file parsing</a> +
+
+
6488
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-automatic-position-7">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6489
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-automatic-position-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-automatic-position-9">(2)</a> <a href="#ref-for-webvtt-cue-automatic-position-10">(3)</a> <a href="#ref-for-webvtt-cue-automatic-position-11">(4)</a> +
+
+
+
6835
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-automatic-position-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-automatic-position-2">(2)</a> <a href="#ref-for-webvtt-cue-automatic-position-3">(3)</a> <a href="#ref-for-webvtt-cue-automatic-position-4">(4)</a> <a href="#ref-for-webvtt-cue-automatic-position-5">(5)</a> +
+
+
+
6836
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-automatic-position-6">6.1. WebVTT file parsing</a> +
+
+
+
6837
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-automatic-position-7">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6838
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-automatic-position-8">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-automatic-position-9">(2)</a> <a href="#ref-for-webvtt-cue-automatic-position-10">(3)</a> <a href="#ref-for-webvtt-cue-automatic-position-11">(4)</a> +
+
+
6490
+
6839
+ 		+
+ + </ul> +
+
+
6491
+
6840
+ 		+
+ + </aside> +
+
+
6492
+
6841
+ 		+
+ + <aside class="dfn-panel" data-for="cue-computed-position"> +
+
+
6493
+
6842
+ 		+
+ + <b><a href="#cue-computed-position">#cue-computed-position</a></b><b>Referenced in:</b> +
+
+
6494
+
6843
+ 		+
+ + <ul> +
+
+
6495
+
+ 		+
+ - + <li><a href="#ref-for-cue-computed-position-1">6.1. Processing model</a> <a href="#ref-for-cue-computed-position-2">(2)</a> <a href="#ref-for-cue-computed-position-3">(3)</a> <a href="#ref-for-cue-computed-position-4">(4)</a> <a href="#ref-for-cue-computed-position-5">(5)</a> <a href="#ref-for-cue-computed-position-6">(6)</a> <a href="#ref-for-cue-computed-position-7">(7)</a> <a href="#ref-for-cue-computed-position-8">(8)</a> <a href="#ref-for-cue-computed-position-9">(9)</a> <a href="#ref-for-cue-computed-position-10">(10)</a> <a href="#ref-for-cue-computed-position-11">(11)</a> <a href="#ref-for-cue-computed-position-12">(12)</a> <a href="#ref-for-cue-computed-position-13">(13)</a> +
+
+
+
6844
+ 		+
+ + + <li><a href="#ref-for-cue-computed-position-1">7.1. Processing model</a> +
+
+
+
6845
+ 		+
+ + + <li><a href="#ref-for-cue-computed-position-2">7.2. Processing cue settings</a> <a href="#ref-for-cue-computed-position-3">(2)</a> <a href="#ref-for-cue-computed-position-4">(3)</a> <a href="#ref-for-cue-computed-position-5">(4)</a> <a href="#ref-for-cue-computed-position-6">(5)</a> <a href="#ref-for-cue-computed-position-7">(6)</a> <a href="#ref-for-cue-computed-position-8">(7)</a> <a href="#ref-for-cue-computed-position-9">(8)</a> <a href="#ref-for-cue-computed-position-10">(9)</a> <a href="#ref-for-cue-computed-position-11">(10)</a> <a href="#ref-for-cue-computed-position-12">(11)</a> <a href="#ref-for-cue-computed-position-13">(12)</a> +
+
+
6496
+
6846
+ 		+
+ + </ul> +
+
+
6497
+
6847
+ 		+
+ + </aside> +
+
+
6498
+
6848
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position-alignment"> +
+
+
6499
+
6849
+ 		+
+ + <b><a href="#webvtt-cue-position-alignment">#webvtt-cue-position-alignment</a></b><b>Referenced in:</b> +
+
+
6500
+
6850
+ 		+
+ + <ul> +
+
+
6501
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-position-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-position-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-position-alignment-5">(5)</a> <a href="#ref-for-webvtt-cue-position-alignment-6">(6)</a> +
+
+
6502
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-alignment-7">5.1. WebVTT file parsing</a> +
+
+
6503
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-alignment-8">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-position-alignment-9">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-10">(3)</a> +
+
+
6504
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-alignment-11">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-alignment-12">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-13">(3)</a> <a href="#ref-for-webvtt-cue-position-alignment-14">(4)</a> <a href="#ref-for-webvtt-cue-position-alignment-15">(5)</a> +
+
+
+
6851
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-position-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-position-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-position-alignment-5">(5)</a> <a href="#ref-for-webvtt-cue-position-alignment-6">(6)</a> +
+
+
+
6852
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-alignment-7">6.1. WebVTT file parsing</a> +
+
+
+
6853
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-alignment-8">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-position-alignment-9">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-10">(3)</a> +
+
+
+
6854
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-alignment-11">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-alignment-12">(2)</a> <a href="#ref-for-webvtt-cue-position-alignment-13">(3)</a> <a href="#ref-for-webvtt-cue-position-alignment-14">(4)</a> <a href="#ref-for-webvtt-cue-position-alignment-15">(5)</a> +
+
+
6505
+
6855
+ 		+
+ + </ul> +
+
+
6506
+
6856
+ 		+
+ + </aside> +
+
+
6507
+
6857
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position-line-left-alignment"> +
+
+
6508
+
6858
+ 		+
+ + <b><a href="#webvtt-cue-position-line-left-alignment">#webvtt-cue-position-line-left-alignment</a></b><b>Referenced in:</b> +
+
+
6509
+
6859
+ 		+
+ + <ul> +
+
+
6510
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-2">(2)</a> +
+
+
6511
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-3">4.4. WebVTT cue settings</a> +
+
+
6512
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-4">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6513
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-5">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-6">(2)</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-7">(3)</a> +
+
+
6514
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-9">(2)</a> +
+
+
+
6860
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-4">(4)</a> +
+
+
+
6861
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-5">4.4. WebVTT cue settings</a> +
+
+
+
6862
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-6">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6863
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-7">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-8">(2)</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-9">(3)</a> +
+
+
+
6864
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-left-alignment-10">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-line-left-alignment-11">(2)</a> +
+
+
6515
+
6865
+ 		+
+ + </ul> +
+
+
6516
+
6866
+ 		+
+ + </aside> +
+
+
6517
+
6867
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position-center-alignment"> +
+
+
6518
+
6868
+ 		+
+ + <b><a href="#webvtt-cue-position-center-alignment">#webvtt-cue-position-center-alignment</a></b><b>Referenced in:</b> +
+
+
6519
+
6869
+ 		+
+ + <ul> +
+
+
6520
+
6870
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-position-center-alignment-1">4.4. WebVTT cue settings</a> +
+
+
6521
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-center-alignment-2">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6522
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-center-alignment-3">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-position-center-alignment-4">(2)</a> <a href="#ref-for-webvtt-cue-position-center-alignment-5">(3)</a> <a href="#ref-for-webvtt-cue-position-center-alignment-6">(4)</a> <a href="#ref-for-webvtt-cue-position-center-alignment-7">(5)</a> +
+
+
6523
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-center-alignment-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-center-alignment-9">(2)</a> +
+
+
+
6871
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-center-alignment-2">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6872
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-center-alignment-3">7.1. Processing model</a> +
+
+
+
6873
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-center-alignment-4">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-position-center-alignment-5">(2)</a> <a href="#ref-for-webvtt-cue-position-center-alignment-6">(3)</a> <a href="#ref-for-webvtt-cue-position-center-alignment-7">(4)</a> +
+
+
+
6874
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-center-alignment-8">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-center-alignment-9">(2)</a> +
+
+
6524
+
6875
+ 		+
+ + </ul> +
+
+
6525
+
6876
+ 		+
+ + </aside> +
+
+
6526
+
6877
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position-line-right-alignment"> +
+
+
6527
+
6878
+ 		+
+ + <b><a href="#webvtt-cue-position-line-right-alignment">#webvtt-cue-position-line-right-alignment</a></b><b>Referenced in:</b> +
+
+
6528
+
6879
+ 		+
+ + <ul> +
+
+
6529
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-1">3.1. WebVTT cues</a> +
+
+
6530
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-2">4.4. WebVTT cue settings</a> +
+
+
6531
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-3">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6532
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-4">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-5">(2)</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-6">(3)</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-7">(4)</a> +
+
+
6533
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-9">(2)</a> +
+
+
+
6880
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-3">(3)</a> +
+
+
+
6881
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-4">4.4. WebVTT cue settings</a> +
+
+
+
6882
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-5">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6883
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-6">7.1. Processing model</a> +
+
+
+
6884
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-7">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-8">(2)</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-9">(3)</a> +
+
+
+
6885
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-line-right-alignment-10">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-line-right-alignment-11">(2)</a> +
+
+
6534
+
6886
+ 		+
+ + </ul> +
+
+
6535
+
6887
+ 		+
+ + </aside> +
+
+
6536
+
6888
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-position-automatic-alignment"> +
+
+
6537
+
6889
+ 		+
+ + <b><a href="#webvtt-cue-position-automatic-alignment">#webvtt-cue-position-automatic-alignment</a></b><b>Referenced in:</b> +
+
+
6538
+
6890
+ 		+
+ + <ul> +
+
+
6539
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-2">(2)</a> +
+
+
6540
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-3">5.1. WebVTT file parsing</a> +
+
+
6541
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-4">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-5">(2)</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-6">(3)</a> +
+
+
+
6891
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-2">(2)</a> +
+
+
+
6892
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-3">6.1. WebVTT file parsing</a> +
+
+
+
6893
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-position-automatic-alignment-4">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-5">(2)</a> <a href="#ref-for-webvtt-cue-position-automatic-alignment-6">(3)</a> +
+
+
6542
+
6894
+ 		+
+ + </ul> +
+
+
6543
+
6895
+ 		+
+ + </aside> +
+
+
6544
+
6896
+ 		+
+ + <aside class="dfn-panel" data-for="cue-computed-position-alignment"> +
+
+
6545
+
6897
+ 		+
+ + <b><a href="#cue-computed-position-alignment">#cue-computed-position-alignment</a></b><b>Referenced in:</b> +
+
+
6546
+
6898
+ 		+
+ + <ul> +
+
+
6547
+
6899
+ 		+
+ + <li><a href="#ref-for-cue-computed-position-alignment-1">4.4. WebVTT cue settings</a> +
+
+
6548
+
+ 		+
+ - + <li><a href="#ref-for-cue-computed-position-alignment-2">6.1. Processing model</a> <a href="#ref-for-cue-computed-position-alignment-3">(2)</a> <a href="#ref-for-cue-computed-position-alignment-4">(3)</a> <a href="#ref-for-cue-computed-position-alignment-5">(4)</a> <a href="#ref-for-cue-computed-position-alignment-6">(5)</a> <a href="#ref-for-cue-computed-position-alignment-7">(6)</a> <a href="#ref-for-cue-computed-position-alignment-8">(7)</a> <a href="#ref-for-cue-computed-position-alignment-9">(8)</a> <a href="#ref-for-cue-computed-position-alignment-10">(9)</a> <a href="#ref-for-cue-computed-position-alignment-11">(10)</a> <a href="#ref-for-cue-computed-position-alignment-12">(11)</a> <a href="#ref-for-cue-computed-position-alignment-13">(12)</a> <a href="#ref-for-cue-computed-position-alignment-14">(13)</a> +
+
+
+
6900
+ 		+
+ + + <li><a href="#ref-for-cue-computed-position-alignment-2">7.1. Processing model</a> <a href="#ref-for-cue-computed-position-alignment-3">(2)</a> <a href="#ref-for-cue-computed-position-alignment-4">(3)</a> +
+
+
+
6901
+ 		+
+ + + <li><a href="#ref-for-cue-computed-position-alignment-5">7.2. Processing cue settings</a> <a href="#ref-for-cue-computed-position-alignment-6">(2)</a> <a href="#ref-for-cue-computed-position-alignment-7">(3)</a> <a href="#ref-for-cue-computed-position-alignment-8">(4)</a> <a href="#ref-for-cue-computed-position-alignment-9">(5)</a> <a href="#ref-for-cue-computed-position-alignment-10">(6)</a> <a href="#ref-for-cue-computed-position-alignment-11">(7)</a> <a href="#ref-for-cue-computed-position-alignment-12">(8)</a> <a href="#ref-for-cue-computed-position-alignment-13">(9)</a> <a href="#ref-for-cue-computed-position-alignment-14">(10)</a> +
+
+
6549
+
6902
+ 		+
+ + </ul> +
+
+
6550
+
6903
+ 		+
+ + </aside> +
+
+
6551
+
6904
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-size"> +
+
+
6552
+
6905
+ 		+
+ + <b><a href="#webvtt-cue-size">#webvtt-cue-size</a></b><b>Referenced in:</b> +
+
+
6553
+
6906
+ 		+
+ + <ul> +
+
+
6554
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-size-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-size-2">(2)</a> <a href="#ref-for-webvtt-cue-size-3">(3)</a> <a href="#ref-for-webvtt-cue-size-4">(4)</a> <a href="#ref-for-webvtt-cue-size-5">(5)</a> <a href="#ref-for-webvtt-cue-size-6">(6)</a> +
+
+
6555
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-size-7">5.1. WebVTT file parsing</a> +
+
+
6556
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-size-8">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6557
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-size-9">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-size-10">(2)</a> +
+
+
6558
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-size-11">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-size-12">(2)</a> <a href="#ref-for-webvtt-cue-size-13">(3)</a> <a href="#ref-for-webvtt-cue-size-14">(4)</a> +
+
+
+
6907
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-size-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-size-2">(2)</a> <a href="#ref-for-webvtt-cue-size-3">(3)</a> <a href="#ref-for-webvtt-cue-size-4">(4)</a> <a href="#ref-for-webvtt-cue-size-5">(5)</a> <a href="#ref-for-webvtt-cue-size-6">(6)</a> +
+
+
+
6908
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-size-7">6.1. WebVTT file parsing</a> +
+
+
+
6909
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-size-8">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-size-9">(2)</a> +
+
+
+
6910
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-size-10">7.2. Processing cue settings</a> <a href="#ref-for-webvtt-cue-size-11">(2)</a> +
+
+
+
6911
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-size-12">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-size-13">(2)</a> <a href="#ref-for-webvtt-cue-size-14">(3)</a> <a href="#ref-for-webvtt-cue-size-15">(4)</a> +
+
+
6559
+
6912
+ 		+
+ + </ul> +
+
+
6560
+
6913
+ 		+
+ + </aside> +
+
+
6561
+
6914
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-text-alignment"> +
+
+
6562
+
6915
+ 		+
+ + <b><a href="#webvtt-cue-text-alignment">#webvtt-cue-text-alignment</a></b><b>Referenced in:</b> +
+
+
6563
+
6916
+ 		+
+ + <ul> +
+
+
6564
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-text-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-5">(5)</a> <a href="#ref-for-webvtt-cue-text-alignment-6">(6)</a> <a href="#ref-for-webvtt-cue-text-alignment-7">(7)</a> <a href="#ref-for-webvtt-cue-text-alignment-8">(8)</a> <a href="#ref-for-webvtt-cue-text-alignment-9">(9)</a> <a href="#ref-for-webvtt-cue-text-alignment-10">(10)</a> <a href="#ref-for-webvtt-cue-text-alignment-11">(11)</a> <a href="#ref-for-webvtt-cue-text-alignment-12">(12)</a> +
+
+
6565
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-alignment-13">5.1. WebVTT file parsing</a> +
+
+
6566
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-alignment-14">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-text-alignment-15">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-16">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-17">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-18">(5)</a> +
+
+
6567
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-alignment-19">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-cue-text-alignment-20">(2)</a> +
+
+
6568
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-alignment-21">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-text-alignment-22">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-23">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-24">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-25">(5)</a> +
+
+
+
6917
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-text-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-5">(5)</a> <a href="#ref-for-webvtt-cue-text-alignment-6">(6)</a> <a href="#ref-for-webvtt-cue-text-alignment-7">(7)</a> <a href="#ref-for-webvtt-cue-text-alignment-8">(8)</a> <a href="#ref-for-webvtt-cue-text-alignment-9">(9)</a> <a href="#ref-for-webvtt-cue-text-alignment-10">(10)</a> <a href="#ref-for-webvtt-cue-text-alignment-11">(11)</a> <a href="#ref-for-webvtt-cue-text-alignment-12">(12)</a> <a href="#ref-for-webvtt-cue-text-alignment-13">(13)</a> <a href="#ref-for-webvtt-cue-text-alignment-14">(14)</a> +
+
+
+
6918
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-alignment-15">6.1. WebVTT file parsing</a> +
+
+
+
6919
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-alignment-16">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-text-alignment-17">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-18">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-19">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-20">(5)</a> +
+
+
+
6920
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-alignment-21">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-cue-text-alignment-22">(2)</a> +
+
+
+
6921
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-alignment-23">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-text-alignment-24">(2)</a> <a href="#ref-for-webvtt-cue-text-alignment-25">(3)</a> <a href="#ref-for-webvtt-cue-text-alignment-26">(4)</a> <a href="#ref-for-webvtt-cue-text-alignment-27">(5)</a> +
+
+
6569
+
6922
+ 		+
+ + </ul> +
+
+
6570
+
6923
+ 		+
+ + </aside> +
+
+
6571
+
6924
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-start-alignment"> +
+
+
6572
+
6925
+ 		+
+ + <b><a href="#webvtt-cue-start-alignment">#webvtt-cue-start-alignment</a></b><b>Referenced in:</b> +
+
+
6573
+
6926
+ 		+
+ + <ul> +
+
+
6574
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-start-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-start-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-start-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-start-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-start-alignment-5">(5)</a> +
+
+
6575
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-start-alignment-6">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6576
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-start-alignment-7">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6577
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-start-alignment-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-start-alignment-9">(2)</a> +
+
+
+
6927
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-start-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-start-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-start-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-start-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-start-alignment-5">(5)</a> <a href="#ref-for-webvtt-cue-start-alignment-6">(6)</a> +
+
+
+
6928
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-start-alignment-7">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6929
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-start-alignment-8">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6930
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-start-alignment-9">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-start-alignment-10">(2)</a> +
+
+
6578
+
6931
+ 		+
+ + </ul> +
+
+
6579
+
6932
+ 		+
+ + </aside> +
+
+
6580
+
6933
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-center-alignment"> +
+
+
6581
+
6934
+ 		+
+ + <b><a href="#webvtt-cue-center-alignment">#webvtt-cue-center-alignment</a></b><b>Referenced in:</b> +
+
+
6582
+
6935
+ 		+
+ + <ul> +
+
+
6583
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-center-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-center-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-center-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-center-alignment-4">(4)</a> +
+
+
6584
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-center-alignment-5">5.1. WebVTT file parsing</a> +
+
+
6585
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-center-alignment-6">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6586
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-center-alignment-7">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6587
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-center-alignment-8">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-center-alignment-9">(2)</a> <a href="#ref-for-webvtt-cue-center-alignment-10">(3)</a> +
+
+
+
6936
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-center-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-center-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-center-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-center-alignment-4">(4)</a> +
+
+
+
6937
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-center-alignment-5">6.1. WebVTT file parsing</a> +
+
+
+
6938
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-center-alignment-6">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6939
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-center-alignment-7">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6940
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-center-alignment-8">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-center-alignment-9">(2)</a> <a href="#ref-for-webvtt-cue-center-alignment-10">(3)</a> +
+
+
6588
+
6941
+ 		+
+ + </ul> +
+
+
6589
+
6942
+ 		+
+ + </aside> +
+
+
6590
+
6943
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-end-alignment"> +
+
+
6591
+
6944
+ 		+
+ + <b><a href="#webvtt-cue-end-alignment">#webvtt-cue-end-alignment</a></b><b>Referenced in:</b> +
+
+
6592
+
6945
+ 		+
+ + <ul> +
+
+
6593
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-end-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-end-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-end-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-end-alignment-4">(4)</a> +
+
+
6594
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-end-alignment-5">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6595
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-end-alignment-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6596
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-end-alignment-7">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-end-alignment-8">(2)</a> +
+
+
+
6946
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-end-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-end-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-end-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-end-alignment-4">(4)</a> <a href="#ref-for-webvtt-cue-end-alignment-5">(5)</a> +
+
+
+
6947
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-end-alignment-6">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6948
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-end-alignment-7">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6949
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-end-alignment-8">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-end-alignment-9">(2)</a> +
+
+
6597
+
6950
+ 		+
+ + </ul> +
+
+
6598
+
6951
+ 		+
+ + </aside> +
+
+
6599
+
6952
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-left-alignment"> +
+
+
6600
+
6953
+ 		+
+ + <b><a href="#webvtt-cue-left-alignment">#webvtt-cue-left-alignment</a></b><b>Referenced in:</b> +
+
+
6601
+
6954
+ 		+
+ + <ul> +
+
+
6602
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-left-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-left-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-left-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-left-alignment-4">(4)</a> +
+
+
6603
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-left-alignment-5">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6604
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-left-alignment-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6605
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-left-alignment-7">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-left-alignment-8">(2)</a> +
+
+
+
6955
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-left-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-left-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-left-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-left-alignment-4">(4)</a> +
+
+
+
6956
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-left-alignment-5">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6957
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-left-alignment-6">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6958
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-left-alignment-7">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-left-alignment-8">(2)</a> +
+
+
6606
+
6959
+ 		+
+ + </ul> +
+
+
6607
+
6960
+ 		+
+ + </aside> +
+
+
6608
+
6961
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-right-alignment"> +
+
+
6609
+
6962
+ 		+
+ + <b><a href="#webvtt-cue-right-alignment">#webvtt-cue-right-alignment</a></b><b>Referenced in:</b> +
+
+
6610
+
6963
+ 		+
+ + <ul> +
+
+
6611
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-right-alignment-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-cue-right-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-right-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-right-alignment-4">(4)</a> +
+
+
6612
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-right-alignment-5">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6613
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-right-alignment-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6614
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-right-alignment-7">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-right-alignment-8">(2)</a> +
+
+
+
6964
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-right-alignment-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-cue-right-alignment-2">(2)</a> <a href="#ref-for-webvtt-cue-right-alignment-3">(3)</a> <a href="#ref-for-webvtt-cue-right-alignment-4">(4)</a> +
+
+
+
6965
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-right-alignment-5">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6966
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-right-alignment-6">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6967
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-right-alignment-7">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-right-alignment-8">(2)</a> +
+
+
6615
+
6968
+ 		+
+ + </ul> +
+
+
6616
+
6969
+ 		+
+ + </aside> +
+
+
6617
+
6970
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-region"> +
+
+
6618
+
6971
+ 		+
+ + <b><a href="#webvtt-cue-region">#webvtt-cue-region</a></b><b>Referenced in:</b> +
+
+
6619
+
6972
+ 		+
+ + <ul> +
+
+
6620
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-region-1">3.1. WebVTT cues</a> +
+
+
6621
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-region-2">5.1. WebVTT file parsing</a> +
+
+
6622
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-region-3">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6623
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-region-4">6.1. Processing model</a> <a href="#ref-for-webvtt-cue-region-5">(2)</a> <a href="#ref-for-webvtt-cue-region-6">(3)</a> +
+
+
6624
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-region-7">8.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-region-8">(2)</a> <a href="#ref-for-webvtt-cue-region-9">(3)</a> +
+
+
+
6973
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-region-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
+
6974
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-region-2">6.1. WebVTT file parsing</a> +
+
+
+
6975
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-region-3">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-webvtt-cue-region-4">(2)</a> <a href="#ref-for-webvtt-cue-region-5">(3)</a> <a href="#ref-for-webvtt-cue-region-6">(4)</a> +
+
+
+
6976
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-region-7">7.1. Processing model</a> <a href="#ref-for-webvtt-cue-region-8">(2)</a> <a href="#ref-for-webvtt-cue-region-9">(3)</a> +
+
+
+
6977
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-region-10">9.1. The VTTCue interface</a> <a href="#ref-for-webvtt-cue-region-11">(2)</a> <a href="#ref-for-webvtt-cue-region-12">(3)</a> +
+
+
6625
+
6978
+ 		+
+ + </ul> +
+
+
6626
+
6979
+ 		+
+ + </aside> +
+
+
6627
+
6980
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region"> +
+
+
6628
+
6981
+ 		+
+ + <b><a href="#webvtt-region">#webvtt-region</a></b><b>Referenced in:</b> +
+
+
6629
+
6982
+ 		+
+ + <ul> +
+
+
6630
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-1">3.1. WebVTT cues</a> <a href="#ref-for-webvtt-region-2">(2)</a> <a href="#ref-for-webvtt-region-3">(3)</a> +
+
+
6631
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-4">3.2. WebVTT regions</a> <a href="#ref-for-webvtt-region-5">(2)</a> +
+
+
6632
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-6">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-region-7">(2)</a> +
+
+
6633
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-8">5.1. WebVTT file parsing</a> +
+
+
6634
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-9">5.2. WebVTT region settings parsing</a> +
+
+
6635
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-10">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6636
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-11">6.1. Processing model</a> <a href="#ref-for-webvtt-region-12">(2)</a> <a href="#ref-for-webvtt-region-13">(3)</a> +
+
+
6637
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-14">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
6638
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-15">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-16">(2)</a> <a href="#ref-for-webvtt-region-17">(3)</a> <a href="#ref-for-webvtt-region-18">(4)</a> <a href="#ref-for-webvtt-region-19">(5)</a> <a href="#ref-for-webvtt-region-20">(6)</a> <a href="#ref-for-webvtt-region-21">(7)</a> <a href="#ref-for-webvtt-region-22">(8)</a> <a href="#ref-for-webvtt-region-23">(9)</a> <a href="#ref-for-webvtt-region-24">(10)</a> +
+
+
+
6983
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-webvtt-region-2">(2)</a> <a href="#ref-for-webvtt-region-3">(3)</a> +
+
+
+
6984
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-4">3.4. WebVTT caption or subtitle regions</a> <a href="#ref-for-webvtt-region-5">(2)</a> +
+
+
+
6985
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-6">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-region-7">(2)</a> <a href="#ref-for-webvtt-region-8">(3)</a> +
+
+
+
6986
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-9">6.1. WebVTT file parsing</a> +
+
+
+
6987
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-10">6.2. WebVTT region settings parsing</a> +
+
+
+
6988
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-11">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
6989
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-12">7.1. Processing model</a> <a href="#ref-for-webvtt-region-13">(2)</a> <a href="#ref-for-webvtt-region-14">(3)</a> +
+
+
+
6990
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-15">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
6991
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-16">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-17">(2)</a> <a href="#ref-for-webvtt-region-18">(3)</a> <a href="#ref-for-webvtt-region-19">(4)</a> <a href="#ref-for-webvtt-region-20">(5)</a> <a href="#ref-for-webvtt-region-21">(6)</a> <a href="#ref-for-webvtt-region-22">(7)</a> <a href="#ref-for-webvtt-region-23">(8)</a> <a href="#ref-for-webvtt-region-24">(9)</a> <a href="#ref-for-webvtt-region-25">(10)</a> +
+
+
6639
+
6992
+ 		+
+ + </ul> +
+
+
6640
+
6993
+ 		+
+ + </aside> +
+
+
6641
+
6994
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-identifier"> +
+
+
6642
+
6995
+ 		+
+ + <b><a href="#webvtt-region-identifier">#webvtt-region-identifier</a></b><b>Referenced in:</b> +
+
+
6643
+
6996
+ 		+
+ + <ul> +
+
+
6644
+
6997
+ 		+
+ + <li><a href="#ref-for-webvtt-region-identifier-1">4.4. WebVTT cue settings</a> +
+
+
6645
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-2">5.1. WebVTT file parsing</a> +
+
+
6646
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-3">5.2. WebVTT region settings parsing</a> +
+
+
6647
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-4">5.3. WebVTT cue timings and settings parsing</a> +
+
+
6648
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-5">7.1. Introduction</a> +
+
+
6649
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-6">7.2.3. The ::cue-region pseudo-element</a> +
+
+
6650
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-7">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-identifier-8">(2)</a> <a href="#ref-for-webvtt-region-identifier-9">(3)</a> +
+
+
+
6998
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-2">6.1. WebVTT file parsing</a> +
+
+
+
6999
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-3">6.2. WebVTT region settings parsing</a> +
+
+
+
7000
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-4">6.3. WebVTT cue timings and settings parsing</a> +
+
+
+
7001
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-5">8.1. Introduction</a> +
+
+
+
7002
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-6">8.2.3. The ::cue-region pseudo-element</a> +
+
+
+
7003
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-7">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-identifier-8">(2)</a> <a href="#ref-for-webvtt-region-identifier-9">(3)</a> +
+
+
6651
+
7004
+ 		+
+ + </ul> +
+
+
6652
+
7005
+ 		+
+ + </aside> +
+
+
6653
+
7006
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-width"> +
+
+
6654
+
7007
+ 		+
+ + <b><a href="#webvtt-region-width">#webvtt-region-width</a></b><b>Referenced in:</b> +
+
+
6655
+
7008
+ 		+
+ + <ul> +
+
+
6656
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-width-1">5.1. WebVTT file parsing</a> +
+
+
6657
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-width-2">5.2. WebVTT region settings parsing</a> +
+
+
6658
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-width-3">6.1. Processing model</a> <a href="#ref-for-webvtt-region-width-4">(2)</a> <a href="#ref-for-webvtt-region-width-5">(3)</a> <a href="#ref-for-webvtt-region-width-6">(4)</a> +
+
+
6659
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-width-7">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-width-8">(2)</a> <a href="#ref-for-webvtt-region-width-9">(3)</a> +
+
+
+
7009
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-width-1">6.1. WebVTT file parsing</a> +
+
+
+
7010
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-width-2">6.2. WebVTT region settings parsing</a> +
+
+
+
7011
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-width-3">7.1. Processing model</a> <a href="#ref-for-webvtt-region-width-4">(2)</a> <a href="#ref-for-webvtt-region-width-5">(3)</a> <a href="#ref-for-webvtt-region-width-6">(4)</a> +
+
+
+
7012
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-width-7">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-width-8">(2)</a> <a href="#ref-for-webvtt-region-width-9">(3)</a> +
+
+
6660
+
7013
+ 		+
+ + </ul> +
+
+
6661
+
7014
+ 		+
+ + </aside> +
+
+
6662
+
7015
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-lines"> +
+
+
6663
+
7016
+ 		+
+ + <b><a href="#webvtt-region-lines">#webvtt-region-lines</a></b><b>Referenced in:</b> +
+
+
6664
+
7017
+ 		+
+ + <ul> +
+
+
6665
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-lines-1">5.1. WebVTT file parsing</a> +
+
+
6666
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-lines-2">5.2. WebVTT region settings parsing</a> +
+
+
6667
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-lines-3">6.1. Processing model</a> +
+
+
6668
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-lines-4">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-lines-5">(2)</a> <a href="#ref-for-webvtt-region-lines-6">(3)</a> +
+
+
+
7018
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-lines-1">6.1. WebVTT file parsing</a> +
+
+
+
7019
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-lines-2">6.2. WebVTT region settings parsing</a> +
+
+
+
7020
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-lines-3">7.1. Processing model</a> +
+
+
+
7021
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-lines-4">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-lines-5">(2)</a> <a href="#ref-for-webvtt-region-lines-6">(3)</a> +
+
+
6669
+
7022
+ 		+
+ + </ul> +
+
+
6670
+
7023
+ 		+
+ + </aside> +
+
+
6671
+
7024
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-anchor"> +
+
+
6672
+
7025
+ 		+
+ + <b><a href="#webvtt-region-anchor">#webvtt-region-anchor</a></b><b>Referenced in:</b> +
+
+
6673
+
7026
+ 		+
+ + <ul> +
+
+
6674
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-anchor-1">5.1. WebVTT file parsing</a> +
+
+
6675
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-anchor-2">5.2. WebVTT region settings parsing</a> +
+
+
6676
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-anchor-3">6.1. Processing model</a> <a href="#ref-for-webvtt-region-anchor-4">(2)</a> <a href="#ref-for-webvtt-region-anchor-5">(3)</a> <a href="#ref-for-webvtt-region-anchor-6">(4)</a> +
+
+
6677
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-anchor-7">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-anchor-8">(2)</a> <a href="#ref-for-webvtt-region-anchor-9">(3)</a> <a href="#ref-for-webvtt-region-anchor-10">(4)</a> <a href="#ref-for-webvtt-region-anchor-11">(5)</a> <a href="#ref-for-webvtt-region-anchor-12">(6)</a> +
+
+
+
7027
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-anchor-1">6.1. WebVTT file parsing</a> +
+
+
+
7028
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-anchor-2">6.2. WebVTT region settings parsing</a> +
+
+
+
7029
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-anchor-3">7.1. Processing model</a> <a href="#ref-for-webvtt-region-anchor-4">(2)</a> <a href="#ref-for-webvtt-region-anchor-5">(3)</a> <a href="#ref-for-webvtt-region-anchor-6">(4)</a> +
+
+
+
7030
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-anchor-7">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-anchor-8">(2)</a> <a href="#ref-for-webvtt-region-anchor-9">(3)</a> <a href="#ref-for-webvtt-region-anchor-10">(4)</a> <a href="#ref-for-webvtt-region-anchor-11">(5)</a> <a href="#ref-for-webvtt-region-anchor-12">(6)</a> +
+
+
6678
+
7031
+ 		+
+ + </ul> +
+
+
6679
+
7032
+ 		+
+ + </aside> +
+
+
6680
+
7033
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-viewport-anchor"> +
+
+
6681
+
7034
+ 		+
+ + <b><a href="#webvtt-region-viewport-anchor">#webvtt-region-viewport-anchor</a></b><b>Referenced in:</b> +
+
+
6682
+
7035
+ 		+
+ + <ul> +
+
+
6683
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-viewport-anchor-1">5.1. WebVTT file parsing</a> +
+
+
6684
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-viewport-anchor-2">5.2. WebVTT region settings parsing</a> +
+
+
6685
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-viewport-anchor-3">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-viewport-anchor-4">(2)</a> <a href="#ref-for-webvtt-region-viewport-anchor-5">(3)</a> <a href="#ref-for-webvtt-region-viewport-anchor-6">(4)</a> <a href="#ref-for-webvtt-region-viewport-anchor-7">(5)</a> <a href="#ref-for-webvtt-region-viewport-anchor-8">(6)</a> +
+
+
+
7036
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-viewport-anchor-1">6.1. WebVTT file parsing</a> +
+
+
+
7037
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-viewport-anchor-2">6.2. WebVTT region settings parsing</a> +
+
+
+
7038
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-viewport-anchor-3">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-viewport-anchor-4">(2)</a> <a href="#ref-for-webvtt-region-viewport-anchor-5">(3)</a> <a href="#ref-for-webvtt-region-viewport-anchor-6">(4)</a> <a href="#ref-for-webvtt-region-viewport-anchor-7">(5)</a> <a href="#ref-for-webvtt-region-viewport-anchor-8">(6)</a> +
+
+
6686
+
7039
+ 		+
+ + </ul> +
+
+
6687
+
7040
+ 		+
+ + </aside> +
+
+
6688
+
7041
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-scroll"> +
+
+
6689
+
7042
+ 		+
+ + <b><a href="#webvtt-region-scroll">#webvtt-region-scroll</a></b><b>Referenced in:</b> +
+
+
6690
+
7043
+ 		+
+ + <ul> +
+
+
6691
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-1">5.1. WebVTT file parsing</a> +
+
+
6692
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-2">5.2. WebVTT region settings parsing</a> +
+
+
6693
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-3">6.1. Processing model</a> +
+
+
6694
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-4">8.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-scroll-5">(2)</a> <a href="#ref-for-webvtt-region-scroll-6">(3)</a> <a href="#ref-for-webvtt-region-scroll-7">(4)</a> <a href="#ref-for-webvtt-region-scroll-8">(5)</a> +
+
+
+
7044
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-1">6.1. WebVTT file parsing</a> +
+
+
+
7045
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-2">6.2. WebVTT region settings parsing</a> +
+
+
+
7046
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-3">7.1. Processing model</a> +
+
+
+
7047
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-4">9.2. The VTTRegion interface</a> <a href="#ref-for-webvtt-region-scroll-5">(2)</a> <a href="#ref-for-webvtt-region-scroll-6">(3)</a> <a href="#ref-for-webvtt-region-scroll-7">(4)</a> <a href="#ref-for-webvtt-region-scroll-8">(5)</a> +
+
+
6695
+
7048
+ 		+
+ + </ul> +
+
+
6696
+
7049
+ 		+
+ + </aside> +
+
+
6697
+
7050
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-scroll-none"> +
+
+
6698
+
7051
+ 		+
+ + <b><a href="#webvtt-region-scroll-none">#webvtt-region-scroll-none</a></b><b>Referenced in:</b> +
+
+
6699
+
7052
+ 		+
+ + <ul> +
+
+
6700
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-none-1">5.1. WebVTT file parsing</a> +
+
+
6701
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-none-2">8.2. The VTTRegion interface</a> +
+
+
+
7053
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-none-1">6.1. WebVTT file parsing</a> +
+
+
+
7054
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-none-2">9.2. The VTTRegion interface</a> +
+
+
6702
+
7055
+ 		+
+ + </ul> +
+
+
6703
+
7056
+ 		+
+ + </aside> +
+
+
6704
+
7057
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-scroll-up"> +
+
+
6705
+
7058
+ 		+
+ + <b><a href="#webvtt-region-scroll-up">#webvtt-region-scroll-up</a></b><b>Referenced in:</b> +
+
+
6706
+
7059
+ 		+
+ + <ul> +
+
+
6707
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-up-1">5.2. WebVTT region settings parsing</a> +
+
+
6708
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-up-2">6.1. Processing model</a> +
+
+
6709
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-scroll-up-3">8.2. The VTTRegion interface</a> +
+
+
+
7060
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-up-1">6.2. WebVTT region settings parsing</a> +
+
+
+
7061
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-up-2">7.1. Processing model</a> +
+
+
+
7062
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-scroll-up-3">9.2. The VTTRegion interface</a> +
+
+
6710
+
7063
+ 		+
+ + </ul> +
+
+
6711
+
7064
+ 		+
+ + </aside> +
+
+
6712
+
7065
+ 		+
+ + <aside class="dfn-panel" data-for="text-track-list-of-regions"> +
+
+
6713
+
7066
+ 		+
+ + <b><a href="#text-track-list-of-regions">#text-track-list-of-regions</a></b><b>Referenced in:</b> +
+
+
6714
+
7067
+ 		+
+ + <ul> +
+
+
6715
+
+ 		+
+ - + <li><a href="#ref-for-text-track-list-of-regions-1">5.1. WebVTT file parsing</a> +
+
+
6716
+
+ 		+
+ - + <li><a href="#ref-for-text-track-list-of-regions-2">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-text-track-list-of-regions-3">(2)</a> +
+
+
6717
+
+ 		+
+ - + <li><a href="#ref-for-text-track-list-of-regions-4">6.1. Processing model</a> +
+
+
+
7068
+ 		+
+ + + <li><a href="#ref-for-text-track-list-of-regions-1">6.1. WebVTT file parsing</a> +
+
+
+
7069
+ 		+
+ + + <li><a href="#ref-for-text-track-list-of-regions-2">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-text-track-list-of-regions-3">(2)</a> +
+
+
+
7070
+ 		+
+ + + <li><a href="#ref-for-text-track-list-of-regions-4">7.1. Processing model</a> +
+
+
6718
+
7071
+ 		+
+ + </ul> +
+
+
6719
+
7072
+ 		+
+ + </aside> +
+
+
6720
+
7073
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-file"> +
+
+
@@ -6726,8 +7079,8 @@
+
+
6726
+
7079
+ 		+
+ + <li><a href="#ref-for-webvtt-file-10">4.5.1. WebVTT file using only nested cues</a> +
+
+
6727
+
7080
+ 		+
+ + <li><a href="#ref-for-webvtt-file-11">4.6. Types of WebVTT files</a> +
+
+
6728
+
7081
+ 		+
+ + <li><a href="#ref-for-webvtt-file-12">4.6.1. WebVTT file using metadata content</a> +
+
+
6729
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-file-13">4.6.3. WebVTT file using cue text</a> +
+
+
6730
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-file-14">5.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-file-15">(2)</a> <a href="#ref-for-webvtt-file-16">(3)</a> +
+
+
+
7082
+ 		+
+ + + <li><a href="#ref-for-webvtt-file-13">4.6.3. WebVTT file using caption or subtitle cue text</a> +
+
+
+
7083
+ 		+
+ + + <li><a href="#ref-for-webvtt-file-14">6.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-file-15">(2)</a> <a href="#ref-for-webvtt-file-16">(3)</a> +
+
+
6731
+
7084
+ 		+
+ + </ul> +
+
+
6732
+
7085
+ 		+
+ + </aside> +
+
+
6733
+
7086
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-file-body"> +
+
+
@@ -6741,9 +7094,9 @@
+
+
6741
+
7094
+ 		+
+ + <ul> +
+
+
6742
+
7095
+ 		+
+ + <li><a href="#ref-for-webvtt-line-terminator-1">4.1. WebVTT file structure</a> <a href="#ref-for-webvtt-line-terminator-2">(2)</a> <a href="#ref-for-webvtt-line-terminator-3">(3)</a> <a href="#ref-for-webvtt-line-terminator-4">(4)</a> <a href="#ref-for-webvtt-line-terminator-5">(5)</a> <a href="#ref-for-webvtt-line-terminator-6">(6)</a> <a href="#ref-for-webvtt-line-terminator-7">(7)</a> <a href="#ref-for-webvtt-line-terminator-8">(8)</a> <a href="#ref-for-webvtt-line-terminator-9">(9)</a> <a href="#ref-for-webvtt-line-terminator-10">(10)</a> <a href="#ref-for-webvtt-line-terminator-11">(11)</a> <a href="#ref-for-webvtt-line-terminator-12">(12)</a> <a href="#ref-for-webvtt-line-terminator-13">(13)</a> <a href="#ref-for-webvtt-line-terminator-14">(14)</a> <a href="#ref-for-webvtt-line-terminator-15">(15)</a> <a href="#ref-for-webvtt-line-terminator-16">(16)</a> +
+
+
6743
+
7096
+ 		+
+ + <li><a href="#ref-for-webvtt-line-terminator-17">4.2.1. WebVTT metadata text</a> <a href="#ref-for-webvtt-line-terminator-18">(2)</a> <a href="#ref-for-webvtt-line-terminator-19">(3)</a> +
+
+
6744
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-line-terminator-20">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-line-terminator-21">(2)</a> <a href="#ref-for-webvtt-line-terminator-22">(3)</a> <a href="#ref-for-webvtt-line-terminator-23">(4)</a> <a href="#ref-for-webvtt-line-terminator-24">(5)</a> +
+
+
6745
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-line-terminator-25">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-line-terminator-26">(2)</a> +
+
+
6746
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-line-terminator-27">4.6.2. WebVTT file using chapter title text</a> +
+
+
+
7097
+ 		+
+ + + <li><a href="#ref-for-webvtt-line-terminator-20">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-line-terminator-21">(2)</a> <a href="#ref-for-webvtt-line-terminator-22">(3)</a> <a href="#ref-for-webvtt-line-terminator-23">(4)</a> <a href="#ref-for-webvtt-line-terminator-24">(5)</a> +
+
+
+
7098
+ 		+
+ + + <li><a href="#ref-for-webvtt-line-terminator-25">4.2.3. WebVTT chapter title text</a> +
+
+
+
7099
+ 		+
+ + + <li><a href="#ref-for-webvtt-line-terminator-26">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-line-terminator-27">(2)</a> +
+
+
6747
+
7100
+ 		+
+ + </ul> +
+
+
6748
+
7101
+ 		+
+ + </aside> +
+
+
6749
+
7102
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-definition-block"> +
+
+
@@ -6769,10 +7122,10 @@
+
+
6769
+
7122
+ 		+
+ + <b><a href="#cue-payload">#cue-payload</a></b><b>Referenced in:</b> +
+
+
6770
+
7123
+ 		+
+ + <ul> +
+
+
6771
+
7124
+ 		+
+ + <li><a href="#ref-for-cue-payload-1">4.1. WebVTT file structure</a> +
+
+
6772
+
+ 		+
+ - + <li><a href="#ref-for-cue-payload-2">4.2.2. WebVTT cue text</a> +
+
+
+
7125
+ 		+
+ + + <li><a href="#ref-for-cue-payload-2">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
6773
+
7126
+ 		+
+ + <li><a href="#ref-for-cue-payload-3">4.6.1. WebVTT file using metadata content</a> +
+
+
6774
+
7127
+ 		+
+ + <li><a href="#ref-for-cue-payload-4">4.6.2. WebVTT file using chapter title text</a> +
+
+
6775
+
+ 		+
+ - + <li><a href="#ref-for-cue-payload-5">4.6.3. WebVTT file using cue text</a> +
+
+
+
7128
+ 		+
+ + + <li><a href="#ref-for-cue-payload-5">4.6.3. WebVTT file using caption or subtitle cue text</a> +
+
+
6776
+
7129
+ 		+
+ + </ul> +
+
+
6777
+
7130
+ 		+
+ + </aside> +
+
+
6778
+
7131
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-identifier"> +
+
+
@@ -6791,22 +7144,22 @@
+
+
6791
+
7144
+ 		+
+ + <b><a href="#webvtt-timestamp">#webvtt-timestamp</a></b><b>Referenced in:</b> +
+
+
6792
+
7145
+ 		+
+ + <ul> +
+
+
6793
+
7146
+ 		+
+ + <li><a href="#ref-for-webvtt-timestamp-1">4.1. WebVTT file structure</a> <a href="#ref-for-webvtt-timestamp-2">(2)</a> <a href="#ref-for-webvtt-timestamp-3">(3)</a> <a href="#ref-for-webvtt-timestamp-4">(4)</a> <a href="#ref-for-webvtt-timestamp-5">(5)</a> +
+
+
6794
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-6">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-timestamp-7">(2)</a> +
+
+
6795
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-8">5.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7147
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-6">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-timestamp-7">(2)</a> +
+
+
+
7148
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-8">6.5. WebVTT cue text DOM construction rules</a> +
+
+
6796
+
7149
+ 		+
+ + </ul> +
+
+
6797
+
7150
+ 		+
+ + </aside> +
+
+
6798
+
7151
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-settings-list"> +
+
+
6799
+
7152
+ 		+
+ + <b><a href="#webvtt-cue-settings-list">#webvtt-cue-settings-list</a></b><b>Referenced in:</b> +
+
+
6800
+
7153
+ 		+
+ + <ul> +
+
+
6801
+
7154
+ 		+
+ + <li><a href="#ref-for-webvtt-cue-settings-list-1">4.1. WebVTT file structure</a> +
+
+
6802
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-settings-list-2">4.3. WebVTT region settings</a> +
+
+
6803
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-settings-list-3">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-cue-settings-list-4">(2)</a> <a href="#ref-for-webvtt-cue-settings-list-5">(3)</a> +
+
+
+
7155
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-settings-list-2">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-cue-settings-list-3">(2)</a> +
+
+
+
7156
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-settings-list-4">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-cue-settings-list-5">(2)</a> <a href="#ref-for-webvtt-cue-settings-list-6">(3)</a> +
+
+
6804
+
7157
+ 		+
+ + </ul> +
+
+
6805
+
7158
+ 		+
+ + </aside> +
+
+
6806
+
7159
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-setting"> +
+
+
6807
+
7160
+ 		+
+ + <b><a href="#webvtt-cue-setting">#webvtt-cue-setting</a></b><b>Referenced in:</b> +
+
+
6808
+
7161
+ 		+
+ + <ul> +
+
+
6809
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-setting-1">4.4. WebVTT cue settings</a> +
+
+
+
7162
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-setting-1">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-cue-setting-2">(2)</a> <a href="#ref-for-webvtt-cue-setting-3">(3)</a> +
+
+
6810
+
7163
+ 		+
+ + </ul> +
+
+
6811
+
7164
+ 		+
+ + </aside> +
+
+
6812
+
7165
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-setting-name"> +
+
+
@@ -6829,7 +7182,7 @@
+
+
6829
+
7182
+ 		+
+ + <li><a href="#ref-for-webvtt-percentage-1">4.1. WebVTT file structure</a> +
+
+
6830
+
7183
+ 		+
+ + <li><a href="#ref-for-webvtt-percentage-2">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-percentage-3">(2)</a> <a href="#ref-for-webvtt-percentage-4">(3)</a> <a href="#ref-for-webvtt-percentage-5">(4)</a> <a href="#ref-for-webvtt-percentage-6">(5)</a> +
+
+
6831
+
7184
+ 		+
+ + <li><a href="#ref-for-webvtt-percentage-7">4.4. WebVTT cue settings</a> <a href="#ref-for-webvtt-percentage-8">(2)</a> <a href="#ref-for-webvtt-percentage-9">(3)</a> +
+
+
6832
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-percentage-10">5.2. WebVTT region settings parsing</a> +
+
+
+
7185
+ 		+
+ + + <li><a href="#ref-for-webvtt-percentage-10">6.2. WebVTT region settings parsing</a> +
+
+
6833
+
7186
+ 		+
+ + </ul> +
+
+
6834
+
7187
+ 		+
+ + </aside> +
+
+
6835
+
7188
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-comment-block"> +
+
+
@@ -6846,113 +7199,131 @@
+
+
6846
+
7199
+ 		+
+ + <li><a href="#ref-for-webvtt-metadata-text-3">4.6.1. WebVTT file using metadata content</a> +
+
+
6847
+
7200
+ 		+
+ + </ul> +
+
+
6848
+
7201
+ 		+
+ + </aside> +
+
+
6849
+
+ 		+
+ - + <aside class="dfn-panel" data-for="webvtt-cue-text"> +
+
+
6850
+
+ 		+
+ - + <b><a href="#webvtt-cue-text">#webvtt-cue-text</a></b><b>Referenced in:</b> +
+
+
+
7202
+ 		+
+ + + <aside class="dfn-panel" data-for="webvtt-caption-or-subtitle-cue-text"> +
+
+
+
7203
+ 		+
+ + + <b><a href="#webvtt-caption-or-subtitle-cue-text">#webvtt-caption-or-subtitle-cue-text</a></b><b>Referenced in:</b> +
+
+
6851
+
7204
+ 		+
+ + <ul> +
+
+
6852
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-1">3.1. WebVTT cues</a> +
+
+
6853
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-2">4.1. WebVTT file structure</a> +
+
+
6854
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-3">4.2.2. WebVTT cue text</a> +
+
+
6855
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-4">4.6.2. WebVTT file using chapter title text</a> +
+
+
6856
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-5">4.6.3. WebVTT file using cue text</a> +
+
+
+
7205
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-text-1">2.1. Conformance classes</a> +
+
+
+
7206
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-text-2">4.1. WebVTT file structure</a> +
+
+
+
7207
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-text-3">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7208
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-text-4">4.6.3. WebVTT file using caption or subtitle cue text</a> +
+
+
+
7209
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-text-5">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-6">(2)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-7">(3)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-8">(4)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-9">(5)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-10">(6)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-11">(7)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-text-12">(8)</a> +
+
+
6857
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-6">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-cue-text-7">(2)</a> <a href="#ref-for-webvtt-cue-text-8">(3)</a> <a href="#ref-for-webvtt-cue-text-9">(4)</a> <a href="#ref-for-webvtt-cue-text-10">(5)</a> <a href="#ref-for-webvtt-cue-text-11">(6)</a> <a href="#ref-for-webvtt-cue-text-12">(7)</a> <a href="#ref-for-webvtt-cue-text-13">(8)</a> <a href="#ref-for-webvtt-cue-text-14">(9)</a> <a href="#ref-for-webvtt-cue-text-15">(10)</a> +
+
+
6858
+
7210
+ 		+
+ + </ul> +
+
+
6859
+
7211
+ 		+
+ + </aside> +
+
+
6860
+
+ 		+
+ - + <aside class="dfn-panel" data-for="webvtt-cue-components"> +
+
+
6861
+
+ 		+
+ - + <b><a href="#webvtt-cue-components">#webvtt-cue-components</a></b><b>Referenced in:</b> +
+
+
+
7212
+ 		+
+ + + <aside class="dfn-panel" data-for="webvtt-caption-or-subtitle-cue-components"> +
+
+
+
7213
+ 		+
+ + + <b><a href="#webvtt-caption-or-subtitle-cue-components">#webvtt-caption-or-subtitle-cue-components</a></b><b>Referenced in:</b> +
+
+
6862
+
7214
+ 		+
+ + <ul> +
+
+
6863
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-components-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-components-2">(2)</a> <a href="#ref-for-webvtt-cue-components-3">(3)</a> +
+
+
+
7215
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-components-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-components-2">(2)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-components-3">(3)</a> <a href="#ref-for-webvtt-caption-or-subtitle-cue-components-4">(4)</a> +
+
+
+
7216
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-components-5">5. Default classes for WebVTT Caption or Subtitle Cue Components</a> +
+
+
+
7217
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-components-6">5.1. Default text colors</a> +
+
+
+
7218
+ 		+
+ + + <li><a href="#ref-for-webvtt-caption-or-subtitle-cue-components-7">5.2. Default text background colors</a> +
+
+
+
7219
+ 		+
+ + + </ul> +
+
+
+
7220
+ 		+
+ + + </aside> +
+
+
+
7221
+ 		+
+ + + <aside class="dfn-panel" data-for="cue-component-class-names"> +
+
+
+
7222
+ 		+
+ + + <b><a href="#cue-component-class-names">#cue-component-class-names</a></b><b>Referenced in:</b> +
+
+
+
7223
+ 		+
+ + + <ul> +
+
+
+
7224
+ 		+
+ + + <li><a href="#ref-for-cue-component-class-names-1">5. Default classes for WebVTT Caption or Subtitle Cue Components</a> +
+
+
+
7225
+ 		+
+ + + <li><a href="#ref-for-cue-component-class-names-2">5.1. Default text colors</a> <a href="#ref-for-cue-component-class-names-3">(2)</a> +
+
+
+
7226
+ 		+
+ + + <li><a href="#ref-for-cue-component-class-names-4">5.2. Default text background colors</a> <a href="#ref-for-cue-component-class-names-5">(2)</a> +
+
+
+
7227
+ 		+
+ + + <li><a href="#ref-for-cue-component-class-names-6">6.4. WebVTT cue text parsing rules</a> +
+
+
6864
+
7228
+ 		+
+ + </ul> +
+
+
6865
+
7229
+ 		+
+ + </aside> +
+
+
6866
+
7230
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-internal-text"> +
+
+
6867
+
7231
+ 		+
+ + <b><a href="#webvtt-cue-internal-text">#webvtt-cue-internal-text</a></b><b>Referenced in:</b> +
+
+
6868
+
7232
+ 		+
+ + <ul> +
+
+
6869
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-internal-text-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-internal-text-2">(2)</a> <a href="#ref-for-webvtt-cue-internal-text-3">(3)</a> <a href="#ref-for-webvtt-cue-internal-text-4">(4)</a> <a href="#ref-for-webvtt-cue-internal-text-5">(5)</a> <a href="#ref-for-webvtt-cue-internal-text-6">(6)</a> <a href="#ref-for-webvtt-cue-internal-text-7">(7)</a> <a href="#ref-for-webvtt-cue-internal-text-8">(8)</a> +
+
+
+
7233
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-internal-text-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-internal-text-2">(2)</a> <a href="#ref-for-webvtt-cue-internal-text-3">(3)</a> <a href="#ref-for-webvtt-cue-internal-text-4">(4)</a> <a href="#ref-for-webvtt-cue-internal-text-5">(5)</a> <a href="#ref-for-webvtt-cue-internal-text-6">(6)</a> <a href="#ref-for-webvtt-cue-internal-text-7">(7)</a> <a href="#ref-for-webvtt-cue-internal-text-8">(8)</a> +
+
+
6870
+
7234
+ 		+
+ + </ul> +
+
+
6871
+
7235
+ 		+
+ + </aside> +
+
+
6872
+
7236
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-class-span"> +
+
+
6873
+
7237
+ 		+
+ + <b><a href="#webvtt-cue-class-span">#webvtt-cue-class-span</a></b><b>Referenced in:</b> +
+
+
6874
+
7238
+ 		+
+ + <ul> +
+
+
6875
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-class-span-1">4.2.2. WebVTT cue text</a> +
+
+
6876
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-class-span-2">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7239
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-class-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7240
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-class-span-2">6.4. WebVTT cue text parsing rules</a> +
+
+
6877
+
7241
+ 		+
+ + </ul> +
+
+
6878
+
7242
+ 		+
+ + </aside> +
+
+
6879
+
7243
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-italics-span"> +
+
+
6880
+
7244
+ 		+
+ + <b><a href="#webvtt-cue-italics-span">#webvtt-cue-italics-span</a></b><b>Referenced in:</b> +
+
+
6881
+
7245
+ 		+
+ + <ul> +
+
+
6882
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-italics-span-1">4.2.2. WebVTT cue text</a> +
+
+
6883
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-italics-span-2">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7246
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-italics-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7247
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-italics-span-2">6.4. WebVTT cue text parsing rules</a> +
+
+
6884
+
7248
+ 		+
+ + </ul> +
+
+
6885
+
7249
+ 		+
+ + </aside> +
+
+
6886
+
7250
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-bold-span"> +
+
+
6887
+
7251
+ 		+
+ + <b><a href="#webvtt-cue-bold-span">#webvtt-cue-bold-span</a></b><b>Referenced in:</b> +
+
+
6888
+
7252
+ 		+
+ + <ul> +
+
+
6889
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-bold-span-1">4.2.2. WebVTT cue text</a> +
+
+
6890
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-bold-span-2">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7253
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-bold-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7254
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-bold-span-2">6.4. WebVTT cue text parsing rules</a> +
+
+
6891
+
7255
+ 		+
+ + </ul> +
+
+
6892
+
7256
+ 		+
+ + </aside> +
+
+
6893
+
7257
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-underline-span"> +
+
+
6894
+
7258
+ 		+
+ + <b><a href="#webvtt-cue-underline-span">#webvtt-cue-underline-span</a></b><b>Referenced in:</b> +
+
+
6895
+
7259
+ 		+
+ + <ul> +
+
+
6896
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-underline-span-1">4.2.2. WebVTT cue text</a> +
+
+
6897
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-underline-span-2">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7260
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-underline-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7261
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-underline-span-2">6.4. WebVTT cue text parsing rules</a> +
+
+
6898
+
7262
+ 		+
+ + </ul> +
+
+
6899
+
7263
+ 		+
+ + </aside> +
+
+
6900
+
7264
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-ruby-span"> +
+
+
6901
+
7265
+ 		+
+ + <b><a href="#webvtt-cue-ruby-span">#webvtt-cue-ruby-span</a></b><b>Referenced in:</b> +
+
+
6902
+
7266
+ 		+
+ + <ul> +
+
+
6903
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-ruby-span-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-ruby-span-2">(2)</a> +
+
+
6904
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-ruby-span-3">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7267
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-ruby-span-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-ruby-span-2">(2)</a> +
+
+
+
7268
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-ruby-span-3">6.4. WebVTT cue text parsing rules</a> +
+
+
6905
+
7269
+ 		+
+ + </ul> +
+
+
6906
+
7270
+ 		+
+ + </aside> +
+
+
6907
+
7271
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-ruby-text-span"> +
+
+
6908
+
7272
+ 		+
+ + <b><a href="#webvtt-cue-ruby-text-span">#webvtt-cue-ruby-text-span</a></b><b>Referenced in:</b> +
+
+
6909
+
7273
+ 		+
+ + <ul> +
+
+
6910
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-ruby-text-span-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7274
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-ruby-text-span-1">6.4. WebVTT cue text parsing rules</a> +
+
+
6911
+
7275
+ 		+
+ + </ul> +
+
+
6912
+
7276
+ 		+
+ + </aside> +
+
+
6913
+
7277
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-voice-span"> +
+
+
6914
+
7278
+ 		+
+ + <b><a href="#webvtt-cue-voice-span">#webvtt-cue-voice-span</a></b><b>Referenced in:</b> +
+
+
6915
+
7279
+ 		+
+ + <ul> +
+
+
6916
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-voice-span-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-voice-span-2">(2)</a> +
+
+
6917
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-voice-span-3">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7280
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-voice-span-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-voice-span-2">(2)</a> +
+
+
+
7281
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-voice-span-3">6.4. WebVTT cue text parsing rules</a> +
+
+
6918
+
7282
+ 		+
+ + </ul> +
+
+
6919
+
7283
+ 		+
+ + </aside> +
+
+
6920
+
7284
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-language-span"> +
+
+
6921
+
7285
+ 		+
+ + <b><a href="#webvtt-cue-language-span">#webvtt-cue-language-span</a></b><b>Referenced in:</b> +
+
+
6922
+
7286
+ 		+
+ + <ul> +
+
+
6923
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-language-span-1">4.2.2. WebVTT cue text</a> +
+
+
6924
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-language-span-2">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7287
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-language-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7288
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-language-span-2">6.4. WebVTT cue text parsing rules</a> +
+
+
6925
+
7289
+ 		+
+ + </ul> +
+
+
6926
+
7290
+ 		+
+ + </aside> +
+
+
6927
+
7291
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-span-start-tag"> +
+
+
6928
+
7292
+ 		+
+ + <b><a href="#webvtt-cue-span-start-tag">#webvtt-cue-span-start-tag</a></b><b>Referenced in:</b> +
+
+
6929
+
7293
+ 		+
+ + <ul> +
+
+
6930
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-span-start-tag-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-span-start-tag-2">(2)</a> <a href="#ref-for-webvtt-cue-span-start-tag-3">(3)</a> <a href="#ref-for-webvtt-cue-span-start-tag-4">(4)</a> <a href="#ref-for-webvtt-cue-span-start-tag-5">(5)</a> <a href="#ref-for-webvtt-cue-span-start-tag-6">(6)</a> <a href="#ref-for-webvtt-cue-span-start-tag-7">(7)</a> <a href="#ref-for-webvtt-cue-span-start-tag-8">(8)</a> +
+
+
+
7294
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-span-start-tag-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-span-start-tag-2">(2)</a> <a href="#ref-for-webvtt-cue-span-start-tag-3">(3)</a> <a href="#ref-for-webvtt-cue-span-start-tag-4">(4)</a> <a href="#ref-for-webvtt-cue-span-start-tag-5">(5)</a> <a href="#ref-for-webvtt-cue-span-start-tag-6">(6)</a> <a href="#ref-for-webvtt-cue-span-start-tag-7">(7)</a> <a href="#ref-for-webvtt-cue-span-start-tag-8">(8)</a> +
+
+
6931
+
7295
+ 		+
+ + </ul> +
+
+
6932
+
7296
+ 		+
+ + </aside> +
+
+
6933
+
7297
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-span-end-tag"> +
+
+
6934
+
7298
+ 		+
+ + <b><a href="#webvtt-cue-span-end-tag">#webvtt-cue-span-end-tag</a></b><b>Referenced in:</b> +
+
+
6935
+
7299
+ 		+
+ + <ul> +
+
+
6936
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-span-end-tag-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-span-end-tag-2">(2)</a> <a href="#ref-for-webvtt-cue-span-end-tag-3">(3)</a> <a href="#ref-for-webvtt-cue-span-end-tag-4">(4)</a> <a href="#ref-for-webvtt-cue-span-end-tag-5">(5)</a> <a href="#ref-for-webvtt-cue-span-end-tag-6">(6)</a> <a href="#ref-for-webvtt-cue-span-end-tag-7">(7)</a> <a href="#ref-for-webvtt-cue-span-end-tag-8">(8)</a> +
+
+
+
7300
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-span-end-tag-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-span-end-tag-2">(2)</a> <a href="#ref-for-webvtt-cue-span-end-tag-3">(3)</a> <a href="#ref-for-webvtt-cue-span-end-tag-4">(4)</a> <a href="#ref-for-webvtt-cue-span-end-tag-5">(5)</a> <a href="#ref-for-webvtt-cue-span-end-tag-6">(6)</a> <a href="#ref-for-webvtt-cue-span-end-tag-7">(7)</a> <a href="#ref-for-webvtt-cue-span-end-tag-8">(8)</a> +
+
+
6937
+
7301
+ 		+
+ + </ul> +
+
+
6938
+
7302
+ 		+
+ + </aside> +
+
+
6939
+
7303
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-timestamp"> +
+
+
6940
+
7304
+ 		+
+ + <b><a href="#webvtt-cue-timestamp">#webvtt-cue-timestamp</a></b><b>Referenced in:</b> +
+
+
6941
+
7305
+ 		+
+ + <ul> +
+
+
6942
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-timestamp-1">4.2.2. WebVTT cue text</a> <a href="#ref-for-webvtt-cue-timestamp-2">(2)</a> +
+
+
+
7306
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-timestamp-1">4.2.2. WebVTT caption or subtitle cue text</a> <a href="#ref-for-webvtt-cue-timestamp-2">(2)</a> +
+
+
6943
+
7307
+ 		+
+ + </ul> +
+
+
6944
+
7308
+ 		+
+ + </aside> +
+
+
6945
+
7309
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-text-span"> +
+
+
6946
+
7310
+ 		+
+ + <b><a href="#webvtt-cue-text-span">#webvtt-cue-text-span</a></b><b>Referenced in:</b> +
+
+
6947
+
7311
+ 		+
+ + <ul> +
+
+
6948
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-span-1">4.2.2. WebVTT cue text</a> +
+
+
6949
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-span-2">4.6.2. WebVTT file using chapter title text</a> +
+
+
+
7312
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-span-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7313
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-span-2">4.2.3. WebVTT chapter title text</a> +
+
+
6950
+
7314
+ 		+
+ + </ul> +
+
+
6951
+
7315
+ 		+
+ + </aside> +
+
+
6952
+
7316
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-span-start-tag-annotation-text"> +
+
+
6953
+
7317
+ 		+
+ + <b><a href="#webvtt-cue-span-start-tag-annotation-text">#webvtt-cue-span-start-tag-annotation-text</a></b><b>Referenced in:</b> +
+
+
6954
+
7318
+ 		+
+ + <ul> +
+
+
6955
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-span-start-tag-annotation-text-1">4.2.2. WebVTT cue text</a> +
+
+
+
7319
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-span-start-tag-annotation-text-1">4.2.2. WebVTT caption or subtitle cue text</a> +
+
+
+
7320
+ 		+
+ + + </ul> +
+
+
+
7321
+ 		+
+ + + </aside> +
+
+
+
7322
+ 		+
+ + + <aside class="dfn-panel" data-for="webvtt-chapter-title-text"> +
+
+
+
7323
+ 		+
+ + + <b><a href="#webvtt-chapter-title-text">#webvtt-chapter-title-text</a></b><b>Referenced in:</b> +
+
+
+
7324
+ 		+
+ + + <ul> +
+
+
+
7325
+ 		+
+ + + <li><a href="#ref-for-webvtt-chapter-title-text-1">4.1. WebVTT file structure</a> +
+
+
+
7326
+ 		+
+ + + <li><a href="#ref-for-webvtt-chapter-title-text-2">4.6.2. WebVTT file using chapter title text</a> +
+
+
6956
+
7327
+ 		+
+ + </ul> +
+
+
6957
+
7328
+ 		+
+ + </aside> +
+
+
6958
+
7329
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-settings-list"> +
+
+
@@ -6965,7 +7336,7 @@
+
+
6965
+
7336
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-identifier-setting"> +
+
+
6966
+
7337
+ 		+
+ + <b><a href="#webvtt-region-identifier-setting">#webvtt-region-identifier-setting</a></b><b>Referenced in:</b> +
+
+
6967
+
7338
+ 		+
+ + <ul> +
+
+
6968
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-identifier-setting-1">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-region-identifier-setting-2">(2)</a> <a href="#ref-for-webvtt-region-identifier-setting-3">(3)</a> <a href="#ref-for-webvtt-region-identifier-setting-4">(4)</a> +
+
+
+
7339
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-identifier-setting-1">4.3. WebVTT region settings</a> <a href="#ref-for-webvtt-region-identifier-setting-2">(2)</a> <a href="#ref-for-webvtt-region-identifier-setting-3">(3)</a> <a href="#ref-for-webvtt-region-identifier-setting-4">(4)</a> <a href="#ref-for-webvtt-region-identifier-setting-5">(5)</a> +
+
+
6969
+
7340
+ 		+
+ + </ul> +
+
+
6970
+
7341
+ 		+
+ + </aside> +
+
+
6971
+
7342
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-width-setting"> +
+
+
@@ -7041,540 +7412,541 @@
+
+
7041
+
7412
+ 		+
+ + <li><a href="#ref-for-webvtt-file-using-only-nested-cues-3">4.6.2. WebVTT file using chapter title text</a> +
+
+
7042
+
7413
+ 		+
+ + </ul> +
+
+
7043
+
7414
+ 		+
+ + </aside> +
+
+
7044
+
+ 		+
+ - + <aside class="dfn-panel" data-for="webvtt-chapter-title-text"> +
+
+
7045
+
+ 		+
+ - + <b><a href="#webvtt-chapter-title-text">#webvtt-chapter-title-text</a></b><b>Referenced in:</b> +
+
+
7046
+
+ 		+
+ - + <ul> +
+
+
7047
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-chapter-title-text-1">4.1. WebVTT file structure</a> +
+
+
7048
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-chapter-title-text-2">4.6.2. WebVTT file using chapter title text</a> +
+
+
7049
+
+ 		+
+ - + </ul> +
+
+
7050
+
+ 		+
+ - + </aside> +
+
+
7051
+
7415
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-parser"> +
+
+
7052
+
7416
+ 		+
+ + <b><a href="#webvtt-parser">#webvtt-parser</a></b><b>Referenced in:</b> +
+
+
7053
+
7417
+ 		+
+ + <ul> +
+
+
7054
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-parser-1">3.1. WebVTT cues</a> +
+
+
7055
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-parser-2">5.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-parser-3">(2)</a> <a href="#ref-for-webvtt-parser-4">(3)</a> +
+
+
+
7418
+ 		+
+ + + <li><a href="#ref-for-webvtt-parser-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
+
7419
+ 		+
+ + + <li><a href="#ref-for-webvtt-parser-2">6.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-parser-3">(2)</a> <a href="#ref-for-webvtt-parser-4">(3)</a> +
+
+
7056
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-parser-5">5.2. WebVTT region settings parsing</a> +
+
+
7057
+
7420
+ 		+
+ + </ul> +
+
+
7058
+
7421
+ 		+
+ + </aside> +
+
+
7059
+
7422
+ 		+
+ + <aside class="dfn-panel" data-for="incremental-webvtt-parser"> +
+
+
7060
+
7423
+ 		+
+ + <b><a href="#incremental-webvtt-parser">#incremental-webvtt-parser</a></b><b>Referenced in:</b> +
+
+
7061
+
7424
+ 		+
+ + <ul> +
+
+
7062
+
+ 		+
+ - + <li><a href="#ref-for-incremental-webvtt-parser-1">5.1. WebVTT file parsing</a> +
+
+
+
7425
+ 		+
+ + + <li><a href="#ref-for-incremental-webvtt-parser-1">6.1. WebVTT file parsing</a> +
+
+
7063
+
7426
+ 		+
+ + </ul> +
+
+
7064
+
7427
+ 		+
+ + </aside> +
+
+
7065
+
7428
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-parser-algorithm"> +
+
+
7066
+
7429
+ 		+
+ + <b><a href="#webvtt-parser-algorithm">#webvtt-parser-algorithm</a></b><b>Referenced in:</b> +
+
+
7067
+
7430
+ 		+
+ + <ul> +
+
+
7068
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-parser-algorithm-1">5.1. WebVTT file parsing</a> +
+
+
+
7431
+ 		+
+ + + <li><a href="#ref-for-webvtt-parser-algorithm-1">6.1. WebVTT file parsing</a> +
+
+
+
7432
+ 		+
+ + + <li><a href="#ref-for-webvtt-parser-algorithm-2">6.2. WebVTT region settings parsing</a> +
+
+
7069
+
7433
+ 		+
+ + </ul> +
+
+
7070
+
7434
+ 		+
+ + </aside> +
+
+
7071
+
7435
+ 		+
+ + <aside class="dfn-panel" data-for="collect-a-webvtt-block"> +
+
+
7072
+
7436
+ 		+
+ + <b><a href="#collect-a-webvtt-block">#collect-a-webvtt-block</a></b><b>Referenced in:</b> +
+
+
7073
+
7437
+ 		+
+ + <ul> +
+
+
7074
+
+ 		+
+ - + <li><a href="#ref-for-collect-a-webvtt-block-1">5.1. WebVTT file parsing</a> <a href="#ref-for-collect-a-webvtt-block-2">(2)</a> +
+
+
+
7438
+ 		+
+ + + <li><a href="#ref-for-collect-a-webvtt-block-1">6.1. WebVTT file parsing</a> <a href="#ref-for-collect-a-webvtt-block-2">(2)</a> +
+
+
7075
+
7439
+ 		+
+ + </ul> +
+
+
7076
+
7440
+ 		+
+ + </aside> +
+
+
7077
+
7441
+ 		+
+ + <aside class="dfn-panel" data-for="collect-webvtt-region-settings"> +
+
+
7078
+
7442
+ 		+
+ + <b><a href="#collect-webvtt-region-settings">#collect-webvtt-region-settings</a></b><b>Referenced in:</b> +
+
+
7079
+
7443
+ 		+
+ + <ul> +
+
+
7080
+
+ 		+
+ - + <li><a href="#ref-for-collect-webvtt-region-settings-1">5.1. WebVTT file parsing</a> +
+
+
+
7444
+ 		+
+ + + <li><a href="#ref-for-collect-webvtt-region-settings-1">6.1. WebVTT file parsing</a> +
+
+
7081
+
7445
+ 		+
+ + </ul> +
+
+
7082
+
7446
+ 		+
+ + </aside> +
+
+
7083
+
7447
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-region-object"> +
+
+
7084
+
7448
+ 		+
+ + <b><a href="#webvtt-region-object">#webvtt-region-object</a></b><b>Referenced in:</b> +
+
+
7085
+
7449
+ 		+
+ + <ul> +
+
+
7086
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-1">5.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-region-object-2">(2)</a> +
+
+
7087
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-3">5.2. WebVTT region settings parsing</a> +
+
+
7088
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-4">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7089
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-5">6.1. Processing model</a> +
+
+
7090
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-region-object-7">(2)</a> <a href="#ref-for-webvtt-region-object-8">(3)</a> <a href="#ref-for-webvtt-region-object-9">(4)</a> +
+
+
7091
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-10">7.1. Introduction</a> <a href="#ref-for-webvtt-region-object-11">(2)</a> +
+
+
7092
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-region-object-12">7.2.3. The ::cue-region pseudo-element</a> <a href="#ref-for-webvtt-region-object-13">(2)</a> <a href="#ref-for-webvtt-region-object-14">(3)</a> <a href="#ref-for-webvtt-region-object-15">(4)</a> +
+
+
+
7450
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-1">6.1. WebVTT file parsing</a> <a href="#ref-for-webvtt-region-object-2">(2)</a> +
+
+
+
7451
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-3">6.2. WebVTT region settings parsing</a> +
+
+
+
7452
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-4">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7453
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-5">7.1. Processing model</a> +
+
+
+
7454
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-6">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-region-object-7">(2)</a> <a href="#ref-for-webvtt-region-object-8">(3)</a> <a href="#ref-for-webvtt-region-object-9">(4)</a> +
+
+
+
7455
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-10">8.1. Introduction</a> <a href="#ref-for-webvtt-region-object-11">(2)</a> +
+
+
+
7456
+ 		+
+ + + <li><a href="#ref-for-webvtt-region-object-12">8.2.3. The ::cue-region pseudo-element</a> <a href="#ref-for-webvtt-region-object-13">(2)</a> <a href="#ref-for-webvtt-region-object-14">(3)</a> <a href="#ref-for-webvtt-region-object-15">(4)</a> +
+
+
7093
+
7457
+ 		+
+ + </ul> +
+
+
7094
+
7458
+ 		+
+ + </aside> +
+
+
7095
+
7459
+ 		+
+ + <aside class="dfn-panel" data-for="parse-a-percentage-string"> +
+
+
7096
+
7460
+ 		+
+ + <b><a href="#parse-a-percentage-string">#parse-a-percentage-string</a></b><b>Referenced in:</b> +
+
+
7097
+
7461
+ 		+
+ + <ul> +
+
+
7098
+
+ 		+
+ - + <li><a href="#ref-for-parse-a-percentage-string-1">5.2. WebVTT region settings parsing</a> <a href="#ref-for-parse-a-percentage-string-2">(2)</a> <a href="#ref-for-parse-a-percentage-string-3">(3)</a> <a href="#ref-for-parse-a-percentage-string-4">(4)</a> <a href="#ref-for-parse-a-percentage-string-5">(5)</a> +
+
+
7099
+
+ 		+
+ - + <li><a href="#ref-for-parse-a-percentage-string-6">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-parse-a-percentage-string-7">(2)</a> <a href="#ref-for-parse-a-percentage-string-8">(3)</a> +
+
+
+
7462
+ 		+
+ + + <li><a href="#ref-for-parse-a-percentage-string-1">6.2. WebVTT region settings parsing</a> <a href="#ref-for-parse-a-percentage-string-2">(2)</a> <a href="#ref-for-parse-a-percentage-string-3">(3)</a> <a href="#ref-for-parse-a-percentage-string-4">(4)</a> <a href="#ref-for-parse-a-percentage-string-5">(5)</a> +
+
+
+
7463
+ 		+
+ + + <li><a href="#ref-for-parse-a-percentage-string-6">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-parse-a-percentage-string-7">(2)</a> <a href="#ref-for-parse-a-percentage-string-8">(3)</a> +
+
+
7100
+
7464
+ 		+
+ + </ul> +
+
+
7101
+
7465
+ 		+
+ + </aside> +
+
+
7102
+
7466
+ 		+
+ + <aside class="dfn-panel" data-for="collect-webvtt-cue-timings-and-settings"> +
+
+
7103
+
7467
+ 		+
+ + <b><a href="#collect-webvtt-cue-timings-and-settings">#collect-webvtt-cue-timings-and-settings</a></b><b>Referenced in:</b> +
+
+
7104
+
7468
+ 		+
+ + <ul> +
+
+
7105
+
+ 		+
+ - + <li><a href="#ref-for-collect-webvtt-cue-timings-and-settings-1">5.1. WebVTT file parsing</a> +
+
+
+
7469
+ 		+
+ + + <li><a href="#ref-for-collect-webvtt-cue-timings-and-settings-1">6.1. WebVTT file parsing</a> +
+
+
7106
+
7470
+ 		+
+ + </ul> +
+
+
7107
+
7471
+ 		+
+ + </aside> +
+
+
7108
+
7472
+ 		+
+ + <aside class="dfn-panel" data-for="parse-the-webvtt-cue-settings"> +
+
+
7109
+
7473
+ 		+
+ + <b><a href="#parse-the-webvtt-cue-settings">#parse-the-webvtt-cue-settings</a></b><b>Referenced in:</b> +
+
+
7110
+
7474
+ 		+
+ + <ul> +
+
+
7111
+
+ 		+
+ - + <li><a href="#ref-for-parse-the-webvtt-cue-settings-1">5.3. WebVTT cue timings and settings parsing</a> +
+
+
+
7475
+ 		+
+ + + <li><a href="#ref-for-parse-the-webvtt-cue-settings-1">6.3. WebVTT cue timings and settings parsing</a> +
+
+
7112
+
7476
+ 		+
+ + </ul> +
+
+
7113
+
7477
+ 		+
+ + </aside> +
+
+
7114
+
7478
+ 		+
+ + <aside class="dfn-panel" data-for="collect-a-webvtt-timestamp"> +
+
+
7115
+
7479
+ 		+
+ + <b><a href="#collect-a-webvtt-timestamp">#collect-a-webvtt-timestamp</a></b><b>Referenced in:</b> +
+
+
7116
+
7480
+ 		+
+ + <ul> +
+
+
7117
+
+ 		+
+ - + <li><a href="#ref-for-collect-a-webvtt-timestamp-1">5.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-collect-a-webvtt-timestamp-2">(2)</a> +
+
+
7118
+
+ 		+
+ - + <li><a href="#ref-for-collect-a-webvtt-timestamp-3">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7481
+ 		+
+ + + <li><a href="#ref-for-collect-a-webvtt-timestamp-1">6.3. WebVTT cue timings and settings parsing</a> <a href="#ref-for-collect-a-webvtt-timestamp-2">(2)</a> +
+
+
+
7482
+ 		+
+ + + <li><a href="#ref-for-collect-a-webvtt-timestamp-3">6.4. WebVTT cue text parsing rules</a> +
+
+
7119
+
7483
+ 		+
+ + </ul> +
+
+
7120
+
7484
+ 		+
+ + </aside> +
+
+
7121
+
7485
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-node-object"> +
+
+
7122
+
7486
+ 		+
+ + <b><a href="#webvtt-node-object">#webvtt-node-object</a></b><b>Referenced in:</b> +
+
+
7123
+
7487
+ 		+
+ + <ul> +
+
+
7124
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-object-2">(2)</a> <a href="#ref-for-webvtt-node-object-3">(3)</a> <a href="#ref-for-webvtt-node-object-4">(4)</a> <a href="#ref-for-webvtt-node-object-5">(5)</a> +
+
+
7125
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-6">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-node-object-7">(2)</a> <a href="#ref-for-webvtt-node-object-8">(3)</a> +
+
+
7126
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-9">6.1. Processing model</a> <a href="#ref-for-webvtt-node-object-10">(2)</a> +
+
+
7127
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-11">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-node-object-12">(2)</a> +
+
+
7128
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-13">7.2. Processing model</a> <a href="#ref-for-webvtt-node-object-14">(2)</a> +
+
+
7129
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-15">7.2.1. The ::cue pseudo-element</a> +
+
+
7130
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-object-16">7.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-node-object-17">(2)</a> <a href="#ref-for-webvtt-node-object-18">(3)</a> <a href="#ref-for-webvtt-node-object-19">(4)</a> <a href="#ref-for-webvtt-node-object-20">(5)</a> <a href="#ref-for-webvtt-node-object-21">(6)</a> <a href="#ref-for-webvtt-node-object-22">(7)</a> +
+
+
+
7488
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-object-2">(2)</a> <a href="#ref-for-webvtt-node-object-3">(3)</a> <a href="#ref-for-webvtt-node-object-4">(4)</a> <a href="#ref-for-webvtt-node-object-5">(5)</a> +
+
+
+
7489
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-6">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-node-object-7">(2)</a> <a href="#ref-for-webvtt-node-object-8">(3)</a> +
+
+
+
7490
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-9">7.3. Obtaining CSS boxes</a> <a href="#ref-for-webvtt-node-object-10">(2)</a> +
+
+
+
7491
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-11">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-node-object-12">(2)</a> +
+
+
+
7492
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-13">8.2. Processing model</a> <a href="#ref-for-webvtt-node-object-14">(2)</a> +
+
+
+
7493
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-15">8.2.1. The ::cue pseudo-element</a> +
+
+
+
7494
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-object-16">8.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-node-object-17">(2)</a> <a href="#ref-for-webvtt-node-object-18">(3)</a> <a href="#ref-for-webvtt-node-object-19">(4)</a> <a href="#ref-for-webvtt-node-object-20">(5)</a> <a href="#ref-for-webvtt-node-object-21">(6)</a> <a href="#ref-for-webvtt-node-object-22">(7)</a> +
+
+
7131
+
7495
+ 		+
+ + </ul> +
+
+
7132
+
7496
+ 		+
+ + </aside> +
+
+
7133
+
7497
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-internal-node-object"> +
+
+
7134
+
7498
+ 		+
+ + <b><a href="#webvtt-internal-node-object">#webvtt-internal-node-object</a></b><b>Referenced in:</b> +
+
+
7135
+
7499
+ 		+
+ + <ul> +
+
+
7136
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-internal-node-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-internal-node-object-2">(2)</a> <a href="#ref-for-webvtt-internal-node-object-3">(3)</a> <a href="#ref-for-webvtt-internal-node-object-4">(4)</a> <a href="#ref-for-webvtt-internal-node-object-5">(5)</a> <a href="#ref-for-webvtt-internal-node-object-6">(6)</a> <a href="#ref-for-webvtt-internal-node-object-7">(7)</a> +
+
+
7137
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-internal-node-object-8">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7138
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-internal-node-object-9">6.1. Processing model</a> +
+
+
7139
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-internal-node-object-10">7.1. Introduction</a> <a href="#ref-for-webvtt-internal-node-object-11">(2)</a> <a href="#ref-for-webvtt-internal-node-object-12">(3)</a> <a href="#ref-for-webvtt-internal-node-object-13">(4)</a> <a href="#ref-for-webvtt-internal-node-object-14">(5)</a> +
+
+
7140
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-internal-node-object-15">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-internal-node-object-16">(2)</a> <a href="#ref-for-webvtt-internal-node-object-17">(3)</a> <a href="#ref-for-webvtt-internal-node-object-18">(4)</a> <a href="#ref-for-webvtt-internal-node-object-19">(5)</a> <a href="#ref-for-webvtt-internal-node-object-20">(6)</a> <a href="#ref-for-webvtt-internal-node-object-21">(7)</a> +
+
+
+
7500
+ 		+
+ + + <li><a href="#ref-for-webvtt-internal-node-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-internal-node-object-2">(2)</a> <a href="#ref-for-webvtt-internal-node-object-3">(3)</a> <a href="#ref-for-webvtt-internal-node-object-4">(4)</a> <a href="#ref-for-webvtt-internal-node-object-5">(5)</a> <a href="#ref-for-webvtt-internal-node-object-6">(6)</a> <a href="#ref-for-webvtt-internal-node-object-7">(7)</a> +
+
+
+
7501
+ 		+
+ + + <li><a href="#ref-for-webvtt-internal-node-object-8">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7502
+ 		+
+ + + <li><a href="#ref-for-webvtt-internal-node-object-9">7.3. Obtaining CSS boxes</a> +
+
+
+
7503
+ 		+
+ + + <li><a href="#ref-for-webvtt-internal-node-object-10">8.1. Introduction</a> <a href="#ref-for-webvtt-internal-node-object-11">(2)</a> <a href="#ref-for-webvtt-internal-node-object-12">(3)</a> <a href="#ref-for-webvtt-internal-node-object-13">(4)</a> <a href="#ref-for-webvtt-internal-node-object-14">(5)</a> +
+
+
+
7504
+ 		+
+ + + <li><a href="#ref-for-webvtt-internal-node-object-15">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-internal-node-object-16">(2)</a> <a href="#ref-for-webvtt-internal-node-object-17">(3)</a> <a href="#ref-for-webvtt-internal-node-object-18">(4)</a> <a href="#ref-for-webvtt-internal-node-object-19">(5)</a> <a href="#ref-for-webvtt-internal-node-object-20">(6)</a> <a href="#ref-for-webvtt-internal-node-object-21">(7)</a> +
+
+
7141
+
7505
+ 		+
+ + </ul> +
+
+
7142
+
7506
+ 		+
+ + </aside> +
+
+
7143
+
7507
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-node-objects-applicable-classes"> +
+
+
7144
+
7508
+ 		+
+ + <b><a href="#webvtt-node-objects-applicable-classes">#webvtt-node-objects-applicable-classes</a></b><b>Referenced in:</b> +
+
+
7145
+
7509
+ 		+
+ + <ul> +
+
+
7146
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-objects-applicable-classes-2">(2)</a> +
+
+
7147
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-3">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7148
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-4">7.1. Introduction</a> +
+
+
7149
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-5">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7510
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-objects-applicable-classes-2">(2)</a> +
+
+
+
7511
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-3">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7512
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-4">8.1. Introduction</a> +
+
+
+
7513
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-classes-5">8.2.1. The ::cue pseudo-element</a> +
+
+
7150
+
7514
+ 		+
+ + </ul> +
+
+
7151
+
7515
+ 		+
+ + </aside> +
+
+
7152
+
7516
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-node-objects-applicable-language"> +
+
+
7153
+
7517
+ 		+
+ + <b><a href="#webvtt-node-objects-applicable-language">#webvtt-node-objects-applicable-language</a></b><b>Referenced in:</b> +
+
+
7154
+
7518
+ 		+
+ + <ul> +
+
+
7155
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-language-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-objects-applicable-language-2">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-3">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-4">(4)</a> +
+
+
7156
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-language-5">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7157
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-language-6">7.1. Introduction</a> <a href="#ref-for-webvtt-node-objects-applicable-language-7">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-8">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-9">(4)</a> +
+
+
7158
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-node-objects-applicable-language-10">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-node-objects-applicable-language-11">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-12">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-13">(4)</a> +
+
+
+
7519
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-language-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-node-objects-applicable-language-2">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-3">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-4">(4)</a> +
+
+
+
7520
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-language-5">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7521
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-language-6">8.1. Introduction</a> <a href="#ref-for-webvtt-node-objects-applicable-language-7">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-8">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-9">(4)</a> +
+
+
+
7522
+ 		+
+ + + <li><a href="#ref-for-webvtt-node-objects-applicable-language-10">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-node-objects-applicable-language-11">(2)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-12">(3)</a> <a href="#ref-for-webvtt-node-objects-applicable-language-13">(4)</a> +
+
+
7159
+
7523
+ 		+
+ + </ul> +
+
+
7160
+
7524
+ 		+
+ + </aside> +
+
+
7161
+
7525
+ 		+
+ + <aside class="dfn-panel" data-for="list-of-webvtt-node-objects"> +
+
+
7162
+
7526
+ 		+
+ + <b><a href="#list-of-webvtt-node-objects">#list-of-webvtt-node-objects</a></b><b>Referenced in:</b> +
+
+
7163
+
7527
+ 		+
+ + <ul> +
+
+
7164
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-1">5.2. WebVTT region settings parsing</a> +
+
+
7165
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-2">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-list-of-webvtt-node-objects-3">(2)</a> +
+
+
7166
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-4">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-list-of-webvtt-node-objects-5">(2)</a> +
+
+
7167
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-6">5.6. WebVTT rules for extracting the chapter +
+
+
+
7528
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-1">6.2. WebVTT region settings parsing</a> +
+
+
+
7529
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-2">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-list-of-webvtt-node-objects-3">(2)</a> +
+
+
+
7530
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-4">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-list-of-webvtt-node-objects-5">(2)</a> +
+
+
+
7531
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-6">6.6. WebVTT rules for extracting the chapter +
+
+
7168
+
7532
+ 		+
+ + title</a> +
+
+
7169
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-7">6.1. Processing model</a> <a href="#ref-for-list-of-webvtt-node-objects-8">(2)</a> +
+
+
7170
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-9">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-list-of-webvtt-node-objects-10">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-11">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-12">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-13">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-14">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-15">(7)</a> <a href="#ref-for-list-of-webvtt-node-objects-16">(8)</a> <a href="#ref-for-list-of-webvtt-node-objects-17">(9)</a> +
+
+
7171
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-18">7.1. Introduction</a> <a href="#ref-for-list-of-webvtt-node-objects-19">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-20">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-21">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-22">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-23">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-24">(7)</a> +
+
+
7172
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-25">7.2. Processing model</a> +
+
+
7173
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-26">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-list-of-webvtt-node-objects-27">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-28">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-29">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-30">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-31">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-32">(7)</a> +
+
+
7174
+
+ 		+
+ - + <li><a href="#ref-for-list-of-webvtt-node-objects-33">7.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-list-of-webvtt-node-objects-34">(2)</a> +
+
+
+
7533
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-7">7.1. Processing model</a> +
+
+
+
7534
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-8">7.2. Processing cue settings</a> +
+
+
+
7535
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-9">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-list-of-webvtt-node-objects-10">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-11">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-12">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-13">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-14">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-15">(7)</a> <a href="#ref-for-list-of-webvtt-node-objects-16">(8)</a> <a href="#ref-for-list-of-webvtt-node-objects-17">(9)</a> +
+
+
+
7536
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-18">8.1. Introduction</a> <a href="#ref-for-list-of-webvtt-node-objects-19">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-20">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-21">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-22">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-23">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-24">(7)</a> +
+
+
+
7537
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-25">8.2. Processing model</a> +
+
+
+
7538
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-26">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-list-of-webvtt-node-objects-27">(2)</a> <a href="#ref-for-list-of-webvtt-node-objects-28">(3)</a> <a href="#ref-for-list-of-webvtt-node-objects-29">(4)</a> <a href="#ref-for-list-of-webvtt-node-objects-30">(5)</a> <a href="#ref-for-list-of-webvtt-node-objects-31">(6)</a> <a href="#ref-for-list-of-webvtt-node-objects-32">(7)</a> +
+
+
+
7539
+ 		+
+ + + <li><a href="#ref-for-list-of-webvtt-node-objects-33">8.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-list-of-webvtt-node-objects-34">(2)</a> +
+
+
7175
+
7540
+ 		+
+ + </ul> +
+
+
7176
+
7541
+ 		+
+ + </aside> +
+
+
7177
+
7542
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-class-object"> +
+
+
7178
+
7543
+ 		+
+ + <b><a href="#webvtt-class-object">#webvtt-class-object</a></b><b>Referenced in:</b> +
+
+
7179
+
7544
+ 		+
+ + <ul> +
+
+
7180
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-class-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-class-object-2">(2)</a> +
+
+
7181
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-class-object-3">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7182
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-class-object-4">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7545
+ 		+
+ + + <li><a href="#ref-for-webvtt-class-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-class-object-2">(2)</a> +
+
+
+
7546
+ 		+
+ + + <li><a href="#ref-for-webvtt-class-object-3">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7547
+ 		+
+ + + <li><a href="#ref-for-webvtt-class-object-4">8.2.1. The ::cue pseudo-element</a> +
+
+
7183
+
7548
+ 		+
+ + </ul> +
+
+
7184
+
7549
+ 		+
+ + </aside> +
+
+
7185
+
7550
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-italic-object"> +
+
+
7186
+
7551
+ 		+
+ + <b><a href="#webvtt-italic-object">#webvtt-italic-object</a></b><b>Referenced in:</b> +
+
+
7187
+
7552
+ 		+
+ + <ul> +
+
+
7188
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-italic-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-italic-object-2">(2)</a> +
+
+
7189
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-italic-object-3">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7190
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-italic-object-4">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
7191
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-italic-object-5">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7553
+ 		+
+ + + <li><a href="#ref-for-webvtt-italic-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-italic-object-2">(2)</a> +
+
+
+
7554
+ 		+
+ + + <li><a href="#ref-for-webvtt-italic-object-3">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7555
+ 		+
+ + + <li><a href="#ref-for-webvtt-italic-object-4">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
7556
+ 		+
+ + + <li><a href="#ref-for-webvtt-italic-object-5">8.2.1. The ::cue pseudo-element</a> +
+
+
7192
+
7557
+ 		+
+ + </ul> +
+
+
7193
+
7558
+ 		+
+ + </aside> +
+
+
7194
+
7559
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-bold-object"> +
+
+
7195
+
7560
+ 		+
+ + <b><a href="#webvtt-bold-object">#webvtt-bold-object</a></b><b>Referenced in:</b> +
+
+
7196
+
7561
+ 		+
+ + <ul> +
+
+
7197
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-bold-object-1">1.3. Styling</a> +
+
+
7198
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-bold-object-2">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-bold-object-3">(2)</a> +
+
+
7199
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-bold-object-4">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7200
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-bold-object-5">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
7201
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-bold-object-6">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7562
+ 		+
+ + + <li><a href="#ref-for-webvtt-bold-object-1">1.3. Styling captions</a> +
+
+
+
7563
+ 		+
+ + + <li><a href="#ref-for-webvtt-bold-object-2">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-bold-object-3">(2)</a> +
+
+
+
7564
+ 		+
+ + + <li><a href="#ref-for-webvtt-bold-object-4">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7565
+ 		+
+ + + <li><a href="#ref-for-webvtt-bold-object-5">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
7566
+ 		+
+ + + <li><a href="#ref-for-webvtt-bold-object-6">8.2.1. The ::cue pseudo-element</a> +
+
+
7202
+
7567
+ 		+
+ + </ul> +
+
+
7203
+
7568
+ 		+
+ + </aside> +
+
+
7204
+
7569
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-underline-object"> +
+
+
7205
+
7570
+ 		+
+ + <b><a href="#webvtt-underline-object">#webvtt-underline-object</a></b><b>Referenced in:</b> +
+
+
7206
+
7571
+ 		+
+ + <ul> +
+
+
7207
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-underline-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-underline-object-2">(2)</a> +
+
+
7208
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-underline-object-3">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7209
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-underline-object-4">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
7210
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-underline-object-5">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7572
+ 		+
+ + + <li><a href="#ref-for-webvtt-underline-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-underline-object-2">(2)</a> +
+
+
+
7573
+ 		+
+ + + <li><a href="#ref-for-webvtt-underline-object-3">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7574
+ 		+
+ + + <li><a href="#ref-for-webvtt-underline-object-4">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
7575
+ 		+
+ + + <li><a href="#ref-for-webvtt-underline-object-5">8.2.1. The ::cue pseudo-element</a> +
+
+
7211
+
7576
+ 		+
+ + </ul> +
+
+
7212
+
7577
+ 		+
+ + </aside> +
+
+
7213
+
7578
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-ruby-object"> +
+
+
7214
+
7579
+ 		+
+ + <b><a href="#webvtt-ruby-object">#webvtt-ruby-object</a></b><b>Referenced in:</b> +
+
+
7215
+
7580
+ 		+
+ + <ul> +
+
+
7216
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-ruby-object-2">(2)</a> <a href="#ref-for-webvtt-ruby-object-3">(3)</a> +
+
+
7217
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-object-4">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7218
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-object-5">6.1. Processing model</a> +
+
+
7219
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-object-6">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
7220
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-object-7">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7581
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-ruby-object-2">(2)</a> <a href="#ref-for-webvtt-ruby-object-3">(3)</a> +
+
+
+
7582
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-object-4">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7583
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-object-5">7.3. Obtaining CSS boxes</a> +
+
+
+
7584
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-object-6">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
7585
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-object-7">8.2.1. The ::cue pseudo-element</a> +
+
+
7221
+
7586
+ 		+
+ + </ul> +
+
+
7222
+
7587
+ 		+
+ + </aside> +
+
+
7223
+
7588
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-ruby-text-object"> +
+
+
7224
+
7589
+ 		+
+ + <b><a href="#webvtt-ruby-text-object">#webvtt-ruby-text-object</a></b><b>Referenced in:</b> +
+
+
7225
+
7590
+ 		+
+ + <ul> +
+
+
7226
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-ruby-text-object-2">(2)</a> <a href="#ref-for-webvtt-ruby-text-object-3">(3)</a> +
+
+
7227
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-4">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7228
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-5">5.6. WebVTT rules for extracting the chapter +
+
+
+
7591
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-ruby-text-object-2">(2)</a> <a href="#ref-for-webvtt-ruby-text-object-3">(3)</a> +
+
+
+
7592
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-4">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7593
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-5">6.6. WebVTT rules for extracting the chapter +
+
+
7229
+
7594
+ 		+
+ + title</a> +
+
+
7230
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-6">6.1. Processing model</a> +
+
+
7231
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-7">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-ruby-text-object-8">(2)</a> +
+
+
7232
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-ruby-text-object-9">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7595
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-6">7.3. Obtaining CSS boxes</a> +
+
+
+
7596
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-7">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-webvtt-ruby-text-object-8">(2)</a> +
+
+
+
7597
+ 		+
+ + + <li><a href="#ref-for-webvtt-ruby-text-object-9">8.2.1. The ::cue pseudo-element</a> +
+
+
7233
+
7598
+ 		+
+ + </ul> +
+
+
7234
+
7599
+ 		+
+ + </aside> +
+
+
7235
+
7600
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-voice-object"> +
+
+
7236
+
7601
+ 		+
+ + <b><a href="#webvtt-voice-object">#webvtt-voice-object</a></b><b>Referenced in:</b> +
+
+
7237
+
7602
+ 		+
+ + <ul> +
+
+
7238
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-voice-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-voice-object-2">(2)</a> <a href="#ref-for-webvtt-voice-object-3">(3)</a> +
+
+
7239
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-voice-object-4">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-voice-object-5">(2)</a> +
+
+
7240
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-voice-object-6">7.1. Introduction</a> +
+
+
7241
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-voice-object-7">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-voice-object-8">(2)</a> <a href="#ref-for-webvtt-voice-object-9">(3)</a> +
+
+
+
7603
+ 		+
+ + + <li><a href="#ref-for-webvtt-voice-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-voice-object-2">(2)</a> <a href="#ref-for-webvtt-voice-object-3">(3)</a> +
+
+
+
7604
+ 		+
+ + + <li><a href="#ref-for-webvtt-voice-object-4">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-voice-object-5">(2)</a> +
+
+
+
7605
+ 		+
+ + + <li><a href="#ref-for-webvtt-voice-object-6">8.1. Introduction</a> +
+
+
+
7606
+ 		+
+ + + <li><a href="#ref-for-webvtt-voice-object-7">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-voice-object-8">(2)</a> <a href="#ref-for-webvtt-voice-object-9">(3)</a> +
+
+
7242
+
7607
+ 		+
+ + </ul> +
+
+
7243
+
7608
+ 		+
+ + </aside> +
+
+
7244
+
7609
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-language-object"> +
+
+
7245
+
7610
+ 		+
+ + <b><a href="#webvtt-language-object">#webvtt-language-object</a></b><b>Referenced in:</b> +
+
+
7246
+
7611
+ 		+
+ + <ul> +
+
+
7247
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-language-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-language-object-2">(2)</a> +
+
+
7248
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-language-object-3">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-language-object-4">(2)</a> +
+
+
7249
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-language-object-5">7.1. Introduction</a> +
+
+
7250
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-language-object-6">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-language-object-7">(2)</a> +
+
+
+
7612
+ 		+
+ + + <li><a href="#ref-for-webvtt-language-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-language-object-2">(2)</a> +
+
+
+
7613
+ 		+
+ + + <li><a href="#ref-for-webvtt-language-object-3">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-language-object-4">(2)</a> +
+
+
+
7614
+ 		+
+ + + <li><a href="#ref-for-webvtt-language-object-5">8.1. Introduction</a> +
+
+
+
7615
+ 		+
+ + + <li><a href="#ref-for-webvtt-language-object-6">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-language-object-7">(2)</a> +
+
+
7251
+
7616
+ 		+
+ + </ul> +
+
+
7252
+
7617
+ 		+
+ + </aside> +
+
+
7253
+
7618
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-leaf-node-object"> +
+
+
7254
+
7619
+ 		+
+ + <b><a href="#webvtt-leaf-node-object">#webvtt-leaf-node-object</a></b><b>Referenced in:</b> +
+
+
7255
+
7620
+ 		+
+ + <ul> +
+
+
7256
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-leaf-node-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-leaf-node-object-2">(2)</a> +
+
+
7257
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-leaf-node-object-3">7.2.1. The ::cue pseudo-element</a> +
+
+
+
7621
+ 		+
+ + + <li><a href="#ref-for-webvtt-leaf-node-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-leaf-node-object-2">(2)</a> +
+
+
+
7622
+ 		+
+ + + <li><a href="#ref-for-webvtt-leaf-node-object-3">8.2.1. The ::cue pseudo-element</a> +
+
+
7258
+
7623
+ 		+
+ + </ul> +
+
+
7259
+
7624
+ 		+
+ + </aside> +
+
+
7260
+
7625
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-text-object"> +
+
+
7261
+
7626
+ 		+
+ + <b><a href="#webvtt-text-object">#webvtt-text-object</a></b><b>Referenced in:</b> +
+
+
7262
+
7627
+ 		+
+ + <ul> +
+
+
7263
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-text-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-text-object-2">(2)</a> <a href="#ref-for-webvtt-text-object-3">(3)</a> +
+
+
7264
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-text-object-4">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-text-object-5">(2)</a> +
+
+
7265
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-text-object-6">5.6. WebVTT rules for extracting the chapter +
+
+
+
7628
+ 		+
+ + + <li><a href="#ref-for-webvtt-text-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-text-object-2">(2)</a> <a href="#ref-for-webvtt-text-object-3">(3)</a> +
+
+
+
7629
+ 		+
+ + + <li><a href="#ref-for-webvtt-text-object-4">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-text-object-5">(2)</a> +
+
+
+
7630
+ 		+
+ + + <li><a href="#ref-for-webvtt-text-object-6">6.6. WebVTT rules for extracting the chapter +
+
+
7266
+
7631
+ 		+
+ + title</a> +
+
+
7267
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-text-object-7">6.1. Processing model</a> +
+
+
+
7632
+ 		+
+ + + <li><a href="#ref-for-webvtt-text-object-7">7.3. Obtaining CSS boxes</a> +
+
+
7268
+
7633
+ 		+
+ + </ul> +
+
+
7269
+
7634
+ 		+
+ + </aside> +
+
+
7270
+
7635
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-timestamp-object"> +
+
+
7271
+
7636
+ 		+
+ + <b><a href="#webvtt-timestamp-object">#webvtt-timestamp-object</a></b><b>Referenced in:</b> +
+
+
7272
+
7637
+ 		+
+ + <ul> +
+
+
7273
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-timestamp-object-2">(2)</a> +
+
+
7274
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-object-3">5.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-timestamp-object-4">(2)</a> +
+
+
7275
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-object-5">7.1. Introduction</a> +
+
+
7276
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-object-6">7.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-timestamp-object-7">(2)</a> +
+
+
+
7638
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-timestamp-object-2">(2)</a> +
+
+
+
7639
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-object-3">6.5. WebVTT cue text DOM construction rules</a> <a href="#ref-for-webvtt-timestamp-object-4">(2)</a> +
+
+
+
7640
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-object-5">8.1. Introduction</a> +
+
+
+
7641
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-object-6">8.2.2. The :past and :future pseudo-classes</a> <a href="#ref-for-webvtt-timestamp-object-7">(2)</a> +
+
+
7277
+
7642
+ 		+
+ + </ul> +
+
+
7278
+
7643
+ 		+
+ + </aside> +
+
+
7279
+
7644
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-text-parsing-rules"> +
+
+
7280
+
7645
+ 		+
+ + <b><a href="#webvtt-cue-text-parsing-rules">#webvtt-cue-text-parsing-rules</a></b><b>Referenced in:</b> +
+
+
7281
+
7646
+ 		+
+ + <ul> +
+
+
7282
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-1">5.6. WebVTT rules for extracting the chapter +
+
+
+
7647
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-1">6.6. WebVTT rules for extracting the chapter +
+
+
7283
+
7648
+ 		+
+ + title</a> +
+
+
7284
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-2">6.1. Processing model</a> +
+
+
7285
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-3">8.1. The VTTCue interface</a> +
+
+
+
7649
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-2">7.1. Processing model</a> +
+
+
+
7650
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-parsing-rules-3">9.1. The VTTCue interface</a> +
+
+
7286
+
7651
+ 		+
+ + </ul> +
+
+
7287
+
7652
+ 		+
+ + </aside> +
+
+
7288
+
7653
+ 		+
+ + <aside class="dfn-panel" data-for="attach-a-webvtt-internal-node-object"> +
+
+
7289
+
7654
+ 		+
+ + <b><a href="#attach-a-webvtt-internal-node-object">#attach-a-webvtt-internal-node-object</a></b><b>Referenced in:</b> +
+
+
7290
+
7655
+ 		+
+ + <ul> +
+
+
7291
+
+ 		+
+ - + <li><a href="#ref-for-attach-a-webvtt-internal-node-object-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-2">(2)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-3">(3)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-4">(4)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-5">(5)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-6">(6)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-7">(7)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-8">(8)</a> +
+
+
+
7656
+ 		+
+ + + <li><a href="#ref-for-attach-a-webvtt-internal-node-object-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-2">(2)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-3">(3)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-4">(4)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-5">(5)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-6">(6)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-7">(7)</a> <a href="#ref-for-attach-a-webvtt-internal-node-object-8">(8)</a> +
+
+
7292
+
7657
+ 		+
+ + </ul> +
+
+
7293
+
7658
+ 		+
+ + </aside> +
+
+
7294
+
7659
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-text-tokenizer"> +
+
+
7295
+
7660
+ 		+
+ + <b><a href="#webvtt-cue-text-tokenizer">#webvtt-cue-text-tokenizer</a></b><b>Referenced in:</b> +
+
+
7296
+
7661
+ 		+
+ + <ul> +
+
+
7297
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-tokenizer-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7662
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-tokenizer-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7298
+
7663
+ 		+
+ + </ul> +
+
+
7299
+
7664
+ 		+
+ + </aside> +
+
+
7300
+
7665
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-data-state"> +
+
+
7301
+
7666
+ 		+
+ + <b><a href="#webvtt-data-state">#webvtt-data-state</a></b><b>Referenced in:</b> +
+
+
7302
+
7667
+ 		+
+ + <ul> +
+
+
7303
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-data-state-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-data-state-2">(2)</a> +
+
+
+
7668
+ 		+
+ + + <li><a href="#ref-for-webvtt-data-state-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-data-state-2">(2)</a> +
+
+
7304
+
7669
+ 		+
+ + </ul> +
+
+
7305
+
7670
+ 		+
+ + </aside> +
+
+
7306
+
7671
+ 		+
+ + <aside class="dfn-panel" data-for="html-character-reference-in-data-state"> +
+
+
7307
+
7672
+ 		+
+ + <b><a href="#html-character-reference-in-data-state">#html-character-reference-in-data-state</a></b><b>Referenced in:</b> +
+
+
7308
+
7673
+ 		+
+ + <ul> +
+
+
7309
+
+ 		+
+ - + <li><a href="#ref-for-html-character-reference-in-data-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7674
+ 		+
+ + + <li><a href="#ref-for-html-character-reference-in-data-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7310
+
7675
+ 		+
+ + </ul> +
+
+
7311
+
7676
+ 		+
+ + </aside> +
+
+
7312
+
7677
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-tag-state"> +
+
+
7313
+
7678
+ 		+
+ + <b><a href="#webvtt-tag-state">#webvtt-tag-state</a></b><b>Referenced in:</b> +
+
+
7314
+
7679
+ 		+
+ + <ul> +
+
+
7315
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-tag-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7680
+ 		+
+ + + <li><a href="#ref-for-webvtt-tag-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7316
+
7681
+ 		+
+ + </ul> +
+
+
7317
+
7682
+ 		+
+ + </aside> +
+
+
7318
+
7683
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-start-tag-state"> +
+
+
7319
+
7684
+ 		+
+ + <b><a href="#webvtt-start-tag-state">#webvtt-start-tag-state</a></b><b>Referenced in:</b> +
+
+
7320
+
7685
+ 		+
+ + <ul> +
+
+
7321
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-start-tag-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7686
+ 		+
+ + + <li><a href="#ref-for-webvtt-start-tag-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7322
+
7687
+ 		+
+ + </ul> +
+
+
7323
+
7688
+ 		+
+ + </aside> +
+
+
7324
+
7689
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-start-tag-class-state"> +
+
+
7325
+
7690
+ 		+
+ + <b><a href="#webvtt-start-tag-class-state">#webvtt-start-tag-class-state</a></b><b>Referenced in:</b> +
+
+
7326
+
7691
+ 		+
+ + <ul> +
+
+
7327
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-start-tag-class-state-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-start-tag-class-state-2">(2)</a> +
+
+
+
7692
+ 		+
+ + + <li><a href="#ref-for-webvtt-start-tag-class-state-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-start-tag-class-state-2">(2)</a> +
+
+
7328
+
7693
+ 		+
+ + </ul> +
+
+
7329
+
7694
+ 		+
+ + </aside> +
+
+
7330
+
7695
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-start-tag-annotation-state"> +
+
+
7331
+
7696
+ 		+
+ + <b><a href="#webvtt-start-tag-annotation-state">#webvtt-start-tag-annotation-state</a></b><b>Referenced in:</b> +
+
+
7332
+
7697
+ 		+
+ + <ul> +
+
+
7333
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-start-tag-annotation-state-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-start-tag-annotation-state-2">(2)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-3">(3)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-4">(4)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-5">(5)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-6">(6)</a> +
+
+
+
7698
+ 		+
+ + + <li><a href="#ref-for-webvtt-start-tag-annotation-state-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-webvtt-start-tag-annotation-state-2">(2)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-3">(3)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-4">(4)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-5">(5)</a> <a href="#ref-for-webvtt-start-tag-annotation-state-6">(6)</a> +
+
+
7334
+
7699
+ 		+
+ + </ul> +
+
+
7335
+
7700
+ 		+
+ + </aside> +
+
+
7336
+
7701
+ 		+
+ + <aside class="dfn-panel" data-for="html-character-reference-in-annotation-state"> +
+
+
7337
+
7702
+ 		+
+ + <b><a href="#html-character-reference-in-annotation-state">#html-character-reference-in-annotation-state</a></b><b>Referenced in:</b> +
+
+
7338
+
7703
+ 		+
+ + <ul> +
+
+
7339
+
+ 		+
+ - + <li><a href="#ref-for-html-character-reference-in-annotation-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7704
+ 		+
+ + + <li><a href="#ref-for-html-character-reference-in-annotation-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7340
+
7705
+ 		+
+ + </ul> +
+
+
7341
+
7706
+ 		+
+ + </aside> +
+
+
7342
+
7707
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-end-tag-state"> +
+
+
7343
+
7708
+ 		+
+ + <b><a href="#webvtt-end-tag-state">#webvtt-end-tag-state</a></b><b>Referenced in:</b> +
+
+
7344
+
7709
+ 		+
+ + <ul> +
+
+
7345
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-end-tag-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7710
+ 		+
+ + + <li><a href="#ref-for-webvtt-end-tag-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7346
+
7711
+ 		+
+ + </ul> +
+
+
7347
+
7712
+ 		+
+ + </aside> +
+
+
7348
+
7713
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-timestamp-tag-state"> +
+
+
7349
+
7714
+ 		+
+ + <b><a href="#webvtt-timestamp-tag-state">#webvtt-timestamp-tag-state</a></b><b>Referenced in:</b> +
+
+
7350
+
7715
+ 		+
+ + <ul> +
+
+
7351
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-timestamp-tag-state-1">5.4. WebVTT cue text parsing rules</a> +
+
+
+
7716
+ 		+
+ + + <li><a href="#ref-for-webvtt-timestamp-tag-state-1">6.4. WebVTT cue text parsing rules</a> +
+
+
7352
+
7717
+ 		+
+ + </ul> +
+
+
7353
+
7718
+ 		+
+ + </aside> +
+
+
7354
+
7719
+ 		+
+ + <aside class="dfn-panel" data-for="consume-an-html-character-reference"> +
+
+
7355
+
7720
+ 		+
+ + <b><a href="#consume-an-html-character-reference">#consume-an-html-character-reference</a></b><b>Referenced in:</b> +
+
+
7356
+
7721
+ 		+
+ + <ul> +
+
+
7357
+
+ 		+
+ - + <li><a href="#ref-for-consume-an-html-character-reference-1">5.4. WebVTT cue text parsing rules</a> <a href="#ref-for-consume-an-html-character-reference-2">(2)</a> +
+
+
+
7722
+ 		+
+ + + <li><a href="#ref-for-consume-an-html-character-reference-1">6.4. WebVTT cue text parsing rules</a> <a href="#ref-for-consume-an-html-character-reference-2">(2)</a> +
+
+
7358
+
7723
+ 		+
+ + </ul> +
+
+
7359
+
7724
+ 		+
+ + </aside> +
+
+
7360
+
7725
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-text-dom-construction-rules"> +
+
+
7361
+
7726
+ 		+
+ + <b><a href="#webvtt-cue-text-dom-construction-rules">#webvtt-cue-text-dom-construction-rules</a></b><b>Referenced in:</b> +
+
+
7362
+
7727
+ 		+
+ + <ul> +
+
+
7363
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-text-dom-construction-rules-1">8.1. The VTTCue interface</a> +
+
+
+
7728
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-text-dom-construction-rules-1">9.1. The VTTCue interface</a> +
+
+
7364
+
7729
+ 		+
+ + </ul> +
+
+
7365
+
7730
+ 		+
+ + </aside> +
+
+
7366
+
7731
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-rules-for-extracting-the-chapter-title"> +
+
+
7367
+
7732
+ 		+
+ + <b><a href="#webvtt-rules-for-extracting-the-chapter-title">#webvtt-rules-for-extracting-the-chapter-title</a></b><b>Referenced in:</b> +
+
+
7368
+
7733
+ 		+
+ + <ul> +
+
+
7369
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-rules-for-extracting-the-chapter-title-1">8.1. The VTTCue interface</a> +
+
+
+
7734
+ 		+
+ + + <li><a href="#ref-for-webvtt-rules-for-extracting-the-chapter-title-1">9.1. The VTTCue interface</a> +
+
+
7370
+
7735
+ 		+
+ + </ul> +
+
+
7371
+
7736
+ 		+
+ + </aside> +
+
+
7372
+
7737
+ 		+
+ + <aside class="dfn-panel" data-for="rules-for-updating-the-display-of-webvtt-text-tracks"> +
+
+
7373
+
7738
+ 		+
+ + <b><a href="#rules-for-updating-the-display-of-webvtt-text-tracks">#rules-for-updating-the-display-of-webvtt-text-tracks</a></b><b>Referenced in:</b> +
+
+
7374
+
7739
+ 		+
+ + <ul> +
+
+
7375
+
+ 		+
+ - + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-1">3.1. WebVTT cues</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">(2)</a> +
+
+
7376
+
+ 		+
+ - + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-3">6.1. Processing model</a> +
+
+
7377
+
+ 		+
+ - + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-4">6.1.1. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-5">(2)</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-6">(3)</a> +
+
+
7378
+
+ 		+
+ - + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-7">7.2. Processing model</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-8">(2)</a> +
+
+
7379
+
+ 		+
+ - + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-9">7.2.3. The ::cue-region pseudo-element</a> +
+
+
+
7740
+ 		+
+ + + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-1">3.3. WebVTT caption or subtitle cues</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">(2)</a> +
+
+
+
7741
+ 		+
+ + + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-3">7.1. Processing model</a> +
+
+
+
7742
+ 		+
+ + + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-4">7.4. Applying CSS properties to WebVTT Node Objects</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-5">(2)</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-6">(3)</a> +
+
+
+
7743
+ 		+
+ + + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-7">8.2. Processing model</a> <a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-8">(2)</a> +
+
+
+
7744
+ 		+
+ + + <li><a href="#ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-9">8.2.3. The ::cue-region pseudo-element</a> +
+
+
7380
+
7745
+ 		+
+ + </ul> +
+
+
7381
+
7746
+ 		+
+ + </aside> +
+
+
7382
+
7747
+ 		+
+ + <aside class="dfn-panel" data-for="apply-webvtt-cue-settings"> +
+
+
7383
+
7748
+ 		+
+ + <b><a href="#apply-webvtt-cue-settings">#apply-webvtt-cue-settings</a></b><b>Referenced in:</b> +
+
+
7384
+
7749
+ 		+
+ + <ul> +
+
+
7385
+
+ 		+
+ - + <li><a href="#ref-for-apply-webvtt-cue-settings-1">6.1. Processing model</a> +
+
+
+
7750
+ 		+
+ + + <li><a href="#ref-for-apply-webvtt-cue-settings-1">7.1. Processing model</a> +
+
+
+
7751
+ 		+
+ + + </ul> +
+
+
+
7752
+ 		+
+ + + </aside> +
+
+
+
7753
+ 		+
+ + + <aside class="dfn-panel" data-for="obtain-a-set-of-css-boxes"> +
+
+
+
7754
+ 		+
+ + + <b><a href="#obtain-a-set-of-css-boxes">#obtain-a-set-of-css-boxes</a></b><b>Referenced in:</b> +
+
+
+
7755
+ 		+
+ + + <ul> +
+
+
+
7756
+ 		+
+ + + <li><a href="#ref-for-obtain-a-set-of-css-boxes-1">7.1. Processing model</a> +
+
+
+
7757
+ 		+
+ + + <li><a href="#ref-for-obtain-a-set-of-css-boxes-2">7.2. Processing cue settings</a> +
+
+
7386
+
7758
+ 		+
+ + </ul> +
+
+
7387
+
7759
+ 		+
+ + </aside> +
+
+
7388
+
7760
+ 		+
+ + <aside class="dfn-panel" data-for="webvtt-cue-background-box"> +
+
+
7389
+
7761
+ 		+
+ + <b><a href="#webvtt-cue-background-box">#webvtt-cue-background-box</a></b><b>Referenced in:</b> +
+
+
7390
+
7762
+ 		+
+ + <ul> +
+
+
7391
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-background-box-1">6.1.1. Applying CSS properties to WebVTT Node Objects</a> +
+
+
7392
+
+ 		+
+ - + <li><a href="#ref-for-webvtt-cue-background-box-2">7.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-cue-background-box-3">(2)</a> +
+
+
+
7763
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-background-box-1">7.4. Applying CSS properties to WebVTT Node Objects</a> +
+
+
+
7764
+ 		+
+ + + <li><a href="#ref-for-webvtt-cue-background-box-2">8.2.1. The ::cue pseudo-element</a> <a href="#ref-for-webvtt-cue-background-box-3">(2)</a> +
+
+
7393
+
7765
+ 		+
+ + </ul> +
+
+
7394
+
7766
+ 		+
+ + </aside> +
+
+
7395
+
7767
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-autokeyword"> +
+
+
7396
+
7768
+ 		+
+ + <b><a href="#enumdef-autokeyword">#enumdef-autokeyword</a></b><b>Referenced in:</b> +
+
+
7397
+
7769
+ 		+
+ + <ul> +
+
+
7398
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-autokeyword-1">8.1. The VTTCue interface</a> +
+
+
+
7770
+ 		+
+ + + <li><a href="#ref-for-enumdef-autokeyword-1">9.1. The VTTCue interface</a> +
+
+
7399
+
7771
+ 		+
+ + </ul> +
+
+
7400
+
7772
+ 		+
+ + </aside> +
+
+
7401
+
7773
+ 		+
+ + <aside class="dfn-panel" data-for="typedefdef-lineandpositionsetting"> +
+
+
7402
+
7774
+ 		+
+ + <b><a href="#typedefdef-lineandpositionsetting">#typedefdef-lineandpositionsetting</a></b><b>Referenced in:</b> +
+
+
7403
+
7775
+ 		+
+ + <ul> +
+
+
7404
+
+ 		+
+ - + <li><a href="#ref-for-typedefdef-lineandpositionsetting-1">8.1. The VTTCue interface</a> <a href="#ref-for-typedefdef-lineandpositionsetting-2">(2)</a> +
+
+
+
7776
+ 		+
+ + + <li><a href="#ref-for-typedefdef-lineandpositionsetting-1">9.1. The VTTCue interface</a> <a href="#ref-for-typedefdef-lineandpositionsetting-2">(2)</a> +
+
+
7405
+
7777
+ 		+
+ + </ul> +
+
+
7406
+
7778
+ 		+
+ + </aside> +
+
+
7407
+
7779
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-directionsetting"> +
+
+
7408
+
7780
+ 		+
+ + <b><a href="#enumdef-directionsetting">#enumdef-directionsetting</a></b><b>Referenced in:</b> +
+
+
7409
+
7781
+ 		+
+ + <ul> +
+
+
7410
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-directionsetting-1">8.1. The VTTCue interface</a> +
+
+
+
7782
+ 		+
+ + + <li><a href="#ref-for-enumdef-directionsetting-1">9.1. The VTTCue interface</a> +
+
+
7411
+
7783
+ 		+
+ + </ul> +
+
+
7412
+
7784
+ 		+
+ + </aside> +
+
+
7413
+
7785
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-linealignsetting"> +
+
+
7414
+
7786
+ 		+
+ + <b><a href="#enumdef-linealignsetting">#enumdef-linealignsetting</a></b><b>Referenced in:</b> +
+
+
7415
+
7787
+ 		+
+ + <ul> +
+
+
7416
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-linealignsetting-1">8.1. The VTTCue interface</a> +
+
+
+
7788
+ 		+
+ + + <li><a href="#ref-for-enumdef-linealignsetting-1">9.1. The VTTCue interface</a> +
+
+
7417
+
7789
+ 		+
+ + </ul> +
+
+
7418
+
7790
+ 		+
+ + </aside> +
+
+
7419
+
7791
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-positionalignsetting"> +
+
+
7420
+
7792
+ 		+
+ + <b><a href="#enumdef-positionalignsetting">#enumdef-positionalignsetting</a></b><b>Referenced in:</b> +
+
+
7421
+
7793
+ 		+
+ + <ul> +
+
+
7422
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-positionalignsetting-1">8.1. The VTTCue interface</a> +
+
+
+
7794
+ 		+
+ + + <li><a href="#ref-for-enumdef-positionalignsetting-1">9.1. The VTTCue interface</a> +
+
+
7423
+
7795
+ 		+
+ + </ul> +
+
+
7424
+
7796
+ 		+
+ + </aside> +
+
+
7425
+
7797
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-alignsetting"> +
+
+
7426
+
7798
+ 		+
+ + <b><a href="#enumdef-alignsetting">#enumdef-alignsetting</a></b><b>Referenced in:</b> +
+
+
7427
+
7799
+ 		+
+ + <ul> +
+
+
7428
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-alignsetting-1">8.1. The VTTCue interface</a> +
+
+
+
7800
+ 		+
+ + + <li><a href="#ref-for-enumdef-alignsetting-1">9.1. The VTTCue interface</a> +
+
+
7429
+
7801
+ 		+
+ + </ul> +
+
+
7430
+
7802
+ 		+
+ + </aside> +
+
+
7431
+
7803
+ 		+
+ + <aside class="dfn-panel" data-for="vttcue"> +
+
+
7432
+
7804
+ 		+
+ + <b><a href="#vttcue">#vttcue</a></b><b>Referenced in:</b> +
+
+
7433
+
7805
+ 		+
+ + <ul> +
+
+
7434
+
+ 		+
+ - + <li><a href="#ref-for-vttcue-1">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7435
+
+ 		+
+ - + <li><a href="#ref-for-vttcue-2">8.1. The VTTCue interface</a> <a href="#ref-for-vttcue-3">(2)</a> <a href="#ref-for-vttcue-4">(3)</a> <a href="#ref-for-vttcue-5">(4)</a> <a href="#ref-for-vttcue-6">(5)</a> <a href="#ref-for-vttcue-7">(6)</a> <a href="#ref-for-vttcue-8">(7)</a> <a href="#ref-for-vttcue-9">(8)</a> <a href="#ref-for-vttcue-10">(9)</a> <a href="#ref-for-vttcue-11">(10)</a> <a href="#ref-for-vttcue-12">(11)</a> <a href="#ref-for-vttcue-13">(12)</a> <a href="#ref-for-vttcue-14">(13)</a> +
+
+
+
7806
+ 		+
+ + + <li><a href="#ref-for-vttcue-1">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7807
+ 		+
+ + + <li><a href="#ref-for-vttcue-2">9.1. The VTTCue interface</a> <a href="#ref-for-vttcue-3">(2)</a> <a href="#ref-for-vttcue-4">(3)</a> <a href="#ref-for-vttcue-5">(4)</a> <a href="#ref-for-vttcue-6">(5)</a> <a href="#ref-for-vttcue-7">(6)</a> <a href="#ref-for-vttcue-8">(7)</a> <a href="#ref-for-vttcue-9">(8)</a> <a href="#ref-for-vttcue-10">(9)</a> <a href="#ref-for-vttcue-11">(10)</a> <a href="#ref-for-vttcue-12">(11)</a> <a href="#ref-for-vttcue-13">(12)</a> <a href="#ref-for-vttcue-14">(13)</a> +
+
+
7436
+
7808
+ 		+
+ + </ul> +
+
+
7437
+
7809
+ 		+
+ + </aside> +
+
+
7438
+
7810
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-vttcue"> +
+
+
7439
+
7811
+ 		+
+ + <b><a href="#dom-vttcue-vttcue">#dom-vttcue-vttcue</a></b><b>Referenced in:</b> +
+
+
7440
+
7812
+ 		+
+ + <ul> +
+
+
7441
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-vttcue-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-vttcue-2">(2)</a> +
+
+
+
7813
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-vttcue-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-vttcue-2">(2)</a> +
+
+
7442
+
7814
+ 		+
+ + </ul> +
+
+
7443
+
7815
+ 		+
+ + </aside> +
+
+
7444
+
7816
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-region"> +
+
+
7445
+
7817
+ 		+
+ + <b><a href="#dom-vttcue-region">#dom-vttcue-region</a></b><b>Referenced in:</b> +
+
+
7446
+
7818
+ 		+
+ + <ul> +
+
+
7447
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-region-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-region-2">(2)</a> +
+
+
+
7819
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-region-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-region-2">(2)</a> +
+
+
7448
+
7820
+ 		+
+ + </ul> +
+
+
7449
+
7821
+ 		+
+ + </aside> +
+
+
7450
+
7822
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-vertical"> +
+
+
7451
+
7823
+ 		+
+ + <b><a href="#dom-vttcue-vertical">#dom-vttcue-vertical</a></b><b>Referenced in:</b> +
+
+
7452
+
7824
+ 		+
+ + <ul> +
+
+
7453
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-vertical-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-vertical-2">(2)</a> <a href="#ref-for-dom-vttcue-vertical-3">(3)</a> +
+
+
+
7825
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-vertical-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-vertical-2">(2)</a> <a href="#ref-for-dom-vttcue-vertical-3">(3)</a> +
+
+
7454
+
7826
+ 		+
+ + </ul> +
+
+
7455
+
7827
+ 		+
+ + </aside> +
+
+
7456
+
7828
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-snaptolines"> +
+
+
7457
+
7829
+ 		+
+ + <b><a href="#dom-vttcue-snaptolines">#dom-vttcue-snaptolines</a></b><b>Referenced in:</b> +
+
+
7458
+
7830
+ 		+
+ + <ul> +
+
+
7459
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-snaptolines-1">3.1. WebVTT cues</a> +
+
+
7460
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-snaptolines-2">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-snaptolines-3">(2)</a> <a href="#ref-for-dom-vttcue-snaptolines-4">(3)</a> <a href="#ref-for-dom-vttcue-snaptolines-5">(4)</a> +
+
+
+
7831
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-snaptolines-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
+
7832
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-snaptolines-2">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-snaptolines-3">(2)</a> <a href="#ref-for-dom-vttcue-snaptolines-4">(3)</a> <a href="#ref-for-dom-vttcue-snaptolines-5">(4)</a> +
+
+
7461
+
7833
+ 		+
+ + </ul> +
+
+
7462
+
7834
+ 		+
+ + </aside> +
+
+
7463
+
7835
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-line"> +
+
+
7464
+
7836
+ 		+
+ + <b><a href="#dom-vttcue-line">#dom-vttcue-line</a></b><b>Referenced in:</b> +
+
+
7465
+
7837
+ 		+
+ + <ul> +
+
+
7466
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-line-1">3.1. WebVTT cues</a> +
+
+
7467
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-line-2">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-line-3">(2)</a> <a href="#ref-for-dom-vttcue-line-4">(3)</a> <a href="#ref-for-dom-vttcue-line-5">(4)</a> +
+
+
+
7838
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-line-1">3.3. WebVTT caption or subtitle cues</a> +
+
+
+
7839
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-line-2">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-line-3">(2)</a> <a href="#ref-for-dom-vttcue-line-4">(3)</a> <a href="#ref-for-dom-vttcue-line-5">(4)</a> +
+
+
7468
+
7840
+ 		+
+ + </ul> +
+
+
7469
+
7841
+ 		+
+ + </aside> +
+
+
7470
+
7842
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-linealign"> +
+
+
7471
+
7843
+ 		+
+ + <b><a href="#dom-vttcue-linealign">#dom-vttcue-linealign</a></b><b>Referenced in:</b> +
+
+
7472
+
7844
+ 		+
+ + <ul> +
+
+
7473
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-linealign-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-linealign-2">(2)</a> <a href="#ref-for-dom-vttcue-linealign-3">(3)</a> +
+
+
+
7845
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-linealign-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-linealign-2">(2)</a> <a href="#ref-for-dom-vttcue-linealign-3">(3)</a> +
+
+
7474
+
7846
+ 		+
+ + </ul> +
+
+
7475
+
7847
+ 		+
+ + </aside> +
+
+
7476
+
7848
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-position"> +
+
+
7477
+
7849
+ 		+
+ + <b><a href="#dom-vttcue-position">#dom-vttcue-position</a></b><b>Referenced in:</b> +
+
+
7478
+
7850
+ 		+
+ + <ul> +
+
+
7479
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-position-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-position-2">(2)</a> +
+
+
+
7851
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-position-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-position-2">(2)</a> +
+
+
7480
+
7852
+ 		+
+ + </ul> +
+
+
7481
+
7853
+ 		+
+ + </aside> +
+
+
7482
+
7854
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-positionalign"> +
+
+
7483
+
7855
+ 		+
+ + <b><a href="#dom-vttcue-positionalign">#dom-vttcue-positionalign</a></b><b>Referenced in:</b> +
+
+
7484
+
7856
+ 		+
+ + <ul> +
+
+
7485
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-positionalign-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-positionalign-2">(2)</a> <a href="#ref-for-dom-vttcue-positionalign-3">(3)</a> +
+
+
+
7857
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-positionalign-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-positionalign-2">(2)</a> <a href="#ref-for-dom-vttcue-positionalign-3">(3)</a> +
+
+
7486
+
7858
+ 		+
+ + </ul> +
+
+
7487
+
7859
+ 		+
+ + </aside> +
+
+
7488
+
7860
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-size"> +
+
+
7489
+
7861
+ 		+
+ + <b><a href="#dom-vttcue-size">#dom-vttcue-size</a></b><b>Referenced in:</b> +
+
+
7490
+
7862
+ 		+
+ + <ul> +
+
+
7491
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-size-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-size-2">(2)</a> +
+
+
+
7863
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-size-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-size-2">(2)</a> +
+
+
7492
+
7864
+ 		+
+ + </ul> +
+
+
7493
+
7865
+ 		+
+ + </aside> +
+
+
7494
+
7866
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-align"> +
+
+
7495
+
7867
+ 		+
+ + <b><a href="#dom-vttcue-align">#dom-vttcue-align</a></b><b>Referenced in:</b> +
+
+
7496
+
7868
+ 		+
+ + <ul> +
+
+
7497
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-align-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-align-2">(2)</a> <a href="#ref-for-dom-vttcue-align-3">(3)</a> +
+
+
+
7869
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-align-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-align-2">(2)</a> <a href="#ref-for-dom-vttcue-align-3">(3)</a> +
+
+
7498
+
7870
+ 		+
+ + </ul> +
+
+
7499
+
7871
+ 		+
+ + </aside> +
+
+
7500
+
7872
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-text"> +
+
+
7501
+
7873
+ 		+
+ + <b><a href="#dom-vttcue-text">#dom-vttcue-text</a></b><b>Referenced in:</b> +
+
+
7502
+
7874
+ 		+
+ + <ul> +
+
+
7503
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-text-1">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-text-2">(2)</a> +
+
+
+
7875
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-text-1">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-text-2">(2)</a> +
+
+
7504
+
7876
+ 		+
+ + </ul> +
+
+
7505
+
7877
+ 		+
+ + </aside> +
+
+
7506
+
7878
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttcue-getcueashtml"> +
+
+
7507
+
7879
+ 		+
+ + <b><a href="#dom-vttcue-getcueashtml">#dom-vttcue-getcueashtml</a></b><b>Referenced in:</b> +
+
+
7508
+
7880
+ 		+
+ + <ul> +
+
+
7509
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-getcueashtml-1">5.5. WebVTT cue text DOM construction rules</a> +
+
+
7510
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttcue-getcueashtml-2">8.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-getcueashtml-3">(2)</a> <a href="#ref-for-dom-vttcue-getcueashtml-4">(3)</a> +
+
+
+
7881
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-getcueashtml-1">6.5. WebVTT cue text DOM construction rules</a> +
+
+
+
7882
+ 		+
+ + + <li><a href="#ref-for-dom-vttcue-getcueashtml-2">9.1. The VTTCue interface</a> <a href="#ref-for-dom-vttcue-getcueashtml-3">(2)</a> <a href="#ref-for-dom-vttcue-getcueashtml-4">(3)</a> +
+
+
7511
+
7883
+ 		+
+ + </ul> +
+
+
7512
+
7884
+ 		+
+ + </aside> +
+
+
7513
+
7885
+ 		+
+ + <aside class="dfn-panel" data-for="enumdef-scrollsetting"> +
+
+
7514
+
7886
+ 		+
+ + <b><a href="#enumdef-scrollsetting">#enumdef-scrollsetting</a></b><b>Referenced in:</b> +
+
+
7515
+
7887
+ 		+
+ + <ul> +
+
+
7516
+
+ 		+
+ - + <li><a href="#ref-for-enumdef-scrollsetting-1">8.2. The VTTRegion interface</a> +
+
+
+
7888
+ 		+
+ + + <li><a href="#ref-for-enumdef-scrollsetting-1">9.2. The VTTRegion interface</a> +
+
+
7517
+
7889
+ 		+
+ + </ul> +
+
+
7518
+
7890
+ 		+
+ + </aside> +
+
+
7519
+
7891
+ 		+
+ + <aside class="dfn-panel" data-for="vttregion"> +
+
+
7520
+
7892
+ 		+
+ + <b><a href="#vttregion">#vttregion</a></b><b>Referenced in:</b> +
+
+
7521
+
7893
+ 		+
+ + <ul> +
+
+
7522
+
+ 		+
+ - + <li><a href="#ref-for-vttregion-1">8.1. The VTTCue interface</a> <a href="#ref-for-vttregion-2">(2)</a> <a href="#ref-for-vttregion-3">(3)</a> +
+
+
7523
+
+ 		+
+ - + <li><a href="#ref-for-vttregion-4">8.2. The VTTRegion interface</a> <a href="#ref-for-vttregion-5">(2)</a> <a href="#ref-for-vttregion-6">(3)</a> <a href="#ref-for-vttregion-7">(4)</a> <a href="#ref-for-vttregion-8">(5)</a> <a href="#ref-for-vttregion-9">(6)</a> <a href="#ref-for-vttregion-10">(7)</a> <a href="#ref-for-vttregion-11">(8)</a> <a href="#ref-for-vttregion-12">(9)</a> <a href="#ref-for-vttregion-13">(10)</a> <a href="#ref-for-vttregion-14">(11)</a> +
+
+
+
7894
+ 		+
+ + + <li><a href="#ref-for-vttregion-1">9.1. The VTTCue interface</a> <a href="#ref-for-vttregion-2">(2)</a> <a href="#ref-for-vttregion-3">(3)</a> +
+
+
+
7895
+ 		+
+ + + <li><a href="#ref-for-vttregion-4">9.2. The VTTRegion interface</a> <a href="#ref-for-vttregion-5">(2)</a> <a href="#ref-for-vttregion-6">(3)</a> <a href="#ref-for-vttregion-7">(4)</a> <a href="#ref-for-vttregion-8">(5)</a> <a href="#ref-for-vttregion-9">(6)</a> <a href="#ref-for-vttregion-10">(7)</a> <a href="#ref-for-vttregion-11">(8)</a> <a href="#ref-for-vttregion-12">(9)</a> <a href="#ref-for-vttregion-13">(10)</a> <a href="#ref-for-vttregion-14">(11)</a> +
+
+
7524
+
7896
+ 		+
+ + </ul> +
+
+
7525
+
7897
+ 		+
+ + </aside> +
+
+
7526
+
7898
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-vttregion"> +
+
+
7527
+
7899
+ 		+
+ + <b><a href="#dom-vttregion-vttregion">#dom-vttregion-vttregion</a></b><b>Referenced in:</b> +
+
+
7528
+
7900
+ 		+
+ + <ul> +
+
+
7529
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-vttregion-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-vttregion-2">(2)</a> +
+
+
+
7901
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-vttregion-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-vttregion-2">(2)</a> +
+
+
7530
+
7902
+ 		+
+ + </ul> +
+
+
7531
+
7903
+ 		+
+ + </aside> +
+
+
7532
+
7904
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-id"> +
+
+
7533
+
7905
+ 		+
+ + <b><a href="#dom-vttregion-id">#dom-vttregion-id</a></b><b>Referenced in:</b> +
+
+
7534
+
7906
+ 		+
+ + <ul> +
+
+
7535
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-id-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-id-2">(2)</a> +
+
+
+
7907
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-id-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-id-2">(2)</a> +
+
+
7536
+
7908
+ 		+
+ + </ul> +
+
+
7537
+
7909
+ 		+
+ + </aside> +
+
+
7538
+
7910
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-width"> +
+
+
7539
+
7911
+ 		+
+ + <b><a href="#dom-vttregion-width">#dom-vttregion-width</a></b><b>Referenced in:</b> +
+
+
7540
+
7912
+ 		+
+ + <ul> +
+
+
7541
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-width-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-width-2">(2)</a> +
+
+
+
7913
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-width-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-width-2">(2)</a> +
+
+
7542
+
7914
+ 		+
+ + </ul> +
+
+
7543
+
7915
+ 		+
+ + </aside> +
+
+
7544
+
7916
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-lines"> +
+
+
7545
+
7917
+ 		+
+ + <b><a href="#dom-vttregion-lines">#dom-vttregion-lines</a></b><b>Referenced in:</b> +
+
+
7546
+
7918
+ 		+
+ + <ul> +
+
+
7547
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-lines-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-lines-2">(2)</a> +
+
+
+
7919
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-lines-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-lines-2">(2)</a> +
+
+
7548
+
7920
+ 		+
+ + </ul> +
+
+
7549
+
7921
+ 		+
+ + </aside> +
+
+
7550
+
7922
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-regionanchorx"> +
+
+
7551
+
7923
+ 		+
+ + <b><a href="#dom-vttregion-regionanchorx">#dom-vttregion-regionanchorx</a></b><b>Referenced in:</b> +
+
+
7552
+
7924
+ 		+
+ + <ul> +
+
+
7553
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-regionanchorx-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-regionanchorx-2">(2)</a> +
+
+
+
7925
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-regionanchorx-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-regionanchorx-2">(2)</a> +
+
+
7554
+
7926
+ 		+
+ + </ul> +
+
+
7555
+
7927
+ 		+
+ + </aside> +
+
+
7556
+
7928
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-regionanchory"> +
+
+
7557
+
7929
+ 		+
+ + <b><a href="#dom-vttregion-regionanchory">#dom-vttregion-regionanchory</a></b><b>Referenced in:</b> +
+
+
7558
+
7930
+ 		+
+ + <ul> +
+
+
7559
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-regionanchory-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-regionanchory-2">(2)</a> +
+
+
+
7931
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-regionanchory-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-regionanchory-2">(2)</a> +
+
+
7560
+
7932
+ 		+
+ + </ul> +
+
+
7561
+
7933
+ 		+
+ + </aside> +
+
+
7562
+
7934
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-viewportanchorx"> +
+
+
7563
+
7935
+ 		+
+ + <b><a href="#dom-vttregion-viewportanchorx">#dom-vttregion-viewportanchorx</a></b><b>Referenced in:</b> +
+
+
7564
+
7936
+ 		+
+ + <ul> +
+
+
7565
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-viewportanchorx-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-viewportanchorx-2">(2)</a> +
+
+
+
7937
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-viewportanchorx-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-viewportanchorx-2">(2)</a> +
+
+
7566
+
7938
+ 		+
+ + </ul> +
+
+
7567
+
7939
+ 		+
+ + </aside> +
+
+
7568
+
7940
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-viewportanchory"> +
+
+
7569
+
7941
+ 		+
+ + <b><a href="#dom-vttregion-viewportanchory">#dom-vttregion-viewportanchory</a></b><b>Referenced in:</b> +
+
+
7570
+
7942
+ 		+
+ + <ul> +
+
+
7571
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-viewportanchory-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-viewportanchory-2">(2)</a> +
+
+
+
7943
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-viewportanchory-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-viewportanchory-2">(2)</a> +
+
+
7572
+
7944
+ 		+
+ + </ul> +
+
+
7573
+
7945
+ 		+
+ + </aside> +
+
+
7574
+
7946
+ 		+
+ + <aside class="dfn-panel" data-for="dom-vttregion-scroll"> +
+
+
7575
+
7947
+ 		+
+ + <b><a href="#dom-vttregion-scroll">#dom-vttregion-scroll</a></b><b>Referenced in:</b> +
+
+
7576
+
7948
+ 		+
+ + <ul> +
+
+
7577
+
+ 		+
+ - + <li><a href="#ref-for-dom-vttregion-scroll-1">8.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-scroll-2">(2)</a> <a href="#ref-for-dom-vttregion-scroll-3">(3)</a> +
+
+
+
7949
+ 		+
+ + + <li><a href="#ref-for-dom-vttregion-scroll-1">9.2. The VTTRegion interface</a> <a href="#ref-for-dom-vttregion-scroll-2">(2)</a> <a href="#ref-for-dom-vttregion-scroll-3">(3)</a> +
+
+
7578
+
7950
+ 		+
+ + </ul> +
+
+
7579
+
7951
+ 		+
+ + </aside> +
+
+
7580
+
7952
+ 		+
+ + <aside class="dfn-panel" data-for="text-vtt"> +
+
+
@@ -7640,7 +8012,3 @@
+
+
7640
+
8012
+ 		+
+ +
+
+
7641
+
8013
+ 		+
+ + }); +
+
+
7642
+
8014
+ 		+
+ + </script> +
+
+
7643
+
+ 		+
+ - + <p role="navigation" id="back-to-top"><a href="#toc"><abbr title="Back to top">↑</abbr></a></p> +
+
+
7644
+
+ 		+
+ - + </body> +
+
+
7645
+
+ 		+
+ - + </html> +
+
+
7646
+
+ 		+
+ - + +
+
+
+
+
+
+
+ + diff --git a/archives/2019-03-06/webvtt-region-diagram.png b/archives/2019-03-06/webvtt-region-diagram.png new file mode 100644 index 0000000..33e7b0d Binary files /dev/null and b/archives/2019-03-06/webvtt-region-diagram.png differ