WebVTT spec moved to GitHub.
Point Mercurial repository there and at the published spec.
--- a/webvtt/Overview.html Sat Dec 14 19:41:31 2013 +1100
+++ b/webvtt/Overview.html Mon Jan 20 17:06:40 2014 +1100
@@ -1,5743 +1,12 @@
<!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>
+<html lang='en-US-x-hixie'>
+ <head>
<title>WebVTT: The Web Video Text Tracks Format</title>
- <meta charset="utf-8">
- <!-- local copy:
- <script src='../../respec/builds/respec-w3c-common-3.2.4.js' async class='remove'></script>
- -->
- <!-- remote copy: -->
-
-
- <!-- script to register bugs -->
-
- <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: rgba(255, 255, 255, 0.6);
- top: 5em !important;
- }
- </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"><!--[if lt IE 9]><script src='https://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]--></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 style="" 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="https://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-12-13T21:41:01.000Z" id="draft-community-group-specification-14-december-2013">Draft Community Group Specification <time class="dt-published" datetime="2013-12-14">14 December 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>Previous editor's draft:</dt>
- <dd><a href="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</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="#ref" 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="#ref" 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 is being developed as a Living Specification. There is a plan to take a snapshot and publish it as a W3C Recommendation through the <a href="http://www.w3.org/AudioVideo/TT/">W3C Timed Text Working Group</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 how to position cues at explicit positions in the video viewport.</p>
-
- <pre>WEBVTT
-
-00:00:00.000 --> 00:00:04.000 position:10%,start align:start size:35%
-Where did he go?
-
-00:00:03.000 --> 00:00:06.500 position:90% align:end size:35%
-I think he went down this lane.
-
-00:00:04.000 --> 00:00:06.500 position:45%,end align:middle size:35%
-What are you waiting for?</pre>
-
- <p>The cues cover only 35% of the video viewport's width. The first cue has its <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> left aligned at the 10% mark of the video viewport width and the text is left aligned within that box - probably underneath a speaker on the left of the video image. "start" alignment of the cue box is the default for start aligned text, so does not need to be specified in "position". The second cue has its <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> right aligned at the 90% mark of the video viewport width. The same effect can be achieved with "position:55%,start", which explicitly positions the cue box. The third cue has middle aligned text within the same type of cue box as the first cue.</p>
- </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 box" id="dfn-text-track-cue-box">A cue box</dfn>
- </dt><dd>
- <p>The cue box of a <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> is a box within which the text of all lines of the
- cue is to be rendered.</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 title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> within the video frame's dimensions depends
- on the value of the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> and the <a href="#dfn-text-track-cue-line-position" class="internalDFN">text track cue line position</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 title="text track cue box" href="#dfn-text-track-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 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>The writing direction is a property of the text inside the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> which
- influences the interpretation of the positioning settings of the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>.</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 the <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 cue line position</dfn>
- </dt><dd>
- <p>The line position defines positioning of the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>.</p>
-
- <p>A line position is 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 <a title="Text track cue active flag" href="#dfn-text-track-cue-active-flag" class="internalDFN">active</a> 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 line alignment" id="dfn-text-track-cue-line-alignment">A cue line alignment</dfn>
- </dt><dd>
- <p>An alignment for the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>'s <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a>,
- one of:</p>
-
- <dl>
-
- <dt><dfn title="text track cue line start alignment" id="dfn-text-track-cue-line-start-alignment">Start alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>'s top side (for
- <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> cues),
- left side (for
- <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>),
- or right side (for
- <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>)
- is aligned at the <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a>.
- </dd>
-
- <dt><dfn title="text track cue line middle alignment" id="dfn-text-track-cue-line-middle-alignment">Middle alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> is centered at the
- <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a>.
- </dd>
-
- <dt><dfn title="text track cue line end alignment" id="dfn-text-track-cue-line-end-alignment">End alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>'s bottom side (for
- <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> cues),
- right side (for
- <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>),
- or left side (for
- <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>)
- is aligned at the <a title="text track cue line position" href="#dfn-text-track-cue-line-position" class="internalDFN">line position</a>.
- </dd>
-
- </dl>
-
- <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a default <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> of <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start</a>.</p>
-
- </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 <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>, 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>.</p>
-
- <p>By default, the <a href="#dfn-text-track-cue-size" class="internalDFN">text track cue size</a> is 100%.</p>
-
- </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 <a title="text track cue box" href="#dfn-text-track-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 video, as defined by the
- <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a>, otherwise to be interpreted
- as a percentage of the region width.</p>
-
- <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a <df>default text track cue text position which is defined
- in terms of the value of the <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a>:</df></p>
-
- <ol>
-
- <li>For <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left aligned</a> or
- <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 right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right aligned</a> or
- <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end aligned</a> cues: 100%.</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-alignment" class="internalDFN">text track cue text alignment</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-text-alignment" class="internalDFN">text track cue text 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>
-
- <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_4"><span>Note</span></div><p class="">Even for <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a>
- cues with right-to-left <i>paragraph direction</i> text, the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>
- is positioned from the left edge of the video frame. This allows defining a rendering space template
- which can be filled with either left-to-right or right-to-left <i>paragraph direction</i> text. If you
- define such a <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> template with
- <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start</a> or <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end</a>
- aligned text, make sure to control its <a title="text track cue size" href="#dfn-text-track-cue-size" class="internalDFN">size</a> unless you want
- text to flip from one side of the video frame to the other.</p></div>
-
- </dd>
-
- <dt><dfn title="text track cue text position alignment" id="dfn-text-track-cue-text-position-alignment">A text position alignment</dfn>
- </dt><dd>
- <p>An alignment for the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> in the dimension of the
- <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a>, describing which part of the
- <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> is aligned to the <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a>,
- one of:</p>
-
- <dl>
-
- <dt><dfn title="text track cue text position start alignment" id="dfn-text-track-cue-text-position-start-alignment">Start alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>'s left side (for
- <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> cues) or top
- side (otherwise) is aligned at the <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a>.
- </dd>
-
- <dt><dfn title="text track cue text position middle alignment" id="dfn-text-track-cue-text-position-middle-alignment">Middle alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> is centered at the <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a>.
- </dd>
-
- <dt><dfn title="text track cue text position end alignment" id="dfn-text-track-cue-text-position-end-alignment">End alignment</dfn></dt>
- <dd>The <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>'s right side (for
- <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> cues) or bottom
- side (otherwise) is aligned at the <a title="text track cue text position" href="#dfn-text-track-cue-text-position" class="internalDFN">text position</a>.
- </dd>
-
- </dl>
-
- <p>A <a href="#dfn-text-track-cue" class="internalDFN">text track cue</a> has a <dfn id="dfn-default-text-track-cue-text-position-alignment">default text track cue text position alignment</dfn>
- which is defined in terms of the value of the <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a>:</p>
-
- <ol>
-
- <li>For <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left</a> or
- <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start</a> aligned cues:
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start</a>.</li>
-
- <li>For <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle</a> aligned cues:
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle</a>.</li>
-
- <li>For <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right</a> or
- <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end</a> aligned cues:
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end</a>.</li>
-
- </ol>
-
- <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_5"><span>Note</span></div><p class="">Since the <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> always measures from the left
- of the video (for <a title="text track cue horizontal writing direction" href="#dfn-text-track-cue-horizontal-writing-direction" class="internalDFN">horizontal</a> cues)
- or the top (otherwise), the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a>
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start value</a> varies between left and
- top for horizontal and vertical cues, but not between left and right even for changing
- <i>paragraph direction</i>.</p></div>
-
- </dd>
-
- <dt><dfn title="text track cue text alignment" id="dfn-text-track-cue-text-alignment">A text alignment</dfn>
- </dt><dd>
-
- <p>An alignment for all lines of text within the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>, in the dimension of the
- <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a> and the
- <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</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 <i>paragraph direction</i> start side of the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>.</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 <i>paragraph direction</i> end side of the <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a>.</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>By default, the value of the <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a> is
- <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle aligned</a>.</p>
-
- </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 text alignment" href="#dfn-text-track-cue-text-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_6"><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_7"><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_8"><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_9"><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_10"><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_11"><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_12"><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_13"><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_14"><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_15"><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_16"><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_17"><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_18"><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_19"><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_20"><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 [writing direction] -->
- <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
- [snap-to-lines & line position & line alignment] -->
- <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%
- [text position & text position alignment] -->
- <li>A <a href="#dfn-webvtt-alignment-cue-setting" class="internalDFN">WebVTT alignment cue setting</a>.</li> <!-- align:start/middle/end/left/right
- [text alignment] -->
- <li>A <a href="#dfn-webvtt-region-cue-setting" class="internalDFN">WebVTT region cue setting</a>.</li> <!-- region:fred [region id] -->
- </ul>
-
- <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-cue-settings-list" class="internalDFN">WebVTT cue settings list</a> gives configuration
- options regarding the position and alignment of the cue box and the cue text within. For
- example, it allows a cue box to be aligned to the left or positioned at the top right with
- the cue text within middle aligned.</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_22"><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>:
- <ol>
- <li>a position value, 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>Or 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>
- <li>An optional alignment value consisting of the following components:
- <ol>
- <li>A U+002C COMMA character (,).</li>
- <li>One of the following strings: <code title="">start</code>, <code title="">middle</code>,
- <code title="">end</code></li>
- </ol>
- </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-line-position-cue-setting" class="internalDFN">WebVTT line position cue setting</a> configures the position of the cue box
- in the direction opposite to the <a title="text track cue writing direction" href="#dfn-text-track-cue-writing-direction" class="internalDFN">writing direction</a>.
- For horizontal cues, this is the vertical
- position. The positioning is calculated relative to the <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start</a>,
- <a title="text track cue line middle alignment" href="#dfn-text-track-cue-line-middle-alignment" class="internalDFN">middle</a>, or <a title="text track cue line end alignment" href="#dfn-text-track-cue-line-end-alignment" class="internalDFN">end</a>
- of the cue box, depending on the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> value -
- <a title="text track cue line middle alignment" href="#dfn-text-track-cue-line-middle-alignment" class="internalDFN">middle</a> by default.
- The position can be given either as a percentage of the video dimension
- or as a line number. Line numbers are based on the size of the first line of the
- cue. Positive line numbers count from the start of the video frame (the first
- line is numbered 0), negative line numbers from the end of the
- frame (the last 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_24"><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 title="text track cue box" href="#dfn-text-track-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 title="text track cue box" href="#dfn-text-track-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>a position value consisting of:
- <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>
- <li>an optional alignment value consisting of:
- <ol>
- <li>A U+002C COMMA character (,).</li>
- <li>One of the following strings: <code title="">start</code>, <code title="">middle</code>,
- <code title="">end</code></li>
- </ol>
- </li>
- </ol>
- </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-text-position-cue-setting" class="internalDFN">WebVTT text position cue setting</a> configures the position of the
- <a title="text track cue box" href="#dfn-text-track-cue-box" class="internalDFN">cue box</a> 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 text position is given as a percentage of the video frame.
- The positioning is calculated relative to the <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start</a>,
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle</a>, or
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end</a>
- of the cue box, depending on the <a href="#dfn-default-text-track-cue-text-position-alignment" class="internalDFN">default text track cue text position alignment</a> value, which is
- overridden by the <a href="#dfn-webvtt-text-position-cue-setting" class="internalDFN">WebVTT text position cue setting</a> alignment value.
- </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_26"><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_27"><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 the first character in <var title="">line</var> is
- a U+FEFF BYTE ORDER MARK (BOM) character, remove it from
- <var title="">line</var>.</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-line-alignment" class="internalDFN">text track cue line alignment</a> be
- <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start alignment</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 title="" href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position alignment" href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">middle alignment</a>.</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-text-alignment" class="internalDFN">text track cue text 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-cue-settings" class="internalDFN">Parse the WebVTT cue 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-cue-settings">Parse the WebVTT cue 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>Let <var title="">positionSet</var> and <var title="">positionAlignSet</var>
- be false. (These are required to determine if the position settings need to be adjusted
- for non-middle aligned cue text.)</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 a U+002C COMMA character (,), then let
- <var title="">linepos</var> be the leading substring of <var title="">value</var> up to and
- excluding the first U+002C COMMA character (,) in that string and let <var title="">linealign</var>
- be the trailing substring of <var title="">value</var> starting from the character immediately
- after the first U+002C COMMA character (,) in that string.</p></li>
-
- <li><p>Otherwise let <var title="">linepos</var> be the full <var title="">value</var> string
- and <var title="">linealign</var> be the empty string.</p></li>
-
- <li><p>If <var title="">linepos</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="">linepos</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="">linepos</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="">linepos</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="">linepos</var> is
- a U+002D HYPHEN-MINUS character (-) <em>and</em> the last
- character in <var title="">linepos</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="">linepos</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="">linepos</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="">linepos</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>
-
- <li><p>If <var title="">linealign</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-line-alignment" class="internalDFN">text track cue line alignment</a> be
- <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start alignment</a>.</p></li>
-
- <li><p>If <var title="">linealign</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-line-alignment" class="internalDFN">text track cue line alignment</a> be
- <a title="text track cue line middle alignment" href="#dfn-text-track-cue-line-middle-alignment" class="internalDFN">middle alignment</a>.</p></li>
-
- <li><p>If <var title="">linealign</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-line-alignment" class="internalDFN">text track cue line alignment</a> be
- <a title="text track cue line end alignment" href="#dfn-text-track-cue-line-end-alignment" class="internalDFN">end alignment</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="">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 a U+002C COMMA character (,), then let
- <var title="">colpos</var> be the leading substring of <var title="">value</var> up to and
- excluding the first U+002C COMMA character (,) in that string and let <var title="">colalign</var>
- be the trailing substring of <var title="">value</var> starting from the character immediately
- after the first U+002C COMMA character (,) in that string.</p></li>
-
- <li><p>Otherwise let <var title="">colpos</var> be the full <var title="">value</var> string
- and <var title="">colalign</var> be the empty string.</p></li>
-
- <li><p>If <var title="">colpos</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="">colpos</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="">colpos</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="">colpos</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="">colpos</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> and let <var title="">positionSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</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-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</a>
- and let <var title="">positionAlignSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</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-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</a>
- and let <var title="">positionAlignSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</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-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a>
- and let <var title="">positionAlignSet</var> 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="">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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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><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>
-
- <li><p>If <var title="">positionSet</var> is false (i.e. the cue box has not been explicitly
- positioned with a position setting), and <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a>
- is not <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a>, then adjust the
- <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> as follows:
-
- </p><dl>
- <dt>If <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a> is <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left</a> or
- <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start</a></dt>
- <dd>Let <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> be 0%.</dd>
-
-
- <dt>If <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a> is <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right</a> or
- <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end</a></dt>
- <dd>Let <a href="#dfn-text-track-cue-text-position" class="internalDFN">text track cue text position</a> be 100%.</dd>
-
- </dl>
- </li>
-
- <li><p>If <var title="">positionAlignSet</var> is false (i.e. the cue box has not been explicitly
- position aligned with a position alignment setting), and <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a>
- is not <a title="text track cue middle alignment" href="#dfn-text-track-cue-middle-alignment" class="internalDFN">middle alignment</a>, then adjust the
- <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> as follows:
-
- </p><dl>
- <dt>If <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a> is <a title="text track cue left alignment" href="#dfn-text-track-cue-left-alignment" class="internalDFN">left</a> or
- <a title="text track cue start alignment" href="#dfn-text-track-cue-start-alignment" class="internalDFN">start</a></dt>
- <dd>Let <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</a>.</dd>
-
-
- <dt>If <a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text alignment</a> is <a title="text track cue right alignment" href="#dfn-text-track-cue-right-alignment" class="internalDFN">right</a> or
- <a title="text track cue end alignment" href="#dfn-text-track-cue-end-alignment" class="internalDFN">end</a></dt>
- <dd>Let <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a>.</dd>
-
- </dl>
- </li>
-
- <li><p>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.</p></li>
-
-
- </ol>
-
- <div class="note"><div class="note-title" aria-level="3" role="heading" id="h_note_28"><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_29"><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 href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</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_30"><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> with the same constraints that are used when they are 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 href="#dfn-list-of-webvtt-node-objects" class="internalDFN">list of WebVTT Node Objects</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_31"><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>
- <dl class="switch">
- <dt>If the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</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-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</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> minus
- half of <var title="">size</var>.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</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> minus
- <var title="">size</var>.</p></dd>
- </dl>
- </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>
- <dl class="switch">
- <dt>If the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</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>
-
- <dt>If the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</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> minus
- half of <var title="">size</var>.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a> is
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</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> minus
- <var title="">size</var>.</p></dd>
- </dl>
- </dd>
-
- </dl>
-
- </li>
-
- <li>
-
- <p>Determine the value of whichever of <var title="">x-position</var> or <var title="">y-position</var>
- is not yet calculated 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-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is not set:</dt>
- <dd>
- <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>
- <dl class="switch">
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be 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-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a> minus
- half of the cue box height.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a> minus
- the cue box height.</p></dd>
- </dl>
- </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>
- <dl class="switch">
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>
- minus the cue box width.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>
- minus half of the cue box width.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a>.</p>
- </dd>
- </dl>
- </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>
- <dl class="switch">
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">start alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 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-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a> plus
- half of the cue box width.</p></dd>
-
- <dt>If the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a> is
- <a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a href="#dfn-text-track-cue-computed-line-position" class="internalDFN">text track cue computed line position</a> plus
- the cue box width.</p></dd>
- </dl>
- </dd>
-
- </dl>
- </dd>
-
- <dt>If the <a href="#dfn-text-track-cue-snap-to-lines-flag" class="internalDFN">text track cue snap-to-lines flag</a> is set:</dt>
- <dd>
- <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="">y-position</var> be 0.</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="">x-position</var> be 0.</p>
- </dd>
-
- </dl>
- </dd>
-
- </dl>
- </li>
-
- <li><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'. (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>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-text-alignment" class="internalDFN">text
- track cue text alignment</a>:</p>
-
- <table>
- <thead>
- <tr> <th><a href="#dfn-text-track-cue-text-alignment" class="internalDFN">text track cue text 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_32"><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_33"><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 <a href="#dfn-alignsetting" class="internalDFN">AlignSetting</a> <a title="dom-VTTCue-lineAlign" href="#dfn-dom-vttcue-linealign" class="internalDFN">lineAlign</a>;
- attribute long <a title="dom-VTTCue-position" href="#dfn-dom-vttcue-position" class="internalDFN">position</a>;
- attribute <a href="#dfn-alignsetting" class="internalDFN">AlignSetting</a> <a title="dom-VTTCue-positionAlign" href="#dfn-dom-vttcue-positionalign" class="internalDFN">positionAlign</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-lineAlign" href="#dfn-dom-vttcue-linealign" class="internalDFN">lineAlign</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line alignment</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-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 line middle alignment" href="#dfn-text-track-cue-line-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 line end alignment" href="#dfn-text-track-cue-line-end-alignment" class="internalDFN">end alignment</a></dt>
- <dd><p>The string "<code title="">end</code>".</p></dd>
- </dl>
- <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-positionAlign" href="#dfn-dom-vttcue-positionalign" class="internalDFN">positionAlign</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position alignment</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-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 text position middle alignment" href="#dfn-text-track-cue-text-position-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 text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">end alignment</a></dt>
- <dd><p>The string "<code title="">end</code>".</p></dd>
- </dl>
- <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-text-alignment" class="internalDFN">text track cue text 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-line-alignment" class="internalDFN">text track cue line alignment</a> be
- <a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">start alignment</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-text-position-alignment" class="internalDFN">text track cue text position alignment</a> be
- <a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">middle alignment</a>.</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-text-alignment" class="internalDFN">text track cue text 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-lineAlign" id="dfn-dom-vttcue-linealign"><code>lineAlign</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-line-alignment" class="internalDFN">text track cue line 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-line-alignment" class="internalDFN">text track cue line alignment</a> </th><th> <code title="dom-VTTCue-lineAlign">lineAlign</code> value
- </th></tr></thead><tbody>
- <tr> <td><a title="text track cue line start alignment" href="#dfn-text-track-cue-line-start-alignment" class="internalDFN">Start alignment</a> </td><td> "<code title="">start</code>"
- </td></tr><tr> <td><a title="text track cue line middle alignment" href="#dfn-text-track-cue-line-middle-alignment" class="internalDFN">Middle alignment</a> </td><td> "<code title="">middle</code>"
- </td></tr><tr> <td><a title="text track cue line end alignment" href="#dfn-text-track-cue-line-end-alignment" class="internalDFN">End alignment</a> </td><td> "<code title="">end</code>"
- </td></tr></tbody></table>
-
- <p>On setting, the <a href="#dfn-text-track-cue-line-alignment" class="internalDFN">text track cue line 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-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-positionAlign" id="dfn-dom-vttcue-positionalign"><code>positionAlign</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-text-position-alignment" class="internalDFN">text track cue text position 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-text-position-alignment" class="internalDFN">text track cue text position alignment</a>
- </th><th><code title="dom-VTTCue-positionAlign">positionAlign</code> value
- </th></tr></thead><tbody>
- <tr> <td><a title="text track cue text position start alignment" href="#dfn-text-track-cue-text-position-start-alignment" class="internalDFN">Start alignment</a> </td><td> "<code title="">start</code>"
- </td></tr><tr> <td><a title="text track cue text position middle alignment" href="#dfn-text-track-cue-text-position-middle-alignment" class="internalDFN">Middle alignment</a> </td><td> "<code title="">middle</code>"
- </td></tr><tr> <td><a title="text track cue text position end alignment" href="#dfn-text-track-cue-text-position-end-alignment" class="internalDFN">End alignment</a> </td><td> "<code title="">end</code>"
- </td></tr></tbody></table>
-
- <p>On setting, the <a href="#dfn-text-track-cue-text-position-alignment" class="internalDFN">text track cue text position 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-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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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-text-alignment" class="internalDFN">text track cue text 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="#ref" 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_34"><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="#ref" 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 at the WHATWG and W3C HTML Working Group, 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 id="bug-assist-form" 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><div id="respec-ui" class="removeOnSave" style="position: fixed; top: 20px; right: 20px; width: 202px; text-align: right; "><button style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); font-weight: bold; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; background-position: initial initial; background-repeat: initial initial; ">ReSpec</button><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); width: 200px; display: none; text-align: left; margin-top: 5px; margin-right: 5px; background-position: initial initial; background-repeat: initial initial; "><button style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); width: 100%; text-align: left; font-size: inherit; background-position: initial initial; background-repeat: initial initial; ">Save Snapshot</button><button style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); border-top-style: none; border-right-style: none; border-left-style: none; border-width: initial; border-color: initial; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); width: 100%; text-align: left; font-size: inherit; background-position: initial initial; background-repeat: initial initial; ">About ReSpec</button></div></div></body></html>
\ No newline at end of file
+ <meta charset='utf-8'>
+ </head>
+ <body>
+ <h1>The WebVTT specification has moved</h1>
+ <p>Go to <a href="http://dev.w3.org/html5/webvtt/">the WebVTT specification at the W3C</a>.</p>
+ <p>Go to <a href="https://github.com/w3c/webvtt">the GitHub repository for WebVTT</a>.</p>
+</body>
+</html>
\ No newline at end of file
--- a/webvtt/create_static.sh Sat Dec 14 19:41:31 2013 +1100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,4 +0,0 @@
-#!/bin/bash
-# Converts ReSpec based webvtt spec to static html page
-echo "phantomjs ../../respec/tools/respec2html.js webvtt.html Overview.html"
-phantomjs ../../respec/tools/respec2html.js webvtt.html Overview.html
--- a/webvtt/publish.sh Sat Dec 14 19:41:31 2013 +1100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,28 +0,0 @@
-#!/bin/bash
-# Publishes webvtt spec to cvs
-
-if [ $# -eq 0 ]
-then
- echo $0" error: provide W3C commit message as argument"
- exit 1
-fi
-
-COMMIT_MSG=$1
-
-echo "./create_static.sh"
-./create_static.sh
-
-echo "cp Overview.html ~/Sites/html5/CVS/html5/webvtt/"
-cp Overview.html ~/Sites/html5/CVS/html5/webvtt/
-
-echo "cd ~/Sites/html5/CVS/html5/webvtt"
-cd ~/Sites/html5/CVS/html5/webvtt
-
-echo "OK to commit to W3C with following message (y/n)? "$COMMIT_MSG
-read CONTINUE
-
-if [ $CONTINUE = 'y' -o $CONTINUE = 'Y' ]
-then
- echo "cvs commit -m '$COMMIT_MSG'"
- cvs commit -m "$COMMIT_MSG"
-fi
\ No newline at end of file
--- a/webvtt/webvtt.html Sat Dec 14 19:41:31 2013 +1100
+++ b/webvtt/webvtt.html Mon Jan 20 17:06:40 2014 +1100
@@ -3,5843 +3,10 @@
<head>
<title>WebVTT: The Web Video Text Tracks Format</title>
<meta charset='utf-8'>
- <!-- local copy:
- <script src='../../respec/builds/respec-w3c-common-3.2.4.js' async class='remove'></script>
- -->
- <!-- remote copy: -->
- <script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
- <script class='remove'>
- var respecConfig = {
- // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
- specStatus: "CG-DRAFT",
-
- // the specification's short name, as in http://www.w3.org/TR/short-name/
- shortName: "webvtt",
-
- // if your specification has a subtitle that goes below the main
- // formal title, define it here
- // subtitle : "",
-
- // if you wish the publication date to be other than today, set this
- // publishDate: "2009-08-06",
-
- // if the specification's copyright date is a range of years, specify
- // the start date here:
- copyrightStart: "2011",
-
- // if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
- // and its maturity status
- //previousPublishDate: "2013-03-11",
- //previousMaturity: "WD",
- prevED: "http://dev.w3.org/html5/webvtt/",
-
- // if there a publicly available Editor's Draft, this is the link
- edDraftURI: "https://dvcs.w3.org/hg/text-tracks/raw-file/default/webvtt/Overview.html",
-
- // if this is a LCWD, uncomment and set the end of its review period
- // lcEnd: "2009-08-05",
-
- // editors, add as many as you like
- // only "name" is required
- editors: [
- { name: "Silvia Pfeiffer", url: "mailto:silviapfeiffer1@gmail.com",
- company: "NICTA", companyURL: "http://nicta.com.au/" },
- { name: "Ian Hickson", url: "mailto:ian@hixie.ch",
- company: "Google", companyURL: "http://google.com/", note: "previous editor" },
- ],
-
- // authors, add as many as you like.
- // This is optional, uncomment if you have authors as well as editors.
- // only "name" is required. Same format as editors.
-
- //authors: [
- // { name: "Your Name", url: "http://example.org/",
- // company: "Your Company", companyURL: "http://example.com/" },
- //],
-
- // name of the WG
- wg: "Text Tracks Community Group",
-
- // URI of the public WG page
- wgURI: "http://www.w3.org/community/texttracks/",
-
- // name (without the @w3c.org) of the public mailing to which comments are due
- wgPublicList: "public-texttracks",
-
- // URI of the patent status for this WG, for Rec-track documents
- // !!!! IMPORTANT !!!!
- // This is important for Rec-track documents, do not copy a patent URI from a random
- // document unless you know what you're doing. If in doubt ask your friendly neighbourhood
- // Team Contact.
- wgPatentURI: "",
-
- // formatting
- noIDLIn: "true",
- noIDLSorting: "true",
-
- additionalHeaderContent: "",
- };
- </script>
- <!-- script to register bugs -->
- <script class='remove' 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: rgba(255, 255, 255, 0.6);
- top: 5em !important;
- }
- </style>
</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>
- <section id='abstract'>
- <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'>
- <p>This specification is being developed as a Living Specification. There is a plan to take a snapshot and publish it as a W3C Recommendation through the <a href="http://www.w3.org/AudioVideo/TT/">W3C Timed Text Working Group</a>.
- </p>
- </section>
-
- <section>
- <h2>Introduction</h2>
-
- <p><i>This section is non-normative.</i></p>
-
- <p>The <dfn>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>
- <h3>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>
- <h3>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>
- <h3>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 how to position cues at explicit positions in the video viewport.</p>
-
- <pre>WEBVTT
-
-00:00:00.000 --> 00:00:04.000 position:10%,start align:start size:35%
-Where did he go?
-
-00:00:03.000 --> 00:00:06.500 position:90% align:end size:35%
-I think he went down this lane.
-
-00:00:04.000 --> 00:00:06.500 position:45%,end align:middle size:35%
-What are you waiting for?</pre>
-
- <p>The cues cover only 35% of the video viewport's width. The first cue has its <a title="text track cue box">cue box</a> left aligned at the 10% mark of the video viewport width and the text is left aligned within that box - probably underneath a speaker on the left of the video image. "start" alignment of the cue box is the default for start aligned text, so does not need to be specified in "position". The second cue has its <a title="text track cue box">cue box</a> right aligned at the 90% mark of the video viewport width. The same effect can be achieved with "position:55%,start", which explicitly positions the cue box. The third cue has middle aligned text within the same type of cue box as the first cue.</p>
- </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>
- <h2>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>
- <h3>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>HTML elements</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#script's-document"><dfn>Script's document</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#entry-script"><dfn>Entry script</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#mime-type"><dfn>MIME type</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#utf-8-decode"><dfn>UTF-8 decode</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#case-sensitive"><dfn>Case-sensitive</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#collect-a-sequence-of-characters"><dfn>Collect a sequence of characters</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#ascii-digits"><dfn>ASCII digits</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#alphanumeric-ascii-characters"><dfn>Alphanumeric ASCII characters</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#space-character"><dfn>Space character</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#skip-whitespace"><dfn>Skip whitespace</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#supported-property-indices"><dfn>Supported property indices</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#determine-the-value-of-an-indexed-property"><dfn>Determine the value of an indexed property</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#split-a-string-on-spaces"><dfn>Split a string on spaces</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#html-namespace"><dfn>HTML namespace</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#media-element"><dfn>Media element</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#current-playback-position"><dfn>Current playback position</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#expose-a-user-interface-to-the-user"><dfn>Expose a user interface to the user</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#list-of-text-tracks"><dfn>List of text tracks</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track"><dfn>Text track</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-kind"><dfn>Text track kind</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-mode"><dfn>Text track mode</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-disabled"><dfn>Text track disabled</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-showing"><dfn>Text track showing</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue"><dfn>Text track cue</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-list-of-cues"><dfn>Text track list of cues</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-order"><dfn>Text track cue order</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-identifier"><dfn>Text track cue identifier</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-start-time"><dfn>Text track cue start time</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-end-time"><dfn>Text track cue end time</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-pause-on-exit-flag"><dfn>Text track cue pause-on-exit flag</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-text"><dfn>Text track cue text</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-active-flag"><dfn>Text track cue active flag</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#text-track-cue-display-state"><dfn>Text track cue display state</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#rules-for-updating-the-text-track-rendering"><dfn>Rules for updating the text track rendering</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#rules-for-rendering-the-cue-in-isolation"><dfn>Rules for rendering the cue in isolation</dfn></a>
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#texttrackcue"><dfn><code>TextTrackCue</code></dfn></a> interface
- <li><a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html
-#texttrack"><dfn><code>TextTrack</code></dfn></a> interface
- </ul>
- </section>
- </section>
-
- <section>
- <h2>Data model</h2>
- <!-- Add some content here about cues and serialisation format in general -->
- <!-- Describe metadata, caption/subtitle, chapter & description cues -->
-
- <section>
- <h3>Text Track Cues</h3>
-
- <p>WebVTT cues are HTML <a title="text track cue">text track cues</a> that additionally
- consist of the following: <a href="#refsHTML5">[HTML5]</a></p>
-
- <dl>
-
- <dt><dfn title="text track cue box">A cue box</dfn>
- <dd>
- <p>The cue box of a <a>text track cue</a> is a box within which the text of all lines of the
- cue is to be rendered.</p>
-
- <p class="note">The position of the <a title="text track cue box">cue box</a> within the video frame's dimensions depends
- on the value of the <a>text track cue text position</a> and the <a>text track cue line position</a>.</p>
-
- <p class="note">Lines are wrapped within the <a title="text track cue box">cue box</a>'s
- <a title="text track cue size">size</a> if lines lengths make this necessary.</p>
-
- </dd>
-
- <dt><dfn title="text track cue writing direction">A writing direction</dfn>
- <dd>
- <p>A writing direction, either <dfn title="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">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">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>The writing direction is a property of the text inside the <a title="text track cue box">cue box</a> which
- influences the interpretation of the positioning settings of the <a title="text track cue box">cue box</a>.</p>
-
- <p>If the <a title="text track cue writing direction">writing direction</a> is <a
- title="text track cue horizontal writing direction">horizontal</a>, then the <a title="text
- track cue line position">line position</a> percentages are relative to the height of the
- video, and <a title="text track cue text position">text position</a> and <a title="text
- track cue size">size</a> percentages are relative to the width of the video.</p>
-
- <p>Otherwise, <a title="text track cue line position">line position</a> percentages are
- relative to the width of the video, and <a title="text track cue text position">text
- position</a> and <a title="text track cue size">size</a> percentages are relative to
- the height of the video.</p>
-
- <p>The <a title="text track cue writing direction">writing direction</a> defaults to
- <a title="text track cue horizontal writing direction">horizontal</a>.</p>
-
- </dd>
-
- <dt><dfn title="text track cue snap-to-lines flag">A snap-to-lines flag</dfn>
- <dd>
-
- <p>A boolean indicating whether the <a title="text track cue line position">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>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">snap-to-lines flag</a>
- is set to 'true'.</p>
-
- </dd>
-
- <dt><dfn title="text track cue line position">A cue line position</dfn>
- <dd>
- <p>The line position defines positioning of the <a title="text track cue box">cue box</a>.</p>
-
- <p>A line position is 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">writing direction</a>
- and <a title="text track cue snap-to-lines flag">snap-to-lines flag</a> of the cue, or the special
- value <dfn title="text track cue automatic line position">auto</dfn>, which means the position
- is to depend on the other <a title="Text track cue active flag">active</a> cues.</p>
-
- <p>A <a>text track cue</a> has a <dfn>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>text track cue line position</a> is numeric, the <a>text track cue
- snap-to-lines flag</a> of the <a>text track cue</a> is not set, and the <a>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>text track cue line position</a> is numeric, return the value of the
- <a>text track cue line position</a> and abort these steps. (Either the <a>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>text track cue snap-to-lines flag</a> of the <a>text track cue</a>
- is not set, return the value 100 and abort these steps. (The <a>text track cue line
- position</a> is the special value <a title="text track cue automatic line
- position">auto</a>.)</p></li>
-
- <li><p>Let <var title="">cue</var> be the <a>text track cue</a>.</p></li>
-
- <li><p>If <var title="">cue</var> is not in a <a title="text track list of cues">list of
- cues</a> of a <a>text track</a>, or if that <a>text track</a> is not in the
- <a>list of text tracks</a> of a <a>media element</a>, return −1 and abort
- these steps.</p></li>
-
- <li><p>Let <var title="">track</var> be the <a>text track</a> whose <a title="text
- track list of cues">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">text tracks</a>
- whose <a>text track mode</a> is <a title="text track showing">showing</a> and that
- are in the <a>media element</a>'s <a>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 line alignment">A cue line alignment</dfn>
- <dd>
- <p>An alignment for the <a title="text track cue box">cue box</a>'s <a title="text track cue line position">line position</a>,
- one of:</p>
-
- <dl>
-
- <dt><dfn title="text track cue line start alignment">Start alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a>'s top side (for
- <a title="text track cue horizontal writing direction">horizontal</a> cues),
- left side (for
- <a title="text track cue vertical growing right writing direction">vertical growing right</a>),
- or right side (for
- <a title="text track cue vertical growing left writing direction">vertical growing left</a>)
- is aligned at the <a title="text track cue line position">line position</a>.
- </dd>
-
- <dt><dfn title="text track cue line middle alignment">Middle alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a> is centered at the
- <a title="text track cue line position">line position</a>.
- </dd>
-
- <dt><dfn title="text track cue line end alignment">End alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a>'s bottom side (for
- <a title="text track cue horizontal writing direction">horizontal</a> cues),
- right side (for
- <a title="text track cue vertical growing right writing direction">vertical growing right</a>),
- or left side (for
- <a title="text track cue vertical growing left writing direction">vertical growing left</a>)
- is aligned at the <a title="text track cue line position">line position</a>.
- </dd>
-
- </dl>
-
- <p>A <a>text track cue</a> has a default <a>text track cue line alignment</a> of <a
- title="text track cue line start alignment">start</a>.</li></p>
-
- </dd>
-
- <dt><dfn title="text track cue size">A size</dfn>
- <dd>
- <p>A number giving the size of the <a title="text track cue box">cue box</a>, to be interpreted as a percentage of the video,
- as defined by the <a title="text track cue writing direction">writing direction</a>.</p>
-
- <p>By default, the <a>text track cue size</a> is 100%.</p>
-
- </dd>
-
- <dt><dfn title="text track cue text position">A text position</dfn>
- <dd>
- <p>A number giving the position of the <a title="text track cue box">cue box</a>. If the cue is not within
- a region, the value is to be interpreted as a percentage of the video, as defined by the
- <a title="text track cue writing direction">writing direction</a>, otherwise to be interpreted
- as a percentage of the region width.</p>
-
- <p>A <a>text track cue</a> has a <df>default text track cue text position</dfn> which is defined
- in terms of the value of the <a>text track cue text alignment</a>:</p>
-
- <ol>
-
- <li>For <a title="text track cue left alignment">left aligned</a> or
- <a title="text track cue start alignment">start aligned</a> cues: 0%.</li>
-
- <li>For <a title="text track cue middle alignment">middle aligned</a> cues: 50%.</li>
-
- <li>For <a title="text track cue right alignment">right aligned</a> or
- <a title="text track cue end alignment">end aligned</a> cues: 100%.</li>
-
- </ol>
-
- <p class="note">Since the default value of the <a>text track cue text alignment</a> is
- <a title="text track cue middle alignment">middle</a>, if there is no
- <a>text track cue text alignment</a> setting for a cue, the <a>text track cue text position</a>
- defaults to 50%.</p>
-
- <p class="note">Even for <a title="text track cue horizontal writing direction">horizontal</a>
- cues with right-to-left <i>paragraph direction</i> text, the <a title="text track cue box">cue box</a>
- is positioned from the left edge of the video frame. This allows defining a rendering space template
- which can be filled with either left-to-right or right-to-left <i>paragraph direction</i> text. If you
- define such a <a title="text track cue box">cue box</a> template with
- <a title="text track cue start alignment">start</a> or <a title="text track cue end alignment">end</a>
- aligned text, make sure to control its <a title="text track cue size">size</a> unless you want
- text to flip from one side of the video frame to the other.</p>
-
- </dd>
-
- <dt><dfn title="text track cue text position alignment">A text position alignment</dfn>
- <dd>
- <p>An alignment for the <a title="text track cue box">cue box</a> in the dimension of the
- <a title="text track cue writing direction">writing direction</a>, describing which part of the
- <a title="text track cue box">cue box</a> is aligned to the <a title="text track cue text position">text position</a>,
- one of:</p>
-
- <dl>
-
- <dt><dfn title="text track cue text position start alignment">Start alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a>'s left side (for
- <a title="text track cue horizontal writing direction">horizontal</a> cues) or top
- side (otherwise) is aligned at the <a title="text track cue text position">text position</a>.
- </dd>
-
- <dt><dfn title="text track cue text position middle alignment">Middle alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a> is centered at the <a title="text track cue text position">text position</a>.
- </dd>
-
- <dt><dfn title="text track cue text position end alignment">End alignment</dfn></dt>
- <dd>The <a title="text track cue box">cue box</a>'s right side (for
- <a title="text track cue horizontal writing direction">horizontal</a> cues) or bottom
- side (otherwise) is aligned at the <a title="text track cue text position">text position</a>.
- </dd>
-
- </dl>
-
- <p>A <a>text track cue</a> has a <dfn>default text track cue text position alignment</dfn>
- which is defined in terms of the value of the <a>text track cue text alignment</a>:</p>
-
- <ol>
-
- <li>For <a title="text track cue left alignment">left</a> or
- <a title="text track cue start alignment">start</a> aligned cues:
- <a title="text track cue text position start alignment">start</a>.</li>
-
- <li>For <a title="text track cue middle alignment">middle</a> aligned cues:
- <a title="text track cue text position middle alignment">middle</a>.</li>
-
- <li>For <a title="text track cue right alignment">right</a> or
- <a title="text track cue end alignment">end</a> aligned cues:
- <a title="text track cue text position end alignment">end</a>.</li>
-
- </ol>
-
- <p class="note">Since the <a>text track cue text position</a> always measures from the left
- of the video (for <a title="text track cue horizontal writing direction">horizontal</a> cues)
- or the top (otherwise), the <a>text track cue text position alignment</a>
- <a title="text track cue text position start alignment">start value</a> varies between left and
- top for horizontal and vertical cues, but not between left and right even for changing
- <i>paragraph direction</i>.</p>
-
- </dd>
-
- <dt><dfn title="text track cue text alignment">A text alignment</dfn>
- <dd>
-
- <p>An alignment for all lines of text within the <a title="text track cue box">cue box</a>, in the dimension of the
- <a title="text track cue writing direction">writing direction</a> and the
- <i>paragraph direction</i> <a href="#refsBIDI">[BIDI]</a>, one of:</p>
-
- <dl>
-
- <dt><dfn title="text track cue start alignment">Start alignment</dfn></dt>
- <dd>The text is aligned towards the <i>paragraph direction</i> start side of the <a title="text track cue box">cue box</a>.</dd>
-
- <dt><dfn title="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">End alignment</dfn></dt>
- <dd>The text is aligned towards the <i>paragraph direction</i> end side of the <a title="text track cue box">cue box</a>.</dd>
-
- <dt><dfn title="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">Right alignment</dfn></dt>
- <dd>The text is aligned to the box's right side.</dd>
-
- </dl>
-
- <p>By default, the value of the <a>text track cue text alignment</a> is
- <a title="text track cue middle alignment">middle aligned</a>.</p>
-
- </dd>
-
- <dt><dfn title="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>rules for updating the text track rendering</a> of WebVTT <a
- title="text track cue">text track cues</a> are the <a>rules for updating the display of
- WebVTT text tracks</a>.</p>
-
- <div class="impl">
-
- <p>When a WebVTT <a>text track cue</a> whose <a title="text track cue active flag">active
- flag</a> is set has its <a title="text track cue writing direction">writing
- direction</a>, <a title="text track cue snap-to-lines flag">snap-to-lines flag</a>, <a
- title="text track cue line position">line position</a>, <a title="text track cue text
- position">text position</a>, <a title="text track cue size">size</a>, <a title="text
- track cue text alignment">alignment</a>, <a title="text track region identifier">region identifier</a>,
- or <a title="text track cue text">text</a> change value, then the user agent must empty
- the <a>text track cue display state</a>, and then immediately run the <a>text track</a>'s
- <a>rules for updating the display of WebVTT text tracks</a>.</p>
-
- </div>
-
- </section>
-
- <section>
- <h3>Text Track Region</h3>
-
- <p>A <dfn title="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">text track cues</a>.</p>
-
- <p>Each <a title="text track region">text track region</a> consists of:</p>
-
- <dl>
-
- <dt><dfn title="text track region identifier">An identifier</dfn></dt>
- <dd>
- <p>An arbitrary string.</p>
- </dd>
-
- <dt><dfn title="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">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">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">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">A scroll value</dfn></dt>
- <dd>
- <p>One of the following:</p>
- <dl>
- <dt><dfn title="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">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">A text track list of regions</dfn></dt>
-
- <dd>
-
- <p>A list of zero or more <a title="text track region">text track regions</a>.</p>
-
- </dd>
- </dl>
- </section>
-
- </section>
-
- <section>
- <h2>The WebVTT file format: Syntax</h2>
-
- <section>
- <h3>WebVTT file structure</h3>
-
- <p>A <dfn>WebVTT file</dfn> must consist of a <a>WebVTT file
- body</a> encoded as UTF-8 and labeled with the <a>MIME
- type</a> <code>text/vtt</code>. <a href="#refsRFC3629">[RFC3629]</a></p>
-
- <p>A <dfn>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">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">WebVTT metadata headers</a>.</li>
-
- <li>One or more <a title="WebVTT line terminator">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">WebVTT cues</a> and <a title="WebVTT
- comment">WebVTT comments</a> separated from each other by one or more <a title="WebVTT
- line terminator">WebVTT line terminators</a>.</li>
-
- <li>Zero or more <a title="WebVTT line terminator">WebVTT line
- terminators</a>.</li>
-
- </ol>
-
- <p>A <dfn>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>WebVTT metadata header</dfn> consists of the following components, in
- the given order:</p>
-
- <ol>
- <li>A <a>WebVTT metadata header name</a>.</li>
- <li>A U+003A COLON (colon) character.</li>
- <li>A <a>WebVTT metadata header value</a>.</li>
- <li>A <a>WebVTT line terminator</a>.</li>
- </ol>
-
- <p>A <dfn>WebVTT metadata header name</dfn> and
- a <dfn>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>WebVTT cue</dfn> consists of the following components, in
- the given order:</p>
-
- <ol>
- <li>Optionally, a <a>WebVTT cue identifier</a> followed by a <a>WebVTT line terminator</a>.</li>
- <li><a>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>WebVTT cue settings list</a>.</li>
- <li>A <a>WebVTT line terminator</a>.</li>
- <li>The <dfn>cue payload</dfn>: either <a>WebVTT cue text</a>, <a>WebVTT chapter title text</a>, or <a>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>WebVTT line terminator</a>.</li>
- </ol>
-
- <p class="note">A <a>WebVTT cue</a> corresponds to one piece
- of time-aligned text or data in the <a>WebVTT file</a>, for
- example one subtitle. The <a>cue payload</a> is the text or
- data associated with the cue.</p>
-
- <p>A <dfn>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>
-
- <p class="note">A <a>WebVTT cue identifier</a> can be used to
- reference a specific cue, for example from script or CSS.</p>
-
- <p>The <dfn>WebVTT cue timings</dfn> part of a <a>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>WebVTT timestamp</a> representing the start time
- offset of the cue. The time represented by this <a>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>WebVTT timestamp</a> representing the end time
- offset of the cue. The time represented by this <a>WebVTT
- timestamp</a> must be greater than the start time offset of the
- cue.</li>
-
- </ol>
-
- <p class="note">The <a>WebVTT cue timings</a> give the start
- and end offsets of the <a>WebVTT cue</a>. Different cues can
- overlap. Cues are always listed ordered by their start time.</p>
-
- <p>A <dfn>WebVTT timestamp</dfn> can be either a
- <a title="complete WebVTT timestamp">WebVTT timestamp representing
- hours, minutes, seconds and thousandths of a second</a> or a
- <a title="partial WebVTT timestamp">WebVTT timestamp representing
- a time in seconds and fractions of a second</a>.</p>
-
- <p class="note">A <a>WebVTT timestamp</a> is always interpreted
- relative to the <a>current playback position</a> of the media data
- that the WebVTT file is to be synchronised with, which always starts
- at 0.</p>
-
- <p>A <dfn title="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>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>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>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>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">WebVTT timestamp representing a time
- in seconds and fractions of a second</dfn> is a <a>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>WebVTT cue settings list</dfn> consist of a sequence of zero or more
- <dfn title="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">WebVTT cue setting name</a>.</li>
- <li>An optional U+003A COLON (colon) character.</li>
- <li>An optional <a title="WebVTT cue setting value">WebVTT cue setting value</a>.</li>
- </ol>
-
- <p>A <dfn>WebVTT cue setting name</dfn> and a <dfn>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>
- <h3>WebVTT comments</h3>
-
- <p>A <dfn>WebVTT comment</dfn> consists of the following components, in
- the given order:</p>
-
- <ol>
- <li>The <a>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>WebVTT line terminator</a>.</li>
- </ul>
- <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>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).
- </ol>
- </li>
- <li>A <a>WebVTT line terminator</a>.</li>
- </ol>
-
- <p class="note">A <a>WebVTT comment</a> is ignored by the parser.</p>
-
- </section><!-- end comments -->
-
- <section>
- <h3>Types of WebVTT cue payload</h3>
-
- <section>
- <h4>WebVTT metadata text</h4>
-
- <p><dfn>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>WebVTT line terminator</a>. (In other
- words, any text that does not have two consecutive <a
- title="WebVTT line terminator">WebVTT line terminators</a> and
- does not start or end with a <a>WebVTT line
- terminator</a>.)</p>
-
- <p><a>WebVTT metadata text</a> cues are only
- useful for scripted applications (using the <code
- title="dom-TextTrack-kind-metadata">metadata</code> <a>text
- track kind</a>).</p>
-
- </section>
-
- <section>
- <h4>WebVTT cue text</h4>
-
- <p><dfn>WebVTT cue text</dfn> is <a>cue payload</a>
- that consists of zero or more <a>WebVTT cue components</a>, in any order,
- each optionally separated from the next by a <a>WebVTT line terminator</a>.</p>
-
- <p>The <dfn>WebVTT cue components</dfn> are:</p>
-
- <ul>
-
- <li>A <a>WebVTT cue class span</a>.</li>
- <li>A <a>WebVTT cue italics span</a>.</li>
- <li>A <a>WebVTT cue bold span</a>.</li>
- <li>A <a>WebVTT cue underline span</a>.</li>
- <li>A <a>WebVTT cue ruby span</a>.</li>
- <li>A <a>WebVTT cue voice span</a>.</li>
- <li>A <a>WebVTT cue language span</a>.</li>
-
- <li>A <a>WebVTT cue timestamp</a>.</li>
-
- <li>A <a>WebVTT cue text span</a>, representing the text of the cue.</li>
-
- <li>A <a>WebVTT cue amp escape</a>, representing a "&" character in the text of the cue.</li>
- <li>A <a>WebVTT cue lt escape</a>, representing a "<" character in the text of the cue.</li>
- <li>A <a>WebVTT cue gt escape</a>, representing a ">" character in the text of the cue.</li>
- <li>A <a>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>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>WebVTT cue nbsp escape</a>, representing a U+00A0 NO-BREAK SPACE character in the text of the cue.</li>
-
- </ul>
-
- <p><dfn>WebVTT cue internal text</dfn> consists of an optional
- <a>WebVTT line terminator</a>, followed by zero or more
- <a>WebVTT cue components</a>, in any order, each optionally
- followed by a <a>WebVTT line terminator</a>.</p>
-
-
- <p>A <dfn>WebVTT cue class span</dfn> consists of a <a>WebVTT cue
- span start tag</a> "<code title="">c</code>" that disallows an
- annotation, <a>WebVTT cue internal text</a> representing cue
- text, and a <a>WebVTT cue span end tag</a> "<code
- title="">c</code>".</p>
-
- <p>A <dfn>WebVTT cue italics span</dfn> consists of a <a>WebVTT
- cue span start tag</a> "<code title="">i</code>" that disallows
- an annotation, <a>WebVTT cue internal text</a> representing
- the italicized text, and a <a>WebVTT cue span end tag</a>
- "<code title="">i</code>".</p>
-
- <p>A <dfn>WebVTT cue bold span</dfn> consists of a <a>WebVTT cue
- span start tag</a> "<code title="">b</code>" that disallows an
- annotation, <a>WebVTT cue internal text</a> representing the
- boldened text, and a <a>WebVTT cue span end tag</a> "<code
- title="">b</code>".</p>
-
- <p>A <dfn>WebVTT cue underline span</dfn> consists of a <a>WebVTT
- cue span start tag</a> "<code title="">u</code>" that disallows
- an annotation, <a>WebVTT cue internal text</a> representing
- the underlined text, and a <a>WebVTT cue span end tag</a>
- "<code title="">u</code>".</p>
-
- <p>A <dfn>WebVTT cue ruby span</dfn> consists of the following
- components, in the order given:</p>
-
- <ol>
- <li>A <a>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>WebVTT cue internal text</a>, representing the ruby base.</li>
- <li>A <a>WebVTT cue span start tag</a> "<code title="">rt</code>" that disallows an annotation.</li>
- <li>A <dfn>WebVTT cue ruby text span</dfn>: <a>WebVTT cue internal text</a>, representing the ruby text component of the ruby annotation.</li>
- <li>A <a>WebVTT cue span end tag</a> "<code title="">rt</code>".
- If this is the last occurrence of this group of components in the
- <a>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>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>WebVTT line terminator</a>.</li>
- <li>A <a>WebVTT cue span end tag</a> "<code title="">ruby</code>".</li>
- </ol>
-
- <p>A <dfn>WebVTT cue voice span</dfn> consists of the following
- components, in the order given:</p>
-
- <ol>
- <li>A <a>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>WebVTT cue internal text</a>.</li>
- <li>A <a>WebVTT cue span end tag</a> "<code title="">v</code>". If this <a>WebVTT cue voice span</a> is the only <a title="WebVTT cue components">component</a> of its <a>WebVTT cue text</a> sequence, then the end tag may be omitted for brevity.</li>
- </ol>
-
- <p>A <dfn>WebVTT cue language span</dfn> consists of the following
- components, in the order given:</p>
-
- <ol>
- <li>A <a>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>WebVTT cue internal text</a>.</li>
- <li>A <a>WebVTT cue span end tag</a> "<code title="">lang</code>".</li>
- </ol>
-
-
- <p>A <dfn>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>WebVTT cue span start tag annotation text</a>, representing the text of the annotation.</li>
- <li>A <a>WebVTT cue amp escape</a>, representing a "&" character in the text of the annotation.</li>
- <li>A <a>WebVTT cue lt escape</a>, representing a "<" character in the text of the annotation.</li>
- <li>A <a>WebVTT cue gt escape</a>, representing a ">" character in the text of the annotation.</li>
- <li>A <a>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>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>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>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>WebVTT cue timestamp</dfn> consists of a U+003C LESS-THAN
- SIGN character (<), followed by a <a>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>WebVTT timestamp</a> must be
- greater than the times represented by any previous <a
- title="WebVTT cue timestamp">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>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>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>WebVTT cue amp escape</dfn> is the five character string
- "<code title="">&amp;</code>".</p>
-
- <p>A <dfn>WebVTT cue lt escape</dfn> is the four character string
- "<code title="">&lt;</code>".</p>
-
- <p>A <dfn>WebVTT cue gt escape</dfn> is the four character string
- "<code title="">&gt;</code>".</p>
-
- <p>A <dfn>WebVTT cue lrm escape</dfn> is the five character string
- "<code title="">&lrm;</code>".</p>
-
- <p>A <dfn>WebVTT cue rlm escape</dfn> is the five character string
- "<code title="">&rlm;</code>".</p>
-
- <p>A <dfn>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>
- <h3>WebVTT cue settings</h3>
-
- <section>
- <h4>WebVTT region definition</h4>
-
- <p>A <a>WebVTT cue settings list</a> may contain a reference to a
- <a title="text track region">text track region</a>. To define
- a region, a <a>WebVTT region metadata header</a> is specified.</p>
-
- <p>A <dfn>WebVTT region metadata header</dfn> is a special kind of
- <a>WebVTT metadata header</a> where both of the following apply:</p>
-
- <ul>
- <li>The <a>WebVTT metadata header name</a> is the string "<code>Region</code>".</li>
- <li>The <a>WebVTT metadata header value</a> is a <a>WebVTT region setting list</a>.
- </li>
- </ul>
-
- <p>A <dfn>WebVTT region</dfn> represents its <a title="WebVTT region setting list">WebVTT region settings</a>.</p>
-
- <p>The <dfn>WebVTT region setting list</dfn> of a <a>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>WebVTT region setting list</a> string.</p>
-
- <ul>
- <li>A <a>WebVTT region identifier</a>.</li> <!-- id:fred -->
- <li>A <a>WebVTT region width setting</a>.</li> <!-- width:80.5% -->
- <li>A <a>WebVTT region lines setting</a>.</li> <!-- lines:3 -->
- <li>A <a>WebVTT region anchor setting</a>.</li> <!-- regionanchor:0%,100% -->
- <li>A <a>WebVTT region viewport anchor setting</a>.</li> <!-- viewportanchor:10.5%,90.5% -->
- <li>A <a>WebVTT region scroll setting</a>.</li> <!-- scroll:up -->
- </ul>
-
- <p class="note">The <a>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>
-
- <p>A <dfn>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>
- <p class ="note">The <a>WebVTT region identifier</a> gives
- a name to the region so it can be referenced by the cues that belong to the region.</p>
-
- <p>A <dfn >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>ASCII digits</a>.</p></li>
- <li><p>An optional U+002E DOT character (.).</p></li>
- <li><p>One or more <a>ASCII digits</a>.</p></li>
- <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
- </ol>
- <p class ="note">The <a>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>
-
- <p>A <dfn>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>ASCII digits</a>.</p></li>
- </ol>
- <p class ="note">The <a>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>
-
- <p>A <dfn>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>ASCII digits</a>.</p></li>
- <li><p>An optional U+002E DOT character (.).</p></li>
- <li><p>One or more <a>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>ASCII digits</a>.</p></li>
- <li><p>An optional U+002E DOT character (.).</p></li>
- <li><p>One or more <a>ASCII digits</a>.</p></li>
- <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
- </ol>
- <p class ="note">The <a>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>WebVTT region anchor setting</a> is given, the anchor
- defaults to 0%, 100% (i.e. the bottom left corner).</p>
-
- <p>A <dfn>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>ASCII digits</a>.</p></li>
- <li><p>An optional U+002E DOT character (.).</p></li>
- <li><p>One or more <a>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>ASCII digits</a>.</p></li>
- <li><p>An optional U+002E DOT character (.).</p></li>
- <li><p>One or more <a>ASCII digits</a>.</p></li>
- <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
- </ol>
- <p class ="note">The <a>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>
-
- <p class ="note">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>
-
- <p>A <dfn>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>
- <p class ="note">The <a>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>
-
- <p class="note">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>
-
- <p class="note">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>
-
- </section>
-
- <section>
- <h4>WebVTT cue settings</h4>
-
- <p>A <a>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>WebVTT cue settings list</a>.</p>
-
- <ul class="brief">
- <li>A <a>WebVTT vertical text cue setting</a>.</li> <!-- vertical:rl/lr [writing direction] -->
- <li>A <a>WebVTT line position cue setting</a>.</li> <!-- line:100% line:1 line:-1
- [snap-to-lines & line position & line alignment] -->
- <li>A <a>WebVTT size cue setting</a>.</li> <!-- size:100% -->
- <li>A <a>WebVTT text position cue setting</a>.</li> <!-- position:100%
- [text position & text position alignment] -->
- <li>A <a>WebVTT alignment cue setting</a>.</li> <!-- align:start/middle/end/left/right
- [text alignment] -->
- <li>A <a>WebVTT region cue setting</a>.</li> <!-- region:fred [region id] -->
- </ul>
-
- <p class="note">A <a>WebVTT cue settings list</a> gives configuration
- options regarding the position and alignment of the cue box and the cue text within. For
- example, it allows a cue box to be aligned to the left or positioned at the top right with
- the cue text within middle aligned.</p>
-
- <p>A <dfn>WebVTT vertical text cue setting</dfn> is a <a>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>WebVTT cue setting name</a>.</li>
- <li><p>A U+003A COLON character (:).</p></li>
- <li>One of the following strings as the <a>WebVTT cue setting value</a>: "<code title="">rl</code>", "<code title="">lr</code>".</li>
- </ol>
-
- <p class="note">A <a>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>
-
- <p>A <dfn>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>WebVTT cue setting name</a>.</p></li>
- <li><p>A U+003A COLON character (:).</p></li>
- <li>As the <a>WebVTT cue setting value</a>:
- <ol>
- <li>a position value, either:
- <dl>
- <dt>To represent a specific position relative to the video frame</dt>
- <dd>
- <ol>
- <li>One or more <a>ASCII digits</a>.</li>
- <li>A U+0025 PERCENT SIGN character (%).</li>
- </ol>
- </dd>
- <dt>Or to represent a line number</dt>
- <dd>
- <ol>
- <li>Optionally a U+002D HYPHEN-MINUS character (-).</li>
- <li>One or more <a>ASCII digits</a>.</li>
- </ol>
- </dd>
- </dl>
- </li>
- <li>An optional alignment value consisting of the following components:
- <ol>
- <li>A U+002C COMMA character (,).</li>
- <li>One of the following strings: <code title="">start</code>, <code title="">middle</code>,
- <code title="">end</code></li>
- </ol>
- </li>
- </ol>
- </li>
- </ol>
-
- <p class="note">A <a>WebVTT line position cue setting</a> configures the position of the cue box
- in the direction opposite to the <a title="text track cue writing direction">writing direction</a>.
- For horizontal cues, this is the vertical
- position. The positioning is calculated relative to the <a title="text track cue line start alignment">start</a>,
- <a title="text track cue line middle alignment">middle</a>, or <a title="text track cue line end alignment">end</a>
- of the cue box, depending on the <a>text track cue line alignment</a> value -
- <a title="text track cue line middle alignment">middle</a> by default.
- The position can be given either as a percentage of the video dimension
- or as a line number. Line numbers are based on the size of the first line of the
- cue. Positive line numbers count from the start of the video frame (the first
- line is numbered 0), negative line numbers from the end of the
- frame (the last line is numbered −1).</p>
-
- <p>A <dfn>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>WebVTT cue setting name</a>.</p></li>
- <li><p>A U+003A COLON character (:).</p></li>
- <li>As the <a>WebVTT cue setting value</a>:
- <ol>
- <li>One or more <a>ASCII digits</a>.</li>
- <li>A U+0025 PERCENT SIGN character (%).</li>
- </ol>
- </li>
- </ol>
-
- <p class="note">A <a>WebVTT size cue setting</a> configures
- the size of the <a title="text track cue box">cue box</a> in the same direction as the
- <a>WebVTT text position cue setting</a>. For horizontal cues, this is the width
- of the <a title="text track cue box">cue box</a>. It is given as a percentage of the width of the
- frame.</p>
-
- <p>A <dfn>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>WebVTT cue setting name</a>.</p></li>
- <li><p>A U+003A COLON character (:).</p></li>
- <li>As the <a>WebVTT cue setting value</a>:
- <ol>
- <li>a position value consisting of:
- <ol>
- <li>One or more <a>ASCII digits</a>.</li>
- <li>A U+0025 PERCENT SIGN character (%).</li>
- </ol>
- </li>
- <li>an optional alignment value consisting of:
- <ol>
- <li>A U+002C COMMA character (,).</li>
- <li>One of the following strings: <code title="">start</code>, <code title="">middle</code>,
- <code title="">end</code></li>
- </ol>
- </li>
- </ol>
- </li>
- </ol>
-
- <p class="note">A <a>WebVTT text position cue setting</a> configures the position of the
- <a title="text track cue box">cue box</a> in the direction orthogonal to
- the <a>WebVTT line position cue setting</a>. For horizontal
- cues, this is the horizontal position. The text position is given as a percentage of the video frame.
- The positioning is calculated relative to the <a title="text track cue text position start alignment">start</a>,
- <a title="text track cue text position middle alignment">middle</a>, or
- <a title="text track cue text position end alignment">end</a>
- of the cue box, depending on the <a>default text track cue text position alignment</a> value, which is
- overridden by the <a>WebVTT text position cue setting</a> alignment value.
- </p>
-
- <p>A <dfn>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>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>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>
-
- <p class="note">A <a>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>
-
- <p>A <dfn>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>WebVTT cue setting name</a>.</p></li>
- <li><p>A U+003A COLON character (:).</p></li>
- <li><p>As the <a>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>
-
- <p class ="note">A <a>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">"vertical"</a>,
- <a title="WebVTT line position cue setting">"line"</a> or
- <a title="WebVTT size cue setting">"size"</a> cue setting. If a cue is
- part of a region, its cue settings for <a title="WebVTT line position cue setting">"position"</a>
- and <a title="WebVTT alignment cue setting">"align"</a> are applied to the line boxes
- in the cue relative to the region box.</p>
-
- </section>
-
- </section><!-- end cue settings -->
-
- <section>
- <h3>Properties of cue sequences</h3>
-
- <section>
- <h4>WebVTT file using only nested cues</h4>
-
- <p>A <a>WebVTT file</a> whose cues all follow the following rules
- is said to be a <dfn>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>Presenters
- </ul>
- </li>
- <li>Scrolling Effects
- <ul>
- <li>Achim's Demo
- <li>Timeline Panel
- </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>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>WebVTT file
- using only nested cues</a>.</p>
-
- </div>
-
- </section>
-
- </section><!-- end cue sequence properties -->
-
- <section>
- <h3>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>WebVTT</a> files, may
- offer to restrict syntax checking for validating these types.</p>
-
- <section>
- <h4>WebVTT file using metadata content</h4>
-
- <p>A <a>WebVTT file</a> whose cues all have a <a>cue
- payload</a> that is <a>WebVTT metadata text</a> is
- said to be a <dfn>WebVTT file using metadata content</dfn>.</p>
-
- </section>
-
- <section>
- <h4>WebVTT file using chapter title text</h4>
-
- <p><dfn>WebVTT chapter title text</dfn> is <a>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>WebVTT line terminator</a>:</p>
-
- <ul>
- <li><a>WebVTT cue text span</a></li>
- <li><a>WebVTT cue amp escape</a></li>
- <li><a>WebVTT cue lt escape</a></li>
- <li><a>WebVTT cue gt escape</a></li>
- <li><a>WebVTT cue lrm escape</a></li>
- <li><a>WebVTT cue rlm escape</a></li>
- <li><a>WebVTT cue nbsp escape</a></li>
- </ul>
-
- <p>A <dfn>WebVTT file using chapter title text</dfn> is a <a>WebVTT file using only nested cues</a>
- whose cues all have a <a>cue payload</a> that is <a>WebVTT chapter title text</a>.</p>
-
- </section>
-
- <section>
- <h4>WebVTT file using cue text</h4>
-
- <p>A <a>WebVTT file</a> whose cues all have a <a>cue payload</a> that is
- <a>WebVTT cue text</a> is said to be a <dfn>WebVTT file using cue text</dfn>.</p>
-
- </section>
-
- </section><!-- end of WebVTT file types -->
-
- </section><!-- end of syntax -->
-
-
- <section>
- <h2>WebVTT file format: Parsing</h2>
-
- <section>
- <h3>WebVTT file parsing</h3>
-
- <p>A <dfn>WebVTT parser</dfn>, given an input byte stream and a
- <a>text track list of cues</a> <var title="">output</var>,
- must decode the byte stream using the <a title="UTF-8 decode">UTF-8
- decode</a> algorithm, and then must parse the resulting string according
- to the <a>WebVTT parser algorithm</a> below. This results in
- <a title="text track cue">text track cues</a> being added to <var
- title="">output</var>. <a href="#refsRFC3629">[RFC3629]</a></p>
-
- <p>A <a>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>incremental WebVTT parser</dfn>.</p>
-
- <p>A <a>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>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>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>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 the first character in <var title="">line</var> is
- a U+FEFF BYTE ORDER MARK (BOM) character, remove it from
- <var title="">line</var>.</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>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>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>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">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>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>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>WebVTT metadata header</a>.</p></li>
-
- <li><p>Let <a title="WebVTT metadata header name">metadata's name</a> be the empty string.</p></li>
-
- <li><p>Let <a title="WebVTT metadata header value">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">metadata's name</a> to the substring of <var>line</var> before the first ":" character and <a title="WebVTT metadata header value">metadata's value</a> to the substring after this character.</p></li>
-
- <li><p>If <a title="WebVTT metadata header name">metadata's name</a> equals "Region":</p>
-
- <ol>
- <li><i>Region creation</i>: Let <var>region</var> be a new <a>text track region</a>.</li>
- <li>Let <var>region</var>'s <a title="text track region identifier">identifier</a> be the empty string.</li>
- <li>Let <var>region</var>'s <a title="text track region width">width</a> be 100.</li>
- <li>Let <var>region</var>'s <a title="text track region lines">lines</a> be 3.</li>
- <li>Let <var>region</var>'s <a title="text track region anchor">anchor point</a> be (0,100).</li>
- <li>Let <var>region</var>'s <a title="text track region viewport anchor">viewport anchor point</a> be (0,100).</li>
- <li>Let <var>region</var>'s <a title="text track region scroll">scroll value</a> be <a title="text track region scroll none">NONE</a>.</li>
- <li><a>Collect WebVTT region settings</a> from <a title="WebVTT metadata header value">metadata's value</a> using <var>region</var> for the results.</li>
-
- <li><i>Region processing</i>: Construct a <a>WebVTT Region Object</a> from <var>region</var>.</li>
-
- <li>If the <a>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>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>Collect a sequence of characters</a> that are
- U+000A LINE FEED (LF) characters.</p></li>
-
- <li><p><a>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>text track cue</a> and initialize it with the following
- attribute values:</p></li>
-
- <ol>
- <li><p>Let <var title="">cue</var>'s <a>text track cue identifier</a> be the empty string.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue pause-on-exit flag</a> be false.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue writing direction</a> be
- <a title="text track cue horizontal writing direction">horizontal</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue region identifier</a> be the empty string.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue snap-to-lines flag</a> be true.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue line position</a> be
- <a title="text track cue automatic line position">auto</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue line alignment</a> be
- <a title="text track cue line start alignment">start alignment</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue text position</a> be 50.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a title="">text track cue text position alignment</a> be
- <a title="text track cue text position alignment">middle alignment</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue size</a> be 100.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue text alignment</a> be
- <a title="text track cue middle alignment">middle alignment</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>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>text track cue
- identifier</a> be <var title="">line</var>.<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>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>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>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>text track cue text</a> of <var
- title="">cue</var> be <var title="">cue text</var>, and let the <a>rules for rendering the cue
- in isolation</a> be the <a>rules for interpreting WebVTT cue text</a>.</p></li>
-
- <li><p>Add <var title="">cue</var> to the <a>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>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>WebVTT parser</a> has finished. The file was successfully
- processed.</p></li>
-
- </ol>
-
- </section>
-
- <section>
- <h3>WebVTT region settings parsing</h3>
-
- <p>When the <a>WebVTT parser</a> requires that the user agent <dfn>collect WebVTT region settings</dfn> from a string <var>input</var> for a <a>text track</a>, the user agent must run the following algorithm.</p>
-
- <p>A <dfn>WebVTT region object</dfn> is a conceptual construct to represent a <a>WebVTT region</a> that is used as a root node for <a title="List of WebVTT node objects">lists of WebVTT node objects</a>. This algorithm returns a list of <a title="WebVTT region object">WebVTT Region Objects</a>.</p>
-
- <ol>
- <li><p>Let <var>settings</var> be the result of <a title="split a string on spaces">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>case-sensitive</a> match for "<code>id</code>"</p></dt>
- <dd><p>Let <var>region</var>'s <a title="text track region identifier">identifier</a> be <var>value</var>.</p>
- </dd>
-
- <dt><p>Otherwise if <var>name</var> is a <a>case-sensitive</a> match for "<code>width</code>"</p></dt>
- <dd><p>If <a>parse a percentage string</a> from <var>value</var> returns a <var>percentage</var>, let <var>region</var>'s <a>text track region width</a> be <var>percentage</var>.</p>
- </dd>
-
- <dt>Otherwise if <var>name</var> is a <a>case-sensitive</a> match for "<code>lines</code>"</dt>
- <dd>
- <ol>
- <li><p>If <var>value</var> contains any characters other than <a>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>text track region lines</a> be <var>number</var>.</p></li>
- </ol>
- </dd>
-
- <dt>Otherwise if <var>name</var> is a <a>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>parse a percentage string</a> from <var>anchorX</var> or <a>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">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>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>parse a percentage string</a> from <var>viewportanchorX</var> or <a>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">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>case-sensitive</a> match for "<code>scroll</code>"</dt>
- <dd>
- <ol>
- <li><p>If <var>value</var> is a <a>case-sensitive</a> match for the string "<code>up</code>", then let <var>region</var>'s <a title="text track region scroll">scroll value</a> be "<a title="text track region scroll up">scroll up</a>".</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>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>ASCII digits</a>, then fail.</p></li>
-
- <li><p>If <var>input</var> does not contain at least one <a title="ASCII digits">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>
- <h3>WebVTT cue timings and settings parsing</h3>
-
- <p>When the algorithm above requires that the user agent
- <dfn>Collect WebVTT cue timings and settings</dfn> from a string
- <var title="">input</var> for a <a>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>Skip whitespace</a>.</p></li>
-
- <li><p><a>Collect a WebVTT timestamp</a>. If that algorithm
- fails, then abort these steps and return failure. Otherwise, let
- <var title="">cue</var>'s <a>text track cue start time</a>
- be the collected time.</p></li>
-
- <li><p><a>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>Skip whitespace</a>.</p></li>
-
- <li><p><a>Collect a WebVTT timestamp</a>. If that algorithm
- fails, then abort these steps and return failure. Otherwise, let
- <var title="">cue</var>'s <a>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>Parse the WebVTT cue settings</a> given by <var
- title="">remainder</var> for <var title="">cue</var>.</p></li>
-
- </ol>
-
- <p>When the user agent is to <dfn>Parse the WebVTT cue settings</dfn>
- given by a string <var title="">input</var> for a <a>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">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>Let <var title="">positionSet</var> and <var title="">positionAlignSet</var>
- be false. (These are required to determine if the position settings need to be adjusted
- for non-middle aligned cue text.)</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>case-sensitive</a> match for "<code>region</code>"</dt>
-
- <dd>
- <ol>
- <li>Let <var>cue</var>'s <a>text track cue region identifier</a> be <var>value</var>.</li>
- </ol>
- </dd>
-
-
- <dt>If <var title="">name</var> is a <a>case-sensitive</a> match for "<code title="">vertical</code>"</dt>
-
- <dd>
-
- <ol>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">rl</code>", then let <var title="">cue</var>'s
- <a>text track cue writing direction</a> be <a
- title="text track cue vertical growing left writing
- direction">vertical growing left</a>.</p></li>
-
- <li><p>Otherwise, if <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">lr</code>", then let <var title="">cue</var>'s
- <a>text track cue writing direction</a> be <a
- title="text track cue vertical growing right writing
- direction">vertical growing right</a>.</p></li>
-
- </ol>
-
- </dd>
-
-
- <dt>If <var title="">name</var> is a <a>case-sensitive</a> match for "<code title="">line</code>"</dt>
-
- <dd>
-
- <ol>
-
- <li><p>If <var title="">value</var> contains a U+002C COMMA character (,), then let
- <var title="">linepos</var> be the leading substring of <var title="">value</var> up to and
- excluding the first U+002C COMMA character (,) in that string and let <var title="">linealign</var>
- be the trailing substring of <var title="">value</var> starting from the character immediately
- after the first U+002C COMMA character (,) in that string.</p></li>
-
- <li><p>Otherwise let <var title="">linepos</var> be the full <var title="">value</var> string
- and <var title="">linealign</var> be the empty string.</p></li>
-
- <li><p>If <var title="">linepos</var> contains any characters other than U+002D HYPHEN-MINUS
- characters (-), U+0025 PERCENT SIGN characters (%), and <a>ASCII digits</a>, then
- jump to the step labeled <i>next setting</i>.</p></li>
-
- <li><p>If <var title="">linepos</var> does not contain at least one <a title="ASCII
- digits">ASCII digit</a>, then jump to the step labeled <i>next setting</i>.</p></li>
-
- <li><p>If any character in <var title="">linepos</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="">linepos</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="">linepos</var> is
- a U+002D HYPHEN-MINUS character (-) <em>and</em> the last
- character in <var title="">linepos</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="">linepos</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="">linepos</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>text track cue line position</a>
- be <var title="">number</var>.</p></li>
-
- <li><p>If the last character in <var title="">linepos</var> is
- a U+0025 PERCENT SIGN character (%), then let <var title="">cue</var>'s
- <a>text track cue snap-to-lines flag</a> be false. Otherwise, let it be true.</p></li>
-
- <li><p>If <var title="">linealign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">start</code>", then let <var title="">cue</var>'s
- <a>text track cue line alignment</a> be
- <a title="text track cue line start alignment">start alignment</a>.</p></li>
-
- <li><p>If <var title="">linealign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">middle</code>", then let <var title="">cue</var>'s
- <a>text track cue line alignment</a> be
- <a title="text track cue line middle alignment">middle alignment</a>.</p></li>
-
- <li><p>If <var title="">linealign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">end</code>", then let <var title="">cue</var>'s
- <a>text track cue line alignment</a> be
- <a title="text track cue line end alignment">end alignment</a>.</p></li>
-
- </ol>
-
- </dd>
-
-
- <dt>If <var title="">name</var> is a <a>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>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">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>text track cue
- size</a> be <var title="">number</var>.</p></li>
-
- </ol>
-
- </dd>
-
-
- <dt>If <var title="">name</var> is a <a>case-sensitive</a> match for "<code title="">position</code>"</dt>
-
- <dd>
-
- <ol>
-
- <li><p>If <var title="">value</var> contains a U+002C COMMA character (,), then let
- <var title="">colpos</var> be the leading substring of <var title="">value</var> up to and
- excluding the first U+002C COMMA character (,) in that string and let <var title="">colalign</var>
- be the trailing substring of <var title="">value</var> starting from the character immediately
- after the first U+002C COMMA character (,) in that string.</p></li>
-
- <li><p>Otherwise let <var title="">colpos</var> be the full <var title="">value</var> string
- and <var title="">colalign</var> be the empty string.</p></li>
-
- <li><p>If <var title="">colpos</var> contains any characters other than U+0025 PERCENT SIGN
- characters (%) and <a>ASCII digits</a>, then jump to the step labeled
- <i>next setting</i>.</p></li>
-
- <li><p>If <var title="">colpos</var> does not contain at least one <a title="ASCII
- digits">ASCII digit</a>, then jump to the step labeled <i>next setting</i>.</p></li>
-
- <li><p>If any character in <var title="">colpos</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="">colpos</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="">colpos</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>text track cue text position</a> be
- <var title="">number</var> and let <var title="">positionSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">start</code>", then let <var title="">cue</var>'s
- <a>text track cue text position alignment</a> be
- <a title="text track cue text position start alignment">start alignment</a>
- and let <var title="">positionAlignSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">middle</code>", then let <var title="">cue</var>'s
- <a>text track cue text position alignment</a> be
- <a title="text track cue text position middle alignment">middle alignment</a>
- and let <var title="">positionAlignSet</var> be true.</p></li>
-
- <li><p>If <var title="">colalign</var> is a <a>case-sensitive</a> match for the string
- "<code title="">end</code>", then let <var title="">cue</var>'s
- <a>text track cue text position alignment</a> be
- <a title="text track cue text position end alignment">end alignment</a>
- and let <var title="">positionAlignSet</var> be true.</p></li>
-
- </ol>
-
- </dd>
-
-
- <dt>If <var title="">name</var> is a <a>case-sensitive</a> match for "<code title="">align</code>"</dt>
-
- <dd>
-
- <ol>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">start</code>", then let <var title="">cue</var>'s
- <a>text track cue text alignment</a> be <a title="text
- track cue start alignment">start alignment</a>.</p></li>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">middle</code>", then let <var title="">cue</var>'s
- <a>text track cue text alignment</a> be <a title="text
- track cue middle alignment">middle alignment</a>.</p></li>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">end</code>", then let <var title="">cue</var>'s
- <a>text track cue text alignment</a> be <a title="text
- track cue end alignment">end alignment</a>.</p></li>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">left</code>", then let <var title="">cue</var>'s
- <a>text track cue text alignment</a> be <a title="text
- track cue left alignment">left alignment</a>.</p></li>
-
- <li><p>If <var title="">value</var> is a
- <a>case-sensitive</a> match for the string "<code
- title="">right</code>", then let <var title="">cue</var>'s
- <a>text track cue text alignment</a> be <a title="text
- track cue right alignment">right alignment</a>.</p></li>
-
- </ol>
-
- </dd>
-
- </dl>
-
- </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>
-
- <li><p>If <var title="">positionSet</var> is false (i.e. the cue box has not been explicitly
- positioned with a position setting), and <a>text track cue text alignment</a>
- is not <a title="text track cue middle alignment">middle alignment</a>, then adjust the
- <a>text track cue text position</a> as follows:
-
- <dl>
- <dt>If <a>text track cue text alignment</a> is <a title="text track cue left alignment">left</a> or
- <a title="text track cue start alignment">start</a></dt>
- <dd>Let <a>text track cue text position</a> be 0%.</a></dd>
- </dt>
-
- <dt>If <a>text track cue text alignment</a> is <a title="text track cue right alignment">right</a> or
- <a title="text track cue end alignment">end</a></dt>
- <dd>Let <a>text track cue text position</a> be 100%.</a></dd>
- </dt>
- </dl>
- </li>
-
- <li><p>If <var title="">positionAlignSet</var> is false (i.e. the cue box has not been explicitly
- position aligned with a position alignment setting), and <a>text track cue text alignment</a>
- is not <a title="text track cue middle alignment">middle alignment</a>, then adjust the
- <a>text track cue text position alignment</a> as follows:
-
- <dl>
- <dt>If <a>text track cue text alignment</a> is <a title="text track cue left alignment">left</a> or
- <a title="text track cue start alignment">start</a></dt>
- <dd>Let <a>text track cue text position alignment</a> be
- <a title="text track cue text position start alignment">start alignment</a>.</dd>
- </dt>
-
- <dt>If <a>text track cue text alignment</a> is <a title="text track cue right alignment">right</a> or
- <a title="text track cue end alignment">end</a></dt>
- <dd>Let <a>text track cue text position alignment</a> be
- <a title="text track cue text position end alignment">end alignment</a>.</dd>
- </dt>
- </dl>
- </li>
-
- <li><p>If <var>cue</var>'s <a>text track cue line position</a> is not <a>text track cue automatic line position</a>
- or <var>cue</var>'s <a>text track cue size</a> is not 100 or <var>cue</var>'s <a>text track cue writing direction</a>
- is not <a title="text track cue horizontal writing direction">horizontal</a>, but <var>cue</var>'s <a>text track cue
- region identifier</a> is not the empty string, let <var>cue</var>'s <a>text track cue region identifier</a> be the
- empty string.</p></li>
-
-
- </ol>
-
- <p class="note">Step 5 makes sure that no matter in which order the cue settings are provided, if the cue has a <a>text track cue line position</a> or a <a>text track cue size</a> setting or is <a title="text track cue vertical growing left writing direction">text track cue vertical growing left</a> or <a title="text track cue vertical growing right writing direction">growing right writing direction</a>, the <a>text track cue region identifier</a> will be ignored.</p>
-
-
- <p>When this specification says that a user agent is to
- <dfn>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">ASCII digit</a>, then
- return an error and abort these steps.</p></li>
-
- <li><p><a>Collect a sequence of characters</a> that are <a>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>Collect a sequence of characters</a> that are <a>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>Collect a sequence of characters</a> that are <a>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>Collect a sequence of characters</a> that are <a>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>
- <h3><dfn>WebVTT cue text parsing rules</dfn></h3>
-
- <p>A <dfn>WebVTT Node Object</dfn> is a conceptual construct used to
- represent components of <a>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">WebVTT Node Objects</a>: <a title="WebVTT Internal
- Node Object">WebVTT Internal Node Objects</a> and <a
- title="WebVTT Leaf Node Object">WebVTT Leaf Node Objects</a>.</p>
-
- <p><dfn title="WebVTT Internal Node Object">WebVTT Internal Node Objects</dfn> are those that can
- contain further <a title="WebVTT Node Object">WebVTT Node Objects</a>. They are conceptually
- similar to elements in HTML or the DOM. <a title="WebVTT Internal Node Object">WebVTT Internal
- Node Objects</a> have an ordered list of child <a title="WebVTT Node Object">WebVTT Node
- Objects</a>. The <a>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">WebVTT Internal Node Objects</a> also have
- an ordered list of class names, known as their <dfn title="WebVTT Node Object's applicable
- classes">applicable classes</dfn>, and a language, known as their <dfn title="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">WebVTT Internal Node Objects</a>:</p>
-
- <dl>
-
- <dt><dfn title="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">WebVTT Node Objects</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Class Object">WebVTT Class Objects</dfn></dt>
- <dd>
- <p>These represent spans of text (a <a>WebVTT cue class
- span</a>) in <a>WebVTT cue text</a>, and are used to
- annotate parts of the cue with <a title="WebVTT Node Object's
- applicable classes">applicable classes</a> without implying
- further meaning (such as italics or bold).</p>
- </dd>
-
- <dt><dfn title="WebVTT Italic Object">WebVTT Italic Objects</dfn></dt>
- <dd>
- <p>These represent spans of italic text (a <a>WebVTT cue
- italics span</a>) in <a>WebVTT cue text</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Bold Object">WebVTT Bold Objects</dfn></dt>
- <dd>
- <p>These represent spans of bold text (a <a>WebVTT cue
- bold span</a>) in <a>WebVTT cue text</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Underline Object">WebVTT Underline Objects</dfn></dt>
- <dd>
- <p>These represent spans of underline text (a <a>WebVTT cue
- underline span</a>) in <a>WebVTT cue text</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Ruby Object">WebVTT Ruby Objects</dfn></dt>
- <dd>
- <p>These represent spans of ruby (a <a>WebVTT cue
- ruby span</a>) in <a>WebVTT cue text</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</dfn></dt>
- <dd>
- <p>These represent spans of ruby text (a <a>WebVTT cue ruby
- text span</a>) in <a>WebVTT cue text</a>.</p>
- </dd>
-
- <dt><dfn title="WebVTT Voice Object">WebVTT Voice Objects</dfn></dt>
- <dd>
- <p>These represent spans of text associated with a specific voice
- (a <a>WebVTT cue voice span</a>) in <a>WebVTT cue text</a>.
- A <a>WebVTT Voice Object</a> has a value, which
- is the name of the voice.</p>
- </dd>
-
- <dt><dfn title="WebVTT Language Object">WebVTT Language Objects</dfn></dt>
- <dd>
- <p>These represent spans of text (a <a>WebVTT cue language span</a>) in
- <a>WebVTT cue text</a>, and are used to annotate parts of the cue where the
- <a title="WebVTT Node Object's applicable language">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">WebVTT Leaf Node
- Objects</dfn> are those that contain data, such as text, and cannot
- contain child <a title="WebVTT Node Object">WebVTT Node
- Objects</a>.</p>
-
- <p>There are two concrete classes of <a title="WebVTT Leaf Node
- Object">WebVTT Leaf Node Objects</a>:</p>
-
- <dl>
-
- <dt><dfn title="WebVTT Text Object">WebVTT Text Objects</dfn></dt>
- <dd>
- <p>A fragment of text. A <a>WebVTT Text Object</a> has a
- value, which is the text it represents.</p>
- </dd>
-
- <dt><dfn title="WebVTT Timestamp Object">WebVTT Timestamp Objects</dfn></dt>
- <dd>
- <p>A timestamp. A <a>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>WebVTT cue text</a>, user agents must use the following
- algorithm. This algorithm returns a <a>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>list of WebVTT
- Node Objects</a>, initially empty.</p></li>
-
- <li><p>Let <var title="">current</var> be the <a>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>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>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>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">Attach</a> a <a>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">Attach</a> a <a>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">Attach</a> a <a>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">Attach</a> a <a>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">Attach</a> a <a>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>WebVTT Ruby
- Object</a>, then <a title="attach a WebVTT Internal Node
- Object">attach</a> a <a>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">Attach</a> a <a>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">attach</a> a <a>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>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>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">applicable classes</a> to the
- list of classes in the token, excluding any classes that are
- the empty string.</p>
-
- <li><p>Set the new object's <a title="WebVTT Node Object's applicable language">applicable
- language</a> to the top entry on the <var title="">language stack</var>, if the stack is
- not empty.</p>
-
- <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>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>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>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>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>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>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>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>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>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>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>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>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>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>
-
- <p class="note">An end-of-file marker is not a Unicode character,
- it is used to end the tokenizer.</p>
-
- </li>
-
- <li>
-
- <p>Jump to the state given by <var title="">tokenizer
- state</var>:</p>
-
- <dl>
-
- <dt><dfn>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>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>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>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>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>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>WebVTT data state</a>, and jump to the step
- labeled <i>next</i>.</p>
- </dd>
-
- </dl>
-
- </dd>
-
- <dt><dfn>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>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>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>WebVTT
- end tag state</a>, and jump to the step labeled
- <i>next</i>.</p>
- </dd>
-
- <dt><a>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>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>WebVTT
- start tag state</a>, and jump to the step labeled
- <i>next</i>.</p>
- </dd>
-
- </dl>
-
- </dd>
-
- <dt><dfn>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>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>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>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>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>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>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>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">space characters</a> from <var
- title="">buffer</var>, and replace any sequence of one or more
- consecutive <a title="space character">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>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>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>
- <h3><dfn>WebVTT cue text DOM construction rules</dfn></h3>
-
- <p>To convert a <a>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">WebVTT Node Objects</a>,
- with the following mapping of <a title="WebVTT Node
- Object">WebVTT Node Objects</a> to DOM nodes:</p>
-
- <table>
- <thead>
- <tr>
- <th><a>WebVTT Node Object</a>
- <th>DOM node
- <tbody>
- <tr>
- <td><a>List of WebVTT Node Objects</a>
- <td><code>DocumentFragment</code> node
- <tr>
- <td><a>WebVTT Region Object</a>
- <td><code>DocumentFragment</code> node
- <tr>
- <td><a>WebVTT Class Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>span</code>".
- <tr>
- <td><a>WebVTT Italic Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>i</code>".
- <tr>
- <td><a>WebVTT Bold Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>b</code>".
- <tr>
- <td><a>WebVTT Underline Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>u</code>".
- <tr>
- <td><a>WebVTT Ruby Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>ruby</code>".
- <tr>
- <td><a>WebVTT Ruby Text Object</a>
- <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>rt</code>".
- <tr>
- <td><a>WebVTT Voice Object</a>
- <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>WebVTT Voice Object</a>'s value.
- <tr>
- <td><a>WebVTT Language Object</a>
- <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>WebVTT Language Object</a>'s <a title="WebVTT Node Object's applicable language">applicable language</a>.
- <tr>
- <td><a>WebVTT Text Object</a>
- <td><code>Text</code> node whose character data is the value of the <a>WebVTT Text Object</a>.
- <tr>
- <td><a>WebVTT Timestamp Object</a>
- <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>WebVTT timestamp</a> representing the value of the <a>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.
- </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>HTML namespace</a>,
- and, if the corresponding <a>WebVTT Internal Node Object</a> has any <a title="WebVTT
- Node Object's applicable classes">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>
- <h2>Rendering</h2>
-
- <section>
- <h3>Cues in isolation</h3>
-
- <p>The <dfn>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>list of WebVTT Node Objects</a> obtained by
- applying the <a>WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
- <a>text track cue text</a>.</p>
-
- <li><p class="todo">... <!-- flatten nodes and return a single string somehow -->
-
- </ol>
- </section>
-
- <section>
- <h3>Cues with video</h3>
-
- <section>
- <h4>Processing model</h4>
-
- <p>The <dfn>rules for updating the display of WebVTT text
- tracks</dfn> render the <a title="text track">text
- tracks</a> of a <a>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">text
- tracks</a> that use these rules for a given <a>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>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>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>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">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><p>If the last time these rules were run, the user agent was
- not <a title="expose a user interface to the user">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><p>Let <var title="">tracks</var> be the subset of <var
- title="">video</var>'s <a>list of text tracks</a> that have
- as their <a>rules for updating the text track rendering</a>
- these <a>rules for updating the display of WebVTT text
- tracks</a>, and whose <a>text track mode</a> is <a
- title="text track showing">showing</a>.</p></li>
-
- <li><p>Let <var title="">cues</var> be an empty list of <a
- title="text track cue">text track cues</a> and <var title="">regions</var>
- be an empty list of <a title="text track region">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">regions</a> from
- <var>track</var>'s <a>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">cues</a> from <var
- title="">track</var>'s <a title="text track list of cues">list
- of cues</a> that have their <a>text track cue active
- flag</a> set.</p></li>
-
- <li><p>If <var>reset</var> is false, then, for each <a>text track region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a>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>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>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>text track region viewport anchor</a> and <var>regionAnchorX</var> be the x dimension of the <a>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>text track region viewport anchor</a> and <var>regionAnchorY</var> be the y dimension of the <a>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>text track cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>'s <a>text track cue display state</a> has a set of CSS boxes, then:</p>
-
- <ul>
- <li><p>if there is a <a>WebVTT region</a> whose <a title="WebVTT region identifier">region identifier</a> is identical to <var>cue</var>'s <a>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>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>text track
- cue order</a>, run the following substeps:</p>
-
- <ul>
- <li><p>If <var>cue</var> has an empty <a>text track cue region identifier</a> or there is no <a>WebVTT region</a> whose <a title="text track cue region identifier">region identifier</a> is identical to <var>cue</var>'s <a>text track cue region identifier</a>, run the following substeps:</p>
-
- <ol>
-
- <li><a>Apply WebVTT cue settings</a> to calculate CSS boxes <var title="">boxes</var> from the
- <a>list of WebVTT Node Objects</a> <var title="">nodes</var> obtained by applying the
- <a>WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
- <a>text track cue text</a>.</li>
-
- <li><p>Let <var title="">cue</var>'s <a>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>WebVTT region</a> whose <a title="text track cue region identifier">region identifier</a> matches the <a>text track cue region identifier</a> of <var>cue</var>.</p></li>
-
- <li><p>If <var>region</var>'s <a>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>list of WebVTT Node Objects</a> obtained by applying the <a>WebVTT cue text parsing rules</a> to the <var>cue</var>'s <a>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>WebVTT Text Object</a> in <var>nodes</var>, in a pre-order, depth-first traversal, excluding <a title="WebVTT Ruby Text Object">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>
- <p class="note">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>
- </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>text track cue text position</a> multiplied by the <var>width</var> of the <a>WebVTT region object</a> whose <a title="text track cue region identifier">region identifier</a> is identical to <var>cue</var>'s <a>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> with the same constraints that are used when they are 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>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>Apply WebVTT cue settings</dfn>
- to calculate CSS boxes from the <a>list of WebVTT Node Objects</a> <var title="">nodes</var>
- obtained by applying the <a>WebVTT cue text parsing rules</a> to the <var title="">cue</var>'s
- <a>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>WebVTT
- Text Object</a> in <var title="">nodes</var>, in a pre-order,
- depth-first traversal, excluding <a title="WebVTT Ruby Text
- Object">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>
-
- <p class="note">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>
-
- </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>text track cue writing direction</a> is
- <a title="text track cue horizontal writing
- direction">horizontal</a>, then let <var
- title="">writing-mode</var> be 'horizontal-tb'. Otherwise, if the
- <a>text track cue writing direction</a> is <a
- title="text track cue vertical growing left writing
- direction">vertical growing left</a>, then let <var
- title="">writing-mode</var> be 'vertical-rl'. Otherwise, the
- <a>text track cue writing direction</a> is <a
- title="text track cue vertical growing right writing
- direction">vertical growing right</a>; let <var
- title="">writing-mode</var> be 'vertical-lr'.</p></li>
-
- <li><p>Let <var title="">size</var> be <a>text track cue size</a>.</p></li>
-
- <li><p>If the <a>text track cue writing direction</a> is
- <a title="text track cue horizontal writing
- direction">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>text track cue writing direction</a> is
- <a title="text track cue horizontal writing direction">horizontal</a>:</dt>
- <dd>
- <dl class="switch">
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position start alignment">start alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue text position</a>.</p></dd>
-
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position middle alignment">middle alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue text position</a> minus
- half of <var title="">size</var>.</p></dd>
-
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position end alignment">end alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue text position</a> minus
- <var title="">size</var>.</p></dd>
- </dl>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue vertical growing left writing direction">vertical growing left</a>
- or <a title="text track cue vertical growing right writing direction">vertical growing right</a>:</dt>
- <dd>
- <dl class="switch">
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position start alignment">start alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue text position</a>.</p></dd>
-
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position middle alignment">middle alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue text position</a> minus
- half of <var title="">size</var>.</p></dd>
-
- <dt>If the <a>text track cue text position alignment</a> is
- <a title="text track cue text position end alignment">end alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue text position</a> minus
- <var title="">size</var>.</p></dd>
- </dl>
- </dd>
-
- </dl>
-
- </li>
-
- <li>
-
- <p>Determine the value of whichever of <var title="">x-position</var> or <var title="">y-position</var>
- is not yet calculated for <var title="">cue</var> as per the appropriate rules from the following list:</p>
-
- <dl class="switch">
-
- <dt>If the <a>text track cue snap-to-lines flag</a> is not set:</dt>
- <dd>
- <dl class="switch">
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue horizontal writing direction">horizontal</a>:</dt>
- <dd>
- <dl class="switch">
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue line start alignment">start alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue computed line position</a>.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position middle alignment">middle alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue computed line position</a> minus
- half of the cue box height.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position end alignment">end alignment</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be the <a>text track cue computed line position</a> minus
- the cue box height.</p></dd>
- </dl>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue vertical growing left writing direction">vertical growing left</a>:</dt>
- <dd>
- <dl class="switch">
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position start alignment">start alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a>text track cue computed line position</a>
- minus the cue box width.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position middle alignment">middle alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a>text track cue computed line position</a>
- minus half of the cue box width.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position end alignment">end alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 100 minus the <a>text track cue computed line position</a>.</p>
- </dd>
- </dl>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue vertical growing right writing direction">vertical growing right</a>:</dt>
- <dd>
- <dl class="switch">
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position start alignment">start alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue computed line position</a>.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position middle alignment">middle alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue computed line position</a> plus
- half of the cue box width.</p></dd>
-
- <dt>If the <a>text track cue line alignment</a> is
- <a title="text track cue text position end alignment">end alignment</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be the <a>text track cue computed line position</a> plus
- the cue box width.</p></dd>
- </dl>
- </dd>
-
- </dl>
- </dd>
-
- <dt>If the <a>text track cue snap-to-lines flag</a> is set:</dt>
- <dd>
- <dl class="switch">
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue horizontal writing direction">horizontal</a>:</dt>
- <dd><p>Let <var title="">y-position</var> be 0.</p>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is
- <a title="text track cue vertical growing left writing direction">vertical growing left</a> or
- <a title="text track cue vertical growing right writing direction">vertical growing right</a>:</dt>
- <dd><p>Let <var title="">x-position</var> be 0.</p>
- </dd>
-
- </dl>
- </dd>
-
- </dl>
- </li>
-
- <li><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'. (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>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">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">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">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>WebVTT cue background
- box</dfn>.</li>
-
- <li>Properties on <a title="WebVTT Node Object">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>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>text track cue writing direction</a>. Steps labeled
- "<strong>Horizontal</strong>" must be followed only when the
- <a>text track cue writing direction</a> is <a
- title="text track cue horizontal writing
- direction">horizontal</a>, steps labeled
- "<strong>Vertical</strong>" must be followed when the
- <a>text track cue writing direction</a> is either <a
- title="text track cue vertical growing left writing
- direction">vertical growing left</a> or <a title="text
- track cue vertical growing right writing direction">vertical
- growing right</a>, steps labeled "<strong>Vertical Growing
- Left</strong>" must be followed only when the <a>text
- track cue writing direction</a> is <a title="text track
- cue vertical growing left writing direction">vertical growing
- left</a>, and steps labeled "<strong>Vertical Growing
- Right</strong>" must be followed only when the <a>text
- track cue writing direction</a> is <a title="text track
- cue vertical growing right writing direction">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>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><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>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>text track cue writing direction</a> is <a title="text track cue horizontal writing direction">horizontal</a>,
- and <var title="">direction</var> is 'ltr'</dt>
- <dd>
- <p>Let <var title="">x</var> be a percentage given by the
- <a>text track cue text position</a>, and let <var
- title="">y</var> be a percentage given by the <a>text
- track cue computed line position</a>.</p>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is <a title="text track cue horizontal writing direction">horizontal</a>,
- and <var title="">direction</var> is 'rtl'</dt>
- <dd>
- <p>Let <var title="">x</var> be a percentage given by the
- <a>text track cue text position</a> subtracted from
- 100, and let <var title="">y</var> be a percentage given
- by the <a>text track cue computed line position</a>.</p>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is <a title="text track cue vertical growing left writing direction">vertical growing left</a></dt>
- <dd>
- <p>Let <var title="">x</var> be a percentage given by the
- <a>text track cue computed line position</a> subtracted from
- 100, and let <var title="">y</var> be a percentage given
- by the <a>text track cue text position</a>.</p>
- </dd>
-
- <dt>If the <a>text track cue writing direction</a> is <a title="text track cue vertical growing right writing direction">vertical growing right</a></dt>
- <dd>
- <p>Let <var title="">x</var> be a percentage given by the
- <a>text track cue computed line position</a>, and let <var
- title="">y</var> be a percentage given by the <a>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>
- <h4>Applying CSS properties to <a title="WebVTT Node Object">WebVTT Node Objects</a></h4>
-
- <p>When following the <a>rules for updating the display of WebVTT
- text tracks</a>, user agents must set properties of <a
- title="WebVTT Node Object">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>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>rules for updating the display of WebVTT text
- tracks</a> for the <a>text track cue</a> from whose <a
- title="text track cue text">text</a> the <a>list of WebVTT
- Node Objects</a> was constructed.</p>
-
- <p>The 'text-align' property on the (root) <a>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">cue</a>'s <a>text
- track cue text alignment</a>:</p>
-
- <table>
- <thead>
- <tr> <th><a>text track cue text alignment</a> <th> 'text-align' value
- <tbody>
- <tr> <td><a title="text track cue start alignment">Start alignment</a> <td> 'start'
- <tr> <td><a title="text track cue middle alignment">Middle alignment</a> <td> 'center'
- <tr> <td><a title="text track cue end alignment">End alignment</a> <td> 'end'
- <tr> <td><a title="text track cue left alignment">Left alignment</a> <td> 'left'
- <tr> <td><a title="text track cue right alignment">Right alignment</a> <td> 'right'
- </table>
-
- <p>The 'font' shorthand property on the (root) <a>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>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>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>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>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>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>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>WebVTT cue background box</a>
- must be set to 'border-box'.</p>
-
- <p>The 'overflow' property on the <a>WebVTT cue background box</a> must be set
- to 'hidden'.</pa>
-
- <p>The 'font-style' property on <a title="WebVTT Italic
- Object">WebVTT Italic Objects</a> must be set to 'italic'.</p>
-
- <p>The 'font-weight' property on <a title="WebVTT Bold
- Object">WebVTT Bold Objects</a> must be set to 'bold'.</p>
-
- <p>The 'text-decoration' property on <a title="WebVTT Underline
- Object">WebVTT Underline Objects</a> must be set to 'underline'.</p>
-
- <p>The 'display' property on <a title="WebVTT Ruby Object">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">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">WebVTT
- Ruby Objects</a> that are not <a title="WebVTT Ruby Text
- Object">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>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>rules for updating the display of WebVTT text tracks</a> for the <a>text track region</a> from which the <a>WebVTT region object</a> was constructed.</p>
-
- <p>The children of every <a>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>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>list of WebVTT Node
- Objects</a> must inherit their values from the <a>media
- element</a> for which the <a>text track cue</a> is being
- rendered, if any. If there is no <a>media element</a> (i.e. if
- the <a>text track</a> is being rendered for another media
- playback mechanism), then inherited properties on the root
- <a>list of WebVTT Node Objects</a> and the
- <a title="WebVTT region object">WebVTT region objects</a>
- must take their initial values.</p>
-
- <p>If there are style sheets that apply to the <a>media
- element</a> or other playback mechanism, then they must be
- interpreted as defined in the next section.</p>
-
- </section>
-
- <section>
- <h4>CSS extensions</h4>
-
- <p>When a user agent is rendering one or more <a title="text track cue">text track cues</a>
- according to the <a>rules for updating the display of WebVTT text tracks</a>, <a
- title="WebVTT Node Object">WebVTT Node Objects</a> in the <a>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">WebVTT Node
- Objects</a> while a <a title="text track cue">cue</a> is being rendered, even in between
- applications of the <a>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>text track cue</a>'s <a>text track cue display state</a> must be emptied
- and the <a>text track</a>'s <a>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">text track cues</a> that are being rendered for the
- <i>matched element</i>.</p>
-
- <p class="note">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>
-
- <p>A CSS user agent that implements the <a title="text
- track">text tracks</a> model must implement the '::cue' and
- '::cue(<var title="">selector</var>)' pseudo-elements, and the <a
- title="past-pseudo-class">':past'</a> and <a
- title="future-pseudo-class">':future'</a> pseudo-classes.</p>
-
-
- <section>
- <h5>The '::cue' pseudo-element</h5>
-
- <p>The '<dfn title="pseudo-cue">::cue</dfn>' pseudo-element (with no
- argument) matches any <a>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>WebVTT cue background box</a> rather than
- the <a>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">::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>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">WebVTT Node
- Objects</a> rooted at the <a>list of WebVTT Node
- Objects</a> for the cue.</p></li>
-
- <li><p><a title="WebVTT Internal Node Object">WebVTT Internal
- Node Objects</a> are elements in the tree.</p></li>
-
- <li><a title="WebVTT Leaf Node Object">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">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>Name
-
- <tbody>
- <tr>
- <td><a title="WebVTT Class Object">WebVTT Class Objects</a>
- <td><code title="">c</code>
-
- <tr>
- <td><a title="WebVTT Italic Object">WebVTT Italic Objects</a>
- <td><code title="">i</code>
-
- <tr>
- <td><a title="WebVTT Bold Object">WebVTT Bold Objects</a>
- <td><code title="">b</code>
-
- <tr>
- <td><a title="WebVTT Underline Object">WebVTT Underline Objects</a>
- <td><code title="">u</code>
-
- <tr>
- <td><a title="WebVTT Ruby Object">WebVTT Ruby Objects</a>
- <td><code title="">ruby</code>
-
- <tr>
- <td><a title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</a>
- <td><code title="">rt</code>
-
- <tr>
- <td><a title="WebVTT Voice Object">WebVTT Voice Objects</a>
- <td><code title="">v</code>
-
- <tr>
- <td><a title="WebVTT Language Object">WebVTT Language Objects</a>
- <td><code title="">lang</code>
-
- <tr>
- <td>Other elements (specifically, <a title="list of WebVTT Node Objects">lists of WebVTT Node Objects</a>)
- <td>No explicit name.
-
- </table>
-
- </li>
-
- <li><p>For the purposes of element type and universal selectors,
- <a title="WebVTT Internal Node Object">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">WebVTT Internal Node Objects</a> have no attributes, except for <a title="WebVTT
- Voice Object">WebVTT Voice Objects</a>, which have a single attribute named "<code
- title="">voice</code>" whose value is the value of the <a>WebVTT Voice Object</a>, and
- <a title="WebVTT Language Object">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">applicable language</a>.</p></li>
-
- <li><p>For the purposes of class selector matching, <a
- title="WebVTT Internal Node Object">WebVTT Internal Node
- Objects</a> have the classes described as the <a>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">WebVTT Internal Node Objects</a> have the language
- described as the <a>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">lists of WebVTT Node Objects</a> have
- the ID given by the cue's <a>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">':past'</a> and <a
- title="future-pseudo-class">':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>list of WebVTT Node Objects</a>, must instead be applied to
- the <a>WebVTT cue background box</a>.</p>
-
- </section>
-
- <section>
- <h5>The ':past' and ':future' pseudo-classes</h5>
-
- <p>The <a title="past-pseudo-class">':past'</a> and <a
- title="future-pseudo-class">':future'</a> pseudo-classes
- sometimes match <a title="WebVTT Node Object">WebVTT Node
- Objects</a>. <a href="#refsSELECTORS">[SELECTORS]</a></p>
-
- <p>The <dfn title="past-pseudo-class">':past'</dfn> pseudo-class
- only matches <a title="WebVTT Node Object">WebVTT Node
- Objects</a> that are <i>in the past</i>.</p>
-
- <p>A <a>WebVTT Node Object</a> <var title="">c</var> is
- <dfn>in the past</dfn> if, in a pre-order, depth-first traversal of
- the <a>text track cue</a>'s <a>list of WebVTT Node
- Objects</a>, there exists a <a>WebVTT Timestamp Object</a>
- whose value is less than the <a>current playback position</a>
- of the <a>media element</a> that is the <i>matched
- element</i>, entirely after the <a>WebVTT Node Object</a> <var
- title="">c</var>.</p>
-
- <p>The <dfn title="future-pseudo-class">':future'</dfn> pseudo-class
- only matches <a title="WebVTT Node Object">WebVTT Node
- Objects</a> that are <i>in the future</i>.</p>
-
- <p>A <a>WebVTT Node Object</a> <var title="">c</var> is
- <dfn>in the future</dfn> if, in a pre-order, depth-first traversal
- of the <a>text track cue</a>'s <a>list of WebVTT Node
- Objects</a>, there exists a <a>WebVTT Timestamp Object</a>
- whose value is greater than the <a>current playback
- position</a> of the <a>media element</a> that is the
- <i>matched element</i>, entirely before the <a>WebVTT Node
- Object</a> <var title="">c</var>.</p>
- </section>
-
- <section>
- <h3>The '::cue-region' pseudo-element</h3>
-
- <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>
-
- <p class="note">If the matched element is not a video element, the pseudo-element defined below won't have any effect according to this specification.</p>
-
- <p>The '<dfn title="pseudo-region">::cue-region</dfn>' pseudo-element (with no argument) matches any list of <a title="WebVTT region object">WebVTT region objects</a> constructed for the <i>matched element</i>.</p>
-
- <p>The <a title="pseudo-cue">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>rules for updating the display of WebVTT text tracks</a>, <a title="WebVTT region object">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>
- <h2>WebVTT API for Browsers</h2>
-
- <section>
- <h3>VTTCue interface</h3>
-
- <p>The following interface is used to expose WebVTT cues in the DOM API:</p>
-
- <pre class="idl_whatwg">enum <dfn>AutoKeyword</dfn> { "auto" };
-enum <dfn>DirectionSetting</dfn> { "" /* horizontal */, "rl", "lr" };
-enum <dfn>AlignSetting</dfn> { "start", "middle", "end", "left", "right" };
-[<a title="dom-VTTCue">Constructor</a>(double startTime, double endTime, DOMString text)]
-interface <dfn>VTTCue</dfn> : <a>TextTrackCue</a> {
- attribute DOMString <a title="dom-VTTCue-regionId">regionId</a>;
- attribute <a>DirectionSetting</a> <a title="dom-VTTCue-vertical">vertical</a>;
- attribute boolean <a title="dom-VTTCue-snapToLines">snapToLines</a>;
- attribute (long or <a>AutoKeyword</a>) <a title="dom-VTTCue-line">line</a>;
- attribute <a>AlignSetting</a> <a title="dom-VTTCue-lineAlign">lineAlign</a>;
- attribute long <a title="dom-VTTCue-position">position</a>;
- attribute <a>AlignSetting</a> <a title="dom-VTTCue-positionAlign">positionAlign</a>;
- attribute long <a title="dom-VTTCue-size">size</a>;
- attribute <a>AlignSetting</a> <a title="dom-VTTCue-align">align</a>;
- attribute DOMString <a title="dom-VTTCue-text">text</a>;
- DocumentFragment <a title="dom-VTTCue-getCueAsHTML">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>text track cue start time</a>.</p>
- <p>The <var title="">endTime</var> argument sets the <a>text track cue end time</a>.</p>
- <p>The <var title="">text</var> argument sets the <a>text track cue text</a>.</p>
- </dd>
-
- <dt><var title="">cue</var> . <a title="dom-VTTCue-regionId">regionId</a></dt>
- <dd>
- <p>Returns a string representing the <a>text track cue region identifier</a> of the text track region that the <a>VTTCue</a> object belongs to. If the <a>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">vertical</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a>text track cue writing direction</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue horizontal writing direction">horizontal</a></dt>
- <dd><p>The empty string.</p></dd>
- <dt>If it is <a title="text track cue vertical growing left writing direction">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">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">snapToLines</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns true if the <a>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">line</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns the <a>text track cue line position</a>. In the
- case of the value being <a title="text track cue automatic line
- position">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-lineAlign">lineAlign</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a>text track cue line alignment</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue line start alignment">start alignment</a></dt>
- <dd><p>The string "<code title="">start</code>".</p></dd>
- <dt>If it is <a title="text track cue line middle alignment">middle alignment</a></dt>
- <dd><p>The string "<code title="">middle</code>".</p></dd>
- <dt>If it is <a title="text track cue line end alignment">end alignment</a></dt>
- <dd><p>The string "<code title="">end</code>".</p></dd>
- </dl>
- <p>Can be set.</p>
- </dd>
-
- <dt><var title="">cue</var> . <a title="dom-VTTCue-position">position</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns the <a>text track cue text position</a>.</p>
- <p>Can be set.</p>
- </dd>
-
- <dt><var title="">cue</var> . <a title="dom-VTTCue-positionAlign">positionAlign</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a>text track cue text position alignment</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue text position start alignment">start alignment</a></dt>
- <dd><p>The string "<code title="">start</code>".</p></dd>
- <dt>If it is <a title="text track cue text position middle alignment">middle alignment</a></dt>
- <dd><p>The string "<code title="">middle</code>".</p></dd>
- <dt>If it is <a title="text track cue text position end alignment">end alignment</a></dt>
- <dd><p>The string "<code title="">end</code>".</p></dd>
- </dl>
- <p>Can be set.</p>
- </dd>
-
- <dt><var title="">cue</var> . <a title="dom-VTTCue-size">size</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns the <a>text track cue size</a>.</p>
- <p>Can be set.</p>
- </dd>
-
- <dt><var title="">cue</var> . <a title="dom-VTTCue-align">align</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns a string representing the <a>text track cue text alignment</a>, as follows:</p>
- <dl class="switch">
- <dt>If it is <a title="text track cue start alignment">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">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">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">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">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">text</a> [ = <var title="">value</var> ]</dt>
- <dd>
- <p>Returns the <a>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">getCueAsHTML</a>()</dt>
- <dd>
- <p>Returns the <a>text track cue text</a> as a <code>DocumentFragment</code> of <a>HTML elements</a> and other DOM nodes.</p>
- </dd>
-
- </dl>
-
- <p>The <dfn title="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>text track cue</a>. Let <var
- title="">cue</var> be that <a>text track cue</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>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>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>text track cue text</a> be the value of the <var
- title="">text</var> argument, and let the <a>rules for rendering the cue in isolation</a>
- be the <a>rules for interpreting WebVTT cue text</a>.</p></li>
-
- <!-- default settings -->
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue region identifier</a>
- be the empty string.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue identifier</a> be the empty string.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue pause-on-exit flag</a> be false.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue writing direction</a> be
- <a title="text track cue horizontal writing direction">horizontal</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a title="text track cue region identifier">region identifier</a>
- be the empty string.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue snap-to-lines flag</a> be true.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue line position</a> be
- <a title="text track cue automatic line position">auto</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue line alignment</a> be
- <a title="text track cue line start alignment">start alignment</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue text position</a> be 50.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue text position alignment</a> be
- <a title="text track cue text position middle alignment">middle alignment</a>.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue size</a> be 100.</p></li>
-
- <li><p>Let <var title="">cue</var>'s <a>text track cue text alignment</a> be
- <a title="text track cue middle alignment">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"><code>regionId</code></dfn>
- attribute, on getting, must return the <a>text track cue region identifier</a> of the <a>text
- track cue</a> that the <code>VTTCue</code> object represents; or the empty string otherwise.
- On setting, the <a>text track cue region identifier</a> must be set to the new value if that
- value refers to a <a>WebVTT region</a>, or unset otherwise.</p>
-
- <p>The <dfn
- title="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>text
- track cue writing direction</a> of the <a>text track
- cue</a> that the <code>VTTCue</code> object represents:</p>
-
- <table>
- <thead>
- <tr> <th> <a>text track cue writing direction</a>
- <th> <code title="dom-VTTCue-direction">direction</code> value
- <tbody>
- <tr> <td> <a title="text track cue horizontal writing direction">Horizontal</a>
- <td> "<code title=""></code>" (the empty string)
- <tr> <td> <a title="text track cue vertical growing left writing direction">Vertical growing left</a>
- <td> "<code title="">rl</code>"
- <tr> <td> <a title="text track cue vertical growing right writing direction">Vertical growing right</a>
- <td> "<code title="">lr</code>"
- </table>
-
- <p>On setting, the <a>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>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"><code>snapToLines</code></dfn> attribute, on
- getting, must return true if the <a>text track cue snap-to-lines flag</a> of the <a>text
- track cue</a> that the <code>VTTCue</code> object represents is set; or false otherwise.
- On setting, the <a>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"><code>line</code></dfn> attribute, on getting, must
- return the <a>text track cue line position</a> of the <a>text track cue</a> that the
- <code>VTTCue</code> object represents. The special value <a title="text track cue
- automatic line position">auto</a> must be represented as the string "<code
- title="">auto</code>". On setting, the <a>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">auto</a>.</p>
-
- <p>The <dfn title="dom-VTTCue-lineAlign"><code>lineAlign</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>text track cue line alignment</a> of the <a>text track cue</a> that the
- <code>VTTCue</code> object represents:</p>
-
- <table>
- <thead>
- <tr> <th><a>text track cue line alignment</a> <th> <code title="dom-VTTCue-lineAlign">lineAlign</code> value
- <tbody>
- <tr> <td><a title="text track cue line start alignment">Start alignment</a> <td> "<code title="">start</code>"
- <tr> <td><a title="text track cue line middle alignment">Middle alignment</a> <td> "<code title="">middle</code>"
- <tr> <td><a title="text track cue line end alignment">End alignment</a> <td> "<code title="">end</code>"
- </table>
-
- <p>On setting, the <a>text track cue line 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>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-position"><code>position</code></dfn> attribute, on getting,
- must return the <a>text track cue text position</a> of the <a>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>text track cue text position</a> must be set to the new value.</p>
-
- <p>The <dfn title="dom-VTTCue-positionAlign"><code>positionAlign</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>text track cue text position alignment</a> of the <a>text track cue</a> that the
- <code>VTTCue</code> object represents:</p>
-
- <table>
- <thead>
- <tr>
- <th><a>text track cue text position alignment</a>
- <th><code title="dom-VTTCue-positionAlign">positionAlign</code> value
- <tbody>
- <tr> <td><a title="text track cue text position start alignment">Start alignment</a> <td> "<code title="">start</code>"
- <tr> <td><a title="text track cue text position middle alignment">Middle alignment</a> <td> "<code title="">middle</code>"
- <tr> <td><a title="text track cue text position end alignment">End alignment</a> <td> "<code title="">end</code>"
- </table>
-
- <p>On setting, the <a>text track cue text position 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>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-size"><code>size</code></dfn> attribute, on getting, must
- return the <a>text track cue size</a> of the <a>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>text
- track cue size</a> must be set to the new value.</p>
-
- <p>The <dfn title="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>text track cue text alignment</a> of the <a>text track cue</a> that the
- <code>VTTCue</code> object represents:</p>
-
- <table>
- <thead>
- <tr> <th><a>text track cue text alignment</a> <th> <code title="dom-VTTCue-align">align</code> value
- <tbody>
- <tr> <td><a title="text track cue start alignment">Start alignment</a> <td> "<code title="">start</code>"
- <tr> <td><a title="text track cue middle alignment">Middle alignment</a> <td> "<code title="">middle</code>"
- <tr> <td><a title="text track cue end alignment">End alignment</a> <td> "<code title="">end</code>"
- <tr> <td><a title="text track cue left alignment">Left alignment</a> <td> "<code title="">left</code>"
- <tr> <td><a title="text track cue right alignment">Right alignment</a> <td> "<code title="">right</code>"
- </table>
-
- <p>On setting, the <a>text track cue text 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>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"><code>text</code></dfn> attribute, on getting, must
- return the raw <a>text track cue text</a> of the <a>text track cue</a> that the
- <code>VTTCue</code> object represents. On setting, the <a>text track cue text</a> must
- be set to the new value.</p>
-
- <p>The <dfn title="dom-VTTCue-getCueAsHTML"><code>getCueAsHTML()</code></dfn> method must
- convert the <a>text track cue text</a> to a <code>DocumentFragment</code> for the
- <a>script's document</a> of the <a>entry script</a> by applying the <a>WebVTT cue
- text DOM construction rules</a> to the result of applying the <a>WebVTT cue text parsing
- rules</a> to the <a>text track cue text</a>.</p>
-
- </section>
-
- <section>
- <h3>Extension of the TextTrack interface for region support</h3>
-
- <p>The following attribute and methods are introduced into the <a>TextTrack</a> object:</p>
-
- <pre class="idl_whatwg">
-interface <a>TextTrack</a> : EventTarget {
- attribute VTTRegionList? <a title="dom-TextTrack-regions">regions</a>;
- void <a title="dom-TextTrack-addRegion">addRegion</a>(<a>VTTRegion</a> region);
- void <a title="dom-TextTrack-removeRegion">removeRegion</a>(<a>VTTRegion</a> region);
-};</pre>
-
- <dl class="domintro">
-
- <dt><var title="">textTrack</var> . <a title="dom-TextTrack-regions">regions</a></dt>
- <dd>
- <p>Returns the <a>text track list of regions</a>, as a <code>VTTRegionList</code> object.</p>
- </dd>
-
- <dt><var title="">textTrack</var> . <a title="dom-TextTrack-addRegion">addRegion</a>(region)</dt>
- <dd>
- <p>Adds the given region to <var>TextTrack</var>'s <a>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">removeRegion</a>(region)</dt>
- <dd>
- <p>Removes the given region from <var>TextTrack</var>'s <a>text track list of regions</a>.</p>
- </dd>
-
- </dl>
-
- <p>If the <a>text track mode</a> of the <a>text track</a> that the <var>TextTrack</var> object represents is not the <a>text track disabled</a> mode, then the <dfn title="dom-texttrack-regions">regions</dfn> attribute must return a live <a>VTTRegionList</a> object that represents the <a>text track list of regions</a> of the <a>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"><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>text track list of regions</a>, then remove <var>region</var> from that <a>text track list of regions</a>.</p></li>
-
- <li><p>If the method's <a><code>TextTrack</code></a> object's <a>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>text track list of regions</a>.</p></li>
- </ol>
-
- <p>The <dfn title="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>text track list of regions</a>, then throw a NotFoundError exception.</p></li>
-
- <li><p>Otherwise: remove <var>region</var> from that <a>text track list of regions</a>.</p></li>
- </ol>
-
- </section><!-- TextTrack interface -->
-
- <section>
- <h3>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>VTTRegion</dfn> : EventTarget {
- readonly attribute TextTrack? <a title="dom-VTTRegion-track">track</a>;
- attribute DOMString <a title="dom-VTTRegion-id">id</a>;
- attribute double <a title="dom-VTTRegion-width">width</a>;
- attribute long <a title="dom-VTTRegion-lines">lines</a>;
- attribute double <a title="dom-VTTRegion-regionAnchorX">regionAnchorX</a>;
- attribute double <a title="dom-VTTRegion-regionAnchorY">regionAnchorY</a>;
- attribute double <a title="dom-VTTRegion-viewportAnchorX">viewportAnchorX</a>;
- attribute double <a title="dom-VTTRegion-viewportAnchorY">viewportAnchorY</a>;
- attribute DOMString <a title="dom-VTTRegion-scroll">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">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">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">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">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">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">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">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">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">scroll</a></dt>
- <dd><p>Returns a string representing the <a>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"><code>VTTRegion()</code></dfn> constructor, when invoked, must run the following steps:</p>
-
- <ol>
- <li><p>Create a new <a>text track region</a>. Let <var>region</var> be that <a>text track region</a>.</p></li>
-
- <!-- default settings -->
- <li><p>Let <var>region</var>'s <a>text track region identifier</a> be the empty string.</p></li>
-
- <li><p>Let <var>region</var>'s <a>text track region width</a> be 100.</p></li>
-
- <li><p>Let <var>region</var>'s <a>text track region lines</a> be 3.</p></li>
-
- <li><p>Let <var>region</var>'s <a title="text track region anchor">text track region regionAnchorX</a> be 0.</p></li>
-
- <li><p>Let <var>region</var>'s <a title="text track region anchor">text track region regionAnchorY</a> be 100.</p></li>
-
- <li><p>Let <var>region</var>'s <a title="text track region viewport anchor">text track region viewportAnchorX</a> be 0.</p></li>
-
- <li><p>Let <var>region</var>'s <a title="text track region viewport anchor">text track region viewportAnchorY</a> be 100.</p></li>
-
- <li><p>Let <var>region</var>'s <a>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"><code>track</code></dfn> attribute, on getting, must return the <code>TextTrack</code> object of the <a>text track</a> in whose list of regions the <a>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"><code>id</code></dfn> attribute, on getting, must return the <a>text track region identifier</a> of the <a>text track region</a> that the <a><code>VTTRegion</code></a> object represents. On setting, the <a>text track region identifier</a> must be set to the new value.</p>
-
- <p>The <dfn title="dom-VTTRegion-width"><code>width</code></dfn> attribute, on getting, must return the <a>text track region width</a> of the <a>text track region</a> that the <code>VTTRegion</code> object represents, in percent of video width. On setting, the <a>text track region width</a> must be set to the new value, interpreted as a percentage.</p>
-
- <p>The <dfn title="dom-VTTRegion-lines"><code>lines</code></dfn> attribute, on getting, must return the <a>text track region lines</a> of the <a>text track region</a> that the <code>VTTRegion</code> object represents, as number of lines. On setting, the <a>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"><code>regionAnchor X</code></dfn> attribute, on getting, must return the <a>text track region anchor</a> X offset of the <a>text track region</a> that the <code>VTTRegion</code> object represents, in percent of region width. On setting, the <a>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"><code>regionAnchor Y</code></dfn> attribute, on getting, must return the <a>text track region anchor</a> Y offset of the <a>text track region</a> that the <code>VTTRegion</code> object represents, in percent of region height. On setting, the <a>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"><code>viewportAnchor X</code></dfn> attribute, on getting, must return the <a>text track region viewport anchor</a> X offset of the <a>text track region</a> that the <code>VTTRegion</code> object represents, in percent of video width. On setting, the <a>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"><code>viewportAnchor Y</code></dfn> attribute, on getting, must return the <a>text track region viewport anchor</a> Y offset of the <a>text track region</a> that the <code>VTTRegion</code> object represents, in percent of video height. On setting, the <a>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"><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>text track region scroll</a> setting of the <a>text track region</a> that the <code>VTTRegion</code> object represents:</p>
- <table>
- <thead>
- <tr> <th> <a>Text track region scroll</a> setting
- <th> <code id="dom-VTTRegion-scroll">scroll</code> value
- <tbody>
- <tr> <td> <a title="text track region scroll none">None</a>
- <td> "<code></code>" (the empty string)
- <tr> <td> <a title="text track region scroll up">Up</a>
- <td> "<code>up</code>"
- </table>
-
- <p>On setting, the <a>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>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>
- <h3>VTTRegionList interface</h3>
-
- <pre class="idl_whatwg">
-interface <dfn>VTTRegionList</dfn> : EventTarget {
- readonly attribute unsigned long <a title="dom-VTTRegionList-length">length</a>;
- getter <a title="dom-VTTRegion">VTTRegion</a> (unsigned long index);
- <a>VTTRegion</a>? <a title="dom-VTTRegionList-getRegionById">getRegionById</a>(DOMString id);
-};</pre>
-
- <dl class="domintro">
-
- <dt><var title="">regionList</var> . <a title="dom-VTTRegionList-length">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>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">getRegionById</a>( id )</dt>
- <dd>
- <p>Returns the first <a>text track region</a> with <a>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">text track regions</a> in a given order.</p>
-
- <p>The <dfn title="dom-VTTRegionList-length"><code>length</code></dfn> attribute must return the number of <a title="text track region">regions</a> in the list represented by the <code>VTTRegionList</code> object.</p>
-
- <p>The <a>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">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">regions</a> in the list, there are no <a>supported property indices</a>.</p>
-
- <p>To <a>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>text track region</a> in the list represented by the <code>VTTRegionList</code> object.</p>
-
- <p>The <dfn title="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>text track region</a> in the list represented by the <code>VTTRegionList</code> object whose <a>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>
-
- </section><!-- end VTTRegionList object -->
-
- </section><!-- WebVTT API for browsers -->
-
- <section>
- <h2 id="iana">IANA considerations</h2>
- <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
-
- <section>
- <h3><dfn><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> EF BB BF 57 45 42 56 54 54 0D
- <li> EF BB BF 57 45 42 56 54 54 20
- <li> EF BB BF 57 45 42 56 54 54 09
- <li> EF BB BF 57 45 42 56 54 54 EOF
- <li> 57 45 42 56 54 54 0A
- <li> 57 45 42 56 54 54 0D
- <li> 57 45 42 56 54 54 20
- <li> 57 45 42 56 54 54 09
- <li> 57 45 42 56 54 54 EOF
- </ul>
- <p class="note">(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.)
- </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>
- <h2 class="no-num" id="references">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>
- <h2 class="no-num">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 at the WHATWG and W3C HTML Working Group, 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>
-
+ <h1>The WebVTT specification has moved</h1>
+ <p>Go to <a href="http://dev.w3.org/html5/webvtt/">the WebVTT specification at the W3C</a>.</p>
+ <p>Go to <a href="https://github.com/w3c/webvtt">the GitHub repository for WebVTT</a>.</p>
</body>
</html>
\ No newline at end of file