--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/webvtt/Overview.html Sun Sep 29 18:05:19 2013 +1000
@@ -0,0 +1,5397 @@
+<!DOCTYPE html>
+<html lang="en-US-x-hixie" typeof="bibo:Document " about="" property="dcterms:language" content="en" prefix="bibo: http://purl.org/ontology/bibo/ w3p: http://www.w3.org/2001/02pd/rec54#">
+<head>
+ <title>WebVTT: The Web Video Text Tracks Format</title>
+ <meta charset="utf-8">
+ <!-- local copy: -->
+
+ <!-- remote copy:
+ <script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
+ -->
+
+ <!-- script to register bugs -->
+ <script src="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/assets/scripts/bug-assist.js"></script>
+ <meta name="bug.short_desc" content="[WebVTT] ">
+ <meta name="bug.product" content="TextTracks CG">
+ <meta name="bug.component" content="WebVTT">
+ <style>
+ body {
+ line-height: 1.35;
+ }
+ pre {
+ white-space: pre-wrap;
+ }
+ pre.idl_whatwg {
+ border: solid 0.0625em;
+ background: #EEEEEE;
+ color: black;
+ padding: 0.5em 1em;
+ font-family: monospace, Droid Sans Fallback, sans-serif;
+ }
+ pre.idl_whatwg::before {
+ content: 'IDL';
+ font: bold 0.8em sans-serif;
+ padding: 0.5em;
+ position: absolute;
+ top: auto;
+ margin: -0.703125em 0 0 -3.75em /* 1em/0.8 + 1.5em + 0.5em*2 */;
+ width: 1.5em;
+ background: inherit;
+ border: 0.078125em;
+ border-style: solid none solid solid;
+ border-radius: 1em 0 0 1em;
+ }
+ .example {
+ padding: 0.5em;
+ margin: 1em 0;
+ position: relative;
+ clear: both;
+ border-left-width: .5em;
+ border-left-style: solid;
+ border-color: #e0cb52;
+ background: #fcfaee;
+ }
+ .todo {
+ color: #E50000;
+ background: white;
+ border: solid red;
+ padding: 0.5em;
+ margin: 1em 0;
+ }
+ .todo::before {
+ content: " ** ";
+ position: absolute;
+ left: 0;
+ width: 8em;
+ text-align: right;
+ }
+ table {
+ border-collapse: collapse;
+ border-style: hidden hidden none hidden;
+ }
+ table thead, table tbody {
+ border-bottom: solid;
+ }
+ table td, table th {
+ border-left: solid;
+ border-right: solid;
+ border-bottom: solid thin;
+ vertical-align: top;
+ padding: 0.2em;
+ }
+ dl.domintro {
+ margin: 2em 0 2em 0;
+ padding: 0.5em 1em 0.5em 2em;
+ border: none;
+ background: #d9e6f8;
+ }
+ dl.domintro:before {
+ display: table;
+ margin: -1em -0.5em -0.5em auto;
+ width: auto;
+ content: 'This box is non-normative. Implementation requirements are given below this box.';
+ color: black;
+ font-style: italic;
+ border: solid 2px;
+ background: white;
+ padding: 0 0.25em;
+ }
+ dt {
+ margin-top: 0.75em;
+ margin-bottom: 0.25em;
+ clear: left;
+ }
+ /* fix bug entry form styling */
+ body > form {
+ padding: 4px;
+ border: 1px solid red;
+ background-color: white;
+ }
+ </style>
+ <style>/*****************************************************************
+ * ReSpec 3 CSS
+ * Robin Berjon - http://berjon.com/
+ *****************************************************************/
+
+/* --- INLINES --- */
+em.rfc2119 {
+ text-transform: lowercase;
+ font-variant: small-caps;
+ font-style: normal;
+ color: #900;
+}
+
+h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
+h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
+ border: none;
+}
+
+dfn {
+ font-weight: bold;
+}
+
+a.internalDFN {
+ color: inherit;
+ border-bottom: 1px solid #99c;
+ text-decoration: none;
+}
+
+a.externalDFN {
+ color: inherit;
+ border-bottom: 1px dotted #ccc;
+ text-decoration: none;
+}
+
+a.bibref {
+ text-decoration: none;
+}
+
+cite .bibref {
+ font-style: normal;
+}
+
+code {
+ color: #ff4500;
+}
+
+/* --- TOC --- */
+.toc a, .tof a {
+ text-decoration: none;
+}
+
+a .secno, a .figno {
+ color: #000;
+}
+
+ul.tof, ol.tof {
+ list-style: none outside none;
+}
+
+.caption {
+ margin-top: 0.5em;
+ font-style: italic;
+}
+
+/* --- TABLE --- */
+table.simple {
+ border-spacing: 0;
+ border-collapse: collapse;
+ border-bottom: 3px solid #005a9c;
+}
+
+.simple th {
+ background: #005a9c;
+ color: #fff;
+ padding: 3px 5px;
+ text-align: left;
+}
+
+.simple th[scope="row"] {
+ background: inherit;
+ color: inherit;
+ border-top: 1px solid #ddd;
+}
+
+.simple td {
+ padding: 3px 10px;
+ border-top: 1px solid #ddd;
+}
+
+.simple tr:nth-child(even) {
+ background: #f0f6ff;
+}
+
+/* --- DL --- */
+.section dd > p:first-child {
+ margin-top: 0;
+}
+
+.section dd > p:last-child {
+ margin-bottom: 0;
+}
+
+.section dd {
+ margin-bottom: 1em;
+}
+
+.section dl.attrs dd, .section dl.eldef dd {
+ margin-bottom: 0;
+}
+</style><style>/* --- ISSUES/NOTES --- */
+div.issue-title, div.note-title {
+ padding-right: 1em;
+ min-width: 7.5em;
+ color: #b9ab2d;
+}
+div.issue-title { color: #e05252; }
+div.note-title { color: #2b2; }
+div.issue-title span, div.note-title span {
+ text-transform: uppercase;
+}
+div.note, div.issue {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+.note > p:first-child, .issue > p:first-child { margin-top: 0 }
+.issue, .note {
+ padding: .5em;
+ border-left-width: .5em;
+ border-left-style: solid;
+}
+div.issue, div.note {
+ padding: 1em 1.2em 0.5em;
+ margin: 1em 0;
+ position: relative;
+ clear: both;
+}
+span.note, span.issue { padding: .1em .5em .15em; }
+
+.issue {
+ border-color: #e05252;
+ background: #fbe9e9;
+}
+.note {
+ border-color: #52e052;
+ background: #e9fbe9;
+}
+
+
+</style><link rel="stylesheet" href="https://www.w3.org/community/src/css/spec/cg-draft.css"></head>
+ <!-- v2 feature requests:
+
+ Explicitly allow random comments on the line after the
+ signature line, for metadata, copyrights, etc.
+
+ Inline CSS, maybe as below. See http://www.w3.org/Bugs/Public/show_bug.cgi?id=15023
+
+ STYLE
+ ::cue(.narration) { color: blue; }
+
+ Default settings, maybe as below. See http://www.w3.org/Bugs/Public/show_bug.cgi?id=15024
+
+ DEFAULTS
+ line:-1 align:middle size:50%
+
+ -->
+ <body class="h-entry" role="document" id="respecDocument"><div class="head" role="contentinfo" id="respecHeader">
+ <p>
+ <a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a>
+ </p>
+ <h1 class="title p-name" id="title" property="dcterms:title">WebVTT: The Web Video Text Tracks Format</h1>
+
+ <h2 property="dcterms:issued" datatype="xsd:dateTime" content="2013-09-28T22:04:28.000Z" id="draft-community-group-specification-29-september-2013">Draft Community Group Specification <time class="dt-published" datetime="2013-09-29">29 September 2013</time></h2>
+ <dl>
+
+
+
+ <dt>Latest editor's draft:</dt>
+ <dd><a href="https://dvcs.w3.org/hg/text-tracks/raw-file/default/webvtt/Overview.html">https://dvcs.w3.org/hg/text-tracks/raw-file/default/webvtt/Overview.html</a></dd>
+
+
+
+
+
+
+
+ <dt>Editors:</dt>
+ <dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><span typeof="foaf:Person"><a class="u-url url p-name fn" rel="foaf:homepage" property="foaf:name" content="Silvia Pfeiffer" href="mailto:silviapfeiffer1@gmail.com">Silvia Pfeiffer</a>, <a rel="foaf:workplaceHomepage" class="p-org org h-org h-card" href="http://nicta.com.au/">NICTA</a></span>
+</dd>
+<dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><span typeof="foaf:Person"><a class="u-url url p-name fn" rel="foaf:homepage" property="foaf:name" content="Ian Hickson" href="mailto:ian@hixie.ch">Ian Hickson</a>, <a rel="foaf:workplaceHomepage" class="p-org org h-org h-card" href="http://google.com/">Google</a> (previous editor)</span>
+</dd>
+
+
+ </dl>
+
+ <p class="copyright">
+ <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
+ 2011-2013
+ the Contributors to the WebVTT: The Web Video Text Tracks Format Specification, published by the
+ <a href="http://www.w3.org/community/texttracks/">Text Tracks Community Group</a> under the
+
+ <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
+ A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available.
+
+ </p>
+ <hr>
+</div>
+ <section id="abstract" class="introductory" property="dcterms:abstract" datatype="" typeof="bibo:Chapter" resource="#abstract" rel="bibo:chapter"><h2 aria-level="1" role="heading" id="h2_abstract">Abstract</h2>
+ <p>This is the specification of WebVTT, the Web Video Text Tracks format.
+ </p>
+
+ <p>If you wish to make comments or file bugs regarding this document in a manner
+ that is tracked by the W3C, please submit them via <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=TextTracks%20CG&component=WebVTT&short_desc=%5BWebVTT%5D%20">our
+ public bug database</a>.</p>
+ </section><section id="sotd" class="introductory" typeof="bibo:Chapter" resource="#sotd" rel="bibo:chapter"><h2 aria-level="1" role="heading" id="h2_sotd">Status of This Document</h2>
+ <p>
+ This specification was published by the <a href="http://www.w3.org/community/texttracks/">Text Tracks Community Group</a>.
+ It is not a W3C Standard nor is it on the W3C Standards Track.
+
+ Please note that under the
+ <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>
+ there is a limited opt-out and other conditions apply.
+
+ Learn more about
+ <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>.
+ </p>
+
+ <p>This specification was originally created by the WHATWG as a Living Standard and last published at <a href="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</a>.
+ </p>
+
+</section><section id="toc"><h2 class="introductory" aria-level="1" role="heading" id="h2_toc">Table of Contents</h2><ul class="toc" role="directory" id="respecContents"><li class="tocline"><a href="#introduction" class="tocxref"><span class="secno">1. </span>Introduction</a><ul class="toc"><li class="tocline"><a href="#cues-with-multiple-lines" class="tocxref"><span class="secno">1.1 </span>Cues with multiple lines</a></li><li class="tocline"><a href="#comments" class="tocxref"><span class="secno">1.2 </span>Comments</a></li><li class="tocline"><a href="#other-features" class="tocxref"><span class="secno">1.3 </span>Other features</a></li></ul></li><li class="tocline"><a href="#conformance" class="tocxref"><span class="secno">2. </span>Conformance</a><ul class="toc"><li class="tocline"><a href="#dependencies" class="tocxref"><span class="secno">2.1 </span>Dependencies</a></li></ul></li><li class="tocline"><a href="#data-model" class="tocxref"><span class="secno">3. </span>Data model</a><ul class="toc"><li class="tocline"><a href="#text-track-cues" class="tocxref"><span class="secno">3.1 </span>Text Track Cues</a></li><li class="tocline"><a href="#text-track-region" class="tocxref"><span class="secno">3.2 </span>Text Track Region</a></li></ul></li><li class="tocline"><a href="#the-webvtt-file-format-syntax" class="tocxref"><span class="secno">4. </span>The WebVTT file format: Syntax</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-structure" class="tocxref"><span class="secno">4.1 </span>WebVTT file structure</a></li><li class="tocline"><a href="#webvtt-comments" class="tocxref"><span class="secno">4.2 </span>WebVTT comments</a></li><li class="tocline"><a href="#types-of-webvtt-cue-payload" class="tocxref"><span class="secno">4.3 </span>Types of WebVTT cue payload</a><ul class="toc"><li class="tocline"><a href="#webvtt-metadata-text" class="tocxref"><span class="secno">4.3.1 </span>WebVTT metadata text</a></li><li class="tocline"><a href="#webvtt-cue-text" class="tocxref"><span class="secno">4.3.2 </span>WebVTT cue text</a></li></ul></li><li class="tocline"><a href="#webvtt-cue-settings" class="tocxref"><span class="secno">4.4 </span>WebVTT cue settings</a><ul class="toc"><li class="tocline"><a href="#webvtt-region-definition" class="tocxref"><span class="secno">4.4.1 </span>WebVTT region definition</a></li><li class="tocline"><a href="#webvtt-cue-settings-1" class="tocxref"><span class="secno">4.4.2 </span>WebVTT cue settings</a></li></ul></li><li class="tocline"><a href="#properties-of-cue-sequences" class="tocxref"><span class="secno">4.5 </span>Properties of cue sequences</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-using-only-nested-cues" class="tocxref"><span class="secno">4.5.1 </span>WebVTT file using only nested cues</a></li></ul></li><li class="tocline"><a href="#types-of-webvtt-files" class="tocxref"><span class="secno">4.6 </span>Types of WebVTT files</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-using-metadata-content" class="tocxref"><span class="secno">4.6.1 </span>WebVTT file using metadata content</a></li><li class="tocline"><a href="#webvtt-file-using-chapter-title-text" class="tocxref"><span class="secno">4.6.2 </span>WebVTT file using chapter title text</a></li><li class="tocline"><a href="#webvtt-file-using-cue-text" class="tocxref"><span class="secno">4.6.3 </span>WebVTT file using cue text</a></li></ul></li></ul></li><li class="tocline"><a href="#webvtt-file-format-parsing" class="tocxref"><span class="secno">5. </span>WebVTT file format: Parsing</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-parsing" class="tocxref"><span class="secno">5.1 </span>WebVTT file parsing</a></li><li class="tocline"><a href="#webvtt-region-settings-parsing" class="tocxref"><span class="secno">5.2 </span>WebVTT region settings parsing</a></li><li class="tocline"><a href="#webvtt-cue-timings-and-settings-parsing" class="tocxref"><span class="secno">5.3 </span>WebVTT cue timings and settings parsing</a></li><li class="tocline"><a href="#webvtt-cue-text-parsing-rules" class="tocxref"><span class="secno">5.4 </span><span>WebVTT cue text parsing rules</span></a></li><li class="tocline"><a href="#webvtt-cue-text-dom-construction-rules" class="tocxref"><span class="secno">5.5 </span><span>WebVTT cue text DOM construction rules</span></a></li></ul></li><li class="tocline"><a href="#rendering" class="tocxref"><span class="secno">6. </span>Rendering</a><ul class="toc"><li class="tocline"><a href="#cues-in-isolation" class="tocxref"><span class="secno">6.1 </span>Cues in isolation</a></li><li class="tocline"><a href="#cues-with-video" class="tocxref"><span class="secno">6.2 </span>Cues with video</a><ul class="toc"><li class="tocline"><a href="#processing-model" class="tocxref"><span class="secno">6.2.1 </span>Processing model</a></li><li class="tocline"><a href="#applying-css-properties-to-webvtt-node-objects" class="tocxref"><span class="secno">6.2.2 </span>Applying CSS properties to <span title="WebVTT Node Object" class="formerLink">WebVTT Node Objects</span></a></li><li class="tocline"><a href="#css-extensions" class="tocxref"><span class="secno">6.2.3 </span>CSS extensions</a><ul class="toc"><li class="tocline"><a href="#the-cue-pseudo-element" class="tocxref"><span class="secno">6.2.3.1 </span>The '::cue' pseudo-element</a></li><li class="tocline"><a href="#the-past-and-future-pseudo-classes" class="tocxref"><span class="secno">6.2.3.2 </span>The ':past' and ':future' pseudo-classes</a></li><li class="tocline"><a href="#the-cue-region-pseudo-element" class="tocxref"><span class="secno">6.2.3.3 </span>The '::cue-region' pseudo-element</a></li></ul></li></ul></li></ul></li><li class="tocline"><a href="#webvtt-api-for-browsers" class="tocxref"><span class="secno">7. </span>WebVTT API for Browsers</a><ul class="toc"><li class="tocline"><a href="#vttcue-interface" class="tocxref"><span class="secno">7.1 </span>VTTCue interface</a></li><li class="tocline"><a href="#extension-of-the-texttrack-interface-for-region-support" class="tocxref"><span class="secno">7.2 </span>Extension of the TextTrack interface for region support</a></li><li class="tocline"><a href="#vttregion-interface" class="tocxref"><span class="secno">7.3 </span>VTTRegion interface</a></li><li class="tocline"><a href="#vttregionlist-interface" class="tocxref"><span class="secno">7.4 </span>VTTRegionList interface</a></li></ul></li><li class="tocline"><a href="#iana-considerations" class="tocxref"><span class="secno">8. </span>IANA considerations</a><ul class="toc"><li class="tocline"><a href="#text-vtt" class="tocxref"><span class="secno">8.1 </span><span><code>text/vtt</code></span></a></li></ul></li><li class="tocline"><a href="#references-1" class="tocxref"><span class="secno">9. </span>References</a></li><li class="tocline"><a href="#acknowledgements" class="tocxref"><span class="secno">10. </span>Acknowledgements</a></li></ul></section>
+
+
+
+ <section id="introduction">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_introduction"><span class="secno">1. </span>Introduction</h2>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The <dfn id="dfn-webvtt">WebVTT</dfn> (Web Video Text Tracks) format is
+ intended for marking up external text track resources.</p>
+
+ <p>The main use for WebVTT files is captioning video content. Here
+ is a sample file that captions an interview:</p>
+
+ <pre>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:end size:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 align:start size:50%
+<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 align:end size:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 align:start 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.</pre>
+
+
+ <section id="cues-with-multiple-lines">
+ <h3 aria-level="2" role="heading" id="h3_cues-with-multiple-lines"><span class="secno">1.1 </span>Cues with multiple lines</h3>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>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, and to not manually line-wrap for
+ aesthetic reasons alone.</p>
+
+ <div class="example">
+
+ <p>These captions on a public service announcement video demonstrate line breaking:</p>
+
+ <pre>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.</pre>
+
+ <p>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:</p>
+
+<!-- 50 -->
+ <pre> 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.</pre>
+
+ <p>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:</p>
+
+<!-- 25 -->
+ <pre> 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.</pre>
+
+ <p>Also notice how the wrapping is done so as to keep the line lengths balanced.</p>
+
+ </div>
+ </section>
+
+ <section id="comments">
+ <h3 aria-level="2" role="heading" id="h3_comments"><span class="secno">1.2 </span>Comments</h3>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Comments can be included in WebVTT files.</p>
+
+ <p>Comments are just blocks that are preceded by a blank line,
+ start with the word "<code title="">NOTE</code>" (followed by a
+ space or newline), and end at the first blank line.</p>
+
+ <div class="example">
+
+ <p>Here, a one-line comment is used to note a possible problem with a cue.</p>
+
+ <pre>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.</pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In this example, the author has written many comments.</p>
+
+ <pre>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</pre>
+
+ </div>
+ </section>
+
+ <section id="other-features">
+ <h3 aria-level="2" role="heading" id="h3_other-features"><span class="secno">1.3 </span>Other features</h3>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>WebVTT also supports some less-often used features.</p>
+
+ <div class="example">
+
+ <p>In this example, one of the cues has an identifier:</p>
+
+ <pre>WEBVTT
+
+00:00.000 --> 00:02.000
+That's an, an, that's an L!
+
+transcription-credit
+00:04.000 --> 00:05.000
+Transcribed by Celestials™</pre>
+
+ <p>This allows a style sheet to specifically target that cue:</p>
+
+ <pre>::cue(#transcription-credit) { color: red }</pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>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".</p>
+
+ <pre>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!</pre>
+
+ <p>Notice that as a special exception, the voice spans don't have to be closed if they cover the
+ entire cue text.</p>
+
+ <p>Style sheets can style these spans:</p>
+
+ <pre>::cue(v[voice="Esme"]) { color: blue }
+::cue(v[voice="Mary"]) { color: green }
+::cue(i) { font-style: italic }
+::cue(.loud) { font-size: 2em }</pre>
+
+ </div>
+
+ <div class="example">
+ <p>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 through it is defined until 20sec because its region is limited to 3 lines and at 12.5sec a fourth cue appears:
+ </p>
+
+ <pre>WEBVTT
+Region: id=fred width=50% lines=3 regionanchor=0%,100% viewportanchor=10%,90% scroll=up
+Region: id=bill width=50% 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.</pre>
+
+ <p>Note that regions are only defined for horizontal cues.</p>
+
+ </div>
+
+ </section>
+
+ </section>
+
+ <section id="conformance">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_conformance"><span class="secno">2. </span>Conformance</h2>
+
+ <p class="todo">This section remains to be written. In the meantime, please see the HTML standard. <a href="#refsHTML5">[HTML5]</a></p>
+
+ <section id="dependencies">
+ <h3 aria-level="2" role="heading" id="h3_dependencies"><span class="secno">2.1 </span>Dependencies</h3>
+
+ <p>This specification relies upon the following terms defined in the
+ HTML standard. <a href="#refsHTML5">[HTML5]</a></p>
+
+ <ul class="brief">
+ <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#html-elements"><dfn id="dfn-html-elements">HTML elements</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#script's-document"><dfn id="dfn-script-s-document">Script's document</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#entry-script"><dfn id="dfn-entry-script">Entry script</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#mime-type"><dfn id="dfn-mime-type">MIME type</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#utf-8-decode"><dfn id="dfn-utf-8-decode">UTF-8 decode</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#case-sensitive"><dfn id="dfn-case-sensitive">Case-sensitive</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#collect-a-sequence-of-characters"><dfn id="dfn-collect-a-sequence-of-characters">Collect a sequence of characters</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#ascii-digits"><dfn id="dfn-ascii-digits">ASCII digits</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#alphanumeric-ascii-characters"><dfn id="dfn-alphanumeric-ascii-characters">Alphanumeric ASCII characters</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#space-character"><dfn id="dfn-space-character">Space character</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#skip-whitespace"><dfn id="dfn-skip-whitespace">Skip whitespace</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#supported-property-indices"><dfn id="dfn-supported-property-indices">Supported property indices</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#determine-the-value-of-an-indexed-property"><dfn id="dfn-determine-the-value-of-an-indexed-property">Determine the value of an indexed property</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#split-a-string-on-spaces"><dfn id="dfn-split-a-string-on-spaces">Split a string on spaces</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#html-namespace"><dfn id="dfn-html-namespace">HTML namespace</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#media-element"><dfn id="dfn-media-element">Media element</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#current-playback-position"><dfn id="dfn-current-playback-position">Current playback position</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#expose-a-user-interface-to-the-user"><dfn id="dfn-expose-a-user-interface-to-the-user">Expose a user interface to the user</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#list-of-text-tracks"><dfn id="dfn-list-of-text-tracks">List of text tracks</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track"><dfn id="dfn-text-track">Text track</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-kind"><dfn id="dfn-text-track-kind">Text track kind</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-mode"><dfn id="dfn-text-track-mode">Text track mode</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-disabled"><dfn id="dfn-text-track-disabled">Text track disabled</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-showing"><dfn id="dfn-text-track-showing">Text track showing</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue"><dfn id="dfn-text-track-cue">Text track cue</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-list-of-cues"><dfn id="dfn-text-track-list-of-cues">Text track list of cues</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-order"><dfn id="dfn-text-track-cue-order">Text track cue order</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-identifier"><dfn id="dfn-text-track-cue-identifier">Text track cue identifier</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-start-time"><dfn id="dfn-text-track-cue-start-time">Text track cue start time</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-end-time"><dfn id="dfn-text-track-cue-end-time">Text track cue end time</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-pause-on-exit-flag"><dfn id="dfn-text-track-cue-pause-on-exit-flag">Text track cue pause-on-exit flag</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-text"><dfn id="dfn-text-track-cue-text">Text track cue text</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-active-flag"><dfn id="dfn-text-track-cue-active-flag">Text track cue active flag</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#text-track-cue-display-state"><dfn id="dfn-text-track-cue-display-state">Text track cue display state</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#rules-for-updating-the-text-track-rendering"><dfn id="dfn-rules-for-updating-the-text-track-rendering">Rules for updating the text track rendering</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#rules-for-rendering-the-cue-in-isolation"><dfn id="dfn-rules-for-rendering-the-cue-in-isolation">Rules for rendering the cue in isolation</dfn></a>
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#texttrackcue"><dfn id="dfn-texttrackcue"><code>TextTrackCue</code></dfn></a> interface
+ </li><li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
+#texttrack"><dfn id="dfn-texttrack"><code>TextTrack</code></dfn></a> interface
+ </li></ul>
+ </section>
+ </section>
+
+ <section id="data-model">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_data-model"><span class="secno">3. </span>Data model</h2>
+ <!-- Add some content here about cues and serialisation format in general -->
+ <!-- Describe metadata, caption/subtitle, chapter & description cues -->
+
+ <section id="text-track-cues">
+ <h3 aria-level="2" role="heading" id="h3_text-track-cues"><span class="secno">3.1 </span>Text Track Cues</h3>
+
+ <p>WebVTT cues are HTML <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> that additionally
+ consist of the following: <a href="#refsHTML5">[HTML5]</a></p>
+
+ <dl>
+
+ <dt><dfn title="text track cue writing direction" id="dfn-text-track-cue-writing-direction">A writing direction</dfn>
+ </dt><dd>
+ <p>A writing direction, either <dfn title="text track cue horizontal writing
+ direction" id="dfn-text-track-cue-horizontal-writing-direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with
+ consecutive lines displayed below each other), <dfn title="text track cue vertical growing left
+ writing direction" id="dfn-text-track-cue-vertical-growing-left-writing-direction">vertical growing left</dfn> (a line extends vertically and is positioned
+ horizontally, with consecutive lines displayed to the left of each other<!-- used for east
+ asian-->), or <dfn title="text track cue vertical growing right writing direction" id="dfn-text-track-cue-vertical-growing-right-writing-direction">vertical
+ growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive
+ lines displayed to the right of each other<!-- used for mongolian -->).</p>
+
+ <p>If the <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>, then <a title="text
+ track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a> percentages are relative to the height of the
+ video, and <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a> and <a title="text
+ track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a> percentages are relative to the width of the video.</p>
+
+ <p>Otherwise, <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a> percentages are
+ relative to the width of the video, and <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text
+ position</a> and <a title="text track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a> percentages are relative to
+ the height of the video.</p>
+
+ <p>The <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a> defaults to
+ <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>.</p>
+
+ </dd>
+
+ <dt><dfn title="text track cue snap-to-lines flag" id="dfn-text-track-cue-snap-to-lines-flag">A snap-to-lines flag</dfn>
+ </dt><dd>
+
+ <p>A boolean indicating whether the <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line's
+ position</a> is a line position (positioned to a multiple of the line dimensions of the first
+ line of the cue), or whether it is a percentage of the dimension of the video.</p>
+
+ <p>Cues whose <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is set will be placed within the
+ title-safe area on user agents that use overscan. Cues with the flag unset will be positioned as
+ requested (modulo overlap avoidance if multiple cues are in the same place).</p>
+
+ <p>By default, the <a title="text track cue snap-to-lines flag" href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">snap-to-lines flag</a>
+ is set to 'true'.</p>
+
+ </dd>
+
+ <dt><dfn title="text track cue line position" id="dfn-text-track-cue-line-position">A line position</dfn>
+ </dt><dd>
+ <p>Either a number giving the position of the lines of the cue, to be interpreted as defined by
+ the <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a> and <a title="text track cue snap-to-lines flag" href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">snap-to-lines flag</a> of the cue, or the special
+ value <dfn title="text track cue automatic line position" id="dfn-text-track-cue-automatic-line-position">auto</dfn>, which means the position
+ is to depend on the other active cues.</p>
+
+ <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a <dfn id="dfn-text-track-cue-computed-line-position">text track cue computed line position</dfn> whose
+ value is that returned by the following algorithm, which is defined in terms of the other
+ aspects of the cue:</p>
+
+ <ol>
+
+ <li><p>If the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> is numeric, the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue
+ snap-to-lines flag</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> is not set, and the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text
+ track cue line position</a> is negative or greater than 100, then return 100 and abort these
+ steps.</p></li>
+
+ <li><p>If the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> is numeric, return the value of the
+ <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> and abort these steps. (Either the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track
+ cue snap-to-lines flag</a> is set, 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.)</p></li>
+
+ <li><p>If the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>
+ is not set, return the value 100 and abort these steps. (The <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line
+ position</a> is the special value <a title="text track cue automatic line
+ position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a>.)</p></li>
+
+ <li><p>Let <var title="">cue</var> be the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>.</p></li>
+
+ <li><p>If <var title="">cue</var> is not in a <a title="text track list of cues" href="#dfn-text-track-list-of-cues" class="internalDFN">list of
+ cues</a> of a <a href="#dfn-text-track" class="internalDFN">text track</a>, or if that <a href="#dfn-text-track" class="internalDFN">text track</a> is not in the
+ <a href="#dfn-list-of-text-tracks" class="internalDFN">list of text tracks</a> of a <a href="#dfn-media-element" class="internalDFN">media element</a>, return −1 and abort
+ these steps.</p></li>
+
+ <li><p>Let <var title="">track</var> be the <a href="#dfn-text-track" class="internalDFN">text track</a> whose <a title="text
+ track list of cues" href="#dfn-text-track-list-of-cues" class="internalDFN">list of cues</a> the <var title="">cue</var> is in.</p></li>
+
+ <li><p>Let <var title="">n</var> be the number of <a title="text track" href="#dfn-text-track" class="internalDFN">text tracks</a>
+ whose <a href="#dfn-text-track-mode" class="internalDFN">text track mode</a> is <a title="text track showing" href="#dfn-text-track-showing" class="internalDFN">showing</a> and that
+ are in the <a href="#dfn-media-element" class="internalDFN">media element</a>'s <a href="#dfn-list-of-text-tracks" class="internalDFN">list of text tracks</a> before <var title="">track</var>.</p></li>
+
+ <li><p>Increment <var title="">n</var> by one.</p></li>
+
+ <li><p>Negate <var title="">n</var>.</p></li>
+
+ <li><p>Return <var title="">n</var>.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt><dfn title="text track cue size" id="dfn-text-track-cue-size">A size</dfn>
+ </dt><dd>
+ <p>A number giving the size of the box within which the text of each line of the cue is to be
+ rendered, to be interpreted as a percentage of the video, as defined by the <a title="text
+ track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a>. This box is called the <dfn id="dfn-cue-box">cue box</dfn>.</p>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_1"><span>Note</span></div><p class="">The position of the <a href="#dfn-cue-box" class="internalDFN">cue box</a> within the video frame's dimensions depends
+ on the value of the <a href="#dfn-computed-text-position-anchor-point" class="internalDFN">computed text position anchor point</a>.</p></div>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_2"><span>Note</span></div><p class="">Lines are wrapped within the <a href="#dfn-cue-box" class="internalDFN">cue box</a>'s
+ <a title="text track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a> if lines lengths make this necessary.</p></div>
+ </dd>
+
+ <dt><dfn title="text track cue text position" id="dfn-text-track-cue-text-position">A text position</dfn>
+ </dt><dd>
+ <p>A number giving the position of the text within the <a href="#dfn-cue-box" class="internalDFN">cue box</a>. If the cue is not within
+ a region, the value is to be interpreted as a percentage of the box's
+ <a title="text track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a>, otherwise as a percentage of the region width.</p>
+
+ <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a default <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>, which is defined
+ in terms of the value of the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a>:</p>
+
+ <ol>
+
+ <li>For <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start aligned</a> cues: 0%.</li>
+
+ <li>For <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle aligned</a> cues: 50%.</li>
+
+ <li>For <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end aligned</a> cues: 100%.</li>
+
+ <li>For <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left aligned</a> cues with left-to-right
+ <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</a>: 0%, otherwise 100%.</li>
+
+ <li>For <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right aligned</a> cues with left-to-right
+ <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</a>: 100%, otherwise 0%.</li>
+
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_3"><span>Note</span></div><p class="">Since the default value of the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> is
+ <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle</a>, if there is no
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> setting for a cue, the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>
+ defaults to 50%.</p></div>
+
+ </dd>
+
+
+ <dt><dfn title="text track cue alignment" id="dfn-text-track-cue-alignment">An alignment</dfn>
+ </dt><dd>
+
+ <p>An alignment for all lines of text within the <a href="#dfn-cue-box" class="internalDFN">cue box</a>, one of:</p>
+
+ <dl>
+
+ <dt><dfn title="text track cue start alignment" id="dfn-text-track-cue-start-alignment">Start alignment</dfn></dt>
+ <dd>The text is aligned towards the box's start side.</dd>
+
+ <dt><dfn title="text track cue middle alignment" id="dfn-text-track-cue-middle-alignment">Middle alignment</dfn></dt>
+ <dd>The text is aligned centered between the box's start and end sides.</dd>
+
+ <dt><dfn title="text track cue end alignment" id="dfn-text-track-cue-end-alignment">End alignment</dfn></dt>
+ <dd>The text is aligned towards the box's end side.</dd>
+
+ <dt><dfn title="text track cue left alignment" id="dfn-text-track-cue-left-alignment">Left alignment</dfn></dt>
+ <dd>The text is aligned to the box's left side.</dd>
+
+ <dt><dfn title="text track cue right alignment" id="dfn-text-track-cue-right-alignment">Right alignment</dfn></dt>
+ <dd>The text is aligned to the box's right side.</dd>
+
+ </dl>
+
+ <p>Which sides are the start and end sides depends on the Unicode bidirectional algorithm and
+ the <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a>. <a href="#refsBIDI">[BIDI]</a></p>
+
+ <p>By default, the value of the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> is
+ <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle aligned</a>.</p>
+
+ <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a <dfn id="dfn-computed-text-position-anchor-point">computed text position anchor point</dfn>,
+ which signifies the point in the text whose position within the video frame can be manipulated
+ through the <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a> cue setting. The value of
+ the <a href="#dfn-computed-text-position-anchor-point" class="internalDFN">computed text position anchor point</a> is set as follows:</p>
+
+ <ol>
+
+ <li>For <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start aligned</a> cues: the first character
+ of each line of text is positioned at the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> point within
+ the video frame.</li>
+
+ <li>For <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle aligned</a> cues: the middle character
+ of each line of text is positioned at the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> point within
+ the video frame.</li>
+
+ <li>For <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end aligned</a> cues: the last character
+ of each line of text is positioned at the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> point within
+ the video frame.</li>
+
+ <li>For <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left aligned</a> cues with left-to-right
+ <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</a>: the first character of each line of
+ text is positioned at the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> point within the video frame,
+ otherwise the last character is positioned there.</li>
+
+ <li>For <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right aligned</a> cues with left-to-right
+ <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</a>: the last character of each line of
+ text is positioned at the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> point within the video frame,
+ otherwise the first character is positioned there.</li>
+
+ </ol>
+
+ </dd>
+
+ <dt><dfn title="text track cue region identifier" id="dfn-text-track-cue-region-identifier">A region identifier</dfn></dt>
+ <dd>
+ <p>A string that references by identifier the region that a cue belongs to, if it is not null.</p>
+ </dd>
+
+ </dl>
+
+ <p>The associated <a href="#dfn-rules-for-updating-the-text-track-rendering" class="internalDFN">rules for updating the text track rendering</a> of WebVTT <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> are the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of
+ WebVTT text tracks</a>.</p>
+
+ <div class="impl">
+
+ <p>When a WebVTT <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> whose <a title="text track cue active flag" href="#dfn-text-track-cue-active-flag" class="internalDFN">active
+ flag</a> is set has its <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing
+ direction</a>, <a title="text track cue snap-to-lines flag" href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">snap-to-lines flag</a>, <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a>, <a title="text track cue text
+ position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a>, <a title="text track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a>, <a title="text
+ track cue alignment" href="#dfn-text-track-cue-alignment" class="internalDFN">alignment</a>, <a title="text track region identifier" href="#dfn-text-track-region-identifier" class="internalDFN">region identifier</a>,
+ or <a title="text track cue text" href="#dfn-text-track-cue-text" class="internalDFN">text</a> change value, then the user agent must empty
+ the <a href="#dfn-text-track-cue-display-state" class="internalDFN">text track cue display state</a>, and then immediately run the <a href="#dfn-text-track" class="internalDFN">text track</a>'s
+ <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>.</p>
+
+ </div>
+
+ </section>
+
+ <section id="text-track-region">
+ <h3 aria-level="2" role="heading" id="h3_text-track-region"><span class="secno">3.2 </span>Text Track Region</h3>
+
+ <p>A <dfn title="text track region" id="dfn-text-track-region">text track region</dfn> represents a subpart of the video viewport and provides a rendering area for <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a>.</p>
+
+ <p>Each <a title="text track region" href="#dfn-text-track-region" class="internalDFN">text track region</a> consists of:</p>
+
+ <dl>
+
+ <dt><dfn title="text track region identifier" id="dfn-text-track-region-identifier">An identifier</dfn></dt>
+ <dd>
+ <p>An arbitrary string.</p>
+ </dd>
+
+ <dt><dfn title="text track region width" id="dfn-text-track-region-width">A width</dfn></dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+
+ <dt><dfn title="text track region lines" id="dfn-text-track-region-lines">A lines value</dfn></dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+
+ <dt><dfn title="text track region anchor" id="dfn-text-track-region-anchor">A region anchor point</dfn></dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+
+ <dt><dfn title="text track region viewport anchor" id="dfn-text-track-region-viewport-anchor">A region viewport anchor point</dfn></dt>
+ <dd>
+ <p>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 viewport.</p>
+ </dd>
+
+ <dt><dfn title="text track region scroll" id="dfn-text-track-region-scroll">A scroll value</dfn></dt>
+ <dd>
+ <p>One of the following:</p>
+ <dl>
+ <dt><dfn title="text track region scroll none" id="dfn-text-track-region-scroll-none">None</dfn></dt>
+ <dd>Indicates that the cues in the region are not to scroll and instead stay fixed at the location they were first painted in.</dd>
+
+ <dt><dfn title="text track region scroll up" id="dfn-text-track-region-scroll-up">Up</dfn></dt>
+ <dd>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.</dd>
+ <!-- in the future we may introduce scroll="down"-->
+ </dl>
+ </dd>
+ </dl>
+
+ <p>For parsing, we also need the following:</p>
+
+ <dl>
+ <dt><dfn title="text track list of regions" id="dfn-text-track-list-of-regions">A text track list of regions</dfn></dt>
+
+ <dd>
+
+ <p>A list of zero or more <a title="text track region" href="#dfn-text-track-region" class="internalDFN">text track regions</a>.</p>
+
+ </dd>
+ </dl>
+ </section>
+
+ </section>
+
+ <section id="the-webvtt-file-format-syntax">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_the-webvtt-file-format-syntax"><span class="secno">4. </span>The WebVTT file format: Syntax</h2>
+
+ <section id="webvtt-file-structure">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-file-structure"><span class="secno">4.1 </span>WebVTT file structure</h3>
+
+ <p>A <dfn id="dfn-webvtt-file">WebVTT file</dfn> must consist of a <a href="#dfn-webvtt-file-body" class="internalDFN">WebVTT file
+ body</a> encoded as UTF-8 and labeled with the <a href="#dfn-mime-type" class="internalDFN">MIME
+ type</a> <code>text/vtt</code>. <a href="#refsRFC3629">[RFC3629]</a></p>
+
+ <p>A <dfn id="dfn-webvtt-file-body">WebVTT file body</dfn> consists of the following
+ components, in the following order:</p>
+
+ <ol>
+
+ <li>An optional U+FEFF BYTE ORDER MARK (BOM) character.</li>
+
+ <li>The string "<code title="">WEBVTT</code>".</li>
+
+ <li>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.</li> <!-- allows for Emacs line -->
+
+ <li>Exactly one <a title="WebVTT line terminator" href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminators</a> to
+ terminate the line with the file magic and separate it from the rest of the body.</li>
+
+ <li>Zero or more <a title="WebVTT metadata header" href="#dfn-webvtt-metadata-header" class="internalDFN">WebVTT metadata headers</a>.</li>
+
+ <li>One or more <a title="WebVTT line terminator" href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminators</a> to
+ terminate the header block and separate the cues from the file header.</li>
+
+ <li>Zero or more <a title="WebVTT cue" href="#dfn-webvtt-cue" class="internalDFN">WebVTT cues</a> and <a title="WebVTT
+ comment" href="#dfn-webvtt-comment" class="internalDFN">WebVTT comments</a> separated from each other by one or more <a title="WebVTT
+ line terminator" href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminators</a>.</li>
+
+ <li>Zero or more <a title="WebVTT line terminator" href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line
+ terminators</a>.</li>
+
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-line-terminator">WebVTT line terminator</dfn> consists of one of the
+ following:</p>
+
+ <ul class="brief">
+ <li>A U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.</li>
+ <li>A single U+000A LINE FEED (LF) character.</li>
+ <li>A single U+000D CARRIAGE RETURN (CR) character.</li>
+ </ul>
+
+ <p>A <dfn id="dfn-webvtt-metadata-header">WebVTT metadata header</dfn> consists of the following components, in
+ the given order:</p>
+
+ <ol>
+ <li>A <a href="#dfn-webvtt-metadata-header-name" class="internalDFN">WebVTT metadata header name</a>.</li>
+ <li>A U+003A COLON (colon) character.</li>
+ <li>A <a href="#dfn-webvtt-metadata-header-value" class="internalDFN">WebVTT metadata header value</a>.</li>
+ <li>A <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-metadata-header-name">WebVTT metadata header name</dfn> and
+ a <dfn id="dfn-webvtt-metadata-header-value">WebVTT metadata header value</dfn>
+ each consist of any sequence of zero 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
+ "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+ U+003E GREATER-THAN SIGN).</p>
+
+
+ <p>A <dfn id="dfn-webvtt-cue">WebVTT cue</dfn> consists of the following components, in
+ the given order:</p>
+
+ <ol>
+ <li>Optionally, a <a href="#dfn-webvtt-cue-identifier" class="internalDFN">WebVTT cue identifier</a> followed by a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ <li><a href="#dfn-webvtt-cue-timings" class="internalDFN">WebVTT cue timings</a>.</li>
+ <li>Optionally, one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters followed by a <a href="#dfn-webvtt-cue-settings-list" class="internalDFN">WebVTT cue settings list</a>.</li>
+ <li>A <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ <li>The <dfn id="dfn-cue-payload">cue payload</dfn>: either <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>, <a href="#dfn-webvtt-chapter-title-text" class="internalDFN">WebVTT chapter title text</a>, or <a href="#dfn-webvtt-metadata-text" class="internalDFN">WebVTT metadata text</a>, but it must not contain the substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</li>
+ <li>A <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_4"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-cue" class="internalDFN">WebVTT cue</a> corresponds to one piece
+ of time-aligned text or data in the <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a>, for
+ example one subtitle. The <a href="#dfn-cue-payload" class="internalDFN">cue payload</a> is the text or
+ data associated with the cue.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-cue-identifier">WebVTT cue identifier</dfn> is any sequence of one or more
+ characters not containing the substring "<code title="">--></code>"
+ (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.</p>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_5"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-cue-identifier" class="internalDFN">WebVTT cue identifier</a> can be used to
+ reference a specific cue, for example from script or CSS.</p></div>
+
+ <p>The <dfn id="dfn-webvtt-cue-timings">WebVTT cue timings</dfn> part of a <a href="#dfn-webvtt-cue" class="internalDFN">WebVTT
+ cue</a> consists of the following components, in the given
+ order:</p>
+
+ <ol>
+
+ <!-- we could allow leading and trailing spaces and tabs, and make
+ the space between the arrow either optional or allow multiple
+ spaces or tabs -->
+
+ <li>A <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a> representing the start time
+ offset of the cue. The time represented by this <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT
+ timestamp</a> must be greater than or equal to the start time
+ offsets of all previous cues in the file.</li>
+
+ <li>One or more U+0020 SPACE characters or U+0009 CHARACTER
+ TABULATION (tab) characters.</li>
+
+ <li>The string "<code title="">--></code>" (U+002D HYPHEN-MINUS,
+ U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</li>
+
+ <li>One or more U+0020 SPACE characters or U+0009 CHARACTER
+ TABULATION (tab) characters.</li>
+
+ <li>A <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a> representing the end time
+ offset of the cue. The time represented by this <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT
+ timestamp</a> must be greater than the start time offset of the
+ cue.</li>
+
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_6"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-cue-timings" class="internalDFN">WebVTT cue timings</a> give the start
+ and end offsets of the <a href="#dfn-webvtt-cue" class="internalDFN">WebVTT cue</a>. Different cues can
+ overlap. Cues are always listed ordered by their start time.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-timestamp">WebVTT timestamp</dfn> can be either a
+ <a title="complete WebVTT timestamp" href="#dfn-complete-webvtt-timestamp" class="internalDFN">WebVTT timestamp representing
+ hours, minutes, seconds and thousandths of a second</a> or a
+ <a title="partial WebVTT timestamp" href="#dfn-partial-webvtt-timestamp" class="internalDFN">WebVTT timestamp representing
+ a time in seconds and fractions of a second</a>.</p>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_7"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a> is always interpreted
+ relative to the <a href="#dfn-current-playback-position" class="internalDFN">current playback position</a> of the media data
+ that the WebVTT file is to be synchronised with, which always starts
+ at 0.</p></div>
+
+ <p>A <dfn title="complete WebVTT timestamp" id="dfn-complete-webvtt-timestamp">WebVTT timestamp representing hours <var title="">hours</var>, minutes <var title="">minutes</var>, seconds
+ <var title="">seconds</var>, and thousandths of a second <var title="">seconds-frac</var></dfn>, consists of the following components,
+ in the given order:</p>
+
+ <ol>
+
+ <li>Optionally (required if <var title="">hour</var> is non-zero):
+
+ <ol>
+
+ <li>Two or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, representing the <var title="">hours</var> as a base
+ ten integer.</li>
+
+ <li>A U+003A COLON character (:)</li>
+
+ </ol>
+
+ </li>
+
+ <li>Two <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, representing the <var title="">minutes</var> as a base ten
+ integer in the range 0 ≤ <var title="">minutes</var> ≤ 59.</li>
+
+ <li>A U+003A COLON character (:)</li>
+
+ <li>Two <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, representing the <var title="">seconds</var> as a base ten
+ integer in the range 0 ≤ <var title="">seconds</var> ≤ 59.</li>
+
+ <li>A U+002E FULL STOP character (.).</li>
+
+ <li>Three <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, representing the thousandths of a second <var title="">seconds-frac</var> as a base ten integer.</li>
+
+ </ol>
+
+ <p>A <dfn title="partial WebVTT timestamp" id="dfn-partial-webvtt-timestamp">WebVTT timestamp representing a time
+ in seconds and fractions of a second</dfn> is a <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a>
+ representing hours <var title="">hours</var>, minutes <var title="">minutes</var>, seconds
+ <var title="">seconds</var>, and thousandths of a second <var title="">seconds-frac</var>, calculated as follows:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">seconds</var> be the integer part of the
+ time.</p></li>
+
+ <li><p>Let <var title="">seconds-frac</var> be the fractional
+ component of the time, expressed as the digits of the decimal
+ fraction given to three decimal digits.</p></li>
+
+ <li><p>If <var title="">seconds</var> is greater than 59, then let
+ <var title="">minutes</var> be the integer component of <var title="">seconds</var> divided by sixty, and then let <var title="">seconds</var> be the remainder of dividing <var title="">seconds</var> divided by sixty. Otherwise, let <var title="">minutes</var> be zero.</p></li>
+
+ <li><p>If <var title="">minutes</var> is greater than 59, then let
+ <var title="">hours</var> be the integer component of <var title="">minutes</var> divided by sixty, and then let <var title="">minutes</var> be the remainder of dividing <var title="">minutes</var> divided by sixty. Otherwise, let <var title="">hours</var> be zero.</p></li>
+
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-cue-settings-list">WebVTT cue settings list</dfn> consist of a sequence of zero or more
+ <dfn title="WebVTT cue setting" id="dfn-webvtt-cue-setting">WebVTT cue settings</dfn> 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:</p>
+
+ <ol>
+ <li>A <a title="WebVTT cue setting name" href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</li>
+ <li>An optional U+003A COLON (colon) character.</li>
+ <li>An optional <a title="WebVTT cue setting value" href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>.</li>
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-cue-setting-name">WebVTT cue setting name</dfn> and a <dfn id="dfn-webvtt-cue-setting-value">WebVTT cue setting value</dfn>
+ each consist of any sequence of zero 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
+ "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+ U+003E GREATER-THAN SIGN).</p>
+
+ </section><!-- end file structure -->
+
+ <section id="webvtt-comments">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-comments"><span class="secno">4.2 </span>WebVTT comments</h3>
+
+ <p>A <dfn id="dfn-webvtt-comment">WebVTT comment</dfn> consists of the following components, in
+ the given order:</p>
+
+ <ol>
+ <li>The <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> string "<code title="">NOTE</code>".</li>
+ <li>Optionally, the following components, in the given order:
+ <ol>
+ <li>Either:
+ <ul>
+ <li>A U+0020 SPACE character or U+0009 CHARACTER TABULATION (tab) character.</li>
+ <li>A <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ </ul>
+ </li><li>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
+ <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>, except that the entire resulting string must not contain
+ the substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).
+ </li></ol>
+ </li>
+ <li>A <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_8"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-comment" class="internalDFN">WebVTT comment</a> is ignored by the parser.</p></div>
+
+ </section><!-- end comments -->
+
+ <section id="types-of-webvtt-cue-payload">
+ <h3 aria-level="2" role="heading" id="h3_types-of-webvtt-cue-payload"><span class="secno">4.3 </span>Types of WebVTT cue payload</h3>
+
+ <section id="webvtt-metadata-text">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-metadata-text"><span class="secno">4.3.1 </span>WebVTT metadata text</h4>
+
+ <p><dfn id="dfn-webvtt-metadata-text">WebVTT metadata text</dfn> 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 <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>. (In other
+ words, any text that does not have two consecutive <a title="WebVTT line terminator" href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminators</a> and
+ does not start or end with a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line
+ terminator</a>.)</p>
+
+ <p><a href="#dfn-webvtt-metadata-text" class="internalDFN">WebVTT metadata text</a> cues are only
+ useful for scripted applications (using the <code title="dom-TextTrack-kind-metadata">metadata</code> <a href="#dfn-text-track-kind" class="internalDFN">text
+ track kind</a>).</p>
+
+ </section>
+
+ <section id="webvtt-cue-text">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-cue-text"><span class="secno">4.3.2 </span>WebVTT cue text</h4>
+
+ <p><dfn id="dfn-webvtt-cue-text">WebVTT cue text</dfn> is <a href="#dfn-cue-payload" class="internalDFN">cue payload</a>
+ that consists of zero or more <a href="#dfn-webvtt-cue-components" class="internalDFN">WebVTT cue components</a>, in any order,
+ each optionally separated from the next by a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</p>
+
+ <p>The <dfn id="dfn-webvtt-cue-components">WebVTT cue components</dfn> are:</p>
+
+ <ul>
+
+ <li>A <a href="#dfn-webvtt-cue-class-span" class="internalDFN">WebVTT cue class span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-italics-span" class="internalDFN">WebVTT cue italics span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-bold-span" class="internalDFN">WebVTT cue bold span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-underline-span" class="internalDFN">WebVTT cue underline span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-ruby-span" class="internalDFN">WebVTT cue ruby span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-voice-span" class="internalDFN">WebVTT cue voice span</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-language-span" class="internalDFN">WebVTT cue language span</a>.</li>
+
+ <li>A <a href="#dfn-webvtt-cue-timestamp" class="internalDFN">WebVTT cue timestamp</a>.</li>
+
+ <li>A <a href="#dfn-webvtt-cue-text-span" class="internalDFN">WebVTT cue text span</a>, representing the text of the cue.</li>
+
+ <li>A <a href="#dfn-webvtt-cue-amp-escape" class="internalDFN">WebVTT cue amp escape</a>, representing a "&" character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-lt-escape" class="internalDFN">WebVTT cue lt escape</a>, representing a "<" character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-gt-escape" class="internalDFN">WebVTT cue gt escape</a>, representing a ">" character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-lrm-escape" class="internalDFN">WebVTT cue lrm escape</a>, representing a U+200E LEFT-TO-RIGHT MARK Unicode bidirectional formatting character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-rlm-escape" class="internalDFN">WebVTT cue rlm escape</a>, representing a U+200F RIGHT-TO-LEFT MARK Unicode bidirectional formatting character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-nbsp-escape" class="internalDFN">WebVTT cue nbsp escape</a>, representing a U+00A0 NO-BREAK SPACE character in the text of the cue.</li>
+
+ </ul>
+
+ <p><dfn id="dfn-webvtt-cue-internal-text">WebVTT cue internal text</dfn> consists of an optional
+ <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>, followed by zero or more
+ <a href="#dfn-webvtt-cue-components" class="internalDFN">WebVTT cue components</a>, in any order, each optionally
+ followed by a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</p>
+
+
+ <p>A <dfn id="dfn-webvtt-cue-class-span">WebVTT cue class span</dfn> consists of a <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue
+ span start tag</a> "<code title="">c</code>" that disallows an
+ annotation, <a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a> representing cue
+ text, and a <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">c</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-italics-span">WebVTT cue italics span</dfn> consists of a <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT
+ cue span start tag</a> "<code title="">i</code>" that disallows
+ an annotation, <a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a> representing
+ the italicized text, and a <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a>
+ "<code title="">i</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-bold-span">WebVTT cue bold span</dfn> consists of a <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue
+ span start tag</a> "<code title="">b</code>" that disallows an
+ annotation, <a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a> representing the
+ boldened text, and a <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">b</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-underline-span">WebVTT cue underline span</dfn> consists of a <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT
+ cue span start tag</a> "<code title="">u</code>" that disallows
+ an annotation, <a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a> representing
+ the underlined text, and a <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a>
+ "<code title="">u</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-ruby-span">WebVTT cue ruby span</dfn> consists of the following
+ components, in the order given:</p>
+
+ <ol>
+ <li>A <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue span start tag</a> "<code title="">ruby</code>" that disallows an annotation.</li>
+ <li>One or more occurrences of the following group of components, in the order given:
+ <ol>
+ <li><a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a>, representing the ruby base.</li>
+ <li>A <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue span start tag</a> "<code title="">rt</code>" that disallows an annotation.</li>
+ <li>A <dfn id="dfn-webvtt-cue-ruby-text-span">WebVTT cue ruby text span</dfn>: <a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a>, representing the ruby text component of the ruby annotation.</li>
+ <li>A <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">rt</code>".
+ If this is the last occurrence of this group of components in the
+ <a href="#dfn-webvtt-cue-ruby-span" class="internalDFN">WebVTT cue ruby span</a>, then this last end tag string
+ may be omitted.</li>
+ </ol>
+ </li>
+ <li>If the last end tag string was not omitted: Optionally, a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ <li>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 <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">ruby</code>".</li>
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-cue-voice-span">WebVTT cue voice span</dfn> consists of the following
+ components, in the order given:</p>
+
+ <ol>
+ <li>A <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue span start tag</a> "<code title="">v</code>" that requires an annotation; the annotation represents the name of the voice.</li>
+ <li><a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">v</code>". If this <a href="#dfn-webvtt-cue-voice-span" class="internalDFN">WebVTT cue voice span</a> is the only <a title="WebVTT cue components" href="#dfn-webvtt-cue-components" class="internalDFN">component</a> of its <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a> sequence, then the end tag may be omitted for brevity.</li>
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-cue-language-span">WebVTT cue language span</dfn> consists of the following
+ components, in the order given:</p>
+
+ <ol>
+ <li>A <a href="#dfn-webvtt-cue-span-start-tag" class="internalDFN">WebVTT cue span start tag</a> "<code title="">lang</code>" that requires an annotation; the annotation represents the language of the following component, and must be a valid BCP 47 language tag. <a href="#refsBCP47">[BCP47]</a></li>
+ <li><a href="#dfn-webvtt-cue-internal-text" class="internalDFN">WebVTT cue internal text</a>.</li>
+ <li>A <a href="#dfn-webvtt-cue-span-end-tag" class="internalDFN">WebVTT cue span end tag</a> "<code title="">lang</code>".</li>
+ </ol>
+
+
+ <p>A <dfn id="dfn-webvtt-cue-span-start-tag">WebVTT cue span start tag</dfn> has a <var title="">tag
+ name</var> and either <!--allows,--> requires<!--,--> or disallows
+ an annotation, and consists of the following components, in the
+ order given:</p>
+
+ <ol>
+
+ <li>A U+003C LESS-THAN SIGN character (<).</li>
+
+ <li>The <var title="">tag name</var>.</li>
+
+ <li>Zero or more occurrences of the following sequence:
+
+ <ol>
+
+ <li>U+002E FULL STOP character (.)</li>
+
+ <li>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.</li>
+
+ </ol>
+
+ </li>
+
+ <li>
+<!--
+ <dl class="switch">
+
+ <dt>If the start tag allows an annotation:</dt>
+
+ <dd>Optionally, a <a>WebVTT cue span start tag annotation</a>.</dd>
+
+ <dt>-->If the start tag requires an annotation:<!--</dt>
+
+ <dd>A <a>WebVTT cue span start tag annotation</a>.</dd>
+
+ </dl>
+
+ <p>A <dfn>WebVTT cue span start tag annotation</dfn> consists of-->
+ 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:<!--</p>-->
+
+ <ul>
+ <li><a href="#dfn-webvtt-cue-span-start-tag-annotation-text" class="internalDFN">WebVTT cue span start tag annotation text</a>, representing the text of the annotation.</li>
+ <li>A <a href="#dfn-webvtt-cue-amp-escape" class="internalDFN">WebVTT cue amp escape</a>, representing a "&" character in the text of the annotation.</li>
+ <li>A <a href="#dfn-webvtt-cue-lt-escape" class="internalDFN">WebVTT cue lt escape</a>, representing a "<" character in the text of the annotation.</li>
+ <li>A <a href="#dfn-webvtt-cue-gt-escape" class="internalDFN">WebVTT cue gt escape</a>, representing a ">" character in the text of the annotation.</li>
+ <li>A <a href="#dfn-webvtt-cue-lrm-escape" class="internalDFN">WebVTT cue lrm escape</a>, representing a U+200E LEFT-TO-RIGHT MARK Unicode bidirectional formatting character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-rlm-escape" class="internalDFN">WebVTT cue rlm escape</a>, representing a U+200F RIGHT-TO-LEFT MARK Unicode bidirectional formatting character in the text of the cue.</li>
+ <li>A <a href="#dfn-webvtt-cue-nbsp-escape" class="internalDFN">WebVTT cue nbsp escape</a>, representing a U+00A0 NO-BREAK SPACE character in the text of the cue.</li>
+ </ul>
+
+ </li>
+
+ <li>A U+003E GREATER-THAN SIGN character (>).</li>
+
+ </ol>
+
+ <p>A <dfn id="dfn-webvtt-cue-span-end-tag">WebVTT cue span end tag</dfn> has a <var title="">tag
+ name</var> and consists of the following components, in the order
+ given:</p>
+
+ <ol>
+ <li>A U+003C LESS-THAN SIGN character (<).</li>
+ <li>U+002F SOLIDUS character (/).</li>
+ <li>The <var title="">tag name</var>.</li>
+ <li>A U+003E GREATER-THAN SIGN character (>).</li>
+ </ol>
+
+
+ <p>A <dfn id="dfn-webvtt-cue-timestamp">WebVTT cue timestamp</dfn> consists of a U+003C LESS-THAN
+ SIGN character (<), followed by a <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a>
+ 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 <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a> must be
+ greater than the times represented by any previous <a title="WebVTT cue timestamp" href="#dfn-webvtt-cue-timestamp" class="internalDFN">WebVTT cue timestamps</a> in the
+ cue, as well as greater than the cue's start time offset, and less
+ than the cue's end time offset.</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-text-span">WebVTT cue text span</dfn> 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 (<).</p>
+
+ <p><dfn id="dfn-webvtt-cue-span-start-tag-annotation-text">WebVTT cue span start tag annotation text</dfn> 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 (>).</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-amp-escape">WebVTT cue amp escape</dfn> is the five character string
+ "<code title="">&amp;</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-lt-escape">WebVTT cue lt escape</dfn> is the four character string
+ "<code title="">&lt;</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-gt-escape">WebVTT cue gt escape</dfn> is the four character string
+ "<code title="">&gt;</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-lrm-escape">WebVTT cue lrm escape</dfn> is the five character string
+ "<code title="">&lrm;</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-rlm-escape">WebVTT cue rlm escape</dfn> is the five character string
+ "<code title="">&rlm;</code>".</p>
+
+ <p>A <dfn id="dfn-webvtt-cue-nbsp-escape">WebVTT cue nbsp escape</dfn> is the six character string
+ "<code title="">&nbsp;</code>".</p>
+
+ </section><!-- end of cue text -->
+
+ </section><!-- end cue payload types -->
+
+ <section id="webvtt-cue-settings">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-cue-settings"><span class="secno">4.4 </span>WebVTT cue settings</h3>
+
+ <section id="webvtt-region-definition">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-region-definition"><span class="secno">4.4.1 </span>WebVTT region definition</h4>
+
+ <p>A <a href="#dfn-webvtt-cue-settings-list" class="internalDFN">WebVTT cue settings list</a> may contain a reference to a
+ <a title="text track region" href="#dfn-text-track-region" class="internalDFN">text track region</a>. To define
+ a region, a <a href="#dfn-webvtt-region-metadata-header" class="internalDFN">WebVTT region metadata header</a> is specified.</p>
+
+ <p>A <dfn id="dfn-webvtt-region-metadata-header">WebVTT region metadata header</dfn> is a special kind of
+ <a href="#dfn-webvtt-metadata-header" class="internalDFN">WebVTT metadata header</a> where both of the following apply:</p>
+
+ <ul>
+ <li>The <a href="#dfn-webvtt-metadata-header-name" class="internalDFN">WebVTT metadata header name</a> is the string "<code>Region</code>".</li>
+ <li>The <a href="#dfn-webvtt-metadata-header-value" class="internalDFN">WebVTT metadata header value</a> is a <a href="#dfn-webvtt-region-setting-list" class="internalDFN">WebVTT region setting list</a>.
+ </li>
+ </ul>
+
+ <p>A <dfn id="dfn-webvtt-region">WebVTT region</dfn> represents its <a title="WebVTT region setting list" href="#dfn-webvtt-region-setting-list" class="internalDFN">WebVTT region settings</a>.</p>
+
+ <p>The <dfn id="dfn-webvtt-region-setting-list">WebVTT region setting list</dfn> of a <a href="#dfn-webvtt-region-metadata-header" class="internalDFN">WebVTT region metadata header</a> consists of zero or more of the following components, in any order, separated from each other by one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. Each component must not be included more than once per <a href="#dfn-webvtt-region-setting-list" class="internalDFN">WebVTT region setting list</a> string.</p>
+
+ <ul>
+ <li>A <a href="#dfn-webvtt-region-identifier" class="internalDFN">WebVTT region identifier</a>.</li> <!-- id:fred -->
+ <li>A <a href="#dfn-webvtt-region-width-setting" class="internalDFN">WebVTT region width setting</a>.</li> <!-- width:80.5% -->
+ <li>A <a href="#dfn-webvtt-region-lines-setting" class="internalDFN">WebVTT region lines setting</a>.</li> <!-- lines:3 -->
+ <li>A <a href="#dfn-webvtt-region-anchor-setting" class="internalDFN">WebVTT region anchor setting</a>.</li> <!-- regionanchor:0%,100% -->
+ <li>A <a href="#dfn-webvtt-region-viewport-anchor-setting" class="internalDFN">WebVTT region viewport anchor setting</a>.</li> <!-- viewportanchor:10.5%,90.5% -->
+ <li>A <a href="#dfn-webvtt-region-scroll-setting" class="internalDFN">WebVTT region scroll setting</a>.</li> <!-- scroll:up -->
+ </ul>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_9"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-setting-list" class="internalDFN">WebVTT region setting list</a> 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.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-identifier">WebVTT region identifier</dfn> consists of the
+ following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>id</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>An arbitrary string of one or more characters other than U+0020 SPACE
+ or U+0009 CHARACTER TABULATION character. The string must not contain the substring
+ "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+ U+003E GREATER-THAN SIGN).</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_10"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-identifier" class="internalDFN">WebVTT region identifier</a> gives
+ a name to the region so it can be referenced by the cues that belong to the region.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-width-setting">WebVTT region width setting</dfn> consists of the
+ following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>width</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>An optional U+002E DOT character (.).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_11"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-width-setting" class="internalDFN">WebVTT region width setting</a> 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.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-lines-setting">WebVTT region lines setting</dfn> consists of the
+ following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>lines</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_12"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-lines-setting" class="internalDFN">WebVTT region lines setting</a> 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.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-anchor-setting">WebVTT region anchor setting</dfn> consists of the
+ following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>regionanchor</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>An optional U+002E DOT character (.).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
+ <li><p>A U+002C COMMA character (,).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>An optional U+002E DOT character (.).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_13"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-anchor-setting" class="internalDFN">WebVTT region anchor setting</a> 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
+ <a href="#dfn-webvtt-region-anchor-setting" class="internalDFN">WebVTT region anchor setting</a> is given, the anchor
+ defaults to 0%, 100% (i.e. the bottom left corner).</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-viewport-anchor-setting">WebVTT region viewport anchor setting</dfn>
+ consists of the following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>viewportanchor</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>An optional U+002E DOT character (.).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
+ <li><p>A U+002C COMMA character (,).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>An optional U+002E DOT character (.).</p></li>
+ <li><p>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</p></li>
+ <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_14"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-viewport-anchor-setting" class="internalDFN">WebVTT region viewport
+ anchor setting</a> 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 viewport anchor is given, it defaults
+ to 0%, 100% (i.e. the bottom left corner).</p></div>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_15"><span>Note</span></div><p class="">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.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-scroll-setting">WebVTT region scroll setting</dfn> consists of the
+ following components, in the order given:</p>
+ <ol>
+ <li><p>The string "<code>scroll</code>".</p></li>
+ <li><p>A U+003D EQUALS SIGN character (=).</p></li>
+ <li><p>The string "<code>up</code>".</p></li>
+ </ol>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_16"><span>Note</span></div><p class="">The <a href="#dfn-webvtt-region-scroll-setting" class="internalDFN">WebVTT region scroll setting</a>
+ 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.</p></div>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_17"><span>Note</span></div><p class="">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.</p></div>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_18"><span>Note</span></div><p class="">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.</p></div>
+
+ </section>
+
+ <section id="webvtt-cue-settings-1">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-cue-settings-1"><span class="secno">4.4.2 </span>WebVTT cue settings</h4>
+
+ <p>A <a href="#dfn-webvtt-cue-settings-list" class="internalDFN">WebVTT cue settings list</a> consists of zero or more of the following settings. Each
+ setting must not be included more than once per <a href="#dfn-webvtt-cue-settings-list" class="internalDFN">WebVTT cue settings list</a>.</p>
+
+ <ul class="brief">
+ <li>A <a href="#dfn-webvtt-vertical-text-cue-setting" class="internalDFN">WebVTT vertical text cue setting</a>.</li> <!-- vertical:rl/lr -->
+ <li>A <a href="#dfn-webvtt-line-position-cue-setting" class="internalDFN">WebVTT line position cue setting</a>.</li> <!-- line:100% line:1 line:-1 -->
+ <li>A <a href="#dfn-webvtt-size-cue-setting" class="internalDFN">WebVTT size cue setting</a>.</li> <!-- size:100% -->
+ <li>A <a href="#dfn-webvtt-text-position-cue-setting" class="internalDFN">WebVTT text position cue setting</a>.</li> <!-- position:100% -->
+ <li>A <a href="#dfn-webvtt-alignment-cue-setting" class="internalDFN">WebVTT alignment cue setting</a>.</li> <!-- align:start/middle/end/left/right -->
+ <li>A <a href="#dfn-webvtt-region-cue-setting" class="internalDFN">WebVTT region cue setting</a>.</li> <!-- region:fred -->
+ </ul>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_19"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-cue-settings-list" class="internalDFN">WebVTT cue settings list</a> gives configuration
+ options regarding the position and alignment of the cue. For
+ example, it allows a cue to be aligned to the left or positioned at
+ the top right.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</dfn> is a <a href="#dfn-webvtt-cue-setting" class="internalDFN">WebVTT cue setting</a> that
+ consists of the following components, in the order given:</p>
+
+ <ol>
+ <li>The string "<code title="">vertical</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li>One of the following strings as the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>: "<code title="">rl</code>", "<code title="">lr</code>".</li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_20"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-vertical-text-cue-setting" class="internalDFN">WebVTT vertical text cue setting</a>
+ 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.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-line-position-cue-setting">WebVTT line position cue setting</dfn> consists of the
+ following components, in the order given:</p>
+
+ <ol>
+ <li><p>The string "<code title="">line</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</p></li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li>As the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a> either:
+ <dl>
+ <dt>To represent a specific position relative to the video frame</dt>
+ <dd>
+ <ol>
+ <li>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</li>
+ <li>A U+0025 PERCENT SIGN character (%).</li>
+ </ol>
+ </dd>
+ <dt>To represent a line number</dt>
+ <dd>
+ <ol>
+ <li>Optionally a U+002D HYPHEN-MINUS character (-).</li>
+ <li>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</li>
+ </ol>
+ </dd>
+ </dl>
+ </li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_21"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-line-position-cue-setting" class="internalDFN">WebVTT line position cue setting</a>
+ configures the position of the cue. For horizontal cues, this is the
+ vertical position. The position can be given either as a percentage,
+ which gives the distance from the top of the frame, 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 top of the frame (the top
+ line is numbered 0), negative line numbers from the bottom of the
+ frame (the bottom line is numbered −1).</p></div>
+
+ <p>A <dfn id="dfn-webvtt-size-cue-setting">WebVTT size cue setting</dfn> consists of the
+ following components, in the order given:</p>
+
+ <ol>
+ <li><p>The string "<code title="">size</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</p></li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li>As the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>:
+ <ol>
+ <li>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</li>
+ <li>A U+0025 PERCENT SIGN character (%).</li>
+ </ol>
+ </li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_22"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-size-cue-setting" class="internalDFN">WebVTT size cue setting</a> configures
+ the size of the <a href="#dfn-cue-box" class="internalDFN">cue box</a> in the same direction as the <a href="#dfn-webvtt-text-position-cue-setting" class="internalDFN">WebVTT text
+ position cue setting</a>. For horizontal cues, this is the width
+ of the <a href="#dfn-cue-box" class="internalDFN">cue box</a>. It is given as a percentage of the width of the
+ frame.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-text-position-cue-setting">WebVTT text position cue setting</dfn> consists of the
+ following components, in the order given:</p>
+
+ <ol>
+ <li><p>The string "<code title="">position</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</p></li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li>As the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>:
+ <ol>
+ <li>One or more <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>.</li>
+ <li>A U+0025 PERCENT SIGN character (%).</li>
+ </ol>
+ </li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_23"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-text-position-cue-setting" class="internalDFN">WebVTT text position cue setting</a>
+ configures the position of the text in the direction orthogonal to
+ the <a href="#dfn-webvtt-line-position-cue-setting" class="internalDFN">WebVTT line position cue setting</a>. For horizontal
+ cues, this is the horizontal position. The <a href="#dfn-webvtt-text-position-cue-setting" class="internalDFN">WebVTT text
+ position cue setting</a> is given as a percentage, calculated
+ from the edge of the <a href="#dfn-cue-box" class="internalDFN">cue box</a> that the text begins (so for
+ left-to-right English text, the left edge).</p></div>
+
+ <p>A <dfn id="dfn-webvtt-alignment-cue-setting">WebVTT alignment cue setting</dfn> consists of the
+ following components, in the order given:</p>
+
+ <ol>
+ <li><p>The string "<code title="">align</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</p></li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li>One of the following strings as the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>: "<code title="">start</code>", "<code title="">middle</code>", "<code title="">end</code>", "<code title="">left</code>", "<code title="">right</code>"</li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_24"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-alignment-cue-setting" class="internalDFN">WebVTT alignment cue setting</a>
+ configures the alignment of the text within the cue. The keywords
+ are relative to the text direction; for left-to-right English text,
+ "<code title="">start</code>" means left-aligned.</p></div>
+
+ <p>A <dfn id="dfn-webvtt-region-cue-setting">WebVTT region cue setting</dfn> consists of the
+ following components, in the order given:</p>
+
+ <ol>
+ <li><p>The string "<code>region</code>" as the <a href="#dfn-webvtt-cue-setting-name" class="internalDFN">WebVTT cue setting name</a>.</p></li>
+ <li><p>A U+003A COLON character (:).</p></li>
+ <li><p>As the <a href="#dfn-webvtt-cue-setting-value" class="internalDFN">WebVTT cue setting value</a>: an arbitrary string of one or more characters other than U+0020 SPACE or U+0009 CHARACTER TABULATION character. The string must not contain the substring "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</p></li>
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_25"><span>Note</span></div><p class="">A <a href="#dfn-webvtt-region-cue-setting" class="internalDFN">WebVTT region cue setting</a>
+ configures a cue to become part of a region by referencing the region's identifier unless
+ the cue has a <a title="WebVTT vertical text cue setting" href="#dfn-webvtt-vertical-text-cue-setting" class="internalDFN">"vertical"</a>,
+ <a title="WebVTT line position cue setting" href="#dfn-webvtt-line-position-cue-setting" class="internalDFN">"line"</a> or
+ <a title="WebVTT size cue setting" href="#dfn-webvtt-size-cue-setting" class="internalDFN">"size"</a> cue setting. If a cue is
+ part of a region, its cue settings for <a title="WebVTT line position cue setting" href="#dfn-webvtt-line-position-cue-setting" class="internalDFN">"position"</a>
+ and <a title="WebVTT alignment cue setting" href="#dfn-webvtt-alignment-cue-setting" class="internalDFN">"align"</a> are applied to the line boxes
+ in the cue relative to the region box.</p></div>
+
+ </section>
+
+ </section><!-- end cue settings -->
+
+ <section id="properties-of-cue-sequences">
+ <h3 aria-level="2" role="heading" id="h3_properties-of-cue-sequences"><span class="secno">4.5 </span>Properties of cue sequences</h3>
+
+ <section id="webvtt-file-using-only-nested-cues">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-file-using-only-nested-cues"><span class="secno">4.5.1 </span>WebVTT file using only nested cues</h4>
+
+ <p>A <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> whose cues all follow the following rules
+ is said to be a <dfn id="dfn-webvtt-file-using-only-nested-cues">WebVTT file using only nested cues</dfn>:</p>
+
+ <p>given any two cues <var title="">cue1</var> and <var title="">cue2</var> with start and end time
+ offsets <var title="">(x1, y1)</var> and <var title="">(x2, y2)</var> respectively,</p>
+
+ <ul>
+ <li>either <var title="">cue1</var> lies fully within <var title="">cue2</var>, i.e.
+ <var title="">x1 >= x2</var> and <var title="">y1 <= y2</var></li>
+ <li>or <var title="">cue1</var> fully contains <var title="">cue2</var>, i.e.
+ <var title="">x1 <= x2</var> and <var title="">y1 >= y2</var>.</li>
+ </ul>
+
+ <div class="example">
+
+ <p>The following example matches this definition:</p>
+
+ <pre>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</pre>
+
+ <p>Notice how you can express the cues in this WebVTT file as a
+ tree structure:</p>
+
+ <ul>
+ <li>WebVTT file
+ <ul>
+ <li>Introduction
+ <ul>
+ <li>Topics
+ </li><li>Presenters
+ </li></ul>
+ </li>
+ <li>Scrolling Effects
+ <ul>
+ <li>Achim's Demo
+ </li><li>Timeline Panel
+ </li></ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ <p>If the file has cues that can't be expressed in this fashion,
+ then they don't match the definition of a <a href="#dfn-webvtt-file-using-only-nested-cues" class="internalDFN">WebVTT file using
+ only nested cues</a>. For example:</p>
+
+ <pre>WEBVTT
+
+00:00.000 --> 01:00.000
+The First Minute
+
+00:30.000 --> 01:30.000
+The Final Minute</pre>
+
+ <p>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 <a href="#dfn-webvtt-file-using-only-nested-cues" class="internalDFN">WebVTT file
+ using only nested cues</a>.</p>
+
+ </div>
+
+ </section>
+
+ </section><!-- end cue sequence properties -->
+
+ <section id="types-of-webvtt-files">
+ <h3 aria-level="2" role="heading" id="h3_types-of-webvtt-files"><span class="secno">4.6 </span>Types of WebVTT files</h3>
+
+ <p>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.</p>
+
+ <p>Conformance checkers, when validating <a href="#dfn-webvtt" class="internalDFN">WebVTT</a> files, may
+ offer to restrict syntax checking for validating these types.</p>
+
+ <section id="webvtt-file-using-metadata-content">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-file-using-metadata-content"><span class="secno">4.6.1 </span>WebVTT file using metadata content</h4>
+
+ <p>A <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> whose cues all have a <a href="#dfn-cue-payload" class="internalDFN">cue
+ payload</a> that is <a href="#dfn-webvtt-metadata-text" class="internalDFN">WebVTT metadata text</a> is
+ said to be a <dfn id="dfn-webvtt-file-using-metadata-content">WebVTT file using metadata content</dfn>.</p>
+
+ </section>
+
+ <section id="webvtt-file-using-chapter-title-text">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-file-using-chapter-title-text"><span class="secno">4.6.2 </span>WebVTT file using chapter title text</h4>
+
+ <p><dfn id="dfn-webvtt-chapter-title-text">WebVTT chapter title text</dfn> is <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>
+ that makes use only of zero or more of the following components, each optionally separated
+ from the next by a <a href="#dfn-webvtt-line-terminator" class="internalDFN">WebVTT line terminator</a>:</p>
+
+ <ul>
+ <li><a href="#dfn-webvtt-cue-text-span" class="internalDFN">WebVTT cue text span</a></li>
+ <li><a href="#dfn-webvtt-cue-amp-escape" class="internalDFN">WebVTT cue amp escape</a></li>
+ <li><a href="#dfn-webvtt-cue-lt-escape" class="internalDFN">WebVTT cue lt escape</a></li>
+ <li><a href="#dfn-webvtt-cue-gt-escape" class="internalDFN">WebVTT cue gt escape</a></li>
+ <li><a href="#dfn-webvtt-cue-lrm-escape" class="internalDFN">WebVTT cue lrm escape</a></li>
+ <li><a href="#dfn-webvtt-cue-rlm-escape" class="internalDFN">WebVTT cue rlm escape</a></li>
+ <li><a href="#dfn-webvtt-cue-nbsp-escape" class="internalDFN">WebVTT cue nbsp escape</a></li>
+ </ul>
+
+ <p>A <dfn id="dfn-webvtt-file-using-chapter-title-text">WebVTT file using chapter title text</dfn> is a <a href="#dfn-webvtt-file-using-only-nested-cues" class="internalDFN">WebVTT file using only nested cues</a>
+ whose cues all have a <a href="#dfn-cue-payload" class="internalDFN">cue payload</a> that is <a href="#dfn-webvtt-chapter-title-text" class="internalDFN">WebVTT chapter title text</a>.</p>
+
+ </section>
+
+ <section id="webvtt-file-using-cue-text">
+ <h4 aria-level="3" role="heading" id="h4_webvtt-file-using-cue-text"><span class="secno">4.6.3 </span>WebVTT file using cue text</h4>
+
+ <p>A <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> whose cues all have a <a href="#dfn-cue-payload" class="internalDFN">cue payload</a> that is
+ <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a> is said to be a <dfn id="dfn-webvtt-file-using-cue-text">WebVTT file using cue text</dfn>.</p>
+
+ </section>
+
+ </section><!-- end of WebVTT file types -->
+
+ </section><!-- end of syntax -->
+
+
+ <section id="webvtt-file-format-parsing">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_webvtt-file-format-parsing"><span class="secno">5. </span>WebVTT file format: Parsing</h2>
+
+ <section id="webvtt-file-parsing">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-file-parsing"><span class="secno">5.1 </span>WebVTT file parsing</h3>
+
+ <p>A <dfn id="dfn-webvtt-parser">WebVTT parser</dfn>, given an input byte stream and a
+ <a href="#dfn-text-track-list-of-cues" class="internalDFN">text track list of cues</a> <var title="">output</var>,
+ must decode the byte stream using the <a title="UTF-8 decode" href="#dfn-utf-8-decode" class="internalDFN">UTF-8
+ decode</a> algorithm, and then must parse the resulting string according
+ to the <a href="#dfn-webvtt-parser-algorithm" class="internalDFN">WebVTT parser algorithm</a> below. This results in
+ <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> being added to <var title="">output</var>. <a href="#refsRFC3629">[RFC3629]</a></p>
+
+ <p>A <a href="#dfn-webvtt-parser" class="internalDFN">WebVTT parser</a>, 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 <dfn id="dfn-incremental-webvtt-parser">incremental WebVTT parser</dfn>.</p>
+
+ <p>A <a href="#dfn-webvtt-parser" class="internalDFN">WebVTT parser</a> verifies a file signature before
+ parsing the provided byte stream. If the stream lacks this WebVTT
+ file signature, then the parser aborts.</p>
+
+ <p>The <dfn id="dfn-webvtt-parser-algorithm">WebVTT parser algorithm</dfn> is as follows:</p>
+
+ <ol>
+
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed, after
+ conversion to Unicode, and with the following transformations
+ applied:</p>
+
+ <ul>
+
+ <li><p>Replace all U+0000 NULL characters by U+FFFD REPLACEMENT
+ CHARACTERs.</p></li>
+
+ <li><p>Replace each U+000D CARRIAGE RETURN U+000A LINE FEED
+ (CRLF) character pair by a single U+000A LINE FEED (LF)
+ character.</p></li>
+
+ <li><p>Replace all remaining U+000D CARRIAGE RETURN characters by
+ U+000A LINE FEED (LF) characters.</p></li>
+
+ </ul>
+
+ </li>
+
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
+ string. In an <a href="#dfn-incremental-webvtt-parser" class="internalDFN">incremental WebVTT parser</a>, when this
+ algorithm (or further algorithms that it uses) moves the <var title="">position</var> pointer, the user agent must wait until
+ appropriate further characters from the byte stream have been added
+ to <var title="">input</var> before moving the pointer, so that the
+ algorithm never reads past the end of the <var title="">input</var>
+ string. Once the byte stream has ended, and all characters have
+ been added to <var title="">input</var>, then the <var title="">position</var> pointer may, when so instructed by the
+ algorithms, be moved past the end of <var title="">input</var>.</p></li>
+
+ <li>Let <var title="">line</var> be a string variable. Unset the
+ <var title="">already collected line</var> flag.</li>
+
+
+ <!-- SIGNATURE CHECK -->
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ <em>not</em> U+000A LINE FEED (LF) characters. Let <var title="">line</var> be those characters, if any.</p></li>
+
+ <li><p>If <var title="">line</var> is less than six characters
+ long, then abort these steps. The file does not start with the
+ correct <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> signature and was therefore not
+ successfully processed.</p></li>
+
+ <li><p>If <var title="">line</var> is exactly six characters long
+ but does not exactly equal "<code title="">WEBVTT</code>", then
+ abort these steps. The file does not start with the correct
+ <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> signature and was therefore not
+ successfully processed.</p></li>
+
+ <li><p>If <var title="">line</var> is more than six characters long
+ but the first six characters do not exactly equal "<code title="">WEBVTT</code>", or the seventh character is neither a
+ U+0020 SPACE character nor a U+0009 CHARACTER TABULATION (tab)
+ character, then abort these steps. The file does not start with the
+ correct <a href="#dfn-webvtt-file" class="internalDFN">WebVTT file</a> signature and was therefore not
+ successfully processed.</p></li>
+
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then abort these steps. The file was
+ successfully processed, but it contains no useful data and so no
+ <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> where added to
+ <var title="">output</var>.</p></li>
+
+ <li><p>The character indicated by <var title="">position</var> is a
+ U+000A LINE FEED (LF) character. Advance <var title="">position</var> to the next character in <var title="">input</var>.</p></li>
+
+ <li><p><i title="">Header</i>: <a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of
+ characters</a> that are <em>not</em> U+000A LINE FEED (LF)
+ characters. Let <var title="">line</var> be those characters, if
+ any.</p></li>
+
+ <!-- METADATA HEADER PARSING -->
+
+ <li><p>Let <var title="">regions</var> be a <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p></li>
+
+ <li><i>Metadata header loop</i>: If <var>line</var> is not the empty string, run the following substeps:
+
+ <ol>
+
+ <li><p><i>Metadata header creation</i>: Let <var>metadata</var> be a new <a href="#dfn-webvtt-metadata-header" class="internalDFN">WebVTT metadata header</a>.</p></li>
+
+ <li><p>Let <a title="WebVTT metadata header name" href="#dfn-webvtt-metadata-header-name" class="internalDFN">metadata's name</a> be the empty string.</p></li>
+
+ <li><p>Let <a title="WebVTT metadata header value" href="#dfn-webvtt-metadata-header-value" class="internalDFN">metadata's value</a> be the empty string.</p></li>
+
+ <li><p>If <var>line</var> contains the character ":" (A U+003A COLON), then set <a title="WebVTT metadata header name" href="#dfn-webvtt-metadata-header-name" class="internalDFN">metadata's name</a> to the substring of <var>line</var> before the first ":" character and <a title="WebVTT metadata header value" href="#dfn-webvtt-metadata-header-value" class="internalDFN">metadata's value</a> to the substring after this character.</p></li>
+
+ <li><p>If <a title="WebVTT metadata header name" href="#dfn-webvtt-metadata-header-name" class="internalDFN">metadata's name</a> equals "Region":</p>
+
+ <ol>
+ <li><i>Region creation</i>: Let <var>region</var> be a new <a href="#dfn-text-track-region" class="internalDFN">text track region</a>.</li>
+ <li>Let <var>region</var>'s <a title="text track region identifier" href="#dfn-text-track-region-identifier" class="internalDFN">identifier</a> be the empty string.</li>
+ <li>Let <var>region</var>'s <a title="text track region width" href="#dfn-text-track-region-width" class="internalDFN">width</a> be 100.</li>
+ <li>Let <var>region</var>'s <a title="text track region lines" href="#dfn-text-track-region-lines" class="internalDFN">lines</a> be 3.</li>
+ <li>Let <var>region</var>'s <a title="text track region anchor" href="#dfn-text-track-region-anchor" class="internalDFN">anchor point</a> be (0,100).</li>
+ <li>Let <var>region</var>'s <a title="text track region viewport anchor" href="#dfn-text-track-region-viewport-anchor" class="internalDFN">viewport anchor point</a> be (0,100).</li>
+ <li>Let <var>region</var>'s <a title="text track region scroll" href="#dfn-text-track-region-scroll" class="internalDFN">scroll value</a> be <a title="text track region scroll none" href="#dfn-text-track-region-scroll-none" class="internalDFN">NONE</a>.</li>
+ <li><a href="#dfn-collect-webvtt-region-settings" class="internalDFN">Collect WebVTT region settings</a> from <a title="WebVTT metadata header value" href="#dfn-webvtt-metadata-header-value" class="internalDFN">metadata's value</a> using <var>region</var> for the results.</li>
+
+ <li><i>Region processing</i>: Construct a <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT Region Object</a> from <var>region</var>.</li>
+
+ <li>If the <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a> <var>regions</var> contains a region with the same <var>region identifier</var> value as <var>region</var>, remove that region.</li><!-- the removed region has never been in effect -->
+
+ <li>Add <var>region</var> to the <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a> <var>regions</var>.</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+
+ <!-- FIXME: right now ignores all WebVTT metadata headers that don't specify regions. -->
+
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
+ <i>end</i>.</p></li>
+
+ <li><p>The character indicated by <var title="">position</var> is a
+ U+000A LINE FEED (LF) character. Advance <var title="">position</var> to the next character in <var title="">input</var>.</p></li>
+
+ <li><p>If <var title="">line</var> contains the three-character
+ substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the <var title="">already collected line</var> flag and jump to the step
+ labeled <i>cue loop</i>.</p></li>
+
+ <li><p>If <var title="">line</var> is not the empty string, then
+ jump back to the step labeled <i title="">header</i>.</p></li>
+
+
+ <li><p><i>Cue loop</i>: If the <var title="">already collected
+ line</var> flag is set, then jump to the step labeled <var title="">cue creation</var>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ U+000A LINE FEED (LF) characters.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ <em>not</em> U+000A LINE FEED (LF) characters. Let <var title="">line</var> be those characters, if any.</p></li>
+
+ <li><p>If <var title="">line</var> is the empty string, then jump
+ to the step labeled <i>end</i>. (In such a case, <var title="">position</var> is also forcibly past the end of <var title="">input</var><!-- since we've just collected newlines, so we
+ have none of those, and we've failed to collect anything that's not
+ a newline, so we have none of that either, meaning we have nothing.
+ -->.)</p></li>
+
+ <li><p><i>Cue creation</i>: Let <var title="">cue</var> be a new
+ <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> and initialize it with the following
+ attribute values:</p></li>
+
+ <ol>
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-identifier" class="internalDFN">text track cue
+ identifier</a> be the empty string.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-pause-on-exit-flag" class="internalDFN">text track cue
+ pause-on-exit flag</a> be false.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue
+ writing direction</a> be <a title="text track cue
+ horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue
+ region identifier</a> be the empty string.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue
+ snap-to-lines flag</a> be true.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line
+ position</a> be <a title="text track cue automatic line
+ position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue
+ text position</a> be 50.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue
+ size</a> be 100.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue
+ alignment</a> be <a title="text track cue middle
+ alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue
+ text</a> be the empty string.</p></li>
+ </ol>
+
+ <li><p>If <var title="">line</var> contains the three-character
+ substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then jump to the step
+ labeled <i>timings</i> below.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-identifier" class="internalDFN">text track cue
+ identifier</a> be <var title="">line</var>.</p><p></p></li>
+
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then discard <var title="">cue</var> and jump
+ to the step labeled <i>end</i>.</p></li>
+
+ <li><p>If the character indicated by <var title="">position</var>
+ is a U+000A LINE FEED (LF) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ <em>not</em> U+000A LINE FEED (LF) characters. Let <var title="">line</var> be those characters, if any.</p></li>
+
+ <li><p>If <var title="">line</var> is the empty string, then
+ discard <var title="">cue</var> and jump to the step labeled <i>cue
+ loop</i>.</p></li>
+
+ <li><p><i>Timings</i>: Unset the <var title="">already collected
+ line</var> flag.</p></li>
+
+ <li><p><a href="#dfn-collect-webvtt-cue-timings-and-settings" class="internalDFN">Collect WebVTT cue timings and settings</a> from
+ <var title="">line</var>, using <var title="">cue</var> for the
+ results. If that fails, jump to the step labeled <i>bad
+ cue</i>.</p></li>
+
+ <li><p>Let <var title="">cue text</var> be the empty
+ string.</p></li>
+
+ <li><p><i>Cue text loop</i>: If <var title="">position</var> is
+ past the end of <var title="">input</var>, then jump to the step
+ labeled <i>cue text processing</i>.</p></li>
+
+ <li><p>If the character indicated by <var title="">position</var>
+ is a U+000A LINE FEED (LF) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ <em>not</em> U+000A LINE FEED (LF) characters. Let <var title="">line</var> be those characters, if any.</p></li>
+
+ <li><p>If <var title="">line</var> is the empty string, then jump
+ to the step labeled <i>cue text processing</i>.</p></li>
+
+ <li><p>If <var title="">line</var> contains the three-character
+ substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the <var title="">already collected line</var> flag and jump to the step
+ labeled <i>cue text processing</i>.</p></li>
+
+ <li><p>If <var title="">cue text</var> is not empty, append a
+ U+000A LINE FEED (LF) character to <var title="">cue
+ text</var>.</p></li>
+
+ <li><p>Let <var title="">cue text</var> be the concatenation of
+ <var title="">cue text</var> and <var title="">line</var>.</p></li>
+
+ <li><p>Return to the step labeled <i>cue text loop</i>.</p></li>
+
+ <li><p><i>Cue text processing</i>: Let the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> of <var title="">cue</var> be <var title="">cue text</var>, and let the <a href="#dfn-rules-for-rendering-the-cue-in-isolation" class="internalDFN">rules for rendering the cue
+ in isolation</a> be the <a href="#dfn-rules-for-interpreting-webvtt-cue-text" class="internalDFN">rules for interpreting WebVTT cue text</a>.</p></li>
+
+ <li><p>Add <var title="">cue</var> to the <a href="#dfn-text-track-list-of-cues" class="internalDFN">text track list of
+ cues</a> <var title="">output</var>.</p></li>
+
+ <li><p>Jump to the step labeled <i>cue loop</i>.</p></li>
+
+
+ <li><p><i>Bad cue</i>: Discard <var title="">cue</var>.</p></li>
+
+ <li><p><i>Bad cue loop</i>: If <var title="">position</var> is
+ past the end of <var title="">input</var>, then jump to the step
+ labeled <i>end</i>.</p></li>
+
+ <li><p>If the character indicated by <var title="">position</var>
+ is a U+000A LINE FEED (LF) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are
+ <em>not</em> U+000A LINE FEED (LF) characters. Let <var title="">line</var> be those characters, if any.</p></li>
+
+ <li><p>If <var title="">line</var> contains the three-character
+ substring "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the <var title="">already collected line</var> flag and jump to the step
+ labeled <i>cue loop</i>.</p></li>
+
+ <li><p>If <var title="">line</var> is the empty string, then jump
+ to the step labeled <i>cue loop</i>.</p></li>
+
+ <li><p>Otherwise, jump to the step labeled <i>bad cue
+ loop</i>.</p></li>
+
+
+ <li><p><i>End</i>: The file has ended. Abort these steps. The
+ <a href="#dfn-webvtt-parser" class="internalDFN">WebVTT parser</a> has finished. The file was successfully
+ processed.</p></li>
+
+ </ol>
+
+ </section>
+
+ <section id="webvtt-region-settings-parsing">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-region-settings-parsing"><span class="secno">5.2 </span>WebVTT region settings parsing</h3>
+
+ <p>When the <a href="#dfn-webvtt-parser" class="internalDFN">WebVTT parser</a> requires that the user agent <dfn id="dfn-collect-webvtt-region-settings">collect WebVTT region settings</dfn> from a string <var>input</var> for a <a href="#dfn-text-track" class="internalDFN">text track</a>, the user agent must run the following algorithm.</p>
+
+ <p>A <dfn id="dfn-webvtt-region-object">WebVTT region object</dfn> is a conceptual construct to represent a <a href="#dfn-webvtt-region" class="internalDFN">WebVTT region</a> that is used as a root node for <a title="List of WebVTT node objects" href="#dfn-list-of-webvtt-node-objects" class="internalDFN">lists of WebVTT node objects</a>. This algorithm returns a list of <a title="WebVTT region object" href="#dfn-webvtt-region-object" class="internalDFN">WebVTT Region Objects</a>.</p>
+
+ <ol>
+ <li><p>Let <var>settings</var> be the result of <a title="split a string on spaces" href="#dfn-split-a-string-on-spaces" class="internalDFN">splitting <var>input</var> on spaces</a>.</p></li>
+
+ <li>For each token <var>setting</var> in the list <var>settings</var>, run the following substeps:
+
+ <ol>
+ <li><p>If <var>setting</var> does not contain a U+003D EQUALS SIGN character (=), or if the first U+003D EQUALS SIGN character (=) in <var>setting</var> is either the first or last character of <var>setting</var>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var>name</var> be the leading substring of <var>setting</var> up to and excluding the first U+003D EQUALS SIGN character (=) in that string.</p></li>
+
+ <li><p>Let <var>value</var> be the trailing substring of <var>setting</var> starting from the character immediately after the first U+003D EQUALS SIGN character (=) in that string.</p></li>
+
+ <li><p>Run the appropriate substeps that apply for the value of <var>name</var>, as follows:</p>
+
+ <dl>
+ <dt><p>If <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>id</code>"</p></dt>
+ <dd><p>Let <var>region</var>'s <a title="text track region identifier" href="#dfn-text-track-region-identifier" class="internalDFN">identifier</a> be <var>value</var>.</p>
+ </dd>
+
+ <dt><p>Otherwise if <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>width</code>"</p></dt>
+ <dd><p>If <a href="#dfn-parse-a-percentage-string" class="internalDFN">parse a percentage string</a> from <var>value</var> returns a <var>percentage</var>, let <var>region</var>'s <a href="#dfn-text-track-region-width" class="internalDFN">text track region width</a> be <var>percentage</var>.</p>
+ </dd>
+
+ <dt>Otherwise if <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>lines</code>"</dt>
+ <dd>
+ <ol>
+ <li><p>If <var>value</var> contains any characters other than <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Interpret <var>value</var> as an integer, and let <var>number</var> be that number.</p></li>
+
+ <li><p>Let <var>region</var>'s <a href="#dfn-text-track-region-lines" class="internalDFN">text track region lines</a> be <var>number</var>.</p></li>
+ </ol>
+ </dd>
+
+ <dt>Otherwise if <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>regionanchor</code>"</dt>
+ <dd>
+ <ol>
+ <li><p>If <var>value</var> does not contain a U+002C COMMA character (,), then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var>anchorX</var> be the leading substring of <var>value</var> up to and excluding the first U+002C COMMA character (,) in that string.</p></li>
+
+ <li><p>Let <var>anchorY</var> be the trailing substring of <var>value</var> starting from the character immediately after the first U+002C COMMA character (,) in that string.</p></li>
+
+ <li><p>If <a href="#dfn-parse-a-percentage-string" class="internalDFN">parse a percentage string</a> from <var>anchorX</var> or <a href="#dfn-parse-a-percentage-string" class="internalDFN">parse a percentage string</a> from <var>anchorY</var> don't return a <var>percentage</var>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region anchor" href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor point</a> be the tuple of the <var>percentage</var> values calculated from <var>anchorX</var> and <var>anchorY</var>.</p></li>
+ </ol>
+ </dd>
+
+ <dt>Otherwise if <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>viewportanchor</code>"</dt>
+ <dd>
+ <ol>
+ <li><p>If <var>value</var> does not contain a U+002C COMMA character (,), then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var>viewportanchorX</var> be the leading substring of <var>value</var> up to and excluding the first U+002C COMMA character (,) in that string.</p></li>
+
+ <li><p>Let <var>viewportanchorY</var> be the trailing substring of <var>value</var> starting from the character immediately after the first U+002C COMMA character (,) in that string.</p></li>
+
+ <li><p>If <a href="#dfn-parse-a-percentage-string" class="internalDFN">parse a percentage string</a> from <var>viewportanchorX</var> or <a href="#dfn-parse-a-percentage-string" class="internalDFN">parse a percentage string</a> from <var>viewportanchorY</var> don't return a <var>percentage</var>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region viewport anchor" href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor point</a> be the tuple of the <var>percentage</var> values calculated from <var>viewportanchorX</var> and <var>viewportanchorY</var>.</p></li>
+ </ol>
+ </dd>
+
+ <dt>Otherwise if <var>name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>scroll</code>"</dt>
+ <dd>
+ <ol>
+ <li><p>If <var>value</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code>up</code>", then let <var>region</var>'s <a title="text track region scroll" href="#dfn-text-track-region-scroll" class="internalDFN">scroll value</a> be "<a title="text track region scroll up" href="#dfn-text-track-region-scroll-up" class="internalDFN">scroll up</a>".</p></li>
+ </ol>
+ </dd>
+ </dl>
+ </li>
+
+ <li><i>Next setting</i>: Continue to the next setting, if any.</li>
+ </ol>
+ </li>
+ </ol>
+
+
+ <p>The rules to <dfn id="dfn-parse-a-percentage-string">parse a percentage string</dfn> are as follows. This will return a percentage value or, if at any point the algorithm says that it "fails", this means that it is aborted at that point with an IndexSizeError and returns nothing.</p>
+
+ <ol>
+ <li><p>Let <var>input</var> be the string being parsed.</p></li>
+
+ <li><p>If <var>input</var> contains any characters other than U+0025 PERCENT SIGN characters (%), U+002E DOT characters (.) and <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, then fail.</p></li>
+
+ <li><p>If <var>input</var> does not contain at least one <a title="ASCII digits" href="#dfn-ascii-digits" class="internalDFN">ASCII digit</a>, then fail.</p></li>
+
+ <li><p>If <var>input</var> contains more than one U+002E DOT character (.), then fail.</p></li>
+
+ <li><p>If any character in <var>input</var> other than the last character is a U+0025 PERCENT SIGN character (%), then fail.</p></li>
+
+ <li><p>If the last character in <var>input</var> is not a U+0025 PERCENT SIGN character (%), then fail.</p></li>
+
+ <li><p>Ignoring the trailing percent sign, interpret <var>input</var> as a real number. Let that number be the <var>percentage</var>.</p></li>
+
+ <li><p>If <var>percentage</var> is outside the range 0.0% .. 100.0%, fail.</p></li>
+
+ <li><p>Return <var>percentage</var>.</p></li>
+ </ol>
+
+ </section>
+
+ <section id="webvtt-cue-timings-and-settings-parsing">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-cue-timings-and-settings-parsing"><span class="secno">5.3 </span>WebVTT cue timings and settings parsing</h3>
+
+ <p>When the algorithm above requires that the user agent
+ <dfn id="dfn-collect-webvtt-cue-timings-and-settings">Collect WebVTT cue timings and settings</dfn> from a string
+ <var title="">input</var> for a <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> <var title="">cue</var>, the user agent must run the following
+ algorithm.</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> be the string being
+ parsed.</p></li>
+
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
+ string.</p></li>
+
+ <li><p><a href="#dfn-skip-whitespace" class="internalDFN">Skip whitespace</a>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-webvtt-timestamp" class="internalDFN">Collect a WebVTT timestamp</a>. If that algorithm
+ fails, then abort these steps and return failure. Otherwise, let
+ <var title="">cue</var>'s <a href="#dfn-text-track-cue-start-time" class="internalDFN">text track cue start time</a>
+ be the collected time.</p></li>
+
+ <li><p><a href="#dfn-skip-whitespace" class="internalDFN">Skip whitespace</a>.</p></li>
+
+ <!-- we can't be beyond the end of the string until we've seen the
+ arrow, since we know the arrow is in the string and nothing we've
+ done so far would move us past the first "-". -->
+
+ <li><p>If <!--<var title="">position</var> is beyond the end of
+ <var title="">input</var> or if--> the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character (-)
+ then abort these steps and return failure. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p>If <!--<var title="">position</var> is beyond the end of
+ <var title="">input</var> or if--> the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character (-)
+ then abort these steps and return failure. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p>If <!--<var title="">position</var> is beyond the end of
+ <var title="">input</var> or if--> the character at <var title="">position</var> is not a U+003E GREATER-THAN SIGN character
+ (>) then abort these steps and return failure. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p><a href="#dfn-skip-whitespace" class="internalDFN">Skip whitespace</a>.</p></li>
+
+ <li><p><a href="#dfn-collect-a-webvtt-timestamp" class="internalDFN">Collect a WebVTT timestamp</a>. If that algorithm
+ fails, then abort these steps and return failure. Otherwise, let
+ <var title="">cue</var>'s <a href="#dfn-text-track-cue-end-time" class="internalDFN">text track cue end time</a>
+ be the collected time.</p></li>
+
+ <li><p>Let <var title="">remainder</var> be the trailing substring
+ of <var title="">input</var> starting at <var title="">position</var>.</p></li>
+
+ <li><p><a href="#dfn-parse-the-webvtt-settings" class="internalDFN">Parse the WebVTT settings</a> given by <var title="">remainder</var> for <var title="">cue</var>.</p></li>
+
+ </ol>
+
+ <p>When the user agent is to <dfn id="dfn-parse-the-webvtt-settings">Parse the WebVTT settings</dfn>
+ given by a string <var title="">input</var> for a <a href="#dfn-text-track-cue" class="internalDFN">text track
+ cue</a> <var title="">cue</var>, the user agent must run the
+ following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">settings</var> be the result of <a title="split a string on spaces" href="#dfn-split-a-string-on-spaces" class="internalDFN">splitting <var title="">input</var> on spaces</a>.</p></li>
+
+ <li>
+
+ <p>For each token <var title="">setting</var> in the list <var title="">settings</var>, run the following substeps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">setting</var> does not contain a U+003A
+ COLON character (:), or if the first U+003A COLON character (:)
+ in <var title="">setting</var> is either the first or last
+ character of <var title="">setting</var>, then jump to the step
+ labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var title="">name</var> be the leading substring of
+ <var title="">setting</var> up to and excluding the first U+003A
+ COLON character (:) in that string.</p></li>
+
+ <li><p>Let <var title="">value</var> be the trailing substring of
+ <var title="">setting</var> starting from the character
+ immediately after the first U+003A COLON character (:) in that
+ string.</p></li>
+
+ <li>
+
+ <p>Run the appropriate substeps that apply for the value of <var title="">name</var>, as follows:</p>
+
+ <dl>
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code>region</code>"</dt>
+
+ <dd>
+ <ol>
+ <li>Let <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> be <var>value</var>.</li>
+ </ol>
+ </dd>
+
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code title="">vertical</code>"</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">rl</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> be <a title="text track cue vertical growing left writing
+ direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a>.</p></li>
+
+ <li><p>Otherwise, if <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">lr</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> be <a title="text track cue vertical growing right writing
+ direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code title="">line</code>"</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">value</var> contains any characters other than U+002D HYPHEN-MINUS
+ characters (-), U+0025 PERCENT SIGN characters (%), and <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, then
+ jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>If <var title="">value</var> does not contain at least one <a title="ASCII
+ digits" href="#dfn-ascii-digits" class="internalDFN">ASCII digit</a>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>If any character in <var title="">value</var> other
+ than the first character is a U+002D HYPHEN-MINUS character
+ (-), then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If any character in <var title="">value</var> other
+ than the last character is a U+0025 PERCENT SIGN character
+ (%), then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If the first character in <var title="">value</var> is
+ a U+002D HYPHEN-MINUS character (-) <em>and</em> the last
+ character in <var title="">value</var> is a U+0025 PERCENT
+ SIGN character (%), then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>Ignoring the trailing percent sign, if any, interpret
+ <var title="">value</var> as a (potentially signed) integer,
+ and let <var title="">number</var> be that number.</p></li>
+
+ <li><p>If the last character in <var title="">value</var> is
+ a U+0025 PERCENT SIGN character (%), but <var title="">number</var> is not in the range
+ 0 ≤ <var title="">number</var> ≤ 100, then jump to the
+ step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue
+ line position</a> be <var title="">number</var>.</p></li>
+
+ <li><p>If the last character in <var title="">value</var> is
+ a U+0025 PERCENT SIGN character (%), then let <var title="">cue</var>'s <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines
+ flag</a> be false. Otherwise, let it be true.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code title="">size</code>"</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">value</var> contains any characters other than U+0025 PERCENT SIGN
+ characters (%) and <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If <var title="">value</var> does not contain at least one <a title="ASCII
+ digits" href="#dfn-ascii-digits" class="internalDFN">ASCII digit</a>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>If any character in <var title="">value</var> other
+ than the last character is a U+0025 PERCENT SIGN character
+ (%), then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If the last character in <var title="">value</var> is
+ not a U+0025 PERCENT SIGN character (%), then jump to the
+ step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Ignoring the trailing percent sign, interpret <var title="">value</var> as an integer, and let <var title="">number</var> be that number.</p></li>
+
+ <li><p>If <var title="">number</var> is not in the range
+ 0 ≤ <var title="">number</var> ≤ 100, then jump to the
+ step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue
+ size</a> be <var title="">number</var>.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code title="">position</code>"</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">value</var> contains any characters other than U+0025 PERCENT SIGN
+ characters (%) and <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If <var title="">value</var> does not contain at least one <a title="ASCII
+ digits" href="#dfn-ascii-digits" class="internalDFN">ASCII digit</a>, then jump to the step labeled <i>next setting</i>.</p></li>
+
+ <li><p>If any character in <var title="">value</var> other
+ than the last character is a U+0025 PERCENT SIGN character
+ (%), then jump to the step labeled <i>next
+ setting</i>.</p></li>
+
+ <li><p>If the last character in <var title="">value</var> is
+ not a U+0025 PERCENT SIGN character (%), then jump to the
+ step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Ignoring the trailing percent sign, interpret <var title="">value</var> as an integer, and let <var title="">number</var> be that number.</p></li>
+
+ <li><p>If <var title="">number</var> is not in the range
+ 0 ≤ <var title="">number</var> ≤ 100, then jump to the
+ step labeled <i>next setting</i>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text
+ position</a> be <var title="">number</var>.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">name</var> is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for "<code title="">align</code>"</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">start</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> be <a title="text
+ track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start alignment</a>.</p></li>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">middle</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> be <a title="text
+ track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a>.</p></li>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">end</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> be <a title="text
+ track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end alignment</a>.</p></li>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">left</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> be <a title="text
+ track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left alignment</a>.</p></li>
+
+ <li><p>If <var title="">value</var> is a
+ <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the string "<code title="">right</code>", then let <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> be <a title="text
+ track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right alignment</a>.</p></li>
+
+ </ol>
+
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li>If <var>cue</var>'s <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> is not <a href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">text track cue automatic line position</a> or <var>cue</var>'s <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a> is not 100 or <var>cue</var>'s <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is not <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>, but <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> is not the empty string, let <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> be the empty string.</li>
+
+ <li><p><i>Next setting</i>: Continue to the next token, if
+ any.</p></li> <!-- this step is just here to give the algorithms
+ above a clean way to 'break' -->
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_26"><span>Note</span></div><p class="">Step 5 makes sure that no matter in which order the cue settings are provided, if the cue has a <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> or a <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a> setting or is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">text track cue vertical growing left</a> or <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">growing right writing direction</a>, the <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> will be ignored.</p></div>
+
+
+ <p>When this specification says that a user agent is to
+ <dfn id="dfn-collect-a-webvtt-timestamp">Collect a WebVTT timestamp</dfn>, the user agent must run the
+ following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> and <var title="">position</var> be the same variables as those of the same
+ name in the algorithm that invoked these steps.</p></li>
+
+ <li><p>Let <var title="">most significant units</var> be <i title="">minutes</i>.</p></li>
+
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error and abort these
+ steps.</p></li>
+
+ <li><p>If the character indicated by <var title="">position</var>
+ is not an <a title="ASCII digits" href="#dfn-ascii-digits" class="internalDFN">ASCII digit</a>, then
+ return an error and abort these steps.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, and let
+ <var title="">string</var> be the collected substring.</p></li>
+
+ <li><p>Interpret <var title="">string</var> as a base-ten
+ integer. Let <var title="">value<sub>1</sub></var> be that
+ integer.</p></li>
+
+ <li><p>If <var title="">string</var> is not exactly two characters
+ in length, or if <var title="">value<sub>1</sub></var> is greater
+ than 59, let <var title="">most significant units</var> be <i title="">hours</i>.</p></li>
+
+ <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character (:), then
+ return an error and abort these steps. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, and let
+ <var title="">string</var> be the collected substring.</p></li>
+
+ <li><p>If <var title="">string</var> is not exactly two characters
+ in length, return an error and abort these steps.</p></li>
+
+ <li><p>Interpret <var title="">string</var> as a base-ten
+ integer. Let <var title="">value<sub>2</sub></var> be that
+ integer.</p></li>
+
+ <li>
+
+ <p>If <var title="">most significant units</var> is <i title="">hours</i>, or if <var title="">position</var> is not
+ beyond the end of <var title="">input</var> and the character at
+ <var title="">position</var> is a U+003A COLON character (:), run
+ these substeps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character (:), then
+ return an error and abort these steps. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, and
+ let <var title="">string</var> be the collected substring.</p></li>
+
+ <li><p>If <var title="">string</var> is not exactly two
+ characters in length, return an error and abort these
+ steps.</p></li>
+
+ <li><p>Interpret <var title="">string</var> as a base-ten
+ integer. Let <var title="">value<sub>3</sub></var> be that
+ integer.</p></li>
+
+ </ol>
+
+ <p>Otherwise (if <var title="">most significant units</var> is not
+ <i title="">hours</i>, and either <var title="">position</var> is
+ beyond the end of <var title="">input</var>, or the character at
+ <var title="">position</var> is not a U+003A COLON character (:)),
+ let <var title="">value<sub>3</sub></var> have the value of <var title="">value<sub>2</sub></var>, then <var title="">value<sub>2</sub></var> have the value of <var title="">value<sub>1</sub></var>, then let <var title="">value<sub>1</sub></var> equal zero.</p>
+
+ </li>
+
+ <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002E FULL STOP character (.),
+ then return an error and abort these steps. Otherwise, move <var title="">position</var> forwards one character.</p></li>
+
+ <li><p><a href="#dfn-collect-a-sequence-of-characters" class="internalDFN">Collect a sequence of characters</a> that are <a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a>, and let
+ <var title="">string</var> be the collected substring.</p></li>
+
+ <li><p>If <var title="">string</var> is not exactly three
+ characters in length, return an error and abort these
+ steps.</p></li>
+
+ <li><p>Interpret <var title="">string</var> as a base-ten
+ integer. Let <var title="">value<sub>4</sub></var> be that
+ integer.</p></li>
+
+ <li><p>If <var title="">value<sub>2</sub></var> is greater than 59
+ or if <var title="">value<sub>3</sub></var> is greater than 59,
+ return an error and abort these steps.</p></li>
+
+ <!-- no need to check if <var title="">value<sub>4</sub></var> is
+ greater than 999, since we know it had exactly three characters in
+ the range 0-9, so we know it's a number in the range 0-999 -->
+
+ <li><p>Let <var title="">result</var> be <var title="">value<sub>1</sub></var>×60×60 + <var title="">value<sub>2</sub></var>×60 + <var title="">value<sub>3</sub></var> + <var title="">value<sub>4</sub></var>∕1000. <!-- ÷
+ is the division sign if people prefer that to the slash
+ --></p></li>
+
+ <li><p>Return <var title="">result</var>.</p></li>
+
+ </ol>
+ </section>
+
+ <section id="webvtt-cue-text-parsing-rules">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-cue-text-parsing-rules"><span class="secno">5.4 </span><dfn id="dfn-webvtt-cue-text-parsing-rules">WebVTT cue text parsing rules</dfn></h3>
+
+ <p>A <dfn id="dfn-webvtt-node-object">WebVTT Node Object</dfn> is a conceptual construct used to
+ represent components of <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a> so that its
+ processing can be described without reference to the underlying
+ syntax.</p>
+
+ <p>There are two broad classes of <a title="WebVTT Node
+ Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a>: <a title="WebVTT Internal
+ Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Objects</a> and <a title="WebVTT Leaf Node Object" href="#dfn-webvtt-leaf-node-object" class="internalDFN">WebVTT Leaf Node Objects</a>.</p>
+
+ <p><dfn title="WebVTT Internal Node Object" id="dfn-webvtt-internal-node-object">WebVTT Internal Node Objects</dfn> are those that can
+ contain further <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a>. They are conceptually
+ similar to elements in HTML or the DOM. <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal
+ Node Objects</a> have an ordered list of child <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a>. The <a href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Object</a> is said to be the <i>parent</i> of
+ the children. Cycles do not occur; the parent-child relationships so constructed form a tree
+ structure. <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Objects</a> also have
+ an ordered list of class names, known as their <dfn title="WebVTT Node Object's applicable
+ classes" id="dfn-webvtt-node-object-s-applicable-classes">applicable classes</dfn>, and a language, known as their <dfn title="WebVTT Node Object's
+ applicable language" id="dfn-webvtt-node-object-s-applicable-language">applicable language</dfn>, which is to be interpreted as a BCP 47 language
+ code. <a href="#refsBCP47">[BCP47]</a></p>
+
+ <p>There are several concrete classes of <a title="WebVTT
+ Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Objects</a>:</p>
+
+ <dl>
+
+ <dt><dfn title="List of WebVTT Node Objects" id="dfn-list-of-webvtt-node-objects">Lists of WebVTT Node Objects</dfn></dt>
+ <dd>
+ <p>These are used as root nodes for trees of <a title="WebVTT
+ Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Class Object" id="dfn-webvtt-class-object">WebVTT Class Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of text (a <a href="#dfn-webvtt-cue-class-span" class="internalDFN">WebVTT cue class
+ span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>, and are used to
+ annotate parts of the cue with <a title="WebVTT Node Object's
+ applicable classes" href="#dfn-webvtt-node-object-s-applicable-classes" class="internalDFN">applicable classes</a> without implying
+ further meaning (such as italics or bold).</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Italic Object" id="dfn-webvtt-italic-object">WebVTT Italic Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of italic text (a <a href="#dfn-webvtt-cue-italics-span" class="internalDFN">WebVTT cue
+ italics span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Bold Object" id="dfn-webvtt-bold-object">WebVTT Bold Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of bold text (a <a href="#dfn-webvtt-cue-bold-span" class="internalDFN">WebVTT cue
+ bold span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Underline Object" id="dfn-webvtt-underline-object">WebVTT Underline Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of underline text (a <a href="#dfn-webvtt-cue-underline-span" class="internalDFN">WebVTT cue
+ underline span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Ruby Object" id="dfn-webvtt-ruby-object">WebVTT Ruby Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of ruby (a <a href="#dfn-webvtt-cue-ruby-span" class="internalDFN">WebVTT cue
+ ruby span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Ruby Text Object" id="dfn-webvtt-ruby-text-object">WebVTT Ruby Text Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of ruby text (a <a href="#dfn-webvtt-cue-ruby-text-span" class="internalDFN">WebVTT cue ruby
+ text span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Voice Object" id="dfn-webvtt-voice-object">WebVTT Voice Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of text associated with a specific voice
+ (a <a href="#dfn-webvtt-cue-voice-span" class="internalDFN">WebVTT cue voice span</a>) in <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>.
+ A <a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a> has a value, which
+ is the name of the voice.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Language Object" id="dfn-webvtt-language-object">WebVTT Language Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of text (a <a href="#dfn-webvtt-cue-language-span" class="internalDFN">WebVTT cue language span</a>) in
+ <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>, and are used to annotate parts of the cue where the
+ <a title="WebVTT Node Object's applicable language" href="#dfn-webvtt-node-object-s-applicable-language" class="internalDFN">applicable language</a> might be
+ different than the surrounding text's, without implying further meaning (such as
+ italics or bold).</p>
+ </dd>
+
+ </dl>
+
+ <p><dfn title="WebVTT Leaf Node Object" id="dfn-webvtt-leaf-node-object">WebVTT Leaf Node
+ Objects</dfn> are those that contain data, such as text, and cannot
+ contain child <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a>.</p>
+
+ <p>There are two concrete classes of <a title="WebVTT Leaf Node
+ Object" href="#dfn-webvtt-leaf-node-object" class="internalDFN">WebVTT Leaf Node Objects</a>:</p>
+
+ <dl>
+
+ <dt><dfn title="WebVTT Text Object" id="dfn-webvtt-text-object">WebVTT Text Objects</dfn></dt>
+ <dd>
+ <p>A fragment of text. A <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a> has a
+ value, which is the text it represents.</p>
+ </dd>
+
+ <dt><dfn title="WebVTT Timestamp Object" id="dfn-webvtt-timestamp-object">WebVTT Timestamp Objects</dfn></dt>
+ <dd>
+ <p>A timestamp. A <a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp Object</a> has a
+ value, in seconds and fractions of a second, which is the time
+ represented by the timestamp.</p>
+ </dd>
+
+ </dl>
+
+ <p>To parse a string <var title="">input</var> supposedly containing
+ <a href="#dfn-webvtt-cue-text" class="internalDFN">WebVTT cue text</a>, user agents must use the following
+ algorithm. This algorithm returns a <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a>.</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> be the string being
+ parsed.</p></li>
+
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
+ string.</p></li>
+
+ <li><p>Let <var title="">result</var> be a <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT
+ Node Objects</a>, initially empty.</p></li>
+
+ <li><p>Let <var title="">current</var> be the <a href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal
+ Node Object</a> <var title="">result</var>.</p></li>
+
+ <li><p>Let <var title="">language stack</var> be a stack of language codes, initially
+ empty.</p></li>
+
+ <li><p><i>Loop</i>: If <var title="">position</var> is past the end
+ of <var title="">input</var>, return <var title="">result</var> and
+ abort these steps.</p></li>
+
+ <li><p>Let <var title="">token</var> be the result of invoking the
+ <a href="#dfn-webvtt-cue-text-tokenizer" class="internalDFN">WebVTT cue text tokenizer</a>.</p></li>
+
+ <li>
+
+ <p>Run the appropriate steps given the type of <var title="">token</var>:</p>
+
+ <dl>
+
+ <dt>If <var title="">token</var> is a string</dt>
+ <dd>
+
+ <ol>
+
+ <li><p>Create a <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a> whose value is
+ the value of the string token <var title="">token</var>.</p></li>
+
+ <li><p>Append the newly created <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a>
+ to <var title="">current</var>.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">token</var> is a start tag</dt>
+ <dd>
+
+ <p>How the start tag token <var title="">token</var> is
+ processed depends on its tag name, as follows:</p>
+
+ <dl>
+<!--
+ <dt>If the tag name is the empty string</dt>
+ <dd>
+ <p>Ignore the token.</p>
+ </dd>
+-->
+ <dt>If the tag name is "<code title="">c</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-class-object" class="internalDFN">WebVTT Class Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">i</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-italic-object" class="internalDFN">WebVTT Italic Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">b</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-bold-object" class="internalDFN">WebVTT Bold Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">u</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-underline-object" class="internalDFN">WebVTT Underline Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">ruby</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT Ruby Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">rt</code>"</dt>
+ <dd>
+ <p>If <var title="">current</var> is a <a href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT Ruby
+ Object</a>, then <a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">attach</a> a <a href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text
+ Object</a>.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">v</code>"</dt>
+ <dd>
+ <p><a title="attach a WebVTT Internal Node
+ Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">Attach</a> a <a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a>, and
+ set its value to the token's annotation string, or the empty
+ string if there is no annotation string.</p>
+ </dd>
+
+ <dt>If the tag name is "<code title="">lang</code>"</dt>
+ <dd>
+ <p>Push the value of the token's annotation string, or the empty string if there is no
+ annotation string, onto the <var title="">language stack</var>; then <a title="attach a
+ WebVTT Internal Node Object" href="#dfn-attach-a-webvtt-internal-node-object" class="internalDFN">attach</a> a <a href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language Object</a>.</p>
+ </dd>
+
+ <dt>Otherwise</dt>
+ <dd>
+ <p>Ignore the token.</p>
+ </dd>
+
+ </dl>
+
+ <p>When the steps above say to <dfn id="dfn-attach-a-webvtt-internal-node-object">attach a WebVTT Internal
+ Node Object</dfn> of a particular concrete class, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Create a new <a href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Object</a> of
+ the specified concrete class.</p></li>
+
+ <li><p>Set the new object's list of <a title="WebVTT Node
+ Object's applicable classes" href="#dfn-webvtt-node-object-s-applicable-classes" class="internalDFN">applicable classes</a> to the
+ list of classes in the token, excluding any classes that are
+ the empty string.</p>
+
+ </li><li><p>Set the new object's <a title="WebVTT Node Object's applicable language" href="#dfn-webvtt-node-object-s-applicable-language" class="internalDFN">applicable
+ language</a> to the top entry on the <var title="">language stack</var>, if the stack is
+ not empty.</p>
+
+ </li><li><p>Append the newly created node object to <var title="">current</var>.</p></li>
+
+ <li><p>Let <var title="">current</var> be the newly created
+ node object.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">token</var> is an end tag</dt>
+ <dd>
+
+ <p>If any of the following conditions is true, then let <var title="">current</var> be the parent node of <var title="">current</var>.</p>
+
+ <ul class="brief">
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">c</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-class-object" class="internalDFN">WebVTT Class Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">i</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-italic-object" class="internalDFN">WebVTT Italic Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">b</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-bold-object" class="internalDFN">WebVTT Bold Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">u</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-underline-object" class="internalDFN">WebVTT Underline Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">ruby</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT Ruby Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">rt</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">v</code>" and <var title="">current</var> is
+ a <a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a>.</li>
+
+ </ul>
+
+ <p>Otherwise, if the tag name of the end tag token <var title="">token</var> is "<code title="">lang</code>" and <var title="">current</var> is a <a href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language
+ Object</a>, then let <var title="">current</var> be the parent node of <var title="">current</var>, and pop the top value from the <var title="">language stack</var>.</p>
+
+ <p>Otherwise, if the tag name of the end tag token <var title="">token</var> is "<code title="">ruby</code>" and <var title="">current</var> is a <a href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text
+ Object</a>, then let <var title="">current</var> be the
+ parent node of the parent node of <var title="">current</var>.</p>
+
+ <p>Otherwise, ignore the token.</p>
+
+ </dd>
+
+ <dt>If <var title="">token</var> is a timestamp tag</dt>
+ <dd>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> be the tag value.</p></li>
+
+ <li><p>Let <var title="">position</var> be a pointer into
+ <var title="">input</var>, initially pointing at the start of
+ the string.</p></li>
+
+ <li><p><a href="#dfn-collect-a-webvtt-timestamp" class="internalDFN">Collect a WebVTT timestamp</a>.</p></li>
+
+ <li>
+
+ <p>If that algorithm does not fail, and if <var title="">position</var> now points at the end of <var title="">input</var> (i.e. there are no trailing characters
+ after the timestamp), then create a <a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp
+ Object</a> whose value is the collected time, then append
+ it to <var title="">current</var>.</p>
+
+ <p>Otherwise, ignore the token.</p>
+
+ </li>
+
+ </ol>
+
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li><p>Jump to the step labeled <i>loop</i>.</p></li>
+
+ </ol>
+
+ <p>The <dfn id="dfn-webvtt-cue-text-tokenizer">WebVTT cue text tokenizer</dfn> 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).</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> and <var title="">position</var> be the same variables as those of the same
+ name in the algorithm that invoked these steps.</p></li>
+
+ <li><p>Let <var title="">tokenizer state</var> be <a href="#dfn-webvtt-data-state" class="internalDFN">WebVTT data
+ state</a>.</p></li>
+
+ <li><p>Let <var title="">result</var> be the empty string.</p></li>
+
+ <li><p>Let <var title="">buffer</var> be the empty string.</p></li>
+
+ <li><p>Let <var title="">classes</var> be an empty list.</p></li>
+
+ <li>
+
+ <p><i>Loop</i>: If <var title="">position</var> is past the end of
+ <var title="">input</var>, let <var title="">c</var> be an
+ end-of-file marker. Otherwise, let <var title="">c</var> be the
+ character in <var title="">input</var> pointed to by <var title="">position</var>.</p>
+
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_27"><span>Note</span></div><p class="">An end-of-file marker is not a Unicode character,
+ it is used to end the tokenizer.</p></div>
+
+ </li>
+
+ <li>
+
+ <p>Jump to the state given by <var title="">tokenizer
+ state</var>:</p>
+
+ <dl>
+
+ <dt><dfn id="dfn-webvtt-data-state">WebVTT data state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+0026 AMPERSAND (&)</dt>
+ <dd>
+ <p>Set <var title="">buffer</var> to <var title="">c</var>,
+ set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-escape-state" class="internalDFN">WebVTT
+ escape state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+003C LESS-THAN SIGN (<)</dt>
+ <dd>
+ <p>If <var title="">result</var> is the empty string, then set
+ <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-tag-state" class="internalDFN">WebVTT tag
+ state</a> and jump to the step labeled <i>next</i>.</p>
+ <p>Otherwise, return a string token whose value is <var title="">result</var> and abort these steps.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Return a string token whose value is <var title="">result</var> and abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">result</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-escape-state">WebVTT escape state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+0026 AMPERSAND (&)</dt>
+ <dd>
+ <p>Append <var title="">buffer</var> to <var title="">result</var>, set <var title="">buffer</var> to <var title="">c</var>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt><a href="#dfn-alphanumeric-ascii-characters" class="internalDFN">Alphanumeric ASCII characters</a></dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">buffer</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ <dt>U+003B SEMICOLON character (;)</dt>
+ <dd>
+
+ <p>First, examine the value of <var title="">buffer</var>:</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&amp</code>", then append a U+0026 AMPERSAND
+ character (&) to <var title="">result</var>.</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&lt</code>", then append a U+003C LESS-THAN SIGN
+ character (<) to <var title="">result</var>.</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&gt</code>", then append a U+003E GREATER-THAN SIGN
+ character (>) to <var title="">result</var>.</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&lrm</code>", then append a U+200E LEFT-TO-RIGHT
+ MARK character to <var title="">result</var>.</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&rlm</code>", then append a U+200F RIGHT-TO-LEFT
+ MARK character to <var title="">result</var>.</p>
+
+ <p>If <var title="">buffer</var> is the string "<code title="">&nbsp</code>", then append a U+00A0 NO-BREAK
+ SPACE character to <var title="">result</var>.</p>
+
+ <p>Otherwise, append <var title="">buffer</var> followed by a
+ U+003B SEMICOLON character (;) to <var title="">result</var>.</p>
+
+ <p>Then, in any case, set <var title="">tokenizer state</var>
+ to the <a href="#dfn-webvtt-data-state" class="internalDFN">WebVTT data state</a>, and jump to the step
+ labeled <i>next</i>.</p>
+
+ </dd>
+
+ <dt>U+003C LESS-THAN SIGN (<)</dt>
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Append <var title="">buffer</var> to <var title="">result</var>, return a string token whose value is
+ <var title="">result</var>, and abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">buffer</var> to <var title="">result</var>, append <var title="">c</var> to <var title="">result</var>, set <var title="">tokenizer state</var>
+ to the <a href="#dfn-webvtt-data-state" class="internalDFN">WebVTT data state</a>, and jump to the step
+ labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-tag-state">WebVTT tag state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+0009 CHARACTER TABULATION (tab) character</dt>
+ <dt>U+000A LINE FEED (LF) character</dt>
+ <dt>U+000C FORM FEED (FF) character</dt>
+ <dt>U+0020 SPACE character</dt>
+ <dd>
+ <!-- assert: >result< is the empty string -->
+ <p>Set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-annotation-state" class="internalDFN">WebVTT
+ start tag annotation state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+002E FULL STOP character (.)</dt>
+ <dd>
+ <!-- assert: >result< is the empty string -->
+ <p>Set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-class-state" class="internalDFN">WebVTT
+ start tag class state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+002F SOLIDUS character (/)</dt>
+ <dd>
+ <p>Set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-end-tag-state" class="internalDFN">WebVTT
+ end tag state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt><a href="#dfn-ascii-digits" class="internalDFN">ASCII digits</a></dt>
+ <dd>
+ <p>Set <var title="">result</var> to <var title="">c</var>,
+ set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-timestamp-tag-state" class="internalDFN">WebVTT
+ timestamp tag state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Return a start tag whose tag name is the empty string, with
+ no classes and no annotation, and abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Set <var title="">result</var> to <var title="">c</var>,
+ set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-state" class="internalDFN">WebVTT
+ start tag state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-start-tag-state">WebVTT start tag state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+0009 CHARACTER TABULATION (tab) character</dt>
+ <dt>U+000C FORM FEED (FF) character</dt>
+ <dt>U+0020 SPACE character</dt>
+ <dd>
+ <p>Set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-annotation-state" class="internalDFN">WebVTT
+ start tag annotation state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+000A LINE FEED (LF) character</dt>
+ <dd>
+ <p>Set <var title="">buffer</var> to <var title="">c</var>,
+ set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-annotation-state" class="internalDFN">WebVTT
+ start tag annotation state</a>, and jump to the step
+ labeled <i>next</i>.</p>
+ </dd>
+
+ <dt>U+002E FULL STOP character (.)</dt>
+ <dd>
+ <p>Set <var title="">tokenizer state</var> to the <a href="#dfn-webvtt-start-tag-class-state" class="internalDFN">WebVTT
+ start tag class state</a>, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Return a start tag whose tag name is <var title="">result</var>, with no classes and no annotation, and
+ abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">result</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-start-tag-class-state">WebVTT start tag class state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+0009 CHARACTER TABULATION (tab) character</dt>
+ <dt>U+000C FORM FEED (FF) character</dt>
+ <dt>U+0020 SPACE character</dt>
+ <dd>
+ <p>Append to <var title="">classes</var> an entry whose value
+ is <var title="">buffer</var>, set <var title="">buffer</var>
+ to the empty string, set <var title="">tokenizer state</var>
+ to the <a href="#dfn-webvtt-start-tag-annotation-state" class="internalDFN">WebVTT start tag annotation state</a>, and
+ jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ <dt>U+000A LINE FEED (LF) character</dt>
+ <dd>
+ <p>Append to <var title="">classes</var> an entry whose value
+ is <var title="">buffer</var>, set <var title="">buffer</var>
+ to <var title="">c</var>, set <var title="">tokenizer
+ state</var> to the <a href="#dfn-webvtt-start-tag-annotation-state" class="internalDFN">WebVTT start tag annotation
+ state</a>, and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ <dt>U+002E FULL STOP character (.)</dt>
+ <dd>
+ <p>Append to <var title="">classes</var> an entry whose value
+ is <var title="">buffer</var>, set <var title="">buffer</var>
+ to the empty string, and jump to the step labeled
+ <i>next</i>.</p>
+ </dd>
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Append to <var title="">classes</var> an entry whose value
+ is <var title="">buffer</var>, then return a start tag whose
+ tag name is <var title="">result</var>, with the classes given
+ in <var title="">classes</var> but no annotation, and abort
+ these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">buffer</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-start-tag-annotation-state">WebVTT start tag annotation state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Remove any leading or trailing <a title="space
+ character" href="#dfn-space-character" class="internalDFN">space characters</a> from <var title="">buffer</var>, and replace any sequence of one or more
+ consecutive <a title="space character" href="#dfn-space-character" class="internalDFN">space
+ characters</a> in <var title="">buffer</var> with a single
+ U+0020 SPACE character; then, return a start tag whose tag
+ name is <var title="">result</var>, with the classes given in
+ <var title="">classes</var>, and with <var title="">buffer</var> as the annotation, and abort these
+ steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">buffer</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-end-tag-state">WebVTT end tag state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <!-- should we ignore anything after spaces, tabs, and line feeds? -->
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Return an end tag whose tag name is <var title="">result</var> and abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">result</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ <dt><dfn id="dfn-webvtt-timestamp-tag-state">WebVTT timestamp tag state</dfn></dt>
+
+ <dd>
+
+ <p>Jump to the entry that matches the value of <var title="">c</var>:</p>
+
+ <dl>
+
+ <dt>U+003E GREATER-THAN SIGN character (>)</dt>
+ <dd>
+ <p>Advance <var title="">position</var> to the next character
+ in <var title="">input</var>, then jump to the next "end-of-file
+ marker" entry below.</p>
+ </dd>
+
+ <dt>End-of-file marker</dt>
+ <dd>
+ <p>Return a timestamp tag whose tag name is <var title="">result</var> and abort these steps.</p>
+ </dd>
+
+ <dt>Anything else</dt>
+ <dd>
+ <p>Append <var title="">c</var> to <var title="">result</var>
+ and jump to the step labeled <i>next</i>.</p>
+ </dd>
+
+ </dl>
+
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li><p><i>Next</i>: Advance <var title="">position</var> to the next
+ character in <var title="">input</var>.</p></li>
+
+ <li><p>Jump to the step labeled <i>loop</i>.</p></li>
+
+ </ol>
+ </section>
+
+ <section id="webvtt-cue-text-dom-construction-rules">
+ <h3 aria-level="2" role="heading" id="h3_webvtt-cue-text-dom-construction-rules"><span class="secno">5.5 </span><dfn id="dfn-webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</dfn></h3>
+
+ <p>To convert a <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a> to a DOM
+ tree for <code>Document</code> <var title="">owner</var>, user
+ agents must create a tree of DOM nodes that is isomorphous to the
+ tree of <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a>,
+ with the following mapping of <a title="WebVTT Node
+ Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a> to DOM nodes:</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th><a href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Object</a>
+ </th><th>DOM node
+ </th></tr></thead><tbody>
+ <tr>
+ <td><a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">List of WebVTT Node Objects</a>
+ </td><td><code>DocumentFragment</code> node
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT Region Object</a>
+ </td><td><code>DocumentFragment</code> node
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-class-object" class="internalDFN">WebVTT Class Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>span</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-italic-object" class="internalDFN">WebVTT Italic Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>i</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-bold-object" class="internalDFN">WebVTT Bold Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>b</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-underline-object" class="internalDFN">WebVTT Underline Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>u</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT Ruby Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>ruby</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>rt</code>".
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>span</code>", and a <code title="attr-title">title</code> attribute set to the <a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a>'s value.
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language Object</a>
+ </td><td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>span</code>", and a <code title="attr-lang">lang</code> attribute set to the <a href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language Object</a>'s <a title="WebVTT Node Object's applicable language" href="#dfn-webvtt-node-object-s-applicable-language" class="internalDFN">applicable language</a>.
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a>
+ </td><td><code>Text</code> node whose character data is the value of the <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a>.
+ </td></tr><tr>
+ <td><a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp Object</a>
+ </td><td><code>ProcessingInstruction</code> node whose <code title="dom-ProcessingInstruction-target">target</code> is "<code title="">timestamp</code>" and whose <code title="dom-ProcessingInstruction-data">data</code> is a <a href="#dfn-webvtt-timestamp" class="internalDFN">WebVTT timestamp</a> representing the value of the <a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp Object</a>, with all optional components included, with one leading zero if the <var title="">hours</var> component is less than ten, and with no leading zeros otherwise.
+ </td></tr></tbody></table>
+
+ <p><code>HTMLElement</code> nodes created as part of the mapping described above must have their
+ <code title="dom-Node-namespaceURI">namespaceURI</code> set to the <a href="#dfn-html-namespace" class="internalDFN">HTML namespace</a>,
+ and, if the corresponding <a href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Object</a> has any <a title="WebVTT
+ Node Object's applicable classes" href="#dfn-webvtt-node-object-s-applicable-classes" class="internalDFN">applicable classes</a>, must have a <code title="attr-class">class</code> attribute set to the string obtained by concatenating all those
+ classes, each separated from the next by a single U+0020 SPACE character.</p>
+
+ <p>The <code title="dom-Node-ownerDocument">ownerDocument</code>
+ attribute of all nodes in the DOM tree must be set to the given
+ document <var title="">owner</var>.</p>
+
+ <p>All characteristics of the DOM nodes that are not described above
+ or dependent on characteristics defined above must be left at their
+ initial values.</p>
+
+ </section>
+
+ </section>
+
+ <section id="rendering">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_rendering"><span class="secno">6. </span>Rendering</h2>
+
+ <section id="cues-in-isolation">
+ <h3 aria-level="2" role="heading" id="h3_cues-in-isolation"><span class="secno">6.1 </span>Cues in isolation</h3>
+
+ <p>The <dfn id="dfn-rules-for-interpreting-webvtt-cue-text">rules for interpreting WebVTT cue text</dfn> (e.g. for use as chapter titles) are as
+ follows:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">nodes</var> be the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a> obtained by
+ applying the <a href="#dfn-webvtt-cue-text-parsing-rules" class="internalDFN">WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>.</p>
+
+ </li><li><p class="todo">... <!-- flatten nodes and return a single string somehow -->
+
+ </p></li></ol>
+ </section>
+
+ <section id="cues-with-video">
+ <h3 aria-level="2" role="heading" id="h3_cues-with-video"><span class="secno">6.2 </span>Cues with video</h3>
+
+ <section id="processing-model">
+ <h4 aria-level="3" role="heading" id="h4_processing-model"><span class="secno">6.2.1 </span>Processing model</h4>
+
+ <p>The <dfn id="dfn-rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text
+ tracks</dfn> render the <a title="text track" href="#dfn-text-track" class="internalDFN">text
+ tracks</a> of a <a href="#dfn-media-element" class="internalDFN">media element</a> (specifically, a
+ <code>video</code> element), or of another playback mechanism, by
+ applying the steps below. All the <a title="text track" href="#dfn-text-track" class="internalDFN">text
+ tracks</a> that use these rules for a given <a href="#dfn-media-element" class="internalDFN">media
+ element</a>, or other playback mechanism, are rendered together,
+ to avoid overlapping subtitles from multiple tracks.</p>
+
+ <p>The output of the steps below is a set of CSS boxes that covers
+ the rendering area of the <a href="#dfn-media-element" class="internalDFN">media element</a> or other
+ playback mechanism, which user agents are expected to render in a
+ manner suiting the user.</p>
+
+ <p>The rules are as follows:</p>
+
+ <ol>
+
+ <li><p>If the <a href="#dfn-media-element" class="internalDFN">media element</a> is an <code>audio</code>
+ element, or is another playback mechanism with no rendering area,
+ abort these steps. There is nothing to render.</p></li>
+
+ <li><p>Let <var title="">video</var> be the <a href="#dfn-media-element" class="internalDFN">media
+ element</a> or other playback mechanism.</p></li>
+
+ <li><p>Let <var title="">output</var> be an empty list of
+ absolutely positioned CSS block boxes.</p></li>
+
+ <li><p>If the user agent is <a title="expose a user interface to
+ the user" href="#dfn-expose-a-user-interface-to-the-user" class="internalDFN">exposing a user interface</a> for <var title="">video</var>, add to <var title="">output</var> one or more
+ completely transparent positioned CSS block boxes that cover the
+ same region as the user interface.</p>
+
+ </li><li><p>If the last time these rules were run, the user agent was
+ not <a title="expose a user interface to the user" href="#dfn-expose-a-user-interface-to-the-user" class="internalDFN">exposing a
+ user interface</a> for <var title="">video</var>, but now it is,
+ optionally let <var title="">reset</var> be true. Otherwise, let <var title="">reset</var> be false.</p>
+
+ </li><li><p>Let <var title="">tracks</var> be the subset of <var title="">video</var>'s <a href="#dfn-list-of-text-tracks" class="internalDFN">list of text tracks</a> that have
+ as their <a href="#dfn-rules-for-updating-the-text-track-rendering" class="internalDFN">rules for updating the text track rendering</a>
+ these <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text
+ tracks</a>, and whose <a href="#dfn-text-track-mode" class="internalDFN">text track mode</a> is <a title="text track showing" href="#dfn-text-track-showing" class="internalDFN">showing</a>.</p></li>
+
+ <li><p>Let <var title="">cues</var> be an empty list of <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> and <var title="">regions</var>
+ be an empty list of <a title="text track region" href="#dfn-text-track-region" class="internalDFN">text track regions</a>. For each track <var>track</var>
+ in <var>tracks</var> append to <var>regions</var> all the <a title="text track region" href="#dfn-text-track-region" class="internalDFN">regions</a> from
+ <var>track</var>'s <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p></li>
+
+ <li><p>For each track <var title="">track</var> in <var title="">tracks</var>, append to <var title="">cues</var> all the
+ <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">cues</a> from <var title="">track</var>'s <a title="text track list of cues" href="#dfn-text-track-list-of-cues" class="internalDFN">list
+ of cues</a> that have their <a href="#dfn-text-track-cue-active-flag" class="internalDFN">text track cue active
+ flag</a> set.</p></li>
+
+ <li><p>If <var>reset</var> is false, then, for each <a href="#dfn-text-track-region" class="internalDFN">text track region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region object</a>.</p></li>
+
+ <li><p>Apply the following steps for each <var>regionNode</var>:</p>
+
+ <ol>
+ <li><p>Prepare some variables for the application of CSS properties to <var>regionNode</var> as follows:</p>
+
+ <ul>
+ <li><p>Let <var>regionWidth</var> be the <a href="#dfn-text-track-region-width" class="internalDFN">text track region width</a>. Let <var>width</var> be '<var>regionWidth</var> vw' ('vw' is a CSS unit).<a href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
+
+ <li><p>Let <var>lineHeight</var> be '0.0533vh' ('vh' is a CSS unit) <a href="#refsCSSVALUES">[CSSVALUES]</a> and <var>regionHeight</var> be the <a href="#dfn-text-track-region-lines" class="internalDFN">text track region lines</a>. Let <var>lines</var> be '<var>lineHeight</var> multiplied by <var>regionHeight</var>.</p></li>
+
+ <li><p>Let <var>viewportAnchorX</var> be the x dimension of the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> and <var>regionAnchorX</var> be the x dimension of the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track 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 from '<var>viewportAnchorX</var> vw'.</p></li>
+
+ <li><p>Let <var>viewportAnchorY</var> be the y dimension of the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> and <var>regionAnchorY</var> be the y dimension of the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor</a>. Let <var>topOffset</var> be <var>regionAnchorY</var> multiplied by <var>lines</var> divided by 100.0. Let <var>top</var> be <var>topOffset</var> subtracted from '<var>viewportAnchorY</var> vh'.</p></li>
+ </ul>
+ </li>
+
+ <li><p>Apply the terms of the CSS specifications to <var>regionNode</var> within the following constraints, thus obtaining a CSS box <var>box</var> positioned relative to an initial containing block:</p>
+ <ol>
+ <li><p>No style sheets are associated with <var>regionNode</var>. (The regionNodes are subsequently restyled using style sheets after their boxes are generated, as described below.)</p></li>
+ <li><p>Properties on <var>regionNode</var> 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.)</p></li>
+ <li><p>The viewport (and initial containing block) is video's rendering area.</p></li>
+ </ol>
+ </li>
+
+ <li><p>Add the CSS box <var>box</var> to <var>output</var>.</p></li>
+ </ol>
+ </li>
+
+ <li><p>If <var>reset</var> is false, then, for each <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>'s <a href="#dfn-text-track-cue-display-state" class="internalDFN">text track cue display state</a> has a set of CSS boxes, then:</p>
+
+ <ul>
+ <li><p>if there is a <a href="#dfn-webvtt-region" class="internalDFN">WebVTT region</a> whose <a title="WebVTT region identifier" href="#dfn-webvtt-region-identifier" class="internalDFN">region identifier</a> is identical to <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a>:</p>
+ <p>add those boxes to that region's <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p></li>
+
+ <li><p>otherwise:</p>
+ <p>add those boxes to <var>output</var> and remove <var>cue</var> from <var>cues</var>.</p></li>
+ </ul>
+
+ </li>
+
+ <li>
+
+ <p>For each <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> <var title="">cue</var>
+ in <var title="">cues</var> that has not yet had corresponding CSS
+ boxes added to <var title="">output</var>, in <a href="#dfn-text-track-cue-order" class="internalDFN">text track
+ cue order</a>, run the following substeps:</p>
+
+ <ul>
+ <li><p>If <var>cue</var> has an empty <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> or there is no <a href="#dfn-webvtt-region" class="internalDFN">WebVTT region</a> whose <a title="text track cue region identifier" href="#dfn-text-track-cue-region-identifier" class="internalDFN">region identifier</a> is identical to <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a>, run the following substeps:</p>
+
+ <ol>
+
+ <li><a href="#dfn-apply-webvtt-cue-settings" class="internalDFN">Apply WebVTT cue settings</a> to calculate CSS boxes <var title="">boxes</var> from the
+ <a>list of WebVTT Node Object</a> <var title="">nodes</var> obtained by applying the
+ <a href="#dfn-webvtt-cue-text-parsing-rules" class="internalDFN">WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>.</li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-display-state" class="internalDFN">text track cue display state</a> have the CSS boxes in <var title="">boxes</var>.</p></li>
+
+ <li><p>Add the CSS boxes in <var title="">boxes</var> to <var title="">output</var>.</p></li>
+
+ </ol>
+ </li>
+
+ <li><p>Otherwise run the following substeps:</p>
+ <ol>
+ <li><p>Let <var>region</var> be the <a href="#dfn-webvtt-region" class="internalDFN">WebVTT region</a> whose <a title="text track cue region identifier" href="#dfn-text-track-cue-region-identifier" class="internalDFN">region identifier</a> matches the <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> of <var>cue</var>.</p></li>
+
+ <li><p>If <var>region</var>'s <a href="#dfn-text-track-region-scroll" class="internalDFN">text track region scroll</a> setting is '<code>up</code>' and <var>region</var> already has one child, set <var>region</var>'s 'transition-property' to 'top' and 'transition-duration' to '0.433s'.</p></li>
+
+ <li><p>Let <var>nodes</var> be the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a> obtained by applying the <a href="#dfn-webvtt-cue-text-parsing-rules" class="internalDFN">WebVTT cue text parsing rules</a> to the <var>cue</var>'s <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>.</p></li>
+
+ <li><p>Apply the Unicode Bidirectional Algorithm's Paragraph Level steps to the concatenation of the values of each <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text Object</a> in <var>nodes</var>, in a pre-order, depth-first traversal, excluding <a title="WebVTT Ruby Text Object" href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Objects</a> and their descendants, to determine the <i>paragraph embedding level</i> of the first
+Unicode paragraph of the cue. <a href="#refsBIDI">[BIDI]</a></p>
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_28"><span>Note</span></div><p class="">Within a cue, paragraph boundaries are only denoted by Type B characters, such as U+000A LINE FEED (LF), U+0085 NEXT LINE (NEL), and U+2029 PARAGRAPH SEPARATOR. (This means each line of the cue is reordered as if it was a separate paragraph.)</p></div>
+ </li>
+
+ <li><p>If the <i>paragraph embedding level</i> determined in the previous step is even (the <i>paragraph direction</i> is left-to-right), let <var>direction</var> be 'ltr', otherwise, let it be 'rtl'.</p>
+ </li>
+
+ <li><p>Let <var>offset</var> be the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> multiplied by the <var>width</var> of the <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region object</a> whose <a title="text track cue region identifier" href="#dfn-text-track-cue-region-identifier" class="internalDFN">region identifier</a> is identical to <var>cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> and divided by 100 (i.e. interpret it as a percentage of the region width).</p>
+ </li>
+
+ <li><p>If <var>direction</var> is 'ltr' and 'text-align' is 'start' or 'left', or if <var>direction</var> is 'rtl' and 'text-align' is 'end' or 'left', let <var>left</var> be <var>offset</var> and let <var>right</var> be 'auto'</p>
+ <p>If <var>direction</var> is 'ltr' and 'text-align' is 'end' or 'right', or if <var>direction</var> is 'rtl' and 'text-align' is 'start' or 'right', let <var>left</var> be 'auto' and <var>right</var> be <var>offset</var>.</p>
+ <p>If 'text-align' is 'middle', ignore the <var>offset</var>.</p>
+ </li>
+
+ <li><p>Apply the terms of the CSS specifications to <var>nodes</var> in the same way that they are applied to in step 10, substep 12 is applied to <var>nodes</var> of a <var>cue</var> that is not part of a region, except that the initial containing block is <var>region</var>.</p>
+ <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with their positions.</p>
+ </li>
+
+ <li><p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. The cue is ignored.</p></li>
+
+ <li><p>Let <var>cue</var>'s <a href="#dfn-text-track-cue-display-state" class="internalDFN">text track cue display state</a> have the CSS boxes in <var>boxes</var>.</p></li>
+
+ <li><p>Add the CSS boxes in <var>boxes</var> to <var>region</var>.</p></li>
+ </ol>
+ </li>
+
+ </ul>
+ </li>
+
+ <li><p>Return <var title="">output</var>.</p></li>
+
+ </ol>
+
+ <p>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 <code>video</code>, or even off the <code>video</code>
+ entirely.</p>
+
+
+ <p>When the algorithm above requires that the user agent <dfn id="dfn-apply-webvtt-cue-settings">Apply WebVTT cue settings</dfn>
+ to calculate CSS boxes from the <a>list of WebVTT Node Object</a> <var title="">nodes</var>
+ obtained by applying the <a href="#dfn-webvtt-cue-text-parsing-rules" class="internalDFN">WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
+ <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>, the user agent must run the following algorithm.</p>
+
+ <ol>
+
+ <li>
+
+ <p>Apply the Unicode Bidirectional Algorithm's Paragraph Level
+ steps to the concatenation of the values of each <a href="#dfn-webvtt-text-object" class="internalDFN">WebVTT
+ Text Object</a> in <var title="">nodes</var>, in a pre-order,
+ depth-first traversal, excluding <a title="WebVTT Ruby Text
+ Object" href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Objects</a> and their descendants,
+ to determine the <i>paragraph embedding level</i> of the first
+ Unicode paragraph of the cue. <a href="#refsBIDI">[BIDI]</a></p>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_29"><span>Note</span></div><p class="">Within a cue, paragraph boundaries are only denoted by Type B characters, such
+ as U+000A LINE FEED (LF), U+0085 NEXT LINE (NEL), and U+2029 PARAGRAPH SEPARATOR. (This means
+ each line of the cue is reordered as if it was a separate paragraph.)</p></div>
+
+ </li>
+
+ <li>
+
+ <p>If the <i>paragraph embedding level</i> determined in the
+ previous step is even (the <i>paragraph direction</i> is
+ left-to-right), let <var title="">direction</var> be 'ltr',
+ otherwise, let it be 'rtl'.</p>
+
+ </li>
+
+ <li><p>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is
+ <a title="text track cue horizontal writing
+ direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>, then let <var title="">writing-mode</var> be 'horizontal-tb'. Otherwise, if the
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing
+ direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a>, then let <var title="">writing-mode</var> be 'vertical-rl'. Otherwise, the
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing right writing
+ direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>; let <var title="">writing-mode</var> be 'vertical-lr'.</p></li>
+
+ <li><p>Let <var title="">size</var> be <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a>.</p></li>
+
+ <li><p>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is
+ <a title="text track cue horizontal writing
+ direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>, then let <var title="">width</var>
+ be '<var title="">size</var> vw' and <var title="">height</var> be 'auto'. Otherwise, let <var title="">width</var> be 'auto' and <var title="">height</var> be
+ '<var title="">size</var> vh'. (These are CSS values used
+ by the next section to set CSS properties for the rendering; 'vw'
+ and 'vh' are CSS units.) <a href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
+
+ <li>
+
+ <p>Determine the value of <var title="">x-position</var> or <var title="">y-position</var> for <var title="">cue</var> as per the
+ appropriate rules from the following list:</p>
+
+ <dl class="switch">
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>:</dt>
+ <dd>
+ <p>Let <var title="">x-position</var> be the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a> or <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>:</dt>
+ <dd>
+ <p>Let <var title="">y-position</var> be the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>.</p>
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>If the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> is <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle</a>,
+ adjust the value of <var title="">x-position</var> or <var title="">y-position</var> for
+ <var title="">cue</var> as per the appropriate rules from the following list:</p>
+
+ <dl class="switch">
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>:</dt>
+ <dd>
+ <p>Let <var title="">x-position</var> be <var title="">x-position</var> minus half of <var title="">size</var>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a> or <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>:</dt>
+ <dd>
+ <p>Let <var title="">y-position</var> be <var title="">y-position</var> minus half of <var title="">size</var>.</p>
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>If the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> is <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end</a>,
+ or <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right</a> for a <var title="">direction</var> of 'ltr',
+ or <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left</a> for a <var title="">direction</var> of 'rtl',
+ adjust the value of <var title="">x-position</var> or <var title="">y-position</var> for
+ <var title="">cue</var> as per the appropriate rules from the following list:</p>
+
+ <dl class="switch">
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>:</dt>
+ <dd>
+ <p>Let <var title="">x-position</var> be <var title="">x-position</var> minus <var title="">size</var>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a> or <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>:</dt>
+ <dd>
+ <p>Let <var title="">y-position</var> be <var title="">y-position</var> minus <var title="">size</var>.</p>
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>Convert <var title="">x-position</var> and <var title="">y-position</var> to CSS values
+ to be used by the next section to set CSS properties for the rendering as follows
+ ('vw' and 'vh' are CSS units <a href="#refsCSSVALUES">[CSSVALUES]</a>):</p>
+
+ <dl class="switch">
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> and the <var title="">direction</var> is 'ltr':</dt>
+ <dd>
+ <p>Let <var title="">left</var> be '<var title="">x-position</var> vw' and
+ <var title="">top</var> be '<var title="">y-position</var> vh'.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> and the <var title="">direction</var> is 'rtl':</dt>
+ <dd>
+ <p>Let <var title="">right</var> be '<var title="">x-position</var> vw' and
+ <var title="">top</var> be '<var title="">y-position</var> vh'.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a>:</dt>
+ <dd>
+ <p>Let <var title="">right</var> be '<var title="">x-position</var> vw' and
+ <var title="">top</var> be '<var title="">y-position</var> vh'.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a>:</dt>
+ <dd>
+ <p>Let <var title="">left</var> be '<var title="">x-position</var> vw' and
+ <var title="">top</var> be '<var title="">y-position</var> vh'.</p>
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>Apply the terms of the CSS specifications to <var title="">nodes</var> within the following constraints, thus
+ obtaining a set of CSS boxes positioned relative to an initial
+ containing block: <a href="#refsCSS">[CSS]</a></p>
+
+ <ul>
+
+ <li><p>The <i>document tree</i> is the tree of <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a> rooted at
+ <var title="">nodes</var>.</p></li>
+
+ <li><p>For the purposes of processing by the CSS specification,
+ <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node
+ Objects</a> are equivalent to elements with the same
+ contents.</p></li>
+
+ <li>For the purposes of processing by the CSS
+ specification, <a title="WebVTT Text Object" href="#dfn-webvtt-text-object" class="internalDFN">WebVTT Text
+ Objects</a> are equivalent to <code>Text</code> nodes.</li>
+
+ <li>No style sheets are associated with <var title="">nodes</var>. (The nodes are subsequently restyled
+ using style sheets after their boxes are generated, as
+ described below.)</li>
+
+ <li>The children of the <var title="">nodes</var> must be
+ wrapped in an anonymous box whose 'display' property has the
+ value 'inline'. This is the <dfn id="dfn-webvtt-cue-background-box">WebVTT cue background
+ box</dfn>.</li>
+
+ <li>Properties on <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a> 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.)</li>
+
+ <li>Text runs must be wrapped according to the CSS
+ line-wrapping rules, with the following additional constraints:
+
+ <ul>
+
+ <li>Regardless of the value of the 'white-space' property,
+ lines must be wrapped at the edge of their containing blocks,
+ even if doing so requires splitting a word where there is no
+ line breaking opportunity. (Thus, normally text wraps as
+ needed, but if there is a particularly long word, it does not
+ overflow as it normally would in CSS, it is instead forcibly
+ wrapped at the box's edge.)</li>
+
+ <li>Regardless of the value of the 'white-space' property,
+ any line breaks inserted by the user agent for the purposes
+ of line wrapping must be placed so as to minimize Δ
+ across each run of consecutive lines between preserved
+ newlines in the source. Δ for a set of lines is defined
+ as the sum over each line of the absolute of the difference
+ between the line's length and the mean line length of the
+ set.</li>
+
+ </ul>
+
+ </li>
+
+ <li>The viewport (and initial containing block) is
+ <var title="">video</var>'s rendering area.</li>
+
+ </ul>
+
+ <p>Let <var title="">boxes</var> be the boxes generated as
+ descendants of the initial containing block, along with their
+ positions.</p>
+
+ </li>
+
+ <li><p>If there are no line boxes in <var title="">boxes</var>,
+ skip the remainder of these substeps for <var title="">cue</var>. The cue is ignored.</p></li>
+
+ <li>
+
+ <p>Adjust the positions of <var title="">boxes</var> according
+ to the appropriate steps from the following list:</p>
+
+ <dl class="switch">
+
+ <dt>If <var title="">cue</var>'s <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is set</dt>
+
+ <dd>
+
+ <p>Many of the steps in this algorithm vary according to the
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a>. Steps labeled
+ "<strong>Horizontal</strong>" must be followed only when the
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing
+ direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>, steps labeled
+ "<strong>Vertical</strong>" must be followed when the
+ <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is either <a title="text track cue vertical growing left writing
+ direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a> or <a title="text
+ track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical
+ growing right</a>, steps labeled "<strong>Vertical Growing
+ Left</strong>" must be followed only when the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text
+ track cue writing direction</a> is <a title="text track
+ cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing
+ left</a>, and steps labeled "<strong>Vertical Growing
+ Right</strong>" must be followed only when the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text
+ track cue writing direction</a> is <a title="text track
+ cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing
+ right</a>.</p>
+
+ <ol>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: Let <var title="">max dimension</var> be the height of
+ <var title="">video</var>'s rendering area minus twice the 'padding-top' space defined in the
+ next section.</p>
+
+ <p><strong>Vertical</strong>: Let <var title="">max dimension</var> be the width of <var title="">video</var>'s rendering area minus twice the 'padding-left' space defined in the
+ next section.</p>
+
+ <p>These dimensions must not be adjusted for overscan. (The padding of the next
+ section takes care of this.)</p>
+
+ </li>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: Let <var title="">step</var>
+ be the height of the first line box in <var title="">boxes</var>.</p>
+
+ <p><strong>Vertical</strong>: Let <var title="">step</var>
+ be the width of the first line box in <var title="">boxes</var>.</p>
+
+ </li>
+
+ <li><p>If <var title="">step</var> is zero, then jump to the
+ step labeled <i>done positioning</i> below.</p></li>
+
+ <li><p>Let <var title="">line position</var> be the
+ <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>.</p></li>
+
+ <li><p><strong>Vertical Growing Left</strong>: Add one to
+ <var title="">line position</var> then negate it.</p></li>
+
+ <li><p>Let <var title="">position</var> be the result of
+ multiplying <var title="">step</var> and <var title="">line
+ position</var>.</p></li>
+
+ <li><p><strong>Vertical Growing Left</strong>: Decrease <var title="">position</var> by the width of the bounding box of
+ the boxes in <var title="">boxes</var>, then increase <var title="">position</var> by <var title="">step</var>.</p></li>
+
+ <li>
+
+ <p>If <var title="">line position</var> is less than zero then increase <var title="">position</var> by <var title="">max dimension</var>, and negate <var title="">step</var>.</p>
+
+ <p>Otherwise, increase <var title="">position</var> by <var title="">margin</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: Move all the boxes in <var title="">boxes</var> down by the distance given by <var title="">position</var>.</p>
+
+ <p><strong>Vertical</strong>: Move all the boxes in <var title="">boxes</var> right by the distance given by <var title="">position</var>.</p>
+
+ </li>
+
+ <li><p>Remember the position of all the boxes in <var title="">boxes</var> as their <var title="">specified position</var>.</p></li>
+
+ <li><p>Let <var title="">best position</var> be null. It will hold a position for <var title="">boxes</var>, much like <var title="">specified position</var> in the previous
+ step.</p>
+
+ </li><li><p>Let <var title="">best position score</var> be null.</p></li>
+
+ <li><p>Let <var title="">switched</var> be false.</p></li>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: Let <var title="">title area</var> be a box that covers
+ all of the <var title="">video</var>'s rendering area except for a height of <var title="">margin</var> at the top of the rendering area and a height of <var title="">margin</var> at the bottom of the rendering area.</p>
+
+ <p><strong>Vertical</strong>: Let <var title="">title area</var> be a box that covers all
+ of the <var title="">video</var>'s rendering area except for a width of <var title="">margin</var> at the left of the rendering area and a width of <var title="">margin</var> at the right of the rendering area.</p>
+
+ </li>
+
+ <li><p><i>Step loop</i>: If none of the boxes in <var title="">boxes</var> would overlap
+ any of the boxes in <var title="">output</var>, and all of the boxes in <var title="">output</var> are entirely within the <var title="">title area</var> box, then jump
+ to the step labeled <i>done positioning</i> below.</p></li>
+
+ <li><p>Let <var title="">current position score</var> be the percentage of the area of the
+ bounding box of the boxes in <var title="">boxes</var> that <!--overlaps the boxes in <var
+ title="">output</var> (if any) or that--> is outside the <var title="">title area</var>
+ box.</p></li>
+
+ <li>
+
+ <p>If <var title="">best position</var> is null (i.e. this is the first run through this
+ loop, <var title="">switched</var> is still false, the boxes in <var title="">boxes</var>
+ are at their <var title="">specified position</var>, and <var title="">best position
+ score</var> is still null), or if <var title="">current position score</var> is a lower
+ percentage than that in <var title="">best position score</var>, then remember the
+ position of all the boxes in <var title="">boxes</var> as their <var title="">best
+ position</var>, and set <var title="">best position score</var> to <var title="">current
+ position score</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: If <var title="">step</var> is negative and the top of the
+ first line box in <var title="">boxes</var> is now above the top of the <var title="">title area</var>, or if <var title="">step</var> is positive and the bottom of
+ the first line box in <var title="">boxes</var> is now below the bottom of the <var title="">title area</var>, jump to the step labeled <i>switch direction</i>.</p>
+
+ <p><strong>Vertical</strong>: If <var title="">step</var> is negative and the left edge of
+ the first line box in <var title="">boxes</var> is now to the left of the left edge of the
+ <var title="">title area</var>, or if <var title="">step</var> is positive and the right
+ edge of the first line box in <var title="">boxes</var> is now to the right of the right
+ edge of the <var title="">title area</var>, jump to the step labeled <i>switch
+ direction</i>.</p>
+
+ </li>
+
+ <li>
+
+ <p><strong>Horizontal</strong>: Move all the boxes in <var title="">boxes</var> down by the distance given by <var title="">step</var>. (If <var title="">step</var> is
+ negative, then this will actually result in an upwards
+ movement of the boxes in absolute terms.)</p>
+
+ <p><strong>Vertical</strong>: Move all the boxes in <var title="">boxes</var> right by the distance given by <var title="">step</var>. (If <var title="">step</var> is
+ negative, then this will actually result in a leftwards
+ movement of the boxes in absolute terms.)</p>
+
+ </li>
+
+ <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
+
+ <li><p><i>Switch direction</i>: If <var title="">switched</var> is true, then move all the
+ boxes in <var title="">boxes</var> back to their <var title="">best position</var>, and
+ jump to the step labeled <i>done positioning</i> below.</p></li>
+
+ <li><p>Otherwise, move all the boxes in <var title="">boxes</var> back to their <var title="">specified position</var> as determined in the earlier step.</p></li>
+
+ <li><p>Negate <var title="">step</var>.</p></li>
+
+ <li><p>Set <var title="">switched</var> to true.</p></li>
+
+ <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">cue</var>'s <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is not set</dt>
+ <dd>
+
+ <ol>
+
+ <li>
+
+ <p>Set up <var title="">x</var> and <var title="">y</var> as
+ follows:</p>
+
+ <dl class="switch">
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>,
+ and <var title="">direction</var> is 'ltr'</dt>
+ <dd>
+ <p>Let <var title="">x</var> be a percentage given by the
+ <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>, and let <var title="">y</var> be a percentage given by the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text
+ track cue computed line position</a>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>,
+ and <var title="">direction</var> is 'rtl'</dt>
+ <dd>
+ <p>Let <var title="">x</var> be a percentage given by the
+ <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> subtracted from
+ 100, and let <var title="">y</var> be a percentage given
+ by the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a></dt>
+ <dd>
+ <p>Let <var title="">x</var> be a percentage given by the
+ <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a> subtracted from
+ 100, and let <var title="">y</var> be a percentage given
+ by the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>.</p>
+ </dd>
+
+ <dt>If the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> is <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a></dt>
+ <dd>
+ <p>Let <var title="">x</var> be a percentage given by the
+ <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>, and let <var title="">y</var> be a percentage given by the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text
+ track cue text position</a>.</p>
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li><p>Position the boxes in <var title="">boxes</var> such
+ that the point <var title="">x</var>% along the width of the
+ bounding box of the boxes in <var title="">boxes</var> is
+ <var title="">x</var>% of the way across the width of the
+ <var title="">video</var>'s rendering area, and the point
+ <var title="">y</var>% along the height of the bounding box
+ of the boxes in <var title="">boxes</var> is <var title="">y</var>% of the way across the height of the <var title="">video</var>'s rendering area, while maintaining the
+ relative positions of the boxes in <var title="">boxes</var>
+ to each other.</p></li>
+
+ <li><p>If none of the boxes in <var title="">boxes</var>
+ would overlap any of the boxes in <var title="">output</var>,
+ and all the boxes in <var title="">output</var> are within
+ the <var title="">video</var>'s rendering area, then jump to
+ the step labeled <i>done positioning</i> below.</p></li>
+
+ <li><p>If there is a position to which the boxes in <var title="">boxes</var> can be moved while maintaining the
+ relative positions of the boxes in <var title="">boxes</var>
+ to each other such that none of the boxes in <var title="">boxes</var> would overlap any of the boxes in <var title="">output</var>, and all the boxes in <var title="">output</var> would be within the <var title="">video</var>'s rendering area, then move the boxes in
+ <var title="">boxes</var> to the closest such position to
+ their current position, and then jump to the step labeled
+ <i>done positioning</i> 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.</p></li>
+
+ <li><p>Otherwise, jump to the step labeled <i>done
+ positioning</i> below. (The boxes will unfortunately
+ overlap.)</p></li>
+
+ </ol>
+
+ </dd>
+
+ </dl>
+
+ </li>
+
+ <li><p><i>Done positioning</i>: If there are any line boxes in
+ the (possibly now repositioned) <var title="">boxes</var> that do
+ not completely fit inside <var title="">video</var>'s rendering
+ area, remove those offending line boxes from <var title="">boxes</var>.</p></li>
+
+ </ol>
+
+ </section>
+
+ <section id="applying-css-properties-to-webvtt-node-objects">
+ <h4 aria-level="3" role="heading" id="h4_applying-css-properties-to-webvtt-node-objects"><span class="secno">6.2.2 </span>Applying CSS properties to <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a></h4>
+
+ <p>When following the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT
+ text tracks</a>, user agents must set properties of <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a> at the CSS
+ user agent cascade layer as defined in this section. <a href="#refsCSS">[CSS]</a></p>
+
+ <p>Initialize the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a> with the following CSS settings:</p>
+ <ul>
+ <li>the 'position' property must be set to 'absolute'</li>
+ <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
+ <li>the 'direction' property must be set to <var title="">direction</var></li>
+ <li>the 'writing-mode' property must be set to <var title="">writing-mode</var></li>
+ <li>the 'top' property must be set to <var title="">top</var></li>
+ <li>the 'left' property must be set to <var title="">left</var>, if <var title="">left</var> has a value</li>
+ <li>the 'right' property must be set to <var title="">right</var>, if <var title="">right</var> has a value</li>
+ <li>the 'width' property must be set to <var title="">width</var></li>
+ <li>the 'height' property must be set to<var title="">height</var></li>
+ </ul>
+
+ <p>The variables <var title="">direction</var>,
+ <var title="">writing-mode</var>, <var title="">top</var>, <var title="">left</var>, <var title="">right</var>, <var title="">width</var>, and <var title="">height</var> are the values with those names determined by
+ the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text
+ tracks</a> for the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> from whose <a title="text track cue text" href="#dfn-text-track-cue-text" class="internalDFN">text</a> the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT
+ Node Objects</a> was constructed.</p>
+
+ <p>The 'text-align' property on the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a> 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 <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">cue</a>'s <a href="#dfn-text-track-cue-alignment" class="internalDFN">text
+ track cue alignment</a>:</p>
+
+ <table>
+ <thead>
+ <tr> <th><a href="#dfn-text-track-cue-alignment" class="internalDFN">Text track cue alignment</a> </th><th> 'text-align' value
+ </th></tr></thead><tbody>
+ <tr> <td><a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">Start alignment</a> </td><td> 'start'
+ </td></tr><tr> <td><a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">Middle alignment</a> </td><td> 'center'
+ </td></tr><tr> <td><a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">End alignment</a> </td><td> 'end'
+ </td></tr><tr> <td><a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">Left alignment</a> </td><td> 'left'
+ </td></tr><tr> <td><a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">Right alignment</a> </td><td> 'right'
+ </td></tr></tbody></table>
+
+ <p>The 'font' shorthand property on the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT
+ Node Objects</a> must be set to '5vh sans-serif'. <a href="#refsCSSRUBY">[CSSRUBY]</a> <a href="#refsCSSVALUES">[CSSVALUES]</a></p>
+
+ <p>The 'color' property on the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a> must be set to 'rgba(255,255,255,1)'. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+
+ <p>The 'background' shorthand property on the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue
+ background box</a> must be set to 'rgba(0,0,0,0.8)'. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+
+ <p>A text outline or stroke may also be set on the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list
+ of WebVTT Node Objects</a>, if supported.</p> <!-- 'text-outline'
+ is in CSS3 Text, but Tab says that's awaiting medical attention. -->
+
+ <p>The 'white-space' property on the (root) <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT
+ Node Objects</a> must be set to 'pre-line'. <a href="#refsCSS">[CSS]</a></p>
+
+ <p>The 'padding-top' and 'padding-bottom' property on the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a>
+ must be set to '1.5vh' or another user-agent-defined number to define a margin at the edges of the
+ video into which cues will not be placed. In situations with overscan, this margin should be sufficient
+ to place a cue within the title-safe area. In the absence of overscan, this value should be picked for
+ aesthetics (to avoid text being aligned precisely on the top or bottom edge of the video, which can be
+ ugly).</p>
+
+ <p>The 'padding-left' and 'padding-right' property on the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a>
+ must be set to '1.5vw' or another user-agent-defined number to define a margin at the edges of the
+ video into which cues will not be placed. In situations with overscan, this margin should be sufficient
+ to place a cue within the title-safe area. In the absence of overscan, this value should be picked for
+ aesthetics (to avoid text being aligned precisely on the top or bottom edge of the video, which can be
+ ugly).</p>
+
+ <p>The 'box-sizing' property on the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a>
+ must be set to 'border-box'.</p>
+
+ <p>The 'overflow' property on the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a> must be set
+ to 'hidden'.
+
+ </p><p>The 'font-style' property on <a title="WebVTT Italic
+ Object" href="#dfn-webvtt-italic-object" class="internalDFN">WebVTT Italic Objects</a> must be set to 'italic'.</p>
+
+ <p>The 'font-weight' property on <a title="WebVTT Bold
+ Object" href="#dfn-webvtt-bold-object" class="internalDFN">WebVTT Bold Objects</a> must be set to 'bold'.</p>
+
+ <p>The 'text-decoration' property on <a title="WebVTT Underline
+ Object" href="#dfn-webvtt-underline-object" class="internalDFN">WebVTT Underline Objects</a> must be set to 'underline'.</p>
+
+ <p>The 'display' property on <a title="WebVTT Ruby Object" href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT
+ Ruby Objects</a> must be set to 'ruby'. <a href="#refsCSSRUBY">[CSSRUBY]</a></p>
+
+ <p>The 'display' property on <a title="WebVTT Ruby Text
+ Object" href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Objects</a> must be set to
+ 'ruby-text'. <a href="#refsCSSRUBY">[CSSRUBY]</a></p>
+
+ <p>Runs of children of <a title="WebVTT Ruby Object" href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT
+ Ruby Objects</a> that are not <a title="WebVTT Ruby Text
+ Object" href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Objects</a> must be wrapped in
+ anonymous boxes whose 'display' property has the value
+ 'ruby-base'. <a href="#refsCSSRUBY">[CSSRUBY]</a></p>
+
+ <p>Every <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region object</a> is initialised with the following CSS settings:</p>
+ <ul>
+ <li>the 'position' property must be set to 'absolute'</li>
+ <li>the 'writing-mode' property must be set to 'horizontal-tb'</li>
+ <li>the 'background' shorthand property must be set to 'rgba(0,0,0,0.8)'</li>
+ <li>the 'word-wrap' property must be set to 'break-word'</li>
+ <li>the 'overflow-wrap' property must be set to 'break-word'</li>
+ <li>the 'font' shorthand property must be set to '(0.0533/1.3)vh sans-serif'</li>
+ <li>the 'line-height' shorthand property must be set to '0.0533vh'</li>
+ <li>the 'color' property must be set to 'rgba(255,255,255,1)'</li>
+ <li>the 'overflow' property must be set to 'hidden'</li>
+ <li>the 'width' property must be set to <var>width</var></li>
+ <li>the 'min-height' property must be set to '0px'</li>
+ <li>the 'max-height' property must be set to <var>height</var></li>
+ <li>the 'left' property must be set to <var>left</var></li>
+ <li>the 'right' property must be set to <var>right</var></li>
+ <li>the 'top' property must be set to <var>top</var></li>
+ <li>the 'display' property must be set to 'inline-flex'</li>
+ <li>the 'flex-flow' property must be set to 'column'</li>
+ <li>the 'justify-content' property must be set to 'flex-end'</li>
+ </ul>
+ <p>The variables <var>width</var>, <var>height</var>, <var>top</var>, and <var>left</var> are the values with those names determined by the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a> for the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> from which the <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region object</a> was constructed.</p>
+
+ <p>The children of every <a href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region object</a> are further initialised with these CSS settings:</p>
+ <ul>
+ <li>the 'position' property must be set to 'relative'</li>
+ <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
+ <li>the 'width' property must be set to 'auto'</li>
+ <li>the 'height' property must be set to <var>height</var></li>
+ <li>the 'left' property must be set to <var>left</var></li>
+ <li>the 'text-align' property must be set as described for the root <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">List of WebVTT Node Objects</a> not part of a region</li>
+ </ul>
+
+ <p>All other non-inherited properties must be set to their initial
+ values; inherited properties on the root <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a> must inherit their values from the <a href="#dfn-media-element" class="internalDFN">media
+ element</a> for which the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> is being
+ rendered, if any. If there is no <a href="#dfn-media-element" class="internalDFN">media element</a> (i.e. if
+ the <a href="#dfn-text-track" class="internalDFN">text track</a> is being rendered for another media
+ playback mechanism), then inherited properties on the root
+ <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a> and the
+ <a title="WebVTT region object" href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region objects</a>
+ must take their initial values.</p>
+
+ <p>If there are style sheets that apply to the <a href="#dfn-media-element" class="internalDFN">media
+ element</a> or other playback mechanism, then they must be
+ interpreted as defined in the next section.</p>
+
+ </section>
+
+ <section id="css-extensions">
+ <h4 aria-level="3" role="heading" id="h4_css-extensions"><span class="secno">6.2.3 </span>CSS extensions</h4>
+
+ <p>When a user agent is rendering one or more <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a>
+ according to the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>, <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Objects</a> in the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a> used in the rendering can be matched by certain pseudo-selectors as defined below.
+ These selectors can begin or stop matching individual <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a> while a <a title="text track cue" href="#dfn-text-track-cue" class="internalDFN">cue</a> is being rendered, even in between
+ applications of the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a> (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 <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>'s <a href="#dfn-text-track-cue-display-state" class="internalDFN">text track cue display state</a> must be emptied
+ and the <a href="#dfn-text-track" class="internalDFN">text track</a>'s <a href="#dfn-rules-for-updating-the-text-track-rendering" class="internalDFN">rules for updating the text track rendering</a> must be
+ immediately rerun.</p>
+
+ <p>Pseudo-elements apply to elements that are matched by
+ selectors. For the purpose of this section, that element is the
+ <i>matched element</i>. The pseudo-elements defined in the following
+ sections affect the styling of parts of <a title="text track
+ cue" href="#dfn-text-track-cue" class="internalDFN">text track cues</a> that are being rendered for the
+ <i>matched element</i>.</p>
+
+ <div class="note"><div class="note-title" aria-level="4" role="heading" id="h_note_30"><span>Note</span></div><p class="">If the <i>matched element</i> is not a
+ <code>video</code> element, the pseudo-elements defined below won't
+ have any effect according to this specification.</p></div>
+
+ <p>A CSS user agent that implements the <a title="text
+ track" href="#dfn-text-track" class="internalDFN">text tracks</a> model must implement the '::cue' and
+ '::cue(<var title="">selector</var>)' pseudo-elements, and the <a title="past-pseudo-class" href="#dfn-past-pseudo-class" class="internalDFN">':past'</a> and <a title="future-pseudo-class" href="#dfn-future-pseudo-class" class="internalDFN">':future'</a> pseudo-classes.</p>
+
+
+ <section id="the-cue-pseudo-element">
+ <h5 aria-level="4" role="heading" id="h5_the-cue-pseudo-element"><span class="secno">6.2.3.1 </span>The '::cue' pseudo-element</h5>
+
+ <p>The '<dfn title="pseudo-cue" id="dfn-pseudo-cue">::cue</dfn>' pseudo-element (with no
+ argument) matches any <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a>
+ constructed for the <i>matched element</i>, with the exception that
+ the properties corresponding to the 'background' shorthand must be
+ applied to the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a> rather than
+ the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a>.</p>
+
+ <p>The following properties apply to the '::cue' pseudo-element with
+ no argument; other properties set on the pseudo-element must be
+ ignored:</p>
+
+ <ul class="brief">
+ <li>'color'</li>
+ <li>'opacity'</li>
+ <li>'visibility'</li>
+ <li>'text-decoration'</li>
+ <li>'text-outline'</li>
+ <li>'text-shadow'</li>
+ <li>the properties corresponding to the 'background' shorthand</li>
+ <li>the properties corresponding to the 'outline' shorthand</li>
+ <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
+ <li>'white-space'</li>
+ <!-- add more... -->
+ <!-- definitely not:
+ display, float, position, top, left, right, bottom, width,
+ height, margin-top, margin-bottom, margin-left, margin-right,
+ clip, clear, content, cursor, direction, max-height,
+ min-height, max-width, min-width, orphans, overflow,
+ page-break-*, text-align, unicode-bidi, widows, z-index
+ -->
+ </ul>
+
+ <p>The '<dfn title="pseudo-cue-selector" id="dfn-pseudo-cue-selector">::cue(<var title="">selector</var>)</dfn>' pseudo-element with an argument must
+ have an argument that consists of a group of selectors. It matches
+ any <a href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Object</a> constructed for the
+ <i>matched element</i> that also matches the given group of
+ selectors, with the nodes being treated as follows:</p>
+
+ <ul>
+
+ <li><p>The <i>document tree</i> against which the selectors are
+ matched is the tree of <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a> rooted at the <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a> for the cue.</p></li>
+
+ <li><p><a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal
+ Node Objects</a> are elements in the tree.</p></li>
+
+ <li><a title="WebVTT Leaf Node Object" href="#dfn-webvtt-leaf-node-object" class="internalDFN">WebVTT Leaf Node
+ Objects</a> cannot be matched.</li>
+
+ <li>
+
+ <p>For the purposes of element type selectors, the names of <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node
+ Objects</a> are as given by the following table, where objects
+ having the concrete class given in a cell in the first column have
+ the name given by the second column of the same row:</p>
+
+ <table>
+
+ <thead>
+ <tr>
+ <th>Concrete class
+ </th><th>Name
+
+ </th></tr></thead><tbody>
+ <tr>
+ <td><a title="WebVTT Class Object" href="#dfn-webvtt-class-object" class="internalDFN">WebVTT Class Objects</a>
+ </td><td><code title="">c</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Italic Object" href="#dfn-webvtt-italic-object" class="internalDFN">WebVTT Italic Objects</a>
+ </td><td><code title="">i</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Bold Object" href="#dfn-webvtt-bold-object" class="internalDFN">WebVTT Bold Objects</a>
+ </td><td><code title="">b</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Underline Object" href="#dfn-webvtt-underline-object" class="internalDFN">WebVTT Underline Objects</a>
+ </td><td><code title="">u</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Ruby Object" href="#dfn-webvtt-ruby-object" class="internalDFN">WebVTT Ruby Objects</a>
+ </td><td><code title="">ruby</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Ruby Text Object" href="#dfn-webvtt-ruby-text-object" class="internalDFN">WebVTT Ruby Text Objects</a>
+ </td><td><code title="">rt</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Voice Object" href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Objects</a>
+ </td><td><code title="">v</code>
+
+ </td></tr><tr>
+ <td><a title="WebVTT Language Object" href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language Objects</a>
+ </td><td><code title="">lang</code>
+
+ </td></tr><tr>
+ <td>Other elements (specifically, <a title="list of WebVTT Node Objects" href="#dfn-list-of-webvtt-node-objects" class="internalDFN">lists of WebVTT Node Objects</a>)
+ </td><td>No explicit name.
+
+ </td></tr></tbody></table>
+
+ </li>
+
+ <li><p>For the purposes of element type and universal selectors,
+ <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node
+ Objects</a> are considered as being in the namespace expressed
+ as the empty string.</p></li>
+
+ <li><p>For the purposes of attribute selector matching, <a title="WebVTT Internal Node
+ Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Objects</a> have no attributes, except for <a title="WebVTT
+ Voice Object" href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Objects</a>, which have a single attribute named "<code title="">voice</code>" whose value is the value of the <a href="#dfn-webvtt-voice-object" class="internalDFN">WebVTT Voice Object</a>, and
+ <a title="WebVTT Language Object" href="#dfn-webvtt-language-object" class="internalDFN">WebVTT Language Objects</a>, which have a single
+ attribute named "<code title="">lang</code>" whose value is the object's <a title="WebVTT Node
+ Object's applicable language" href="#dfn-webvtt-node-object-s-applicable-language" class="internalDFN">applicable language</a>.</p></li>
+
+ <li><p>For the purposes of class selector matching, <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node
+ Objects</a> have the classes described as the <a href="#dfn-webvtt-node-object-s-applicable-classes" class="internalDFN">WebVTT
+ Node Object's applicable classes</a>.</p></li> <!-- ok, this
+ isn't especially well-defined, but the Selectors spec doesn't
+ really give one much to go on here. -->
+
+ <li><p>For the purposes of the <code title="selector-lang">:lang()</code> pseudo-class, <a title="WebVTT Internal Node Object" href="#dfn-webvtt-internal-node-object" class="internalDFN">WebVTT Internal Node Objects</a> have the language
+ described as the <a href="#dfn-webvtt-node-object-s-applicable-language" class="internalDFN">WebVTT Node Object's applicable language</a>.</p></li>
+
+ <li><p>For the purposes of ID selector matching, <a title="list
+ of WebVTT Node Objects" href="#dfn-list-of-webvtt-node-objects" class="internalDFN">lists of WebVTT Node Objects</a> have
+ the ID given by the cue's <a href="#dfn-text-track-cue-identifier" class="internalDFN">text track cue identifier</a>,
+ if any.</p></li>
+
+ </ul>
+
+ <p>The following properties apply to the '::cue()' pseudo-element
+ with an argument:</p>
+
+ <ul class="brief">
+ <li>'color'</li>
+ <li>'opacity'</li>
+ <li>'visibility'</li>
+ <li>'text-decoration'</li>
+ <li>'text-outline'</li>
+ <li>'text-shadow'</li>
+ <li>the properties corresponding to the 'background' shorthand</li>
+ <li>the properties corresponding to the 'outline' shorthand</li>
+ <li>properties relating to the transition and animation features</li>
+ <!-- add more... -->
+ <!-- but definitely not anything that affects dimensions of boxes, e.g. the 'font' shorthand's properties or 'white-space'; those are listed below instead -->
+ </ul>
+
+ <!--v2
+ Would be nice to support transitions that are directional,
+ e.g. changing text fill colour or shadow size of the start of a
+ segment when the segment becomes "past", and having the change
+ propagate towards the end of the segment so that it reaches the end
+ of the segment when the next segment becomes "past".
+ -->
+
+ <p>In addition, the following properties apply to the '::cue()'
+ pseudo-element with an argument when the selector does not contain
+ the <a title="past-pseudo-class" href="#dfn-past-pseudo-class" class="internalDFN">':past'</a> and <a title="future-pseudo-class" href="#dfn-future-pseudo-class" class="internalDFN">':future'</a> pseudo-classes:</p>
+
+ <ul class="brief">
+ <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
+ <li>'white-space'</li>
+ <!-- add more... -->
+ <!-- definitely not:
+ display, float, position, top, left, right, bottom, width,
+ height, margin-top, margin-bottom, margin-left, margin-right,
+ clip, clear, content, cursor, direction, max-height,
+ min-height, max-width, min-width, orphans, overflow,
+ page-break-*, text-align, unicode-bidi, widows, z-index
+ -->
+ </ul>
+
+ <p>Properties that do not apply must be ignored.</p>
+
+ <p>As a special exception, the properties corresponding to the
+ 'background' shorthand, when they would have been applied to the
+ <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</a>, must instead be applied to
+ the <a href="#dfn-webvtt-cue-background-box" class="internalDFN">WebVTT cue background box</a>.</p>
+
+ </section>
+
+ <section id="the-past-and-future-pseudo-classes">
+ <h5 aria-level="4" role="heading" id="h5_the-past-and-future-pseudo-classes"><span class="secno">6.2.3.2 </span>The ':past' and ':future' pseudo-classes</h5>
+
+ <p>The <a title="past-pseudo-class" href="#dfn-past-pseudo-class" class="internalDFN">':past'</a> and <a title="future-pseudo-class" href="#dfn-future-pseudo-class" class="internalDFN">':future'</a> pseudo-classes
+ sometimes match <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a>. <a href="#refsSELECTORS">[SELECTORS]</a></p>
+
+ <p>The <dfn title="past-pseudo-class" id="dfn-past-pseudo-class">':past'</dfn> pseudo-class
+ only matches <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a> that are <i>in the past</i>.</p>
+
+ <p>A <a href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Object</a> <var title="">c</var> is
+ <dfn id="dfn-in-the-past">in the past</dfn> if, in a pre-order, depth-first traversal of
+ the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>'s <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a>, there exists a <a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp Object</a>
+ whose value is less than the <a href="#dfn-current-playback-position" class="internalDFN">current playback position</a>
+ of the <a href="#dfn-media-element" class="internalDFN">media element</a> that is the <i>matched
+ element</i>, entirely after the <a href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Object</a> <var title="">c</var>.</p>
+
+ <p>The <dfn title="future-pseudo-class" id="dfn-future-pseudo-class">':future'</dfn> pseudo-class
+ only matches <a title="WebVTT Node Object" href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Objects</a> that are <i>in the future</i>.</p>
+
+ <p>A <a href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node Object</a> <var title="">c</var> is
+ <dfn id="dfn-in-the-future">in the future</dfn> if, in a pre-order, depth-first traversal
+ of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>'s <a href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node
+ Objects</a>, there exists a <a href="#dfn-webvtt-timestamp-object" class="internalDFN">WebVTT Timestamp Object</a>
+ whose value is greater than the <a href="#dfn-current-playback-position" class="internalDFN">current playback
+ position</a> of the <a href="#dfn-media-element" class="internalDFN">media element</a> that is the
+ <i>matched element</i>, entirely before the <a href="#dfn-webvtt-node-object" class="internalDFN">WebVTT Node
+ Object</a> <var title="">c</var>.</p>
+ </section>
+
+ <section id="the-cue-region-pseudo-element">
+ <h5 aria-level="4" role="heading" id="h5_the-cue-region-pseudo-element"><span class="secno">6.2.3.3 </span>The '::cue-region' pseudo-element</h5>
+
+ <p>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.</p>
+
+ <div class="note"><div class="note-title" aria-level="5" role="heading" id="h_note_31"><span>Note</span></div><p class="">If the matched element is not a video element, the pseudo-element defined below won't have any effect according to this specification.</p></div>
+
+ <p>The '<dfn title="pseudo-region" id="dfn-pseudo-region">::cue-region</dfn>' pseudo-element (with no argument) matches any list of <a title="WebVTT region object" href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region objects</a> constructed for the <i>matched element</i>.</p>
+
+ <p>The <a title="pseudo-cue" href="#dfn-pseudo-cue" class="internalDFN">same properties that apply to '::cue'</a> apply to the '::cue-region' pseudo-element with no argument; other properties set on the pseudo-element must be ignored.</p>
+
+ <p>When a user agent is rendering one or more text track regions according to the <a href="#dfn-rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>, <a title="WebVTT region object" href="#dfn-webvtt-region-object" class="internalDFN">WebVTT region objects</a> 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 text track cues in the region must be emptied and the text track's rules for updating the text track rendering must be immediately rerun.</p>
+
+ <p>A CSS user agent that implements the text tracks model must implement the '::cue-region' pseudo-element.</p>
+
+ </section>
+
+ </section>
+
+ </section>
+
+ </section>
+
+ <section id="webvtt-api-for-browsers">
+ <!--OddPage--><h2 aria-level="1" role="heading" id="h2_webvtt-api-for-browsers"><span class="secno">7. </span>WebVTT API for Browsers</h2>
+
+ <section id="vttcue-interface">
+ <h3 aria-level="2" role="heading" id="h3_vttcue-interface"><span class="secno">7.1 </span>VTTCue interface</h3>
+
+ <p>The following interface is used to expose WebVTT cues in the DOM API:</p>
+
+ <pre class="idl_whatwg">enum <dfn id="dfn-autokeyword">AutoKeyword</dfn> { "auto" };
+enum <dfn id="dfn-directionsetting">DirectionSetting</dfn> { "" /* horizontal */, "rl", "lr" };
+enum <dfn id="dfn-alignsetting">AlignSetting</dfn> { "start", "middle", "end", "left", "right" };
+[<a title="dom-VTTCue" href="#dfn-dom-vttcue" class="internalDFN">Constructor</a>(double startTime, double endTime, DOMString text)]
+interface <dfn id="dfn-vttcue">VTTCue</dfn> : <a href="#dfn-texttrackcue" class="internalDFN">TextTrackCue</a> {
+ attribute DOMString <a title="dom-VTTCue-regionId" href="#dfn-dom-vttcue-regionid" class="internalDFN">regionId</a>;
+ attribute <a href="#dfn-directionsetting" class="internalDFN">DirectionSetting</a> <a title="dom-VTTCue-vertical" href="#dfn-dom-vttcue-vertical" class="internalDFN">vertical</a>;
+ attribute boolean <a title="dom-VTTCue-snapToLines" href="#dfn-dom-vttcue-snaptolines" class="internalDFN">snapToLines</a>;
+ attribute (long or <a href="#dfn-autokeyword" class="internalDFN">AutoKeyword</a>) <a title="dom-VTTCue-line" href="#dfn-dom-vttcue-line" class="internalDFN">line</a>;
+ attribute long <a title="dom-VTTCue-position" href="#dfn-dom-vttcue-position" class="internalDFN">position</a>;
+ attribute long <a title="dom-VTTCue-size" href="#dfn-dom-vttcue-size" class="internalDFN">size</a>;
+ attribute <a href="#dfn-alignsetting" class="internalDFN">AlignSetting</a> <a title="dom-VTTCue-align" href="#dfn-dom-vttcue-align" class="internalDFN">align</a>;
+ attribute DOMString <a title="dom-VTTCue-text" href="#dfn-dom-vttcue-text" class="internalDFN">text</a>;
+ DocumentFragment <a title="dom-VTTCue-getCueAsHTML" href="#dfn-dom-vttcue-getcueashtml" class="internalDFN">getCueAsHTML</a>();
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">cue</var> = new <code title="dom-VTTCue">VTTCue</code>( <var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var> )</dt>
+ <dd>
+ <p>Returns a new <code>VTTCue</code> object, for use with the <code title="dom-TextTrack-addCue">addCue()</code> method.</p>
+ <p>The <var title="">startTime</var> argument sets the <a href="#dfn-text-track-cue-start-time" class="internalDFN">text track cue start time</a>.</p>
+ <p>The <var title="">endTime</var> argument sets the <a href="#dfn-text-track-cue-end-time" class="internalDFN">text track cue end time</a>.</p>
+ <p>The <var title="">text</var> argument sets the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-regionId" href="#dfn-dom-vttcue-regionid" class="internalDFN">regionId</a></dt>
+ <dd>
+ <p>Returns a string representing the <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> of the text track region that the <a href="#dfn-vttcue" class="internalDFN">VTTCue</a> object belongs to. If the <a href="#dfn-vttcue" class="internalDFN">VTTCue</a> doesn't belong to a text track region, returns the empty string.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-vertical" href="#dfn-dom-vttcue-vertical" class="internalDFN">vertical</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns a string representing the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a>, as follows:</p>
+ <dl class="switch">
+ <dt>If it is <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a></dt>
+ <dd><p>The empty string.</p></dd>
+ <dt>If it is <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">vertical growing left</a></dt>
+ <dd><p>The string "<code title="">rl</code>".</p></dd>
+ <dt>If it is <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">vertical growing right</a></dt>
+ <dd><p>The string "<code title="">lr</code>".</p></dd>
+ </dl>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-snapToLines" href="#dfn-dom-vttcue-snaptolines" class="internalDFN">snapToLines</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns true if the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is set, false otherwise.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-line" href="#dfn-dom-vttcue-line" class="internalDFN">line</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a>. In the
+ case of the value being <a title="text track cue automatic line
+ position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a>, the string "<code title="">auto</code>" is
+ returned.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-position" href="#dfn-dom-vttcue-position" class="internalDFN">position</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a>.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-size" href="#dfn-dom-vttcue-size" class="internalDFN">size</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a>.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-align" href="#dfn-dom-vttcue-align" class="internalDFN">align</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns a string representing the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a>, as follows:</p>
+ <dl class="switch">
+ <dt>If it is <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start alignment</a></dt>
+ <dd><p>The string "<code title="">start</code>".</p></dd>
+ <dt>If it is <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a></dt>
+ <dd><p>The string "<code title="">middle</code>".</p></dd>
+ <dt>If it is <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end alignment</a></dt>
+ <dd><p>The string "<code title="">end</code>".</p></dd>
+ <dt>If it is <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left alignment</a></dt>
+ <dd><p>The string "<code title="">left</code>".</p></dd>
+ <dt>If it is <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right alignment</a></dt>
+ <dd><p>The string "<code title="">right</code>".</p></dd>
+ </dl>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">cue</var> . <a title="dom-VTTCue-text" href="#dfn-dom-vttcue-text" class="internalDFN">text</a> [ = <var title="">value</var> ]</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> in raw unparsed form.</p>
+ <p>Can be set.</p>
+ </dd>
+
+ <dt><var title="">fragment</var> = <var title="">cue</var> . <a title="dom-VTTCue-getCueAsHTML" href="#dfn-dom-vttcue-getcueashtml" class="internalDFN">getCueAsHTML</a>()</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> as a <code>DocumentFragment</code> of <a href="#dfn-html-elements" class="internalDFN">HTML elements</a> and other DOM nodes.</p>
+ </dd>
+
+ </dl>
+
+ <p>The <dfn title="dom-VTTCue" id="dfn-dom-vttcue"><code>VTTCue(<var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var>)</code></dfn> constructor, when invoked, must
+ run the following steps:</p>
+
+ <ol>
+
+ <li><p>Create a new <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>. Let <var title="">cue</var> be that <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-start-time" class="internalDFN">text track cue start
+ time</a> be the value of the <var title="">startTime</var>
+ argument, interpreted as a time in seconds.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-end-time" class="internalDFN">text track cue end
+ time</a> be the value of the <var title="">endTime</var>
+ argument, interpreted as a time in seconds.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> be the value of the <var title="">text</var> argument, and let the <a href="#dfn-rules-for-rendering-the-cue-in-isolation" class="internalDFN">rules for rendering the cue in isolation</a>
+ be the <a href="#dfn-rules-for-interpreting-webvtt-cue-text" class="internalDFN">rules for interpreting WebVTT cue text</a>.</p></li>
+
+ <!-- default settings -->
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a>
+ be the empty string.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-identifier" class="internalDFN">text track cue
+ identifier</a> be the empty string.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-pause-on-exit-flag" class="internalDFN">text track cue
+ pause-on-exit flag</a> be false.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue
+ writing direction</a> be <a title="text track cue
+ horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a title="text track cue region identifier" href="#dfn-text-track-cue-region-identifier" class="internalDFN">region identifier</a>
+ be the empty string.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue
+ snap-to-lines flag</a> be true.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line
+ position</a> be <a title="text track cue automatic line
+ position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a>.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue
+ text position</a> be 50.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue
+ size</a> be 100.</p></li>
+
+ <li><p>Let <var title="">cue</var>'s <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue
+ alignment</a> be <a title="text track cue middle
+ alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a>.</p></li>
+
+ <li><p>Return the <code>VTTCue</code> object representing
+ <var title="">cue</var>.</p></li>
+
+ </ol>
+
+ <p>The <dfn title="dom-VTTCue-regionId" id="dfn-dom-vttcue-regionid"><code>regionId</code></dfn>
+ attribute, on getting, must return the <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text
+ track cue</a> that the <code>VTTCue</code> object represents; or the empty string otherwise.
+ On setting, the <a href="#dfn-text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> must be set to the new value if that
+ value refers to a <a href="#dfn-webvtt-region" class="internalDFN">WebVTT region</a>, or unset otherwise.</p>
+
+ <p>The <dfn title="dom-VTTCue-vertical" id="dfn-dom-vttcue-vertical"><code>vertical</code></dfn>
+ attribute, on getting, must return the string from the second cell
+ of the row in the table below whose first cell is the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text
+ track cue writing direction</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track
+ cue</a> that the <code>VTTCue</code> object represents:</p>
+
+ <table>
+ <thead>
+ <tr> <th> <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a>
+ </th><th> <code title="dom-VTTCue-direction">direction</code> value
+ </th></tr></thead><tbody>
+ <tr> <td> <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">Horizontal</a>
+ </td><td> "<code title=""></code>" (the empty string)
+ </td></tr><tr> <td> <a title="text track cue vertical growing left writing direction" href="#dfn-text-track-cue-vertical-growing-left-writing-direction" class="internalDFN">Vertical growing left</a>
+ </td><td> "<code title="">rl</code>"
+ </td></tr><tr> <td> <a title="text track cue vertical growing right writing direction" href="#dfn-text-track-cue-vertical-growing-right-writing-direction" class="internalDFN">Vertical growing right</a>
+ </td><td> "<code title="">lr</code>"
+ </td></tr></tbody></table>
+
+ <p>On setting, the <a href="#dfn-text-track-cue-writing-direction" class="internalDFN">text track cue writing direction</a> must be set to the value given in
+ the first cell of the row in the table above whose second cell is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a>
+ match for the new value, if any. If none of the values match, then the user agent must instead
+ throw a <code>SyntaxError</code> exception.</p>
+
+ <p>The <dfn title="dom-VTTCue-snapToLines" id="dfn-dom-vttcue-snaptolines"><code>snapToLines</code></dfn> attribute, on
+ getting, must return true if the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text
+ track cue</a> that the <code>VTTCue</code> object represents is set; or false otherwise.
+ On setting, the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> must be set if the new value is
+ true, and must be unset otherwise.</p>
+
+ <p>The <dfn title="dom-VTTCue-line" id="dfn-dom-vttcue-line"><code>line</code></dfn> attribute, on getting, must
+ return the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> that the
+ <code>VTTCue</code> object represents. The special value <a title="text track cue
+ automatic line position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a> must be represented as the string "<code title="">auto</code>". On setting, the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</a> must be set to
+ the new value; if the new value is the string "<code title="">auto</code>", then it must be
+ interpreted as the special value <a title="text track cue automatic line
+ position" href="#dfn-text-track-cue-automatic-line-position" class="internalDFN">auto</a>.</p>
+
+ <p>The <dfn title="dom-VTTCue-position" id="dfn-dom-vttcue-position"><code>position</code></dfn> attribute, on getting,
+ must return the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> that
+ the <code>VTTCue</code> object represents. On setting, if the new value is negative or
+ greater than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the
+ <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> must be set to the new value.</p>
+
+ <p>The <dfn title="dom-VTTCue-size" id="dfn-dom-vttcue-size"><code>size</code></dfn> attribute, on getting, must
+ return the <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> that the
+ <code>VTTCue</code> object represents. On setting, if the new value is negative or greater
+ than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the <a href="#dfn-text-track-cue-size" class="internalDFN">text
+ track cue size</a> must be set to the new value.</p>
+
+ <p>The <dfn title="dom-VTTCue-align" id="dfn-dom-vttcue-align"><code>align</code></dfn> attribute, on getting, must
+ return the string from the second cell of the row in the table below whose first cell is the
+ <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> that the
+ <code>VTTCue</code> object represents:</p>
+
+ <table>
+ <thead>
+ <tr> <th><a href="#dfn-text-track-cue-alignment" class="internalDFN">Text track cue alignment</a> </th><th> <code title="dom-VTTCue-align">align</code> value
+ </th></tr></thead><tbody>
+ <tr> <td><a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">Start alignment</a> </td><td> "<code title="">start</code>"
+ </td></tr><tr> <td><a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">Middle alignment</a> </td><td> "<code title="">middle</code>"
+ </td></tr><tr> <td><a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">End alignment</a> </td><td> "<code title="">end</code>"
+ </td></tr><tr> <td><a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">Left alignment</a> </td><td> "<code title="">left</code>"
+ </td></tr><tr> <td><a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">Right alignment</a> </td><td> "<code title="">right</code>"
+ </td></tr></tbody></table>
+
+ <p>On setting, the <a href="#dfn-text-track-cue-alignment" class="internalDFN">text track cue alignment</a> must be set to the value given in the
+ first cell of the row in the table above whose second cell is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match
+ for the new value, if any. If none of the values match, then the user agent must instead throw a
+ <code>SyntaxError</code> exception.</p>
+
+ <p>The <dfn title="dom-VTTCue-text" id="dfn-dom-vttcue-text"><code>text</code></dfn> attribute, on getting, must
+ return the raw <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> of the <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> that the
+ <code>VTTCue</code> object represents. On setting, the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> must
+ be set to the new value.</p>
+
+ <p>The <dfn title="dom-VTTCue-getCueAsHTML" id="dfn-dom-vttcue-getcueashtml"><code>getCueAsHTML()</code></dfn> method must
+ convert the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a> to a <code>DocumentFragment</code> for the
+ <a href="#dfn-script-s-document" class="internalDFN">script's document</a> of the <a href="#dfn-entry-script" class="internalDFN">entry script</a> by applying the <a href="#dfn-webvtt-cue-text-dom-construction-rules" class="internalDFN">WebVTT cue
+ text DOM construction rules</a> to the result of applying the <a href="#dfn-webvtt-cue-text-parsing-rules" class="internalDFN">WebVTT cue text parsing
+ rules</a> to the <a href="#dfn-text-track-cue-text" class="internalDFN">text track cue text</a>.</p>
+
+ </section>
+
+ <section id="extension-of-the-texttrack-interface-for-region-support">
+ <h3 aria-level="2" role="heading" id="h3_extension-of-the-texttrack-interface-for-region-support"><span class="secno">7.2 </span>Extension of the TextTrack interface for region support</h3>
+
+ <p>The following attribute and methods are introduced into the <a href="#dfn-texttrack" class="internalDFN">TextTrack</a> object:</p>
+
+ <pre class="idl_whatwg">interface <a href="#dfn-texttrack" class="internalDFN">TextTrack</a> : EventTarget {
+ attribute VTTRegionList? <a title="dom-TextTrack-regions" href="#dfn-dom-texttrack-regions" class="internalDFN">regions</a>;
+ void <a title="dom-TextTrack-addRegion" href="#dfn-dom-texttrack-addregion" class="internalDFN">addRegion</a>(<a href="#dfn-vttregion" class="internalDFN">VTTRegion</a> region);
+ void <a title="dom-TextTrack-removeRegion" href="#dfn-dom-texttrack-removeregion" class="internalDFN">removeRegion</a>(<a href="#dfn-vttregion" class="internalDFN">VTTRegion</a> region);
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">textTrack</var> . <a title="dom-TextTrack-regions" href="#dfn-dom-texttrack-regions" class="internalDFN">regions</a></dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>, as a <code>VTTRegionList</code> object.</p>
+ </dd>
+
+ <dt><var title="">textTrack</var> . <a title="dom-TextTrack-addRegion" href="#dfn-dom-texttrack-addregion" class="internalDFN">addRegion</a>(region)</dt>
+ <dd>
+ <p>Adds the given region to <var>TextTrack</var>'s <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>. If that list already contains a region with the same identifier, update that region's attributes with those of <var>region</var>.</p>
+ </dd>
+
+ <dt><var title="">textTrack</var> . <a title="dom-TextTrack-removeRegion" href="#dfn-dom-texttrack-removeregion" class="internalDFN">removeRegion</a>(region)</dt>
+ <dd>
+ <p>Removes the given region from <var>TextTrack</var>'s <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p>
+ </dd>
+
+ </dl>
+
+ <p>If the <a href="#dfn-text-track-mode" class="internalDFN">text track mode</a> of the <a href="#dfn-text-track" class="internalDFN">text track</a> that the <var>TextTrack</var> object represents is not the <a href="#dfn-text-track-disabled" class="internalDFN">text track disabled</a> mode, then the <dfn title="dom-texttrack-regions" id="dfn-dom-texttrack-regions">regions</dfn> attribute must return a live <a href="#dfn-vttregionlist" class="internalDFN">VTTRegionList</a> object that represents the <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a> of the <a href="#dfn-text-track" class="internalDFN">text track</a>. Otherwise, it must return null. When an object is returned, the same object must be returned each time.</p>
+
+ <p>The <dfn title="dom-TextTrack-addRegion" id="dfn-dom-texttrack-addregion"><code>addRegion(<var>region</var>)</code></dfn> method of <code>TextTrack</code> objects, when invoked, must run the following steps:</p>
+
+ <ol>
+ <li><p>If the given <var>region</var> is in a <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>, then remove <var>region</var> from that <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p></li>
+
+ <li><p>If the method's <a href="#dfn-texttrack" class="internalDFN"><code>TextTrack</code></a> object's <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a> contains a region with the same identifier as <var>region</var> replace the values of that region's <var>width</var>, <var>lines</var>, <var>anchor point</var>, <var>viewport anchor point</var> and <var>scroll</var> attributes with those of <var>region</var>.</p>
+
+ <p>Otherwise: add <var>region</var> to the method's <code>TextTrack</code> object's <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p></li>
+ </ol>
+
+ <p>The <dfn title="dom-TextTrack-removeRegion" id="dfn-dom-texttrack-removeregion"><code>removeRegion(<var>region</var>)</code></dfn> method of <code>TextTrack</code> objects, when invoked, must run the following steps:</p>
+
+ <ol>
+ <li><p>If the given <var>region</var> is not currently listed in the method's <code>TextTrack</code> object's <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>, then throw a NotFoundError exception.</p></li>
+
+ <li><p>Otherwise: remove <var>region</var> from that <a href="#dfn-text-track-list-of-regions" class="internalDFN">text track list of regions</a>.</p></li>
+ </ol>
+
+ </section><!-- TextTrack interface -->
+
+ <section id="vttregion-interface">
+ <h3 aria-level="2" role="heading" id="h3_vttregion-interface"><span class="secno">7.3 </span>VTTRegion interface</h3>
+
+ <p>The following interface is used to expose WebVTT regions in the DOM API:</p>
+
+ <pre class="idl_whatwg">[Constructor]
+interface <dfn id="dfn-vttregion">VTTRegion</dfn> : EventTarget {
+ readonly attribute TextTrack? <a title="dom-VTTRegion-track" href="#dfn-dom-vttregion-track" class="internalDFN">track</a>;
+ attribute DOMString <a title="dom-VTTRegion-id" href="#dfn-dom-vttregion-id" class="internalDFN">id</a>;
+ attribute double <a title="dom-VTTRegion-width" href="#dfn-dom-vttregion-width" class="internalDFN">width</a>;
+ attribute long <a title="dom-VTTRegion-lines" href="#dfn-dom-vttregion-lines" class="internalDFN">lines</a>;
+ attribute double <a title="dom-VTTRegion-regionAnchorX" href="#dfn-dom-vttregion-regionanchorx" class="internalDFN">regionAnchorX</a>;
+ attribute double <a title="dom-VTTRegion-regionAnchorY" href="#dfn-dom-vttregion-regionanchory" class="internalDFN">regionAnchorY</a>;
+ attribute double <a title="dom-VTTRegion-viewportAnchorX" href="#dfn-dom-vttregion-viewportanchorx" class="internalDFN">viewportAnchorX</a>;
+ attribute double <a title="dom-VTTRegion-viewportAnchorY" href="#dfn-dom-vttregion-viewportanchory" class="internalDFN">viewportAnchorY</a>;
+ attribute DOMString <a title="dom-VTTRegion-scroll" href="#dfn-dom-vttregion-scroll" class="internalDFN">scroll</a>;
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">region</var> = new <code title="dom-VTTRegion">VTTRegion</code>()</dt>
+ <dd>
+ <p>Returns a new <code>VTTRegion</code> object, for use with the <code title="dom-TextTrack-addRegion">addRegion()</code> method.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-track" href="#dfn-dom-vttregion-track" class="internalDFN">track</a></dt>
+ <dd>
+ <p>Returns the <var>TextTrack</var> object to which this text track region belongs, if any, or null otherwise.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-id" href="#dfn-dom-vttregion-id" class="internalDFN">id</a></dt>
+ <dd>
+ <p>Returns the text track region identifier. Can be set.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-width" href="#dfn-dom-vttregion-width" class="internalDFN">width</a></dt>
+ <dd>
+ <p>Returns the text track 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.0% .. 100.0%.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-lines" href="#dfn-dom-vttregion-lines" class="internalDFN">lines</a></dt>
+ <dd>
+ <p>Returns the text track region height as a number of lines. Can be set.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-regionAnchorX" href="#dfn-dom-vttregion-regionanchorx" class="internalDFN">regionAnchorX</a></dt>
+ <dd>
+ <p>Returns the text track 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.0% .. 100.0%.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-regionAnchorX" href="#dfn-dom-vttregion-regionanchorx" class="internalDFN">regionAnchorX</a></dt>
+ <dd>
+ <p>Returns the text track 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.0% .. 100.0%.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-viewportAnchorX" href="#dfn-dom-vttregion-viewportanchorx" class="internalDFN">viewportAnchorX</a></dt>
+ <dd>
+ <p>Returns the text track 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.0% .. 100.0%.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-viewportAnchorY" href="#dfn-dom-vttregion-viewportanchory" class="internalDFN">viewportAnchorY</a></dt>
+ <dd>
+ <p>Returns the text track 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.0% .. 100.0%.</p>
+ </dd>
+
+ <dt><var title="">region</var> . <a title="dom-VTTRegion-scroll" href="#dfn-dom-vttregion-scroll" class="internalDFN">scroll</a></dt>
+ <dd><p>Returns a string representing the <a href="#dfn-text-track-region-scroll" class="internalDFN">text track region scroll</a> as follows:</p>
+ <dl class="switch">
+ <dt>If it is unset.</dt>
+ <dd><p>The empty string.</p></dd>
+ <dt>If it is up</dt>
+ <dd><p>The string "<code>up</code>".</p></dd>
+ </dl>
+ <p>Can be set.</p>
+ </dd>
+ </dl>
+
+ <p>The <dfn title="dom-VTTRegion" id="dfn-dom-vttregion"><code>VTTRegion()</code></dfn> constructor, when invoked, must run the following steps:</p>
+
+ <ol>
+ <li><p>Create a new <a href="#dfn-text-track-region" class="internalDFN">text track region</a>. Let <var>region</var> be that <a href="#dfn-text-track-region" class="internalDFN">text track region</a>.</p></li>
+
+ <!-- default settings -->
+ <li><p>Let <var>region</var>'s <a href="#dfn-text-track-region-identifier" class="internalDFN">text track region identifier</a> be the empty string.</p></li>
+
+ <li><p>Let <var>region</var>'s <a href="#dfn-text-track-region-width" class="internalDFN">text track region width</a> be 100.</p></li>
+
+ <li><p>Let <var>region</var>'s <a href="#dfn-text-track-region-lines" class="internalDFN">text track region lines</a> be 3.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region anchor" href="#dfn-text-track-region-anchor" class="internalDFN">text track region regionAnchorX</a> be 0.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region anchor" href="#dfn-text-track-region-anchor" class="internalDFN">text track region regionAnchorY</a> be 100.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region viewport anchor" href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewportAnchorX</a> be 0.</p></li>
+
+ <li><p>Let <var>region</var>'s <a title="text track region viewport anchor" href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewportAnchorY</a> be 100.</p></li>
+
+ <li><p>Let <var>region</var>'s <a href="#dfn-text-track-region-scroll" class="internalDFN">text track region scroll</a> be the empty string.</p></li>
+
+ <li><p>Return the <code>VTTRegion</code> object representing region.</p></li>
+ </ol>
+
+ <p>The <dfn title="dom-VTTRegion-track" id="dfn-dom-vttregion-track"><code>track</code></dfn> attribute, on getting, must return the <code>TextTrack</code> object of the <a href="#dfn-text-track" class="internalDFN">text track</a> in whose list of regions the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents finds itself, if any; or null otherwise.</p>
+
+ <p>The <dfn title="dom-VTTRegion-id" id="dfn-dom-vttregion-id"><code>id</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-identifier" class="internalDFN">text track region identifier</a> of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <a href="#dfn-vttregion" class="internalDFN"><code>VTTRegion</code></a> object represents. On setting, the <a href="#dfn-text-track-region-identifier" class="internalDFN">text track region identifier</a> must be set to the new value.</p>
+
+ <p>The <dfn title="dom-VTTRegion-width" id="dfn-dom-vttregion-width"><code>width</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-width" class="internalDFN">text track region width</a> of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, in percent of video width. On setting, the <a href="#dfn-text-track-region-width" class="internalDFN">text track region width</a> must be set to the new value, interpreted as a percentage.</p>
+
+ <p>The <dfn title="dom-VTTRegion-lines" id="dfn-dom-vttregion-lines"><code>lines</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-lines" class="internalDFN">text track region lines</a> of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, as number of lines. On setting, the <a href="#dfn-text-track-region-lines" class="internalDFN">text track region lines</a> must be set to the new value, interpreted as a number of lines.</p>
+
+ <p>The <dfn title="dom-VTTRegion-regionAnchorX" id="dfn-dom-vttregion-regionanchorx"><code>regionAnchor X</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor</a> X offset of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, in percent of region width. On setting, the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor</a> X distance must be set to the new value, interpreted as a percentage.</p>
+
+ <p>The <dfn title="dom-VTTRegion-regionAnchorY" id="dfn-dom-vttregion-regionanchory"><code>regionAnchor Y</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor</a> Y offset of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, in percent of region height. On setting, the <a href="#dfn-text-track-region-anchor" class="internalDFN">text track region anchor</a> Y distance must be set to the new value, interpreted as a percentage.</p>
+
+ <p>The <dfn title="dom-VTTRegion-viewportAnchorX" id="dfn-dom-vttregion-viewportanchorx"><code>viewportAnchor X</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> X offset of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, in percent of video width. On setting, the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> X distance must be set to the new value, interpreted as a percentage.</p>
+
+ <p>The <dfn title="dom-VTTRegion-viewportAnchorY" id="dfn-dom-vttregion-viewportanchory"><code>viewportAnchor Y</code></dfn> attribute, on getting, must return the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> Y offset of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents, in percent of video height. On setting, the <a href="#dfn-text-track-region-viewport-anchor" class="internalDFN">text track region viewport anchor</a> Y distance must be set to the new value, interpreted as a percentage.</p>
+
+ <p>The <dfn title="dom-VTTRegion-scroll" id="dfn-dom-vttregion-scroll"><code>scroll</code></dfn> attribute, on getting, must return the string from the second cell of the row in the table below whose first cell is the <a href="#dfn-text-track-region-scroll" class="internalDFN">text track region scroll</a> setting of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> that the <code>VTTRegion</code> object represents:</p>
+ <table>
+ <thead>
+ <tr> <th> <a href="#dfn-text-track-region-scroll" class="internalDFN">Text track region scroll</a> setting
+ </th><th> <code id="dom-VTTRegion-scroll">scroll</code> value
+ </th></tr></thead><tbody>
+ <tr> <td> <a title="text track region scroll none" href="#dfn-text-track-region-scroll-none" class="internalDFN">None</a>
+ </td><td> "<code></code>" (the empty string)
+ </td></tr><tr> <td> <a title="text track region scroll up" href="#dfn-text-track-region-scroll-up" class="internalDFN">Up</a>
+ </td><td> "<code>up</code>"
+ </td></tr></tbody></table>
+
+ <p>On setting, the <a href="#dfn-text-track-region-scroll" class="internalDFN">text track region scroll</a> must be set to the value given on the first cell of the row in the table above whose second cell is a <a href="#dfn-case-sensitive" class="internalDFN">case-sensitive</a> match for the new value, if any. If none of the values match, then the user agent must instead throw a <code>SyntaxError</code> exception.</p>
+
+ </section><!-- end VTTRegion object -->
+
+ <section id="vttregionlist-interface">
+ <h3 aria-level="2" role="heading" id="h3_vttregionlist-interface"><span class="secno">7.4 </span>VTTRegionList interface</h3>
+
+ <pre class="idl_whatwg">interface <dfn id="dfn-vttregionlist">VTTRegionList</dfn> : EventTarget {
+ readonly attribute unsigned long <a title="dom-VTTRegionList-length" href="#dfn-dom-vttregionlist-length" class="internalDFN">length</a>;
+ getter <a title="dom-VTTRegion" href="#dfn-dom-vttregion" class="internalDFN">VTTRegion</a> (unsigned long index);
+ <a href="#dfn-vttregion" class="internalDFN">VTTRegion</a>? <a title="dom-VTTRegionList-getRegionById" href="#dfn-dom-vttregionlist-getregionbyid" class="internalDFN">getRegionById</a>(DOMString id);
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">regionList</var> . <a title="dom-VTTRegionList-length" href="#dfn-dom-vttregionlist-length" class="internalDFN">length</a></dt>
+ <dd>
+ <p>Returns the number of <var>regions</var> in the list.</p>
+ </dd>
+
+ <dt><var title="">regionList</var>[index]</dt>
+ <dd>
+ <p>Returns the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> with index <var>index</var> in the list. The regions are sorted in the order in which they were inserted.</p>
+ </dd>
+
+ <dt><var title="">regionList</var> . <a title="dom-VTTRegionList-getRegionById" href="#dfn-dom-vttregionlist-getregionbyid" class="internalDFN">getRegionById</a>( id )</dt>
+ <dd>
+ <p>Returns the first <a href="#dfn-text-track-region" class="internalDFN">text track region</a> with <a href="#dfn-text-track-region-identifier" class="internalDFN">text track region identifier</a> <var>id</var>.</p>
+ <p>Returns null if none of the regions have the given identifier or if the argument is the empty string.</p>
+ </dd>
+ </dl>
+
+ <p>A <code>VTTRegionList</code> object represents a dynamically updating list of <a title="text track region" href="#dfn-text-track-region" class="internalDFN">text track regions</a> in a given order.</p>
+
+ <p>The <dfn title="dom-VTTRegionList-length" id="dfn-dom-vttregionlist-length"><code>length</code></dfn> attribute must return the number of <a title="text track region" href="#dfn-text-track-region" class="internalDFN">regions</a> in the list represented by the <code>VTTRegionList</code> object.</p>
+
+ <p>The <a href="#dfn-supported-property-indices" class="internalDFN">supported property indices</a> of a <code>VTTRegionList</code> object at any instant are the numbers from zero to the number of <a title="text track region" href="#dfn-text-track-region" class="internalDFN">regions</a> in the list represented by the <code>VTTRegionList</code> object minus one, if any. If there are no <a title="text track region" href="#dfn-text-track-region" class="internalDFN">regions</a> in the list, there are no <a href="#dfn-supported-property-indices" class="internalDFN">supported property indices</a>.</p>
+
+ <p>To <a href="#dfn-determine-the-value-of-an-indexed-property" class="internalDFN">determine the value of an indexed property</a> for a given index <var>index</var>, the user agent must return the <var>index</var> of the <a href="#dfn-text-track-region" class="internalDFN">text track region</a> in the list represented by the <code>VTTRegionList</code> object.</p>
+
+ <p>The <dfn title="dom-VTTRegionList-getRegionById" id="dfn-dom-vttregionlist-getregionbyid"><code>getRegionById(<var>id</var>)</code></dfn> method, when called with an argument other than the empty string, must return the first <a href="#dfn-text-track-region" class="internalDFN">text track region</a> in the list represented by the <code>VTTRegionList</code> object whose <a href="#dfn-text-track-region-identifier" class="internalDFN">text track region identifier</a> is <var>id</var>, if any, or null otherwise. If the argument is the empty string, then the method must return null.</p>
+ <p>
+
+ </p></section><!-- end VTTRegionList object -->
+
+ </section><!-- WebVTT API for browsers -->
+
+ <section typeof="bibo:Chapter" resource="#iana" rel="bibo:chapter" id="iana-considerations">
+ <!--OddPage--><h2 id="iana" aria-level="1" role="heading"><span class="secno">8. </span>IANA considerations</h2>
+ <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
+
+ <section id="text-vtt">
+ <h3 aria-level="2" role="heading" id="h3_text-vtt"><span class="secno">8.1 </span><dfn id="dfn-text-vtt"><code>text/vtt</code></dfn></h3>
+
+ <p>This registration is for community review and will be submitted
+ to the IESG for review, approval, and registration with IANA.</p>
+
+ <!--
+ To: ietf-types@iana.org
+ Subject: Registration of media type text/cues
+ -->
+
+ <dl>
+ <dt>Type name:</dt>
+ <dd>text</dd>
+ <dt>Subtype name:</dt>
+ <dd>vtt</dd>
+ <dt>Required parameters:</dt>
+ <dd>No parameters</dd>
+ <dt>Optional parameters:</dt>
+ <dd>No parameters</dd>
+ <dt>Encoding considerations:</dt>
+ <dd>8bit (always UTF-8)</dd>
+<!--ADD-TOPIC:Security-->
+ <dt>Security considerations:</dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+<!--REMOVE-TOPIC:Security-->
+ <dt>Interoperability considerations:</dt>
+ <dd>
+ <p>Rules for processing both conforming and non-conforming content
+ are defined in this specification.</p>
+ </dd>
+ <dt>Published specification:</dt>
+ <dd>
+ This document is the relevant specification.
+ </dd>
+ <dt>Applications that use this media type:</dt>
+ <dd>
+ Web browsers and other video players.
+ </dd>
+ <dt>Additional information:</dt>
+ <dd>
+ <dl>
+ <dt>Magic number(s):</dt>
+ <dd>
+ <p>WebVTT files all begin with one of the following byte sequences (where "EOF" means the end of the file):</p>
+ <ul class="brief">
+ <li> EF BB BF 57 45 42 56 54 54 0A
+ </li><li> EF BB BF 57 45 42 56 54 54 0D
+ </li><li> EF BB BF 57 45 42 56 54 54 20
+ </li><li> EF BB BF 57 45 42 56 54 54 09
+ </li><li> EF BB BF 57 45 42 56 54 54 EOF
+ </li><li> 57 45 42 56 54 54 0A
+ </li><li> 57 45 42 56 54 54 0D
+ </li><li> 57 45 42 56 54 54 20
+ </li><li> 57 45 42 56 54 54 09
+ </li><li> 57 45 42 56 54 54 EOF
+ </li></ul>
+ <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_32"><span>Note</span></div><p class="">(An optional UTF-8 BOM, the ASCII string "<code title="">WEBVTT</code>", and finally a space, tab, line break, or the end of the file.)
+ </p></div></dd>
+ <dt>File extension(s):</dt>
+ <dd>"<code title="">vtt</code>"</dd>
+ <dt>Macintosh file type code(s):</dt>
+ <dd>No specific Macintosh file type codes are recommended for this type.</dd>
+ </dl>
+ </dd>
+ <dt>Person & email address to contact for further information:</dt>
+ <dd>Silvia Pfeiffer <silviapfeiffer1@gmail.com></dd>
+ <dt>Intended usage:</dt>
+ <dd>Common</dd>
+ <dt>Restrictions on usage:</dt>
+ <dd>No restrictions apply.</dd>
+ <dt>Authors:</dt>
+ <dd>Silvia Pfeiffer <silviapfeiffer1@gmail.com>, Ian Hickson <ian@hixie.ch></dd>
+ <dt>Change controller:</dt>
+ <dd>W3C</dd>
+ </dl>
+
+ <p>Fragment identifiers have no meaning with
+ <code>text/vtt</code> resources.</p>
+
+ </section>
+
+ </section>
+
+ <section typeof="bibo:Chapter" resource="#references" rel="bibo:chapter" id="references-1">
+ <!--OddPage--><h2 class="no-num" id="references" aria-level="1" role="heading"><span class="secno">9. </span>References</h2><!--REFS-->
+
+ <p>All references are normative unless marked "Non-normative".</p>
+
+ <dl>
+<!--REFERENCES ON-->
+
+ <dt id="refsBCP47">[BCP47]</dt>
+ <dd><cite><a href="http://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages; Matching of Language Tags</a></cite>, A. Phillips, M. Davis. IETF.</dd>
+
+ <dt id="refsBIDI">[BIDI]</dt>
+ <dd><cite><a href="http://www.unicode.org/reports/tr9/">UAX #9: Unicode Bidirectional Algorithm</a></cite>, M. Davis. Unicode Consortium.</dd>
+
+ <dt id="refsCSS">[CSS]</dt>
+ <dd><cite><a href="http://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1</a></cite>, B. Bos, T. Çelik, I. Hickson, H. Lie. W3C.</dd>
+
+ <dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
+ <dd><cite><a href="http://dev.w3.org/csswg/css3-color/">CSS Color Module Level 3</a></cite>, T. Çelik, C. Lilley, L. Baron. W3C.</dd>
+
+ <dt id="refsCSSRUBY">[CSSRUBY]</dt>
+ <dd><cite><a href="http://dev.w3.org/csswg/css3-ruby/">CSS3 Ruby Module</a></cite>, R. Ishida. W3C.</dd>
+
+ <dt id="refsCSSVALUES">[CSSVALUES]</dt>
+ <dd><cite><a href="http://dev.w3.org/csswg/css3-values/">CSS3 Values and Units</a></cite>, H. Lie, T. Atkins, E. Etemad. W3C.</dd>
+
+ <dt id="refsHTML">[HTML]</dt>
+ <dd><cite><a href="http://www.whatwg.org/specs/web-apps/current-work/">HTML</a></cite>, I. Hickson. WHATWG.</dd>
+
+ <dt id="refsHTML5">[HTML5]</dt>
+ <dd><cite><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html">HTML 5.1</a></cite>, R. Berjon, T. Leithead, E. Doyle Navara, E. O'Connor, S. Pfeiffer. W3C.</dd>
+
+ <dt id="refsRFC3629">[RFC3629]</dt>
+ <dd><cite><a href="http://tools.ietf.org/html/rfc3629">UTF-8, a transformation format of ISO 10646</a></cite>, F. Yergeau. IETF.</dd>
+
+ <dt id="refsSELECTORS">[SELECTORS]</dt>
+ <dd><cite><a href="http://dev.w3.org/csswg/selectors4/">Selectors</a></cite>, E. Etemad, T. Çelik, D. Glazman, I. Hickson, P. Linss, J. Williams. W3C.</dd>
+
+<!--REFERENCES OFF-->
+ </dl>
+
+ </section>
+
+
+ <section id="acknowledgements">
+ <!--OddPage--><h2 class="no-num" aria-level="1" role="heading" id="h2_acknowledgements"><span class="secno">10. </span>Acknowledgements</h2> <!-- ACKS -->
+
+ <p>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.</p>
+
+ <p>Thanks to the many contributors to the HTML standard, where WebVTT was originally specified. <a href="#refsHTML">[HTML]</a>, <a href="#refsHTML5">[HTML5]</a></p>
+
+ <p>Thanks to the following active contributors to this spec:
+ Victor Carbune,
+ Eric Carlson,
+ Anna Cavender,
+ Cyril Concolato,
+ John Foliot,
+ Lawrence Forooghian,
+ Ralph Giles,
+ Loretta Guarino Reid,
+ Philip Jägenstedt,
+ Anne van Kesteren,
+ Glenn Maynard,
+ Ronny Mennerich,
+ Ms2ger,
+ Frank Olivier,
+ Giuseppe Pascale,
+ Simon Pieters,
+ David Singer.
+ </p>
+
+ </section>
+
+
+<form style="position: fixed; width: 10em; top: 1em; right: 1em; font-family: Tahoma, sans-serif; font-size: 11px; opacity: 0.8; text-align: right; " action="//www.w3.org/Bugs/Public/enter_bug.cgi" target="_blank">See a problem? Select text and <input type="submit" accesskey="f" style="font-family: Tahoma, sans-serif; font-size: 10px; " value="file a bug"><input type="hidden" name="comment" value=""><input type="hidden" name="short_desc" value="[WebVTT] "><input type="hidden" name="product" value="TextTracks CG"><input type="hidden" name="component" value="WebVTT">.</form></body></html>
\ No newline at end of file