WebVTT: The Web Video Text Tracks Format DIFF file

Diff between:

W3C Candidate Recommendation 15 April 2018

W3C Working Draft 08 August 2017

Prepared using diff2html by rtfpessoa

Files changed (1) hide show
  1. {../2017-08-08 → .}/Overview.html +1579 -1211
{../2017-08-08 → .}/Overview.html RENAMED
@@ -1210,6 +1210,9 @@
1210
1210
color: inherit;
1211
1211
}
1212
1212
</style>
1213
+ <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-CR" rel="stylesheet" type="text/css">
1214
+ <meta content="Bikeshed version 5dff6b06be1856d0a5e62cf40e9cc21c06bfb098" name="generator">
1215
+ <link href="https://www.w3.org/TR/webvtt1/" rel="canonical">
1213
1216
<style>
1214
1217
samp {
1215
1218
font-family: inherit;
@@ -1218,6 +1221,10 @@
1218
1221
outline: 0.18em solid rgba(0, 0, 0, 0.7);
1219
1222
color: white;
1220
1223
}
1224
+
1225
+ [data-algorithm]:not(.heading) {
1226
+ padding-left: 2em;
1227
+ }
1221
1228
</style>
1222
1229
<style>/* style-md-lists */
1223
1230
@@ -1461,31 +1468,27 @@
1461
1468
.highlight .vi { color: #0077aa } /* Name.Variable.Instance */
1462
1469
.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */
1463
1470
</style>
1464
-
1465
- <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css">
1466
- <meta content="Bikeshed version 98d39f855addd7fd56ede57e54c21835cb0ff7de" name="generator">
1467
- <link href="https://www.w3.org/TR/webvtt1/" rel="canonical">
1468
-
1469
1471
<body class="h-entry">
1470
1472
<div class="head">
1471
1473
<p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
1472
1474
<h1 class="p-name no-ref" id="title">WebVTT: The Web Video Text Tracks Format</h1>
1473
- <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft <time class="dt-updated" datetime="2017-08-08">08 August 2017</time></span></h2>
1475
+ <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation <time class="dt-updated" datetime="2018-04-15">15 April 2018</time></span></h2>
1474
1476
<div data-fill-with="spec-metadata">
1475
1477
<dl>
1476
1478
<dt>This version:
1477
- <dd><a class="u-url" href="https://www.w3.org/TR/2017/WD-webvtt1-20170808/">https://www.w3.org/TR/2017/WD-webvtt1-20170808/</a>
1479
+ <dd><a class="u-url" href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/">https://www.w3.org/TR/2018/CR-webvtt1-20180415/</a>
1478
1480
<dt>Latest published version:
1479
1481
<dd><a href="https://www.w3.org/TR/webvtt1/">https://www.w3.org/TR/webvtt1/</a>
1480
1482
<dt>Editor's Draft:
1481
1483
<dd><a href="https://w3c.github.io/webvtt/">https://w3c.github.io/webvtt/</a>
1482
1484
<dt>Previous Versions:
1483
- <dd><a href="https://www.w3.org/TR/2017/WD-webvtt1-20170713/" rel="prev">https://www.w3.org/TR/2017/WD-webvtt1-20170713/</a>
1485
+ <dd><a href="https://www.w3.org/TR/2017/WD-webvtt1-20170808/" rel="prev">https://www.w3.org/TR/2017/WD-webvtt1-20170808/</a>
1484
1486
<dt>Test Suite:
1485
1487
<dd><a href="https://github.com/w3c/web-platform-tests/tree/master/webvtt">https://github.com/w3c/web-platform-tests/tree/master/webvtt</a>
1486
1488
<dt class="editor">Editor:
1487
- <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com" data-editor-id="simonp">Simon Pieters</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software ASA</a>)
1489
+ <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:silvia.pfeiffer@data61.csiro.au">Silvia Pfeiffer</a> (<a class="p-org org" href="https://www.csiro.au/">CSIRO</a>)
1488
1490
<dt class="editor">Former Editors:
1491
+ <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com">Simon Pieters</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software AS</a>)
1489
1492
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:silviapfeiffer1@gmail.com">Silvia Pfeiffer</a> (<a class="p-org org" href="http://nicta.com.au/">NICTA</a>)
1490
1493
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:philipj@opera.com">Philip Jägenstedt</a> (<a class="p-org org" href="http://www.opera.com/">Opera Software ASA</a>)
1491
1494
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ian@hixie.ch">Ian Hickson</a> (<a class="p-org org" href="http://www.google.com/">Google</a>)
@@ -1497,7 +1500,7 @@
1497
1500
</dl>
1498
1501
</div>
1499
1502
<div data-fill-with="warning"></div>
1500
- <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011-2017 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>).
1503
+ <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011-2018 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>).
1501
1504
W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
1502
1505
<hr title="Separator for header">
1503
1506
</div>
@@ -1509,33 +1512,64 @@
1509
1512
</div>
1510
1513
<h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
1511
1514
<div data-fill-with="status">
1512
- <p> <em>This section describes the status of this document at the time of
1513
- its publication. Other documents may supersede this document. A list of
1514
- current W3C publications and the latest revision of this technical report
1515
- can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
1515
+
1516
+ <p> <em>This section describes the status of this document at the time of its publication. Other
1517
+ documents may supersede this document. A list of current W3C publications and the latest revision
1518
+ of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
1516
1519
index at https://www.w3.org/TR/.</a></em> </p>
1517
- <p>Work on this specification is being undertaken both in the <a href="https://www.w3.org/community/texttracks/">Web Media Text Tracks Community Group</a> as well as
1518
- in the <a href="https://www.w3.org/AudioVideo/TT/"><abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a>. The latter group works towards a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation for reference purposes with
1519
- interoperability requirements, while the former is a Draft Community Group Report that continues to
1520
- evolve. </p>
1521
- <p>This document was published by the <a href="https://www.w3.org/AudioVideo/TT/"><abbr title="World Wide Web Consortium">W3C</abbr> Timed
1522
- Text Working Group</a> as a Working Draft. This document is intended to become a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation. If you wish to make comments regarding
1523
- this document, please send them to <a href="mailto:public-tt@w3.org?subject=%5Bwebvtt%5D">public-tt@w3.org</a> (<a href="mailto:public-tt-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-tt/">archives</a>) with <code>[webvtt]</code> at
1524
- the start of your email’s subject. All comments are welcome. </p>
1525
1520
1526
- <p>The Timed Text Working Group intends to recommend transition of this document to Candidate Recommendation and is offering this Working Draft for a public review period ending on 22 September 2017. A cumulative summary of all changes applied to this version since <a href="http://www.w3.org/TR/2014/WD-webvtt1-20141113/">WebVTT First Public Working Draft</a> was published is available at <a href="changes-FPWD.html">Changes from WebVTT (FPWD)</a>.
1527
- </p>
1528
- <p> Publication as a Working Draft does not imply endorsement by the W3C
1529
- Membership. This is a draft document and may be updated, replaced or
1530
- obsoleted by other documents at any time. It is inappropriate to cite this
1521
+ <p>Work on this specification is being undertaken both in the
1522
+ <a href="https://www.w3.org/community/texttracks/">Web Media Text Tracks Community Group</a>
1523
+ as well as in the <a href="https://www.w3.org/AudioVideo/TT/">
1524
+ <abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a>. The latter group
1525
+ works towards a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation for reference
1526
+ purposes with interoperability requirements, while the former is a Draft Community Group Report
1527
+ that continues to evolve. </p>
1528
+
1529
+ <p>This document was published by the <a href="https://www.w3.org/AudioVideo/TT/">
1530
+ <abbr title="World Wide Web Consortium">W3C</abbr> Timed Text Working Group</a> as a Working Draft.
1531
+ This document is intended to become a <abbr title="World Wide Web Consortium">W3C</abbr>
1532
+ Recommendation. If you wish to make comments regarding this document, please send them to
1533
+ <a href="mailto:public-tt@w3.org?subject=%5Bwebvtt%5D">public-tt@w3.org</a>
1534
+ (<a href="mailto:public-tt-request@w3.org?subject=subscribe">subscribe</a>,
1535
+ <a href="http://lists.w3.org/Archives/Public/public-tt/">archives</a>) with <code>[webvtt]</code>
1536
+ at the start of your email’s subject. All comments are welcome.
1537
+ <abbr title="World Wide Web Consortium">W3C</abbr> publishes a Candidate Recommendation to indicate
1538
+ that the document is believed to be stable and to encourage implementation by the developer
1539
+ community. This Candidate Recommendation is expected to advance to Proposed Recommendation no
1540
+ earlier than 15 July 2017. </p>
1541
+
1542
+ <p>Please see the Working Group's <a href="https://www.w3.org/wiki/TimedText/WebVTT_Implementation_Report">Implementation Report</a>.</p>
1543
+
1544
+ <p>For this specification to exit the CR stage, at least 2 independent implementations of every
1545
+ feature defined in this specification need to be documented in the implementation report. The
1546
+ implementation report is based on implementer-provided test results for the
1547
+ <a href="https://github.com/w3c/web-platform-tests/tree/master/webvtt">test suite</a>. The Working
1548
+ Group does not require that implementations are publicly available but encourages them to be so.</p>
1549
+
1550
+ <p>The Working Group has not identified features "at risk" for this specification.</p>
1551
+
1552
+ <p>A cumulative summary of all changes applied to this version since the
1553
+ <a href="https://www.w3.org/TR/2014/WD-webvtt1-20141113/">WebVTT First Public Working Draft</a>
1554
+ was published is available at <a href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/changes.html">Changes from FPWD WebVTT</a>.</p>
1555
+
1556
+ <p>For convenience, a complete diff between this version and the WebVTT previous Working Draft was published is found at <a href="https://www.w3.org/TR/2018/CR-webvtt1-20180415/diff.html">Diff from previsou Workdin Draft WebVTT</a>.</p>
1557
+
1558
+ <p> Publication as a Candidate Recommendation does not imply endorsement by the
1559
+ <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may be
1560
+ updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this
1531
1561
document as other than work in progress. </p>
1562
+
1532
1563
<p> This document was produced by a group operating under
1533
1564
the <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
1534
- W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/34314/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
1565
+ W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/49309/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
1535
1566
that page also includes instructions for disclosing a patent.
1567
+ <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/34314/status">public list of any patent disclosures</a> made in connection with the
1568
+ deliverables of the group; that page also includes instructions for disclosing a patent.
1536
1569
An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
1570
+
1537
1571
<p> This document is governed by the <a href="https://www.w3.org/2017/Process-20170301/" id="w3c_process_revision">1 March 2017 W3C Process Document</a>. </p>
1538
- <p></p>
1572
+
1539
1573
</div>
1540
1574
<div class="snapshot" hidden="">
1541
1575
<p>
@@ -1551,10 +1585,13 @@
1551
1585
<li>
1552
1586
<a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
1553
1587
<ol class="toc">
1554
- <li><a href="#introduction-multiple-lines"><span class="secno">1.1</span> <span class="content">Cues with multiple lines</span></a>
1555
- <li><a href="#introduction-comments"><span class="secno">1.2</span> <span class="content">Comments</span></a>
1556
- <li><a href="#styling"><span class="secno">1.3</span> <span class="content">Styling</span></a>
1557
- <li><a href="#introduction-other-features"><span class="secno">1.4</span> <span class="content">Other features</span></a>
1588
+ <li><a href="#introduction-caption"><span class="secno">1.1</span> <span class="content">A simple caption file</span></a>
1589
+ <li><a href="#introduction-multiple-lines"><span class="secno">1.2</span> <span class="content">Caption cues with multiple lines</span></a>
1590
+ <li><a href="#styling"><span class="secno">1.3</span> <span class="content">Styling captions</span></a>
1591
+ <li><a href="#introduction-other-features"><span class="secno">1.4</span> <span class="content">Other caption and subtitling features</span></a>
1592
+ <li><a href="#introduction-comments"><span class="secno">1.5</span> <span class="content">Comments in WebVTT</span></a>
1593
+ <li><a href="#introduction-chapters"><span class="secno">1.6</span> <span class="content">Chapters example</span></a>
1594
+ <li><a href="#introduction-metadata"><span class="secno">1.7</span> <span class="content">Metadata example</span></a>
1558
1595
</ol>
1559
1596
<li>
1560
1597
<a href="#conformance"><span class="secno">2</span> <span class="content">Conformance</span></a>
@@ -1565,8 +1602,12 @@
1565
1602
<li>
1566
1603
<a href="#data-model"><span class="secno">3</span> <span class="content">Data model</span></a>
1567
1604
<ol class="toc">
1568
- <li><a href="#cues"><span class="secno">3.1</span> <span class="content">WebVTT cues</span></a>
1569
- <li><a href="#regions"><span class="secno">3.2</span> <span class="content">WebVTT regions</span></a>
1605
+ <li><a href="#model-overview"><span class="secno">3.1</span> <span class="content">Overview</span></a>
1606
+ <li><a href="#model-cues"><span class="secno">3.2</span> <span class="content">WebVTT cues</span></a>
1607
+ <li><a href="#cues"><span class="secno">3.3</span> <span class="content">WebVTT caption or subtitle cues</span></a>
1608
+ <li><a href="#regions"><span class="secno">3.4</span> <span class="content">WebVTT caption or subtitle regions</span></a>
1609
+ <li><a href="#chapter-cues"><span class="secno">3.5</span> <span class="content">WebVTT chapter cues</span></a>
1610
+ <li><a href="#metadata-cues"><span class="secno">3.6</span> <span class="content">WebVTT metadata cues</span></a>
1570
1611
</ol>
1571
1612
<li>
1572
1613
<a href="#syntax"><span class="secno">4</span> <span class="content">Syntax</span></a>
@@ -1576,7 +1617,8 @@
1576
1617
<a href="#types-of-webvtt-cue-payload"><span class="secno">4.2</span> <span class="content">Types of WebVTT cue payload</span></a>
1577
1618
<ol class="toc">
1578
1619
<li><a href="#metadata-text"><span class="secno">4.2.1</span> <span class="content">WebVTT metadata text</span></a>
1579
- <li><a href="#cue-text"><span class="secno">4.2.2</span> <span class="content">WebVTT cue text</span></a>
1620
+ <li><a href="#caption-text"><span class="secno">4.2.2</span> <span class="content">WebVTT caption or subtitle cue text</span></a>
1621
+ <li><a href="#chapter-title-text"><span class="secno">4.2.3</span> <span class="content">WebVTT chapter title text</span></a>
1580
1622
</ol>
1581
1623
<li><a href="#region-settings"><span class="secno">4.3</span> <span class="content">WebVTT region settings</span></a>
1582
1624
<li><a href="#cue-settings"><span class="secno">4.4</span> <span class="content">WebVTT cue settings</span></a>
@@ -1590,51 +1632,56 @@
1590
1632
<ol class="toc">
1591
1633
<li><a href="#file-using-metadata-content"><span class="secno">4.6.1</span> <span class="content">WebVTT file using metadata content</span></a>
1592
1634
<li><a href="#file-using-chapter-title-text"><span class="secno">4.6.2</span> <span class="content">WebVTT file using chapter title text</span></a>
1593
- <li><a href="#file-using-cue-text"><span class="secno">4.6.3</span> <span class="content">WebVTT file using cue text</span></a>
1635
+ <li><a href="#file-using-cue-text"><span class="secno">4.6.3</span> <span class="content">WebVTT file using caption or subtitle cue text</span></a>
1594
1636
</ol>
1595
1637
</ol>
1596
1638
<li>
1597
- <a href="#parsing"><span class="secno">5</span> <span class="content">Parsing</span></a>
1639
+ <a href="#default-classes"><span class="secno">5</span> <span class="content">Default classes for WebVTT Caption or Subtitle Cue Components</span></a>
1598
1640
<ol class="toc">
1599
- <li><a href="#file-parsing"><span class="secno">5.1</span> <span class="content">WebVTT file parsing</span></a>
1600
- <li><a href="#region-settings-parsing"><span class="secno">5.2</span> <span class="content">WebVTT region settings parsing</span></a>
1641
+ <li><a href="#default-text-color"><span class="secno">5.1</span> <span class="content">Default text colors</span></a>
1642
+ <li><a href="#default-text-background"><span class="secno">5.2</span> <span class="content">Default text background colors</span></a>
1601
- <li><a href="#cue-timings-and-settings-parsing"><span class="secno">5.3</span> <span class="content">WebVTT cue timings and settings parsing</span></a>
1602
- <li><a href="#cue-text-parsing-rules"><span class="secno">5.4</span> <span class="content">WebVTT cue text parsing rules</span></a>
1603
- <li><a href="#dom-construction-rules"><span class="secno">5.5</span> <span class="content"><span>WebVTT cue text DOM construction rules</span></span></a>
1604
- <li><a href="#rules-for-extracting-the-chapter-title"><span class="secno">5.6</span> <span class="content">WebVTT rules for extracting the chapter
1605
- title</span></a>
1606
1643
</ol>
1607
1644
<li>
1608
- <a href="#rendering"><span class="secno">6</span> <span class="content">Rendering</span></a>
1645
+ <a href="#parsing"><span class="secno">6</span> <span class="content">Parsing</span></a>
1609
1646
<ol class="toc">
1647
+ <li><a href="#file-parsing"><span class="secno">6.1</span> <span class="content">WebVTT file parsing</span></a>
1648
+ <li><a href="#region-settings-parsing"><span class="secno">6.2</span> <span class="content">WebVTT region settings parsing</span></a>
1649
+ <li><a href="#cue-timings-and-settings-parsing"><span class="secno">6.3</span> <span class="content">WebVTT cue timings and settings parsing</span></a>
1650
+ <li><a href="#cue-text-parsing-rules"><span class="secno">6.4</span> <span class="content">WebVTT cue text parsing rules</span></a>
1651
+ <li><a href="#dom-construction-rules"><span class="secno">6.5</span> <span class="content"><span>WebVTT cue text DOM construction rules</span></span></a>
1652
+ <li><a href="#rules-for-extracting-the-chapter-title"><span class="secno">6.6</span> <span class="content">WebVTT rules for extracting the chapter
1653
+ title</span></a>
1654
+ </ol>
1610
1655
<li>
1611
- <a href="#processing-model"><span class="secno">6.1</span> <span class="content">Processing model</span></a>
1656
+ <a href="#rendering"><span class="secno">7</span> <span class="content">Rendering</span></a>
1612
1657
<ol class="toc">
1613
- <li><a href="#applying-css-properties"><span class="secno">6.1.1</span> <span class="content">Applying CSS properties to <span>WebVTT Node Objects</span></span></a>
1614
- </ol>
1658
+ <li><a href="#processing-model"><span class="secno">7.1</span> <span class="content">Processing model</span></a>
1659
+ <li><a href="#processing-cue-settings"><span class="secno">7.2</span> <span class="content">Processing cue settings</span></a>
1660
+ <li><a href="#obtaining-css-boxes"><span class="secno">7.3</span> <span class="content">Obtaining CSS boxes</span></a>
1661
+ <li><a href="#applying-css-properties"><span class="secno">7.4</span> <span class="content">Applying CSS properties to <span>WebVTT Node Objects</span></span></a>
1615
1662
</ol>
1616
1663
<li>
1617
- <a href="#css-extensions"><span class="secno">7</span> <span class="content">CSS extensions</span></a>
1664
+ <a href="#css-extensions"><span class="secno">8</span> <span class="content">CSS extensions</span></a>
1618
1665
<ol class="toc">
1619
- <li><a href="#css-extensions-introduction"><span class="secno">7.1</span> <span class="content">Introduction</span></a>
1666
+ <li><a href="#css-extensions-introduction"><span class="secno">8.1</span> <span class="content">Introduction</span></a>
1620
1667
<li>
1621
- <a href="#css-extensions-processing-model"><span class="secno">7.2</span> <span class="content">Processing model</span></a>
1668
+ <a href="#css-extensions-processing-model"><span class="secno">8.2</span> <span class="content">Processing model</span></a>
1622
1669
<ol class="toc">
1623
- <li><a href="#the-cue-pseudo-element"><span class="secno">7.2.1</span> <span class="content">The <span class="css">::cue</span> pseudo-element</span></a>
1624
- <li><a href="#the-past-and-future-pseudo-classes"><span class="secno">7.2.2</span> <span class="content">The <span class="css">:past</span> and <span class="css">:future</span> pseudo-classes</span></a>
1625
- <li><a href="#the-cue-region-pseudo-element"><span class="secno">7.2.3</span> <span class="content">The <span class="css">::cue-region</span> pseudo-element</span></a>
1670
+ <li><a href="#the-cue-pseudo-element"><span class="secno">8.2.1</span> <span class="content">The <span class="css">::cue</span> pseudo-element</span></a>
1671
+ <li><a href="#the-past-and-future-pseudo-classes"><span class="secno">8.2.2</span> <span class="content">The <span class="css">:past</span> and <span class="css">:future</span> pseudo-classes</span></a>
1672
+ <li><a href="#the-cue-region-pseudo-element"><span class="secno">8.2.3</span> <span class="content">The <span class="css">::cue-region</span> pseudo-element</span></a>
1626
1673
</ol>
1627
1674
</ol>
1628
1675
<li>
1629
- <a href="#api"><span class="secno">8</span> <span class="content">API</span></a>
1676
+ <a href="#api"><span class="secno">9</span> <span class="content">API</span></a>
1630
1677
<ol class="toc">
1631
- <li><a href="#the-vttcue-interface"><span class="secno">8.1</span> <span class="content">The <code class="idl"><span>VTTCue</span></code> interface</span></a>
1632
- <li><a href="#the-vttregion-interface"><span class="secno">8.2</span> <span class="content">The <code class="idl"><span>VTTRegion</span></code> interface</span></a>
1678
+ <li><a href="#the-vttcue-interface"><span class="secno">9.1</span> <span class="content">The <code class="idl"><span>VTTCue</span></code> interface</span></a>
1679
+ <li><a href="#the-vttregion-interface"><span class="secno">9.2</span> <span class="content">The <code class="idl"><span>VTTRegion</span></code> interface</span></a>
1633
1680
</ol>
1634
1681
<li>
1635
- <a href="#iana"><span class="secno">9</span> <span class="content">IANA considerations</span></a>
1682
+ <a href="#iana"><span class="secno">10</span> <span class="content">IANA considerations</span></a>
1636
1683
<ol class="toc">
1637
- <li><a href="#iana-text-vtt"><span class="secno">9.1</span> <span class="content"><span><code>text/vtt</code></span></span></a>
1684
+ <li><a href="#iana-text-vtt"><span class="secno">10.1</span> <span class="content"><span><code>text/vtt</code></span></span></a>
1638
1685
</ol>
1639
1686
<li>
1640
1687
<a href="#privacy-and-security-considerations"><span class="secno"></span> <span class="content">Privacy and Security Considerations</span></a>
@@ -1664,7 +1711,15 @@
1664
1711
<h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
1665
1712
<p><i>This section is non-normative.</i></p>
1666
1713
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt">WebVTT</dfn> (Web Video Text Tracks) format is intended for marking up external text
1667
- track resources.</p>
1714
+ track resources in connection with the HTML &lt;track> element.</p>
1715
+ <p>WebVTT files provide captions or subtitles for video content, and also text video descriptions <a data-link-type="biblio" href="#biblio-maur">[MAUR]</a>, chapters for content navigation, and more generally any form of metadata that is
1716
+ time-aligned with audio or video content.</p>
1717
+ <p>The majority of the current version of this specification is dedicated to describing how to use
1718
+ WebVTT files for captioning or subtitling. There is minimal information about chapters and
1719
+ time-aligned metadata and nothing about video descriptions at this stage.</p>
1720
+ <p>In this section we provide some example WebVTT files as an introduction.</p>
1721
+ <h3 class="heading settled" data-level="1.1" id="introduction-caption"><span class="secno">1.1. </span><span class="content">A simple caption file</span><a class="self-link" href="#introduction-caption"></a></h3>
1722
+ <p><i>This section is non-normative.</i></p>
1668
1723
<p>The main use for WebVTT files is captioning or subtitling video content. Here is a sample file
1669
1724
that captions an interview:</p>
1670
1725
<pre>WEBVTT
@@ -1708,7 +1763,21 @@
1708
1763
00:35.500 --> 00:38.000
1709
1764
&lt;v Roger Bingham>You know I’m so excited my glasses are falling off here.
1710
1765
</pre>
1711
- <h3 class="heading settled" data-level="1.1" id="introduction-multiple-lines"><span class="secno">1.1. </span><span class="content">Cues with multiple lines</span><a class="self-link" href="#introduction-multiple-lines"></a></h3>
1766
+ <p>You can see that a WebVTT file in general consists of a sequence of text segments associated with
1767
+ a time-interval, called a cue (<a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-1">definition</a>). Beyond captioning and subtitling,
1768
+ WebVTT can be used for time-aligned metadata, typically in use for delivering name-value pairs in
1769
+ cues. WebVTT can also be used for delivering chapters, which helps with contextual navigation around
1770
+ an audio/video file. Finally, WebVTT can be used for the delivery of text video descriptions, which
1771
+ is text that describes the visual content of time-intervals and can be synthesized to speech to help
1772
+ vision-impaired users understand context.</p>
1773
+ <p class="note" role="note">This version of WebVTT focuses on solving the captioning and subtitling use cases.
1774
+ More specification work is possible for the other use cases. A decision on what type of use case a
1775
+ WebVTT file is being used for is made by the software that is using the file. For example, if in use
1776
+ with a HTML file through a &lt;track> element, the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">kind</a> attribute
1777
+ defines how the WebVTT file is to be interpreted.</p>
1778
+ <p>The following subsections provide an overview of some of the key features of the WebVTT file
1779
+ format, particularly when in use for captioning and subtitling.</p>
1780
+ <h3 class="heading settled" data-level="1.2" id="introduction-multiple-lines"><span class="secno">1.2. </span><span class="content">Caption cues with multiple lines</span><a class="self-link" href="#introduction-multiple-lines"></a></h3>
1712
1781
<p><i>This section is non-normative.</i></p>
1713
1782
<p>Line breaks in cues are honored. User agents will also insert extra line breaks if necessary to
1714
1783
fit the cue in the cue’s width. In general, therefore, authors are encouraged to write cues all on
@@ -1731,7 +1800,7 @@
1731
1800
<p>The first cue is simple, it will probably just display on one line. The second will take two
1732
1801
lines, one for each speaker. The third will wrap to fit the width of the video, possibly taking
1733
1802
multiple lines. For example, the three cues could look like this:</p>
1734
- <pre> <samp>Never drink liquid nitrogen.</samp>
1803
+ <pre>  <samp>Never drink liquid nitrogen.</samp>
1735
1804
1736
1805
<samp>— It will perforate your stomach.</samp>
1737
1806
<samp>— You could die.</samp>
@@ -1744,7 +1813,7 @@
1744
1813
</pre>
1745
1814
<p>If the width of the cues is smaller, the first two cues could wrap as well, as in the following
1746
1815
example. Note how the second cue’s explicit line break is still honored, however:</p>
1747
- <pre> <samp>Never drink</samp>
1816
+ <pre>  <samp>Never drink</samp>
1748
1817
<samp>liquid nitrogen.</samp>
1749
1818
1750
1819
<samp>— It will perforate</samp>
@@ -1764,53 +1833,7 @@
1764
1833
</pre>
1765
1834
<p>Also notice how the wrapping is done so as to keep the line lengths balanced.</p>
1766
1835
</div>
1767
- <h3 class="heading settled" data-level="1.2" id="introduction-comments"><span class="secno">1.2. </span><span class="content">Comments</span><a class="self-link" href="#introduction-comments"></a></h3>
1836
+ <h3 class="heading settled" data-level="1.3" id="styling"><span class="secno">1.3. </span><span class="content">Styling captions</span><a class="self-link" href="#styling"></a></h3>
1768
- <p><i>This section is non-normative.</i></p>
1769
- <p>Comments can be included in WebVTT files.</p>
1770
- <p>Comments are just blocks that are preceded by a blank line, start with the word
1771
- "<code>NOTE</code>" (followed by a space or newline), and end at the first blank line.</p>
1772
- <div class="example" id="example-44941b0b">
1773
- <a class="self-link" href="#example-44941b0b"></a>
1774
- <p>Here, a one-line comment is used to note a possible problem with a cue.</p>
1775
- <pre>WEBVTT
1776
-
1777
- 00:01.000 --> 00:04.000
1778
- Never drink liquid nitrogen.
1779
-
1780
- NOTE I’m not sure the timing is right on the following cue.
1781
-
1782
- 00:05.000 --> 00:09.000
1783
- — It will perforate your stomach.
1784
- — You could die.
1785
- </pre>
1786
- </div>
1787
- <div class="example" id="example-03a9f3ad">
1788
- <a class="self-link" href="#example-03a9f3ad"></a>
1789
- <p>In this example, the author has written many comments.</p>
1790
- <pre>WEBVTT
1791
-
1792
- NOTE
1793
- This file was written by Jill. I hope
1794
- you enjoy reading it. Some things to
1795
- bear in mind:
1796
- - I was lip-reading, so the cues may
1797
- not be 100% accurate
1798
- - I didn’t pay too close attention to
1799
- when the cues should start or end.
1800
-
1801
- 00:01.000 --> 00:04.000
1802
- Never drink liquid nitrogen.
1803
-
1804
- NOTE check next cue
1805
-
1806
- 00:05.000 --> 00:09.000
1807
- — It will perforate your stomach.
1808
- — You could die.
1809
-
1810
- NOTE end of file
1811
- </pre>
1812
- </div>
1813
- <h3 class="heading settled" data-level="1.3" id="styling"><span class="secno">1.3. </span><span class="content">Styling</span><a class="self-link" href="#styling"></a></h3>
1814
1837
<p><i>This section is non-normative.</i></p>
1815
1838
<p>CSS style sheets that apply to an HTML page that contains a <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element can
1816
1839
target WebVTT cues and regions in the video using the <span class="css">::cue</span>, <span class="css">::cue()</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region()</span> pseudo-elements.</p>
@@ -1876,15 +1899,19 @@
1876
1899
NOTE style blocks cannot appear after the first cue.
1877
1900
</pre>
1878
1901
</div>
1879
- <h3 class="heading settled" data-level="1.4" id="introduction-other-features"><span class="secno">1.4. </span><span class="content">Other features</span><a class="self-link" href="#introduction-other-features"></a></h3>
1902
+ <h3 class="heading settled" data-level="1.4" id="introduction-other-features"><span class="secno">1.4. </span><span class="content">Other caption and subtitling features</span><a class="self-link" href="#introduction-other-features"></a></h3>
1880
1903
<p><i>This section is non-normative.</i></p>
1881
1904
<p>WebVTT also supports some less-often used features.</p>
1882
- <div class="example" id="example-5046f22f">
1883
- <a class="self-link" href="#example-5046f22f"></a>
1905
+ <div class="example" id="example-59f83607">
1906
+ <a class="self-link" href="#example-59f83607"></a>
1884
1907
<p>In this example, the cues have an identifier:</p>
1885
1908
<pre>WEBVTT
1886
1909
1887
- 1
1910
+ test
1911
+ 00:00.000 --> 00:02.000
1912
+ This is a test.
1913
+
1914
+ 123
1888
1915
00:00.000 --> 00:02.000
1889
1916
That’s an, an, that’s an L!
1890
1917
@@ -1892,9 +1919,16 @@
1892
1919
00:04.000 --> 00:05.000
1893
1920
Transcrit par Célestes™
1894
1921
</pre>
1895
- <p>This allows a style sheet to specifically target the cues (notice the use of CSS character
1896
- escape sequences):</p>
1897
- <pre>::cue(#\31) { color: lime; }
1922
+ <p>This allows a style sheet to specifically target the cues.</p>
1923
+ <pre>/* style for cue: test */
1924
+ ::cue(#test) { color: lime; }
1925
+ </pre>
1926
+ <p>Due to the syntax rules of CSS, some characters need to be escaped with CSS character escape
1927
+ sequences. For example, an ID that starts with a number 0-9 needs to be escaped. The ID <code>123</code> can be represented as "\31 23" (31 refers to the Unicode code point for "1"). See <a href="https://www.w3.org/International/questions/qa-escapes">Using character escapes in markup
1928
+ and CSS</a> for more information on CSS escapes.</p>
1929
+ <pre>/* style for cue: 123 */
1930
+ ::cue(#\31 23) { color: lime; }
1931
+ /* style for cue: crédit de transcription */
1898
1932
::cue(#crédit\ de\ transcription) { color: red; }
1899
1933
</pre>
1900
1934
</div>
@@ -1940,8 +1974,8 @@
1940
1974
::cue(.loud) { font-size: 2em }
1941
1975
</pre>
1942
1976
</div>
1943
- <div class="example" id="example-0c2976c9">
1944
- <a class="self-link" href="#example-0c2976c9"></a>
1977
+ <div class="example" id="example-b30cb609">
1978
+ <a class="self-link" href="#example-b30cb609"></a>
1945
1979
<p>This example shows how to position cues at explicit positions in the video viewport.</p>
1946
1980
<pre>WEBVTT
1947
1981
@@ -1956,7 +1990,7 @@
1956
1990
</pre>
1957
1991
<p>Since the cues in these examples are horizontal, the "position" setting refers to a percentage
1958
1992
of the width of the video viewpoint. If the text were vertical, the "position" setting would refer
1959
- to the height of the viewport.</p>
1993
+ to the height of the video viewport.</p>
1960
1994
<p>The "line-left" or "line-right" only refers to the physical side of the box to which the
1961
1995
"position" setting applies, in a way which is agnostic regarding the horizontal or vertical
1962
1996
direction of the cue. It does not affect or relate to the direction or position of the text itself
@@ -2025,6 +2059,118 @@
2025
2059
</pre>
2026
2060
<p>Note that regions are only defined for horizontal cues.</p>
2027
2061
</div>
2062
+ <h3 class="heading settled" data-level="1.5" id="introduction-comments"><span class="secno">1.5. </span><span class="content">Comments in WebVTT</span><a class="self-link" href="#introduction-comments"></a></h3>
2063
+ <p><i>This section is non-normative.</i></p>
2064
+ <p>Comments can be included in WebVTT files.</p>
2065
+ <p>Comments are just blocks that are preceded by a blank line, start with the word
2066
+ "<code>NOTE</code>" (followed by a space or newline), and end at the first blank line.</p>
2067
+ <div class="example" id="example-44941b0b">
2068
+ <a class="self-link" href="#example-44941b0b"></a>
2069
+ <p>Here, a one-line comment is used to note a possible problem with a cue.</p>
2070
+ <pre>WEBVTT
2071
+
2072
+ 00:01.000 --> 00:04.000
2073
+ Never drink liquid nitrogen.
2074
+
2075
+ NOTE I’m not sure the timing is right on the following cue.
2076
+
2077
+ 00:05.000 --> 00:09.000
2078
+ — It will perforate your stomach.
2079
+ — You could die.
2080
+ </pre>
2081
+ </div>
2082
+ <div class="example" id="example-03a9f3ad">
2083
+ <a class="self-link" href="#example-03a9f3ad"></a>
2084
+ <p>In this example, the author has written many comments.</p>
2085
+ <pre>WEBVTT
2086
+
2087
+ NOTE
2088
+ This file was written by Jill. I hope
2089
+ you enjoy reading it. Some things to
2090
+ bear in mind:
2091
+ - I was lip-reading, so the cues may
2092
+ not be 100% accurate
2093
+ - I didn’t pay too close attention to
2094
+ when the cues should start or end.
2095
+
2096
+ 00:01.000 --> 00:04.000
2097
+ Never drink liquid nitrogen.
2098
+
2099
+ NOTE check next cue
2100
+
2101
+ 00:05.000 --> 00:09.000
2102
+ — It will perforate your stomach.
2103
+ — You could die.
2104
+
2105
+ NOTE end of file
2106
+ </pre>
2107
+ </div>
2108
+ <h3 class="heading settled" data-level="1.6" id="introduction-chapters"><span class="secno">1.6. </span><span class="content">Chapters example</span><a class="self-link" href="#introduction-chapters"></a></h3>
2109
+ <p><i>This section is non-normative.</i></p>
2110
+ <p>A WebVTT file can consist of chapters, which are navigation markers for the video.</p>
2111
+ <p>Chapters are plain text, typically just a single line.</p>
2112
+ <div class="example" id="example-5b78f944">
2113
+ <a class="self-link" href="#example-5b78f944"></a>
2114
+ <p>In this example, a talk is split into each slide being a chapter.</p>
2115
+ <pre>WEBVTT
2116
+
2117
+ NOTE
2118
+ This is from a talk Silvia gave about WebVTT.
2119
+
2120
+ Slide 1
2121
+ 00:00:00.000 --> 00:00:10.700
2122
+ Title Slide
2123
+
2124
+ Slide 2
2125
+ 00:00:10.700 --> 00:00:47.600
2126
+ Introduction by Naomi Black
2127
+
2128
+ Slide 3
2129
+ 00:00:47.600 --> 00:01:50.100
2130
+ Impact of Captions on the Web
2131
+
2132
+ Slide 4
2133
+ 00:01:50.100 --> 00:03:33.000
2134
+ Requirements of a Video text format
2135
+ </pre>
2136
+ </div>
2137
+ <h3 class="heading settled" data-level="1.7" id="introduction-metadata"><span class="secno">1.7. </span><span class="content">Metadata example</span><a class="self-link" href="#introduction-metadata"></a></h3>
2138
+ <p><i>This section is non-normative.</i></p>
2139
+ <p>A WebVTT file can consist of time-aligned metadata.</p>
2140
+ <p>Metadata can be any string and is often provided as a JSON construct.</p>
2141
+ <p>Note that you cannot provide blank lines inside a metadata block, because the blank line
2142
+ signifies the end of the WebVTT cue.</p>
2143
+ <div class="example" id="example-7e3f730b">
2144
+ <a class="self-link" href="#example-7e3f730b"></a>
2145
+ <p>In this example, a talk is split into each slide being a chapter.</p>
2146
+ <pre>WEBVTT
2147
+
2148
+ NOTE
2149
+ Thanks to http://output.jsbin.com/mugibo
2150
+
2151
+ 1
2152
+ 00:00:00.100 --> 00:00:07.342
2153
+ {
2154
+ "type": "WikipediaPage",
2155
+ "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats"
2156
+ }
2157
+
2158
+ 2
2159
+ 00:07.810 --> 00:09.221
2160
+ {
2161
+ "type": "WikipediaPage",
2162
+ "url" :"http://samuraipizzacats.wikia.com/wiki/Samurai_Pizza_Cats_Wiki"
2163
+ }
2164
+
2165
+ 3
2166
+ 00:11.441 --> 00:14.441
2167
+ {
2168
+ "type": "LongLat",
2169
+ "lat" : "36.198269",
2170
+ "long": "137.2315355"
2171
+ }
2172
+ </pre>
2173
+ </div>
2028
2174
<h2 class="heading settled" data-level="2" id="conformance"><span class="secno">2. </span><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
2029
2175
<p>All diagrams, examples, and notes in this specification are non-normative, as are all sections
2030
2176
explicitly marked non-normative. Everything else in this specification is normative.</p>
@@ -2043,7 +2189,7 @@
2043
2189
<p>This specification describes the conformance criteria for user agents (relevant to implementors)
2044
2190
and <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-1">WebVTT files</a> (relevant to authors and authoring tool implementors).</p>
2045
2191
<p class="note" role="note"><a href="#syntax">§4 Syntax</a> defines what consists of a valid <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-2">WebVTT file</a>. Authors need to
2046
- follow the requirements therein, and are encouraged to use a conformance checker. <a href="#parsing">§5 Parsing</a> defines how user agents are to interpret a file labelled as <a data-link-type="dfn" href="#text-vtt" id="ref-for-text-vtt-1">text/vtt</a>, for both valid and
2192
+ follow the requirements therein, and are encouraged to use a conformance checker. <a href="#parsing">§6 Parsing</a> defines how user agents are to interpret a file labelled as <a data-link-type="dfn" href="#text-vtt" id="ref-for-text-vtt-1">text/vtt</a>, for both valid and
2047
2193
invalid <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-3">WebVTT files</a>. The parsing rules are more tolerant to author errors than the syntax
2048
2194
allows, in order to provide for extensibility and to still render cues that have some syntax
2049
2195
errors.</p>
@@ -2060,7 +2206,26 @@
2060
2206
specification. <a data-link-type="biblio" href="#biblio-webidl-1">[WEBIDL-1]</a></p>
2061
2207
<dt>User agents with no scripting support
2062
2208
<dd>
2063
- <p>All processing requirements in this specification apply, except those in <a href="#api">§8 API</a>.</p>
2209
+ <p>All processing requirements in this specification apply, except those in <a href="#dom-construction-rules">§6.5 WebVTT cue text DOM construction rules</a> and <a href="#api">§9 API</a>.</p>
2210
+ <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="user-agents-that-do-not-support-css">User agents that do not support CSS</dfn>
2211
+ <dd>
2212
+ <p>All processing requirements in this specification apply, except parts of <a href="#parsing">§6 Parsing</a> that
2213
+ relate to stylesheets and CSS, and all of <a href="#rendering">§7 Rendering</a> and <a href="#css-extensions">§8 CSS extensions</a>. The user agent
2214
+ must instead only render the text inside <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-1">WebVTT caption or subtitle cue text</a> in an
2215
+ appropriate manner and specifically support the color classes defined in <a href="#default-classes">§5 Default classes for WebVTT Caption or Subtitle Cue Components</a>. Any
2216
+ other styling instructions are optional.</p>
2217
+ <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="user-agents-that-do-not-support-a-full-html-css-engine">User agents that do not support a full HTML CSS engine</dfn>
2218
+ <dd>
2219
+ <p>All processing requirements in this specification apply, including the color classes defined
2220
+ in <a href="#default-classes">§5 Default classes for WebVTT Caption or Subtitle Cue Components</a>. However, the user agent will need to apply the CSS related features in <a href="#parsing">§6 Parsing</a>, <a href="#rendering">§7 Rendering</a> and <a href="#css-extensions">§8 CSS extensions</a> in such a way that the rendered results are
2221
+ equivalent to what a full CSS supporting renderer produces.</p>
2222
+ <dt><dfn data-dfn-type="dfn" data-noexport="" id="user-agents-that-support-a-full-html-css-engine">User agents that support a full HTML CSS engine<a class="self-link" href="#user-agents-that-support-a-full-html-css-engine"></a></dfn>
2223
+ <dd>
2224
+ <p>All processing requirements in this specification apply. However, only a limited set of CSS
2225
+ styles is allowed because <a data-link-type="dfn" href="#user-agents-that-do-not-support-a-full-html-css-engine" id="ref-for-user-agents-that-do-not-support-a-full-html-css-engine-1">user agents that do not support a full HTML CSS engine</a> will need
2226
+ to implement CSS functionality equivalents. User agents that support a full CSS engine must
2227
+ therefore limit the CSS styles they apply for WebVTT so as to enable identical rendering without
2228
+ bleeding in extra CSS styles that are beyond the WebVTT specification.</p>
2064
2229
<dt>Conformance checkers
2065
2230
<dd>
2066
2231
<p>Conformance checkers must verify that a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-4">WebVTT file</a> conforms to the applicable
@@ -2083,20 +2248,50 @@
2083
2248
cue with an ID consisting of the character U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE (a
2084
2249
precomposed character).</p>
2085
2250
<h2 class="heading settled" data-level="3" id="data-model"><span class="secno">3. </span><span class="content">Data model</span><a class="self-link" href="#data-model"></a></h2>
2086
- <h3 class="heading settled" data-level="3.1" id="cues"><span class="secno">3.1. </span><span class="content">WebVTT cues</span><a class="self-link" href="#cues"></a></h3>
2087
- <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue">WebVTT cue</dfn> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> that additionally consist of the following: <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a></p>
2251
+ <p class="note" role="note">The box model of WebVTT consists of three key elements: the video viewport, cues, and
2252
+ regions. The video viewport is the rendering area into which cues and regions are rendered. Cues are
2253
+ boxes consisting of a set of cue lines. Regions are subareas of the video viewport that are used to
2254
+ group cues together. Cues are positioned either inside the video viewport directly or inside a
2255
+ region, which is positioned inside the video viewport.</p>
2256
+ <p class="note" role="note">The position of a cue inside the video viewport is defined by a set of cue settings.
2257
+ The position of a region inside the video viewport is defined by a set of region settings. Cues that
2258
+ are inside regions can only use a limited set of their cue settings. Specifically, if the cue has a
2259
+ "vertical", "line" or "size" setting, the cue drops out of the region. Otherwise, the cue’s width is
2260
+ calculated to be relative to the region width rather than the viewport. </p>
2261
+ <h3 class="heading settled" data-level="3.1" id="model-overview"><span class="secno">3.1. </span><span class="content">Overview</span><a class="self-link" href="#model-overview"></a></h3>
2262
+ <p><i>This section is non-normative.</i></p>
2263
+ <p>The WebVTT file is a container file for chunks of data that are time-aligned with a video or
2264
+ audio resource. It can therefore be regarded as a serialisation format for time-aligned data.</p>
2265
+ <p>A WebVTT file starts with a header and then contains a series of data blocks. If a data block has
2266
+ a start and end time, it is called a WebVTT cue. A comment is another kind of data block.</p>
2267
+ <p>Different kinds of data can be carried in WebVTT files. The HTML specification identifies
2268
+ captions, subtitles, chapters, audio descriptions and metadata as data kinds and specifies which one
2269
+ is being used in the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a> attribute of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> element <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a>.</p>
2270
+ <p>A WebVTT file must only contain data of one kind, never a mix of different kinds of data. The
2271
+ data kind of a WebVTT file is externally specified, such as in a HTML file’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> element. The environment is responsible for interpreting the data correctly.</p>
2272
+ <p>WebVTT caption or subtitle cues are rendered as overlays on top of a video viewport or into a
2273
+ region, which is a subarea of the video viewport.</p>
2274
+ <h3 class="heading settled" data-level="3.2" id="model-cues"><span class="secno">3.2. </span><span class="content">WebVTT cues</span><a class="self-link" href="#model-cues"></a></h3>
2275
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue">WebVTT cue</dfn> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a> that additionally consist of the
2276
+ following: </p>
2088
2277
<dl>
2089
- <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="text track cue text" data-noexport="" id="text-track-cue-text">A cue text</dfn>
2278
+ <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue text" data-noexport="" id="cue-text">A cue text</dfn>
2090
2279
<dd>
2091
- <p>The raw text of the cue, and rules for its interpretation, allowing the text to be rendered and
2092
- converted to a DOM fragment.</p>
2280
+ <p>The raw text of the cue, and rules for its interpretation.</p>
2281
+ </dl>
2282
+ <h3 class="heading settled" data-level="3.3" id="cues"><span class="secno">3.3. </span><span class="content">WebVTT caption or subtitle cues</span><a class="self-link" href="#cues"></a></h3>
2283
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue">WebVTT caption or subtitle cue</dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-2">WebVTT cue</a> that has the following
2284
+ additional properties allowing the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-1">cue text</a> to be rendered and converted to a DOM
2285
+ fragment:</p>
2286
+ <dl>
2093
2287
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue box" data-noexport="" id="webvtt-cue-box">A cue box</dfn>
2094
2288
<dd>
2095
- <p>The cue box of a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-1">WebVTT cue</a> is a box within which the text of all lines of the cue is to
2096
- be rendered.</p>
2289
+ <p>The cue box of a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-3">WebVTT cue</a> is a box within which the text of all lines of the cue is to
2290
+ be rendered. It is either rendered into the video’s viewport or a region inside the viewport if
2291
+ the cue is part of a region.</p>
2097
2292
<p class="note" role="note">The position of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-6">cue box</a> within the video viewport’s
2098
- dimensions depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-1">WebVTT cue position</a> and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-1">WebVTT cue
2099
- line</a>.</p>
2293
+ or region’s dimensions depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-1">WebVTT cue position</a> and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-1">WebVTT
2294
+ cue line</a>.</p>
2100
2295
<p class="note" role="note">Lines are wrapped within the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-7">cue box</a>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-1">size</a> if lines' lengths make this necessary.</p>
2101
2296
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue writing direction" data-noexport="" id="webvtt-cue-writing-direction">A writing direction</dfn>
2102
2297
<dd>
@@ -2125,42 +2320,41 @@
2125
2320
<p>A boolean indicating whether the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-3">line</a> is an integer number of lines
2126
2321
(using the line dimensions of the first line of the cue), or whether it is a percentage of the
2127
2322
dimension of the video. The flag is set to true when lines are counted, and false otherwise.</p>
2128
- <p>Cues whose <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-1">WebVTT cue snap-to-lines flag</a> is true will be placed within the title-safe
2129
- area on user agents that use overscan. Cues where the flag is false will be offset as requested
2130
- (modulo overlap avoidance if multiple cues are in the same place).</p>
2323
+ <p>Cues where the flag is false will be offset as requested modulo overlap avoidance if multiple
2324
+ cues are in the same place.</p>
2325
+ <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-1">snap-to-lines flag</a> is set to
2131
- <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-2">snap-to-lines flag</a> is set to
2132
2326
true.</p>
2133
2327
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line" data-noexport="" id="webvtt-cue-line">A line</dfn>
2134
2328
<dd>
2135
2329
<p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-4">line</a> defines positioning of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-8">cue
2136
2330
box</a>.</p>
2137
2331
<p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-5">line</a> offsets the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-9">cue box</a> from the
2138
- top, the right or left of the video viewport as defined by the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-3">writing direction</a>, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-3">snap-to-lines
2332
+ top, the right or left of the video viewport as defined by the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-3">writing direction</a>, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-2">snap-to-lines
2139
2333
flag</a>, or the lines occupied by any other showing tracks.</p>
2140
2334
<p>The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-6">line</a> is set either as a number of lines, a percentage of the
2141
2335
video viewport height or width, or as the special value <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line
2142
2336
automatic" data-noexport="" id="webvtt-cue-line-automatic">auto</dfn>, which means the offset is to depend on the other showing tracks.</p>
2143
2337
<p>By default, the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-7">line</a> is set to <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-1">auto</a>.</p>
2144
2338
<p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-4">writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-2">horizontal</a>, then the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-8">line</a> percentages are relative to the height of the video, otherwise to the width of the video.</p>
2145
- <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-2">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed line" data-noexport="" id="cue-computed-line">computed line</dfn> whose value is that
2339
+ <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-4">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed line" data-noexport="" id="cue-computed-line">computed line</dfn> whose value is that
2146
2340
returned by the following algorithm, which is defined in terms of the other aspects of the
2147
2341
cue:</p>
2148
2342
<ol class="algorithm" data-algorithm="computed line">
2149
2343
<li>
2150
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-9">line</a> is numeric, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-4">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-3">WebVTT cue</a> is false, and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-10">line</a> is negative or
2344
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-9">line</a> is numeric, the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-3">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-5">WebVTT cue</a> is false, and the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-10">line</a> is negative or
2151
2345
greater than 100, then return 100 and abort these steps.</p>
2152
- <p class="note" role="note">Although the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-1">WebVTT parser</a> will not set the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-11">line</a> to a number outside the range 0..100 and also set the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-5">WebVTT cue snap-to-lines
2346
+ <p class="note" role="note">Although the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-1">WebVTT parser</a> will not set the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-11">line</a> to a number outside the range 0..100 and also set the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-4">WebVTT cue snap-to-lines
2153
2347
flag</a> to false, this can happen when using the DOM API’s <code class="idl"><a data-link-type="idl" href="#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-1">snapToLines</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-vttcue-line" id="ref-for-dom-vttcue-line-1">line</a></code> attributes.</p>
2154
2348
<li>
2155
2349
<p>If the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-12">line</a> is numeric, return the value of the <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-13">WebVTT cue
2156
- line</a> and abort these steps. (Either the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-6">WebVTT cue snap-to-lines flag</a> is true, so any
2350
+ line</a> and abort these steps. (Either the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-5">WebVTT cue snap-to-lines flag</a> is true, so any
2157
2351
value, not just those in the range 0..100, is valid, or the value is in the range 0..100 and is
2158
2352
thus valid regardless of the value of that flag.)</p>
2159
2353
<li>
2160
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-7">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-4">WebVTT cue</a> is false, return the
2354
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-6">WebVTT cue snap-to-lines flag</a> of the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-6">WebVTT cue</a> is false, return the
2161
2355
value 100 and abort these steps. (The <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-14">line</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-2">auto</a>.)</p>
2162
2356
<li>
2163
- <p>Let <var>cue</var> be the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-5">WebVTT cue</a>.</p>
2357
+ <p>Let <var>cue</var> be the <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-7">WebVTT cue</a>.</p>
2164
2358
<li>
2165
2359
<p>If <var>cue</var> is not in a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">list of cues</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text
2166
2360
track</a>, or if that <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> is not in the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-text-tracks">list of text tracks</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media
@@ -2177,7 +2371,7 @@
2177
2371
<li>
2178
2372
<p>Return <var>n</var>.</p>
2179
2373
</ol>
2180
- <p class="example" id="example-d1c46c31"><a class="self-link" href="#example-d1c46c31"></a>For example, if two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#modedef-track-showing">showing</a> at the same time in one <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, and each <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> currently has an active <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-6">WebVTT cue</a> whose <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-15">line</a> are both <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-3">auto</a>, then the first <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s cue’s <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-1">computed line</a> will be −1 and the second will be −2.</p>
2374
+ <p class="example" id="example-d1c46c31"><a class="self-link" href="#example-d1c46c31"></a>For example, if two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#modedef-track-showing">showing</a> at the same time in one <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, and each <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a> currently has an active <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-8">WebVTT cue</a> whose <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-15">line</a> are both <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-3">auto</a>, then the first <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s cue’s <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-1">computed line</a> will be −1 and the second will be −2.</p>
2181
2375
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue line alignment" data-noexport="" id="webvtt-cue-line-alignment">A line alignment</dfn>
2182
2376
<dd>
2183
2377
<p>An alignment for the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-10">cue box</a>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-16">line</a>, one
@@ -2204,12 +2398,13 @@
2204
2398
dimensions.</p>
2205
2399
<p>By default, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-5">position</a> is set to <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-1">auto</a>.</p>
2206
2400
<p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-6">writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-5">horizontal</a>, then the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-6">position</a> percentages are relative to the width of the video, otherwise to the height of the video.</p>
2207
- <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-7">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position" data-noexport="" id="cue-computed-position">computed position</dfn> whose value
2401
+ <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-9">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position" data-noexport="" id="cue-computed-position">computed position</dfn> whose value
2208
2402
is that returned by the following algorithm, which is defined in terms of the other aspects of the
2209
2403
cue:</p>
2210
2404
<ol class="algorithm" data-algorithm="computed position">
2211
2405
<li>
2212
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-7">position</a> is numeric, then return the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-8">position</a> and abort these steps. (Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-9">position</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-2">auto</a>.)</p>
2406
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-7">position</a> is numeric between 0 and 100, then return
2407
+ the value of the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-8">position</a> and abort these steps. (Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-9">position</a> is the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-2">auto</a>.)</p>
2213
2408
<li>
2214
2409
<p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-3">cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-1">left</a>, return 0 and abort these steps.</p>
2215
2410
<li>
@@ -2222,12 +2417,12 @@
2222
2417
right-to-left cue text, the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-16">cue box</a> is positioned from the left edge of
2223
2418
the video viewport. This allows defining a rendering space template which can be filled with
2224
2419
either left-to-right or right-to-left cue text, or both.</p>
2225
- <p>For <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-8">WebVTT cues</a> that have a <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-3">size</a> other than 100%, and a <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-6">text alignment</a> of <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-1">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-1">end</a>, authors must not use the default <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-3">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-11">position</a>.</p>
2420
+ <p>For <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-10">WebVTT cues</a> that have a <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-3">size</a> other than 100%, and a <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-6">text alignment</a> of <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-1">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-1">end</a>, authors must not use the default <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-3">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-11">position</a>.</p>
2226
2421
<p class="note" role="note">When the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-7">text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-2">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-2">end</a>, the <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-4">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-12">position</a> is 50%. This is different
2227
2422
from <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-2">left</a> and <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-2">right</a> aligned text, where the <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-5">auto</a> <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-13">position</a> is 0% and 100%, respectively. The above requirement is present because it
2228
- can be surprising that automatic positioning doesn’t work for <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-3">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-3">end</a> aligned text. Since <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-1">cue text</a> can consist of text with left-to-right base direction, or right-to-left
2229
- base direction, or both (on different lines), such automatic positioning would have unexpected
2230
- results.</p>
2423
+ can be surprising that automatic positioning doesn’t work for <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-3">start</a> or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-3">end</a> aligned text. Since <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-2">cue
2424
+ text</a> can consist of text with left-to-right base direction, or right-to-left base direction,
2425
+ or both (on different lines), such automatic positioning would have unexpected results.</p>
2231
2426
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue position alignment" data-noexport="" id="webvtt-cue-position-alignment">A position alignment</dfn>
2232
2427
<dd>
2233
2428
<p>An alignment for the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-17">cue box</a> in the dimension of the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-7">writing direction</a>, describing what the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-14">position</a> is anchored to, one of:</p>
@@ -2242,7 +2437,7 @@
2242
2437
<dd>The <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-21">cue box</a>’s alignment depends on the value of the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-8">text alignment</a> of the cue.
2243
2438
</dl>
2244
2439
<p>By default, the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-2">position alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-position-automatic-alignment" id="ref-for-webvtt-cue-position-automatic-alignment-1">auto</a>.</p>
2245
- <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-9">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position alignment" data-noexport="" id="cue-computed-position-alignment">computed position
2440
+ <p>A <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-11">WebVTT cue</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cue computed position alignment" data-noexport="" id="cue-computed-position-alignment">computed position
2246
2441
alignment</dfn> whose value is that returned by the following algorithm, which is defined in terms
2247
2442
of other aspects of the cue:</p>
2248
2443
<ol class="algorithm" data-algorithm="computed position alignment">
@@ -2258,11 +2453,19 @@
2258
2453
return <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-1">line-right</a> and abort these
2259
2454
steps.</p>
2260
2455
<li>
2456
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-11">WebVTT cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-4">start</a>,
2457
+ return <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-2">line-left</a> if the base direction of the
2458
+ cue text is left-to-right, <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-2">line-right</a> otherwise.</p>
2459
+ <li>
2460
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-12">WebVTT cue text alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-4">end</a>,
2461
+ return <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-3">line-right</a> if the base direction of
2462
+ the cue text is left-to-right, <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-3">line-left</a> otherwise.</p>
2463
+ <li>
2261
2464
<p>Otherwise, return <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-2">center</a>.</p>
2262
2465
</ol>
2263
2466
<p class="note" role="note">Since the <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-18">position</a> always measures from the left
2264
2467
of the video (for <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-9">horizontal</a> cues) or the top
2265
- (otherwise), the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-5">WebVTT cue position alignment</a> <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-2">line-left</a> value varies between left and top for horizontal and vertical cues.</p>
2468
+ (otherwise), the <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-5">WebVTT cue position alignment</a> <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-4">line-left</a> value varies between left and top for horizontal and vertical cues.</p>
2266
2469
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue size" data-noexport="" id="webvtt-cue-size">A size</dfn>
2267
2470
<dd>
2268
2471
<p>A number giving the size of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-22">cue box</a>, to be interpreted as a
@@ -2289,7 +2492,7 @@
2289
2492
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT cue right alignment" data-noexport="" id="webvtt-cue-right-alignment">Right alignment</dfn>
2290
2493
<dd>The text is aligned to the box’s right side (for <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-12">horizontal</a> cues) or bottom side (otherwise).
2291
2494
</dl>
2292
- <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-11">text alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-3">center</a>.</p>
2495
+ <p>By default, the <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-13">text alignment</a> is set to <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-3">center</a>.</p>
2293
2496
<p class="note" role="note">The base direction of each line in a cue (which is used by the Unicode Bidirectional
2294
2497
Algorithm to determine the order in which to display the characters in the line) is determined by
2295
2498
looking up the first strong directional character in each line, using the CSS <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-unicode-bidi-plaintext">plaintext</a> algorithm. In the occasional cases where the first strong character on
@@ -2334,11 +2537,11 @@
2334
2537
</div>
2335
2538
<p class="note" role="note">The default text alignment is <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-4">center
2336
2539
alignment</a> regardless of the base direction of the cue text. To make the text alignment of each
2337
- line match the base direction of the line (e.g. left for English, right for Hebrew), use <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-4">start alignment</a>, or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-4">end
2540
+ line match the base direction of the line (e.g. left for English, right for Hebrew), use <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-5">start alignment</a>, or <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-5">end
2338
2541
alignment</a> for the opposite alignment.</p>
2339
2542
<div class="example" id="example-73203b99">
2340
2543
<a class="self-link" href="#example-73203b99"></a>
2341
- <p>In this example, <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-5">start alignment</a> is used. The first
2544
+ <p>In this example, <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-6">start alignment</a> is used. The first
2342
2545
line is left-aligned because the base direction is left-to-right, and the second line is
2343
2546
right-aligned because the base direction is right-to-left.</p>
2344
2547
<pre>WEBVTT
@@ -2359,23 +2562,25 @@
2359
2562
<p>An optional <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-2">WebVTT region</a> to which a cue belongs.</p>
2360
2563
<p>By default, the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-3">region</a> is set to null.</p>
2361
2564
</dl>
2362
- <p>The associated <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-10">WebVTT
2565
+ <p>The associated <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-12">WebVTT
2363
2566
cues</a> are the <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-1">rules for updating the display of WebVTT text tracks</a>.</p>
2364
2567
<div class="impl">
2365
- <p>When a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-11">WebVTT cue</a> whose <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">active flag</a> is set has its <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-11">writing direction</a>, <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-8">snap-to-lines flag</a>, <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-20">line</a>, <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-4">line alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-19">position</a>, <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-6">position alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-6">size</a>, <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-12">text alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-1">region</a>, or <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-1">text</a> change value, then the user agent must empty the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display
2366
- state</a>, and then immediately run the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">rules for updating the display of
2367
- WebVTT text tracks</a>.</p>
2568
+ <p>When a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-13">WebVTT cue</a> whose <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">active flag</a> is set has its <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-11">writing direction</a>, <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-7">snap-to-lines flag</a>, <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-20">line</a>, <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-4">line alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-19">position</a>, <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-6">position alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-6">size</a>, <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-14">text alignment</a>, <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-1">region</a>, or <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-3">text</a> change value, then the user agent must empty the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track cue display state</a>, and then
2569
+ immediately run the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>’s <a data-link-type="dfn" href="#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-2">rules for updating the display of WebVTT text
2570
+ tracks</a>.</p>
2368
2571
</div>
2369
- <h3 class="heading settled" data-level="3.2" id="regions"><span class="secno">3.2. </span><span class="content">WebVTT regions</span><a class="self-link" href="#regions"></a></h3>
2370
- <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region">WebVTT region</dfn> represents a subpart of the video viewport and provides a rendering
2371
- area for <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-12">WebVTT cues</a>.</p>
2572
+ <h3 class="heading settled" data-level="3.4" id="regions"><span class="secno">3.4. </span><span class="content">WebVTT caption or subtitle regions</span><a class="self-link" href="#regions"></a></h3>
2573
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region">WebVTT region</dfn> represents a subpart of the video viewport and provides a limited
2574
+ rendering area for <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue" id="ref-for-webvtt-caption-or-subtitle-cue-1">WebVTT caption or subtitle cues</a>.</p>
2575
+ <p class="note" role="note">Regions provide a means to group caption or subtitle cues so the cues can be rendered
2576
+ together, which is particularly important when scrolling up.</p>
2372
2577
<p>Each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-4">WebVTT region</a> consists of:</p>
2373
2578
<dl>
2374
2579
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region identifier" data-noexport="" id="webvtt-region-identifier">An identifier</dfn>
2375
2580
<dd>
2376
- <p>An arbitrary string of one or more characters other than U+0020 SPACE or U+0009 CHARACTER
2581
+ <p>An arbitrary string of zero or more characters other than U+0020 SPACE or U+0009 CHARACTER
2377
2582
TABULATION character. The string must not contain the substring "-->" (U+002D HYPHEN-MINUS, U+002D
2378
- HYPHEN-MINUS, U+003E GREATER-THAN SIGN). An identifier is required for a region to exist.</p>
2583
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN). Defaults to the empty string.</p>
2379
2584
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region width" data-noexport="" id="webvtt-region-width">A width</dfn>
2380
2585
<dd>
2381
2586
<p>A number giving the width of the box within which the text of each line of the containing cues
@@ -2384,6 +2589,9 @@
2384
2589
<dd>
2385
2590
<p>A number giving the number of lines of the box within which the text of each line of the
2386
2591
containing cues is to be rendered. Defaults to 3.</p>
2592
+ <p class="note" role="note">Since a WebVTT region defines a fixed rendering area, a cue that has more lines
2593
+ than the region allows will be clipped. For scrolling regions, the clipping happens at the top,
2594
+ for non-scrolling regions it happens at the bottom.</p>
2387
2595
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region anchor" data-noexport="" id="webvtt-region-anchor">A region anchor point</dfn>
2388
2596
<dd>
2389
2597
<p>Two numbers giving the x and y coordinates within the region which is anchored to the video
@@ -2392,7 +2600,7 @@
2392
2600
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region viewport anchor" data-noexport="" id="webvtt-region-viewport-anchor">A region viewport anchor point</dfn>
2393
2601
<dd>
2394
2602
<p>Two numbers giving the x and y coordinates within the video viewport to which the region anchor
2395
- point is anchored. Defaults to (0,100), i.e. the bottom left corner of the viewport.</p>
2603
+ point is anchored. Defaults to (0,100), i.e. the bottom left corner of the video viewport.</p>
2396
2604
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT region scroll" data-noexport="" id="webvtt-region-scroll">A scroll value</dfn>
2397
2605
<dd>
2398
2606
<p>One of the following:</p>
@@ -2409,14 +2617,15 @@
2409
2617
<div class="note" role="note">
2410
2618
<p>The following diagram illustrates how anchoring of a region to a video viewport works. The black
2411
2619
cross is the anchor, orange explains the anchor’s offset within the region and green the anchor’s
2412
- offset within the viewport. Think of it as sticking a pin through a note onto a board:</p>
2413
- <p><img alt="Within the video viewport, there is a WebVTT region.
2620
+ offset within the video viewport. Think of it as sticking a pin through a note onto a board:</p>
2621
+ <p><img alt="visual explanation of WebVTT regions" longdesc="#regionsExplained" src="webvtt-region-diagram.png"></p>
2622
+ <p id="regionsExplained">Image description: Within the video viewport, there is a WebVTT region.
2414
2623
Inside the region, there is an anchor point marked with a black cross. The vertical and horizontal
2415
2624
distance from the video viewport’s edges to the anchor is marked with green arrows, representing
2416
2625
the region viewport anchor X and Y offsets. The vertical and horizontal distance from the region’s
2417
2626
edges to the anchor is marked with orange arrows, representing the region anchor X and Y offsets.
2418
2627
The size of the region is represented by the region width for the horizontal axis, and region lines
2419
- for the vertical axis." src="webvtt-region-diagram.png"></p>
2628
+ for the vertical axis.</p>
2420
2629
</div>
2421
2630
<p>For parsing, we also need the following:</p>
2422
2631
<dl>
@@ -2424,12 +2633,21 @@
2424
2633
<dd>
2425
2634
<p>A list of zero or more <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-5">WebVTT regions</a>.</p>
2426
2635
</dl>
2636
+ <h3 class="heading settled" data-level="3.5" id="chapter-cues"><span class="secno">3.5. </span><span class="content">WebVTT chapter cues</span><a class="self-link" href="#chapter-cues"></a></h3>
2637
+ <p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-cue">WebVTT chapter cue<a class="self-link" href="#webvtt-chapter-cue"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-14">WebVTT cue</a> whose <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-4">cue text</a> is interpreted as a
2638
+ chapter title that describes the chapter as a navigation target.</p>
2639
+ <p>Chapter cues mark up the timeline of a audio or video file in consecutive, non-overlapping
2640
+ intervals. It is further possible to subdivide these intervals into sub-chapters building a
2641
+ navigation tree.</p>
2642
+ <h3 class="heading settled" data-level="3.6" id="metadata-cues"><span class="secno">3.6. </span><span class="content">WebVTT metadata cues</span><a class="self-link" href="#metadata-cues"></a></h3>
2643
+ <p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-metadata-cue">WebVTT metadata cue<a class="self-link" href="#webvtt-metadata-cue"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-15">WebVTT cue</a> whose <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-5">cue text</a> is interpreted as
2644
+ time-aligned metadata.</p>
2427
2645
<h2 class="heading settled" data-level="4" id="syntax"><span class="secno">4. </span><span class="content">Syntax</span><a class="self-link" href="#syntax"></a></h2>
2428
2646
<h3 class="heading settled" data-level="4.1" id="file-structure"><span class="secno">4.1. </span><span class="content">WebVTT file structure</span><a class="self-link" href="#file-structure"></a></h3>
2429
2647
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-file">WebVTT file</dfn> must consist of a <a data-link-type="dfn" href="#webvtt-file-body" id="ref-for-webvtt-file-body-1">WebVTT file body</a> encoded as UTF-8 and labeled
2430
2648
with the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#mime-type">MIME type</a> <code>text/vtt</code>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p>
2431
2649
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-file-body">WebVTT file body</dfn> consists of the following components, in the following order:</p>
2432
- <ol class="algorithm">
2650
+ <ol class="algorithm" data-algorithm="WebVTT file body">
2433
2651
<li>An optional U+FEFF BYTE ORDER MARK (BOM) character.
2434
2652
<li>The string "<code>WEBVTT</code>".
2435
2653
<li>Optionally, either a U+0020 SPACE character or a U+0009 CHARACTER TABULATION (tab) character
@@ -2481,8 +2699,9 @@
2481
2699
<li>Optionally, one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters
2482
2700
followed by a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-1">WebVTT cue settings list</a>.
2483
2701
<li>A <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-12">WebVTT line terminator</a>.
2484
- <li>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-payload">cue payload</dfn>: either <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-2">WebVTT cue text</a>, <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-1">WebVTT chapter title text</a>, or <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-1">WebVTT metadata text</a>, but it must not contain the substring "<code>--></code>" (U+002D
2485
- HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).
2702
+ <li>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-payload">cue payload</dfn>: either <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-2">WebVTT caption or subtitle cue text</a>, <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-1">WebVTT
2703
+ chapter title text</a>, or <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-1">WebVTT metadata text</a>, but it must not contain the substring
2704
+ "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).
2486
2705
<li>A <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-13">WebVTT line terminator</a>.
2487
2706
</ol>
2488
2707
<p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-block" id="ref-for-webvtt-cue-block-2">WebVTT cue block</a> corresponds to one piece of time-aligned text or data in
@@ -2491,7 +2710,7 @@
2491
2710
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-identifier">WebVTT cue identifier</dfn> is any sequence of one or more characters not containing the
2492
2711
substring "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN),
2493
2712
nor containing any U+000A LINE FEED (LF) characters or U+000D CARRIAGE RETURN (CR) characters.</p>
2494
- <p>A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-2">WebVTT cue identifier</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-3">WebVTT cue identifiers</a> of all <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-13">WebVTT cues</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-8">WebVTT
2713
+ <p>A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-2">WebVTT cue identifier</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-3">WebVTT cue identifiers</a> of all <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-16">WebVTT cues</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-8">WebVTT
2495
2714
file</a>.</p>
2496
2715
<p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-identifier" id="ref-for-webvtt-cue-identifier-4">WebVTT cue identifier</a> can be used to reference a specific cue, for example
2497
2716
from script or CSS.</p>
@@ -2519,10 +2738,10 @@
2519
2738
<li>A U+003A COLON character (:)
2520
2739
</ol>
2521
2740
<li>Two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the <var>minutes</var> as a base ten integer in the range
2522
- 0 <var>minutes</var> 59.
2741
+ 0  <var>minutes</var>  59.
2523
2742
<li>A U+003A COLON character (:)
2524
2743
<li>Two <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the <var>seconds</var> as a base ten integer in the range
2525
- 0 <var>seconds</var> 59.
2744
+ 0  <var>seconds</var>  59.
2526
2745
<li>A U+002E FULL STOP character (.).
2527
2746
<li>Three <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#ascii-digits">ASCII digits</a>, representing the thousandths of a second <var>seconds-frac</var> as a base
2528
2747
ten integer.
@@ -2582,12 +2801,12 @@
2582
2801
separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-17">WebVTT line terminator</a>. (In other words, any text that does not
2583
2802
have two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-18">WebVTT line terminators</a> and does not start
2584
2803
or end with a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-19">WebVTT line terminator</a>.)</p>
2585
- <p><a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-2">WebVTT metadata text</a> cues are only useful for scripted applications (using the <code>metadata</code> <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a>).</p>
2586
- <h4 class="heading settled" data-level="4.2.2" id="cue-text"><span class="secno">4.2.2. </span><span class="content">WebVTT cue text</span><a class="self-link" href="#cue-text"></a></h4>
2587
- <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text">WebVTT cue text</dfn> is <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-2">cue payload</a> that consists of zero or more <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-1">WebVTT cue
2588
- components</a>, in any order, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-20">WebVTT line
2589
- terminator</a>.</p>
2590
- <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-components">WebVTT cue components</dfn> are:</p>
2804
+ <p><a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-2">WebVTT metadata text</a> cues are only useful for scripted applications (e.g. using the <code>metadata</code> <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#kind-of-track">text track kind</a> in a HTML <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>).</p>
2805
+ <h4 class="heading settled" data-level="4.2.2" id="caption-text"><span class="secno">4.2.2. </span><span class="content">WebVTT caption or subtitle cue text</span><a class="self-link" href="#caption-text"></a></h4>
2806
+ <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue-text">WebVTT caption or subtitle cue text</dfn> is <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-2">cue payload</a> that consists of zero or
2807
+ more <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-1">WebVTT caption or subtitle cue components</a>, in any order, each optionally separated from
2808
+ the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-20">WebVTT line terminator</a>.</p>
2809
+ <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-caption-or-subtitle-cue-components">WebVTT caption or subtitle cue components</dfn> are:</p>
2591
2810
<ul>
2592
2811
<li>A <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-1">WebVTT cue class span</a>.
2593
2812
<li>A <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-1">WebVTT cue italics span</a>.
@@ -2601,8 +2820,13 @@
2601
2820
<li>An <a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a>, representing one or two Unicode
2602
2821
code points, as defined in HTML, in the text of the cue. <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a>
2603
2822
</ul>
2823
+ <p>All <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-2">WebVTT caption or subtitle cue components</a> bar the HTML character reference may have
2824
+ one or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="cue-component-class-names">cue component class names</dfn> attached to it by separating the cue component
2825
+ class name from the cue component start tag using the perido ('.') notation. The class name must
2826
+ immediately follow the "period" (.).</p>
2604
2827
<p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-internal-text">WebVTT cue internal text</dfn> consists of an optional <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-21">WebVTT line terminator</a>,
2605
- followed by zero or more <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-2">WebVTT cue components</a>, in any order, each optionally followed by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-22">WebVTT line terminator</a>.</p>
2828
+ followed by zero or more <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-3">WebVTT caption or subtitle cue components</a>, in any order, each
2829
+ optionally followed by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-22">WebVTT line terminator</a>.</p>
2606
2830
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-class-span">WebVTT cue class span</dfn> consists of a <a data-link-type="dfn" href="#webvtt-cue-span-start-tag" id="ref-for-webvtt-cue-span-start-tag-1">WebVTT cue span start tag</a> "<code>c</code>" that disallows an annotation, <a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-1">WebVTT cue internal text</a> representing cue
2607
2831
text, and a <a data-link-type="dfn" href="#webvtt-cue-span-end-tag" id="ref-for-webvtt-cue-span-end-tag-1">WebVTT cue span end tag</a> "<code>c</code>".</p>
2608
2832
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-italics-span">WebVTT cue italics span</dfn> consists of a <a data-link-type="dfn" href="#webvtt-cue-span-start-tag" id="ref-for-webvtt-cue-span-start-tag-2">WebVTT cue span start tag</a> "<code>i</code>" that disallows an annotation, <a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-2">WebVTT cue internal text</a> representing the
@@ -2642,8 +2866,8 @@
2642
2866
represents the name of the voice.
2643
2867
<li><a data-link-type="dfn" href="#webvtt-cue-internal-text" id="ref-for-webvtt-cue-internal-text-7">WebVTT cue internal text</a>.
2644
2868
<li>A <a data-link-type="dfn" href="#webvtt-cue-span-end-tag" id="ref-for-webvtt-cue-span-end-tag-7">WebVTT cue span end tag</a> "<code>v</code>". If this <a data-link-type="dfn" href="#webvtt-cue-voice-span" id="ref-for-webvtt-cue-voice-span-2">WebVTT cue voice span</a> is the
2645
- only <a data-link-type="dfn" href="#webvtt-cue-components" id="ref-for-webvtt-cue-components-3">component</a> of its <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-3">WebVTT cue text</a> sequence, then the
2646
- end tag may be omitted for brevity.
2869
+ only <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-4">component</a> of its <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-3">WebVTT caption or
2870
+ subtitle cue text</a> sequence, then the end tag may be omitted for brevity.
2647
2871
</ol>
2648
2872
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-language-span">WebVTT cue language span</dfn> consists of the following components, in the order
2649
2873
given:</p>
@@ -2705,13 +2929,21 @@
2705
2929
<p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-span-start-tag-annotation-text">WebVTT cue span start tag annotation text</dfn> consists of one or more characters other
2706
2930
than U+000A LINE FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND
2707
2931
characters (&amp;), and U+003E GREATER-THAN SIGN characters (>).</p>
2932
+ <h4 class="heading settled" data-level="4.2.3" id="chapter-title-text"><span class="secno">4.2.3. </span><span class="content">WebVTT chapter title text</span><a class="self-link" href="#chapter-title-text"></a></h4>
2933
+ <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-title-text">WebVTT chapter title text</dfn> is <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-6">cue text</a> that makes use of zero or more of the
2934
+ following components, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-25">WebVTT line
2935
+ terminator</a>:</p>
2936
+ <ul>
2937
+ <li><a data-link-type="dfn" href="#webvtt-cue-text-span" id="ref-for-webvtt-cue-text-span-2">WebVTT cue text span</a>
2938
+ <li><a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a>
2939
+ </ul>
2708
2940
<h3 class="heading settled" data-level="4.3" id="region-settings"><span class="secno">4.3. </span><span class="content">WebVTT region settings</span><a class="self-link" href="#region-settings"></a></h3>
2709
2941
<p>A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-2">WebVTT cue settings list</a> can contain a reference to a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-6">WebVTT region</a>. To define a
2710
2942
region, a <a data-link-type="dfn" href="#webvtt-region-definition-block" id="ref-for-webvtt-region-definition-block-2">WebVTT region definition block</a> is specified.</p>
2711
2943
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-settings-list">WebVTT region settings list</dfn> consists of zero or more of the following components,
2712
2944
in any order, separated from each other by one or more U+0020 SPACE characters, U+0009 CHARACTER
2713
- TABULATION (tab) characters, or <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-25">WebVTT line terminators</a>, except that the string must not
2714
- contain two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-26">WebVTT line terminators</a>. Each component must not be included more
2945
+ TABULATION (tab) characters, or <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-26">WebVTT line terminators</a>, except that the string must not
2946
+ contain two consecutive <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-27">WebVTT line terminators</a>. Each component must not be included more
2715
2947
than once per <a data-link-type="dfn" href="#webvtt-region-settings-list" id="ref-for-webvtt-region-settings-list-2">WebVTT region settings list</a> string.</p>
2716
2948
<ul>
2717
2949
<li>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-1">WebVTT region identifier setting</a>.
@@ -2738,9 +2970,10 @@
2738
2970
GREATER-THAN SIGN).</p>
2739
2971
</ol>
2740
2972
<p>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-2">WebVTT region identifier setting</a> must be unique amongst all the <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-3">WebVTT region identifier settings</a> of all <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-7">WebVTT
2741
- regions</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-9">WebVTT file</a>. For a region to exist, a region identifier setting has to be
2742
- provided.</p>
2743
- <p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-4">WebVTT region identifier setting</a> gives a name to the region so it can be
2973
+ regions</a> of a <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-9">WebVTT file</a>.</p>
2974
+ <p>A <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-4">WebVTT region identifier setting</a> must be present in each <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-3">WebVTT cue settings
2975
+ list</a>. Without an identifier, it is not possible to associate a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-17">WebVTT cue</a> with a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-8">WebVTT region</a> in the syntax.</p>
2976
+ <p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-identifier-setting" id="ref-for-webvtt-region-identifier-setting-5">WebVTT region identifier setting</a> gives a name to the region so it can be
2744
2977
referenced by the cues that belong to the region.</p>
2745
2978
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-width-setting">WebVTT region width setting</dfn> consists of the following components, in the order
2746
2979
given:</p>
@@ -2803,8 +3036,8 @@
2803
3036
<p class="note" role="note">The <a data-link-type="dfn" href="#webvtt-region-viewport-anchor-setting" id="ref-for-webvtt-region-viewport-anchor-setting-2">WebVTT region viewport anchor setting</a> provides a tuple of two percentages
2804
3037
that specify the point within the video viewport that the region anchor point is anchored to. The
2805
3038
first percentage measures the x-dimension and the second percentage measures the y-dimension from
2806
- the top left corner of the video viewport box. If no viewport anchor is given, it defaults to 0%,
2807
- 100% (i.e. the bottom left corner).</p>
3039
+ the top left corner of the video viewport box. If no region viewport anchor is given, it defaults to
3040
+ 0%, 100% (i.e. the bottom left corner).</p>
2808
3041
<p class="note" role="note">For browsers, the region maps to an absolute positioned CSS box relative to the
2809
3042
video viewport, i.e. there is a relative positioned box that represents the video viewport relative
2810
3043
to which the regions are absolutely positioned. Overflow is hidden.</p>
@@ -2832,8 +3065,13 @@
2832
3065
the line in the bottom of the region. If no empty line is available, the oldest line is
2833
3066
replaced.</p>
2834
3067
<h3 class="heading settled" data-level="4.4" id="cue-settings"><span class="secno">4.4. </span><span class="content">WebVTT cue settings</span><a class="self-link" href="#cue-settings"></a></h3>
2835
- <p>A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-3">WebVTT cue settings list</a> consists of zero or more of the following settings. Each
2836
- setting must not be included more than once per <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-4">WebVTT cue settings list</a>.</p>
3068
+ <p>A <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-1">WebVTT cue setting</a> is part of a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-4">WebVTT cue settings list</a> and provides
3069
+ configuration options regarding the position and alignment of the cue box and the cue text
3070
+ within.</p>
3071
+ <p class="note" role="note">For example, a set of WebVTT cue settings may allow a cue box to be aligned to the
3072
+ left or positioned at the top right with the cue text within center aligned.</p>
3073
+ <p>The current available <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-2">WebVTT cue settings</a> that may appear in a <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-5">WebVTT cue settings
3074
+ list</a> are:</p>
2837
3075
<ul class="brief">
2838
3076
<li>A <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-1">WebVTT vertical text cue setting</a>.
2839
3077
<li>A <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-1">WebVTT line cue setting</a>.
@@ -2842,10 +3080,9 @@
2842
3080
<li>A <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-1">WebVTT alignment cue setting</a>.
2843
3081
<li>A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-1">WebVTT region cue setting</a>.
2844
3082
</ul>
2845
- <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-5">WebVTT cue settings list</a> gives configuration options regarding the position
2846
- and alignment of the cue box and the cue text within. For example, it allows a cue box to be aligned
2847
- to the left or positioned at the top right with the cue text within center aligned.</p>
3083
+ <p>Each of these setting must not be included more than once per <a data-link-type="dfn" href="#webvtt-cue-settings-list" id="ref-for-webvtt-cue-settings-list-6">WebVTT cue settings
3084
+ list</a>.</p>
3085
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</dfn> is a <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-3">WebVTT cue setting</a> that consists of the
2848
- <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-vertical-text-cue-setting">WebVTT vertical text cue setting</dfn> is a <a data-link-type="dfn" href="#webvtt-cue-setting" id="ref-for-webvtt-cue-setting-1">WebVTT cue setting</a> that consists of the
2849
3086
following components, in the order given:</p>
2850
3087
<ol>
2851
3088
<li>The string "<code>vertical</code>" as the <a data-link-type="dfn" href="#webvtt-cue-setting-name" id="ref-for-webvtt-cue-setting-name-2">WebVTT cue setting name</a>.
@@ -2890,13 +3127,13 @@
2890
3127
</ol>
2891
3128
</ol>
2892
3129
<p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-2">WebVTT line cue setting</a> configures the offset of the cue box from the video
2893
- viewport’s edge in the direction opposite to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-12">writing
2894
- direction</a>. For horizontal cues, this is the vertical offset from the top of the video viewport.
2895
- The offset is for the <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-2">start</a>, <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-line-end-alignment" id="ref-for-webvtt-cue-line-end-alignment-1">end</a> of the cue box,
2896
- depending on the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-5">WebVTT cue line alignment</a> value - <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-3">start</a> by default. The offset can be given either as a percentage of the video
2897
- dimension or as a line number. Line numbers are based on the size of the first line of the cue.
2898
- Positive line numbers count from the start of the video viewport (the first line is numbered 0),
2899
- negative line numbers from the end of the viewport (the last line is numbered −1).</p>
3130
+ viewport’s edge in the direction orthogonal to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-12">writing
3131
+ direction</a>. For horizontal cues, this is the vertical offset from the top of the video viewport,
3132
+ for vertical cues, it’s the horizontal offset. The offset is for the <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-2">start</a>, <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-line-end-alignment" id="ref-for-webvtt-cue-line-end-alignment-1">end</a> of the cue box, depending on the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-5">WebVTT cue line alignment</a> value - <a data-link-type="dfn" href="#webvtt-cue-line-start-alignment" id="ref-for-webvtt-cue-line-start-alignment-3">start</a> by default. The offset can be given either as a
3133
+ percentage of the relevant writing-mode dependent video viewport dimension or as a line number. Line
3134
+ numbers are based on the size of the first line of the cue. Positive line numbers count from the
3135
+ start of the video viewport (the first line is numbered 0), negative line numbers from the end of
3136
+ the video viewport (the last line is numbered −1).</p>
2900
3137
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-position-cue-setting">WebVTT position cue setting</dfn> consists of the following components, in the order
2901
3138
given:</p>
2902
3139
<ol>
@@ -2919,7 +3156,7 @@
2919
3156
</ol>
2920
3157
<p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-2">WebVTT position cue setting</a> configures the indent position of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-24">cue box</a> in the direction orthogonal to the <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-3">WebVTT line cue setting</a>.
2921
3158
For horizontal cues, this is the horizontal position. The cue position is given as a percentage of
2922
- the video viewport. The positioning is for the <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-3">line-left</a>, <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-2">line-right</a> of the cue box, depending on the cue’s <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-1">computed position alignment</a>, which is overridden by the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-3">WebVTT
3159
+ the video viewport. The positioning is for the <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-5">line-left</a>, <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-1">center</a>, or <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-4">line-right</a> of the cue box, depending on the cue’s <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-1">computed position alignment</a>, which is overridden by the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-3">WebVTT
2923
3160
position cue setting</a>.</p>
2924
3161
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-size-cue-setting">WebVTT size cue setting</dfn> consists of the following components, in the order
2925
3162
given:</p>
@@ -2933,7 +3170,7 @@
2933
3170
</ol>
2934
3171
<p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-2">WebVTT size cue setting</a> configures the size of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-25">cue box</a> in the same direction as the <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-4">WebVTT position cue setting</a>. For horizontal
2935
3172
cues, this is the width of the <a data-link-type="dfn" href="#webvtt-cue-box" id="ref-for-webvtt-cue-box-26">cue box</a>. It is given as a percentage of
2936
- the width of the viewport.</p>
3173
+ the width of the video viewport.</p>
2937
3174
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-alignment-cue-setting">WebVTT alignment cue setting</dfn> consists of the following components, in the order
2938
3175
given:</p>
2939
3176
<ol>
@@ -2957,9 +3194,11 @@
2957
3194
<li>
2958
3195
<p>As the <a data-link-type="dfn" href="#webvtt-cue-setting-value" id="ref-for-webvtt-cue-setting-value-7">WebVTT cue setting value</a>: a <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-1">WebVTT region identifier</a>.</p>
2959
3196
</ol>
2960
- <p class="note" role="note">A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-2">WebVTT region cue setting</a> configures a cue to become part of a region by
2961
- referencing the region’s identifier unless the cue has a <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-3">"vertical"</a>, <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-4">"line"</a> or <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-3">"size"</a> cue setting. If a cue is part of a region, its cue settings for <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-5">"position"</a> and <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-3">"align"</a> are
2962
- applied to the line boxes in the cue relative to the region box.</p>
3197
+ <p>A <a data-link-type="dfn" href="#webvtt-region-cue-setting" id="ref-for-webvtt-region-cue-setting-2">WebVTT region cue setting</a> configures a cue to become part of a region by referencing the
3198
+ region’s identifier unless the cue has a <a data-link-type="dfn" href="#webvtt-vertical-text-cue-setting" id="ref-for-webvtt-vertical-text-cue-setting-3">"vertical"</a>, <a data-link-type="dfn" href="#webvtt-line-cue-setting" id="ref-for-webvtt-line-cue-setting-4">"line"</a> or <a data-link-type="dfn" href="#webvtt-size-cue-setting" id="ref-for-webvtt-size-cue-setting-3">"size"</a> cue setting.
3199
+ If a cue is part of a region, its cue settings for <a data-link-type="dfn" href="#webvtt-position-cue-setting" id="ref-for-webvtt-position-cue-setting-5">"position"</a> and <a data-link-type="dfn" href="#webvtt-alignment-cue-setting" id="ref-for-webvtt-alignment-cue-setting-3">"align"</a> are applied to the line
3200
+ boxes in the cue relative to the region box and the cue box width and height are calculated relative
3201
+ to the region dimensions rather than the viewport dimensions.</p>
2963
3202
<h3 class="heading settled" data-level="4.5" id="properties-of-cue-sequences"><span class="secno">4.5. </span><span class="content">Properties of cue sequences</span><a class="self-link" href="#properties-of-cue-sequences"></a></h3>
2964
3203
<h4 class="heading settled" data-level="4.5.1" id="file-using-only-nested-cues"><span class="secno">4.5.1. </span><span class="content">WebVTT file using only nested cues</span><a class="self-link" href="#file-using-only-nested-cues"></a></h4>
2965
3204
<p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-10">WebVTT file</a> whose cues all follow the following rules is said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT file using only nested cues" data-noexport="" id="webvtt-file-using-only-nested-cues">WebVTT file
@@ -3033,29 +3272,123 @@
3033
3272
<h4 class="heading settled" data-level="4.6.1" id="file-using-metadata-content"><span class="secno">4.6.1. </span><span class="content">WebVTT file using metadata content</span><a class="self-link" href="#file-using-metadata-content"></a></h4>
3034
3273
<p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-12">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-3">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-metadata-text" id="ref-for-webvtt-metadata-text-3">WebVTT metadata text</a> is said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-metadata-content">WebVTT file using metadata content<a class="self-link" href="#webvtt-file-using-metadata-content"></a></dfn>.</p>
3035
3274
<h4 class="heading settled" data-level="4.6.2" id="file-using-chapter-title-text"><span class="secno">4.6.2. </span><span class="content">WebVTT file using chapter title text</span><a class="self-link" href="#file-using-chapter-title-text"></a></h4>
3036
- <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-chapter-title-text">WebVTT chapter title text</dfn> is <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-4">WebVTT cue text</a> that makes use only of zero or
3037
- more of the following components, each optionally separated from the next by a <a data-link-type="dfn" href="#webvtt-line-terminator" id="ref-for-webvtt-line-terminator-27">WebVTT line
3038
- terminator</a>:</p>
3039
- <ul>
3040
- <li><a data-link-type="dfn" href="#webvtt-cue-text-span" id="ref-for-webvtt-cue-text-span-2">WebVTT cue text span</a>
3041
- <li><a data-link-type="dfn" href="https://www.w3.org/TR/html51/syntax.html#character-references">HTML character reference</a> <a data-link-type="biblio" href="#biblio-html51">[HTML51]</a>
3042
- </ul>
3043
3275
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-chapter-title-text">WebVTT file using chapter title text<a class="self-link" href="#webvtt-file-using-chapter-title-text"></a></dfn> is a <a data-link-type="dfn" href="#webvtt-file-using-only-nested-cues" id="ref-for-webvtt-file-using-only-nested-cues-3">WebVTT file using only nested cues</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-4">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-chapter-title-text" id="ref-for-webvtt-chapter-title-text-2">WebVTT chapter title text</a>.</p>
3044
- <h4 class="heading settled" data-level="4.6.3" id="file-using-cue-text"><span class="secno">4.6.3. </span><span class="content">WebVTT file using cue text</span><a class="self-link" href="#file-using-cue-text"></a></h4>
3045
- <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-13">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-5">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-5">WebVTT cue text</a> is
3046
- said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-cue-text">WebVTT file using cue text<a class="self-link" href="#webvtt-file-using-cue-text"></a></dfn>.</p>
3047
- <h2 class="heading settled" data-level="5" id="parsing"><span class="secno">5. </span><span class="content">Parsing</span><a class="self-link" href="#parsing"></a></h2>
3048
- <h3 class="heading settled algorithm" data-algorithm="WebVTT file parsing" data-level="5.1" id="file-parsing"><span class="secno">5.1. </span><span class="content">WebVTT file parsing</span><a class="self-link" href="#file-parsing"></a></h3>
3276
+ <h4 class="heading settled" data-level="4.6.3" id="file-using-cue-text"><span class="secno">4.6.3. </span><span class="content">WebVTT file using caption or subtitle cue text</span><a class="self-link" href="#file-using-cue-text"></a></h4>
3277
+ <p>A <a data-link-type="dfn" href="#webvtt-file" id="ref-for-webvtt-file-13">WebVTT file</a> whose cues all have a <a data-link-type="dfn" href="#cue-payload" id="ref-for-cue-payload-5">cue payload</a> that is <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-4">WebVTT caption or
3278
+ subtitle cue text</a> is said to be a <dfn data-dfn-type="dfn" data-noexport="" id="webvtt-file-using-caption-or-subtitle-cue-text">WebVTT file using caption or subtitle cue text<a class="self-link" href="#webvtt-file-using-caption-or-subtitle-cue-text"></a></dfn>.</p>
3279
+ <h2 class="heading settled" data-level="5" id="default-classes"><span class="secno">5. </span><span class="content">Default classes for WebVTT Caption or Subtitle Cue Components</span><a class="self-link" href="#default-classes"></a></h2>
3280
+ <p>Many captioning formats have simple ways of specifying a limited subset of text colors and
3281
+ background colors for text. Therefore, the WebVTT spec makes available a set of default <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-1">cue
3282
+ component class names</a> for <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-5">WebVTT caption or subtitle cue components</a> that authors can use
3283
+ in a standard way to mark up colored text and text background.</p>
3284
+ <p class="note" role="note">User agents that support CSS style sheets may implement this section through adding
3285
+ User Agent stylesheets.</p>
3286
+ <h3 class="heading settled" data-level="5.1" id="default-text-color"><span class="secno">5.1. </span><span class="content">Default text colors</span><a class="self-link" href="#default-text-color"></a></h3>
3287
+ <p><a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-6">WebVTT caption or subtitle cue components</a> that have one or more <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-2">class names</a> matching those in the first cell of a row in the table below must set their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> property as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints">presentational hints</a> to the value in the second cell of the
3288
+ row:</p>
3289
+ <table class="complex data">
3290
+ <thead>
3291
+ <tr>
3292
+ <th><a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-3">class names</a>
3293
+ <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color">color</a> value
3294
+ <tbody>
3295
+ <tr>
3296
+ <td><code>white</code>
3297
+ <td><span class="css">rgba(255,255,255,1)</span>
3298
+ <tr>
3299
+ <td><code>lime</code>
3300
+ <td><span class="css">rgba(0,255,0,1)</span>
3301
+ <tr>
3302
+ <td><code>cyan</code>
3303
+ <td><span class="css">rgba(0,255,255,1)</span>
3304
+ <tr>
3305
+ <td><code>red</code>
3306
+ <td><span class="css">rgba(255,0,0,1)</span>
3307
+ <tr>
3308
+ <td><code>yellow</code>
3309
+ <td><span class="css">rgba(255,255,0,1)</span>
3310
+ <tr>
3311
+ <td><code>magenta</code>
3312
+ <td><span class="css">rgba(255,0,255,1)</span>
3313
+ <tr>
3314
+ <td><code>blue</code>
3315
+ <td><span class="css">rgba(0,0,255,1)</span>
3316
+ <tr>
3317
+ <td><code>black</code>
3318
+ <td><span class="css">rgba(0,0,0,1)</span>
3319
+ </table>
3320
+ <p class="note" role="note">If your background is captioning, don’t get confused: The color for the class <code>lime</code> is what has traditionally been used in captioning under the name <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-green">green</a> (e.g.
3321
+ 608/708).</p>
3322
+ <p class="note" role="note">Do not use the classes <code>blue</code> and <code>black</code> on the default dark
3323
+ background, since they result in unreadable text. In general, please refer to WCAG for guidance on
3324
+ color contrast <a data-link-type="biblio" href="#biblio-wcag20">[WCAG20]</a> and make sure to take into account the text color, background color and
3325
+ also the video’s color.</p>
3326
+ <h3 class="heading settled" data-level="5.2" id="default-text-background"><span class="secno">5.2. </span><span class="content">Default text background colors</span><a class="self-link" href="#default-text-background"></a></h3>
3327
+ <p><a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-components" id="ref-for-webvtt-caption-or-subtitle-cue-components-7">WebVTT caption or subtitle cue components</a> that have one or more <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-4">class names</a> matching those in the first cell of a row in the table below must set their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-color">background-color</a> property as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#presentational-hints">presentational hints</a> to the value in the second cell
3328
+ of the row:</p>
3329
+ <table class="complex data">
3330
+ <thead>
3331
+ <tr>
3332
+ <th><a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-5">class names</a>
3333
+ <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a> value
3334
+ <tbody>
3335
+ <tr>
3336
+ <td><code>bg_white</code>
3337
+ <td><span class="css">rgba(255,255,255,1)</span>
3338
+ <tr>
3339
+ <td><code>bg_lime</code>
3340
+ <td><span class="css">rgba(0,255,0,1)</span>
3341
+ <tr>
3342
+ <td><code>bg_cyan</code>
3343
+ <td><span class="css">rgba(0,255,255,1)</span>
3344
+ <tr>
3345
+ <td><code>bg_red</code>
3346
+ <td><span class="css">rgba(255,0,0,1)</span>
3347
+ <tr>
3348
+ <td><code>bg_yellow</code>
3349
+ <td><span class="css">rgba(255,255,0,1)</span>
3350
+ <tr>
3351
+ <td><code>bg_magenta</code>
3352
+ <td><span class="css">rgba(255,0,255,1)</span>
3353
+ <tr>
3354
+ <td><code>bg_blue</code>
3355
+ <td><span class="css">rgba(0,0,255,1)</span>
3356
+ <tr>
3357
+ <td><code>bg_black</code>
3358
+ <td><span class="css">rgba(0,0,0,1)</span>
3359
+ </table>
3360
+ <p class="note" role="note">The color for the class <code>bg_lime</code> is what has traditionally been used in
3361
+ captioning under the name <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-green">green</a> (e.g. 608/708).</p>
3362
+ <p>For the purpose of determining the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade">cascade</a> of the color and background
3363
+ classes, the order of appearance determines the cascade of the classes.</p>
3364
+ <div class="example" id="example-a15d9824">
3365
+ <a class="self-link" href="#example-a15d9824"></a>
3366
+ <p>This example shows how to use the classes.</p>
3367
+ <pre>WEBVTT
3368
+
3369
+ 02:00.000 --> 02:05.000
3370
+ &lt;c.yellow.bg_blue>This is yellow text on a blue background&lt;/c>
3371
+
3372
+ 04:00.000 --> 04:05.000
3373
+ &lt;c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background&lt;/c>
3374
+ </pre>
3375
+ </div>
3376
+ <p class="note" role="note">Default classes can be changed by authors, e.g. ::cue(.yellow) {color:cyan} would
3377
+ change all .yellow classed text to cyan.</p>
3378
+ <h2 class="heading settled" data-level="6" id="parsing"><span class="secno">6. </span><span class="content">Parsing</span><a class="self-link" href="#parsing"></a></h2>
3379
+ <p>WebVTT file parsing is the same for all types of WebVTT files, including captions, subtitles,
3380
+ chapters, or metadata. Most of the steps will be skipped for chapters or metadata files.</p>
3381
+ <h3 class="heading settled algorithm" data-algorithm="WebVTT file parsing" data-level="6.1" id="file-parsing"><span class="secno">6.1. </span><span class="content">WebVTT file parsing</span><a class="self-link" href="#file-parsing"></a></h3>
3049
3382
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-parser">WebVTT parser</dfn>, given an input byte stream, a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>, and a collection of <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> <var>stylesheets</var>, must decode the byte
3050
3383
stream using the <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#utf-8-decode">UTF-8 decode</a> algorithm, and then must parse the resulting
3051
- string according to the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-1">WebVTT parser algorithm</a> below. This results in <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-14">WebVTT cues</a> being added to <var>output</var>, and <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> being added to <var>stylesheets</var>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p>
3384
+ string according to the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-1">WebVTT parser algorithm</a> below. This results in <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-18">WebVTT cues</a> being added to <var>output</var>, and <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheets</a> being added to <var>stylesheets</var>. <a data-link-type="biblio" href="#biblio-rfc3629">[RFC3629]</a></p>
3052
3385
<p>A <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-2">WebVTT parser</a>, specifically its conversion and parsing steps, is typically run
3053
3386
asynchronously, with the input byte stream being updated incrementally as the resource is
3054
3387
downloaded; this is called an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="incremental-webvtt-parser">incremental WebVTT parser</dfn>.</p>
3055
3388
<p>A <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-3">WebVTT parser</a> verifies a file signature before parsing the provided byte stream. If the
3056
3389
stream lacks this WebVTT file signature, then the parser aborts.</p>
3057
3390
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-parser-algorithm">WebVTT parser algorithm</dfn> is as follows:</p>
3058
- <ol class="algorithm">
3391
+ <ol class="algorithm" data-algorithm="WebVTT parser algorithm">
3059
3392
<li>
3060
3393
<p>Let <var>input</var> be the string being parsed, after conversion to Unicode, and with the following
3061
3394
transformations applied:</p>
@@ -3097,13 +3430,13 @@
3097
3430
characters.</p>
3098
3431
<li>
3099
3432
<p>If <var>position</var> is past the end of <var>input</var>, then abort these steps. The file was successfully
3100
- processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-15">WebVTT cues</a> were added
3433
+ processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-19">WebVTT cues</a> were added
3101
3434
to <var>output</var>.</p>
3102
3435
<li>
3103
3436
<p>The character indicated by <var>position</var> is a U+000A LINE FEED (LF) character. Advance <var>position</var> to the next character in <var>input</var>.</p>
3104
3437
<li>
3105
3438
<p>If <var>position</var> is past the end of <var>input</var>, then abort these steps. The file was successfully
3106
- processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-16">WebVTT cues</a> were added
3439
+ processed, but it contains no useful data and so no <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-20">WebVTT cues</a> were added
3107
3440
to <var>output</var>.</p>
3108
3441
<li>
3109
3442
<p><i>Header</i>: If the character indicated by <var>position</var> is not a U+000A LINE FEED (LF)
@@ -3119,7 +3452,7 @@
3119
3452
<li>
3120
3453
<p><a data-link-type="dfn" href="#collect-a-webvtt-block" id="ref-for-collect-a-webvtt-block-2">Collect a WebVTT block</a>, and let <var>block</var> be the returned value.</p>
3121
3454
<li>
3122
- <p>If <var>block</var> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-17">WebVTT cue</a>, add <var>block</var> to the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>.</p>
3455
+ <p>If <var>block</var> is a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-21">WebVTT cue</a>, add <var>block</var> to the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">text track list of cues</a> <var>output</var>.</p>
3123
3456
<li>
3124
3457
<p>Otherwise, if <var>block</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#css-style-sheet">CSS style sheet</a>, add <var>block</var> to <var>stylesheets</var>.</p>
3125
3458
<li>
@@ -3187,7 +3520,7 @@
3187
3520
<li>
3188
3521
<p>Let <var>previous position</var> be <var>position</var>.</p>
3189
3522
<li>
3190
- <p><i>Cue creation</i>: Let <var>cue</var> be a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-18">WebVTT cue</a> and initialize it as
3523
+ <p><i>Cue creation</i>: Let <var>cue</var> be a new <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-22">WebVTT cue</a> and initialize it as
3191
3524
follows:</p>
3192
3525
<ol>
3193
3526
<li>
@@ -3199,7 +3532,7 @@
3199
3532
<li>
3200
3533
<p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-13">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-13">horizontal</a>.</p>
3201
3534
<li>
3202
- <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-9">WebVTT cue snap-to-lines flag</a> be true.</p>
3535
+ <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-8">WebVTT cue snap-to-lines flag</a> be true.</p>
3203
3536
<li>
3204
3537
<p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-21">WebVTT cue line</a> be <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-4">auto</a>.</p>
3205
3538
<li>
@@ -3211,9 +3544,9 @@
3211
3544
<li>
3212
3545
<p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-7">WebVTT cue size</a> be 100.</p>
3213
3546
<li>
3214
- <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-13">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-5">center alignment</a>.</p>
3547
+ <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-15">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-5">center alignment</a>.</p>
3215
3548
<li>
3216
- <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-2">text track cue text</a> be the empty string.</p>
3549
+ <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-7">cue text</a> be the empty string.</p>
3217
3550
</ol>
3218
3551
<li>
3219
3552
<p><a data-link-type="dfn" href="#collect-webvtt-cue-timings-and-settings" id="ref-for-collect-webvtt-cue-timings-and-settings-1">Collect WebVTT cue timings and settings</a> from <var>line</var> using <var>regions</var> for <var>cue</var>.
@@ -3269,7 +3602,7 @@
3269
3602
whitespace</a>, then run these substeps:</p>
3270
3603
<ol>
3271
3604
<li>
3272
- <p><i>Region creation</i>: Let <var>region</var> be a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-8">WebVTT region</a>.</p>
3605
+ <p><i>Region creation</i>: Let <var>region</var> be a new <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-9">WebVTT region</a>.</p>
3273
3606
<li>
3274
3607
<p>Let <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-2">identifier</a> be the empty
3275
3608
string.</p>
@@ -3299,7 +3632,7 @@
3299
3632
<p>If <var>seen EOF</var> is true, break out of <i>loop</i>.</p>
3300
3633
</ol>
3301
3634
<li>
3302
- <p>If <var>cue</var> is not null, let the <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-3">text track cue text</a> of <var>cue</var> be <var>buffer</var>, and return <var>cue</var>.</p>
3635
+ <p>If <var>cue</var> is not null, let the <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-8">cue text</a> of <var>cue</var> be <var>buffer</var>, and return <var>cue</var>.</p>
3303
3636
<li>
3304
3637
<p>Otherwise, if <var>stylesheet</var> is not null, then <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet0">Parse a stylesheet</a> from <var>buffer</var>. If it returned a list of rules, assign the list as <var>stylesheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-css-rules">CSS rules</a>; otherwise, set <var>stylesheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-css-rules">CSS
3305
3638
rules</a> to an empty list. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <a data-link-type="biblio" href="#biblio-css-syntax-3">[CSS-SYNTAX-3]</a> Finally, return <var>stylesheet</var>.</p>
@@ -3309,14 +3642,13 @@
3309
3642
<li>
3310
3643
<p>Otherwise, return null.</p>
3311
3644
</ol>
3312
- <h3 class="heading settled algorithm" data-algorithm="WebVTT region settings parsing" data-level="5.2" id="region-settings-parsing"><span class="secno">5.2. </span><span class="content">WebVTT region settings parsing</span><a class="self-link" href="#region-settings-parsing"></a></h3>
3313
- <p>When the <a data-link-type="dfn" href="#webvtt-parser" id="ref-for-webvtt-parser-5">WebVTT parser</a> requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="collect WebVTT region settings" data-noexport="" id="collect-webvtt-region-settings">collect WebVTT region
3314
- settings</dfn> from a string <var>input</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>, the user agent must run the following
3315
- algorithm.</p>
3645
+ <h3 class="heading settled algorithm" data-algorithm="WebVTT region settings parsing" data-level="6.2" id="region-settings-parsing"><span class="secno">6.2. </span><span class="content">WebVTT region settings parsing</span><a class="self-link" href="#region-settings-parsing"></a></h3>
3646
+ <p>When the <a data-link-type="dfn" href="#webvtt-parser-algorithm" id="ref-for-webvtt-parser-algorithm-2">WebVTT parser algorithm</a> says to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-webvtt-region-settings">collect WebVTT region settings</dfn> from a
3647
+ string <var>input</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text track</a>, the user agent must run the following algorithm.</p>
3648
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-object">WebVTT region object</dfn> is a conceptual construct to represent a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-10">WebVTT region</a> that is used as a root node for <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-1">lists of WebVTT node
3316
- <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-region-object">WebVTT region object</dfn> is a conceptual construct to represent a <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-9">WebVTT region</a> that is used as a root node for <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-1">lists of WebVTT node
3317
3649
objects</a>. This algorithm returns a list of <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-3">WebVTT Region
3318
3650
Objects</a>.</p>
3319
- <ol class="algorithm">
3651
+ <ol class="algorithm" data-algorithm="WebVTT region objects">
3320
3652
<li>
3321
3653
<p>Let <var>settings</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#split-a-string-on-spaces">splitting <var>input</var> on
3322
3654
spaces</a>.</p>
@@ -3406,7 +3738,7 @@
3406
3738
<p>The rules to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="parse-a-percentage-string">parse a percentage string</dfn> are as follows. This will return either a
3407
3739
number in the range 0..100, or nothing. If at any point the algorithm says that it "fails", this
3408
3740
means that it is aborted at that point and returns nothing.</p>
3409
- <ol class="algorithm">
3741
+ <ol class="algorithm" data-algorithm="parse a percentage string">
3410
3742
<li>
3411
3743
<p>Let <var>input</var> be the string being parsed.</p>
3412
3744
<li>
@@ -3421,10 +3753,10 @@
3421
3753
<li>
3422
3754
<p>Return <var>percentage</var>.</p>
3423
3755
</ol>
3424
- <h3 class="heading settled algorithm" data-algorithm="WebVTT cue timings and settings parsing" data-level="5.3" id="cue-timings-and-settings-parsing"><span class="secno">5.3. </span><span class="content">WebVTT cue timings and settings parsing</span><a class="self-link" href="#cue-timings-and-settings-parsing"></a></h3>
3425
- <p>When the algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="collect WebVTT cue timings and settings" data-noexport="" id="collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and
3426
- settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-2">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-19">WebVTT cue</a> <var>cue</var>, the user agent must run the following algorithm.</p>
3427
- <ol class="algorithm">
3756
+ <h3 class="heading settled algorithm" data-algorithm="WebVTT cue timings and settings parsing" data-level="6.3" id="cue-timings-and-settings-parsing"><span class="secno">6.3. </span><span class="content">WebVTT cue timings and settings parsing</span><a class="self-link" href="#cue-timings-and-settings-parsing"></a></h3>
3757
+ <p>When the algorithm above says to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-webvtt-cue-timings-and-settings">collect WebVTT cue timings and settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-2">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-23">WebVTT cue</a> <var>cue</var>, the user
3758
+ agent must run the following algorithm.</p>
3759
+ <ol class="algorithm" data-algorithm="collect WebVTT cue timings and settings">
3428
3760
<li>
3429
3761
<p>Let <var>input</var> be the string being parsed.</p>
3430
3762
<li>
@@ -3460,7 +3792,7 @@
3460
3792
</ol>
3461
3793
<p>When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="parse-the-webvtt-cue-settings">parse the WebVTT cue settings</dfn> from a string <var>input</var> using a <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-3">text track list of regions</a> <var>regions</var> for a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">text track cue</a> <var>cue</var>, the user agent must
3462
3794
run the following steps:</p>
3463
- <ol class="algorithm">
3795
+ <ol class="algorithm" data-algorithm="parse the WebVTT cue settings">
3464
3796
<li>
3465
3797
<p>Let <var>settings</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#split-a-string-on-spaces">splitting <var>input</var> on
3466
3798
spaces</a>.</p>
@@ -3484,7 +3816,7 @@
3484
3816
<dd>
3485
3817
<ol>
3486
3818
<li>
3487
- <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-3">WebVTT cue region</a> be the last <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-10">WebVTT region</a> in <var>regions</var> whose <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-4">WebVTT region identifier</a> is <var>value</var>, if any, or null otherwise.</p>
3819
+ <p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-3">WebVTT cue region</a> be the last <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-11">WebVTT region</a> in <var>regions</var> whose <a data-link-type="dfn" href="#webvtt-region-identifier" id="ref-for-webvtt-region-identifier-4">WebVTT region identifier</a> is <var>value</var>, if any, or null otherwise.</p>
3488
3820
</ol>
3489
3821
<dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>vertical</code>"
3490
3822
<dd>
@@ -3494,6 +3826,9 @@
3494
3826
<li>
3495
3827
<p>Otherwise, if <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string
3496
3828
"<code>lr</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-15">WebVTT cue writing direction</a> be <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-4">vertical growing right</a>.</p>
3829
+ <li>
3830
+ <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-16">WebVTT cue writing direction</a> is not <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-14">horizontal</a>, let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-4">WebVTT cue region</a> be null (there are no
3831
+ vertical regions).</p>
3497
3832
</ol>
3498
3833
<dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>line</code>"
3499
3834
<dd>
@@ -3555,7 +3890,11 @@
3555
3890
<li>
3556
3891
<p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-22">WebVTT cue line</a> be <var>number</var>.</p>
3557
3892
<li>
3558
- <p>If the last character in <var>linepos</var> is a U+0025 PERCENT SIGN character (%), then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-10">WebVTT cue snap-to-lines flag</a> be false. Otherwise, let it be true.</p>
3893
+ <p>If the last character in <var>linepos</var> is a U+0025 PERCENT SIGN character (%), then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-9">WebVTT cue snap-to-lines flag</a> be false. Otherwise, let it be true.</p>
3894
+ <li>
3895
+ <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-line" id="ref-for-webvtt-cue-line-23">WebVTT cue line</a> is not <a data-link-type="dfn" href="#webvtt-cue-line-automatic" id="ref-for-webvtt-cue-line-automatic-5">auto</a>,
3896
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-5">WebVTT cue region</a> be null (the cue has been explicitly positioned with a
3897
+ line offset and thus drops out of the region).</p>
3559
3898
</ol>
3560
3899
<dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>position</code>"
3561
3900
<dd>
@@ -3572,13 +3911,13 @@
3572
3911
returned <var>percentage</var>, otherwise jump to the step labeled <i>next setting</i> (<a data-link-type="dfn" href="#webvtt-cue-position" id="ref-for-webvtt-cue-position-21">position</a>’s value remains the special value <a data-link-type="dfn" href="#webvtt-cue-automatic-position" id="ref-for-webvtt-cue-automatic-position-7">auto</a>).</p>
3573
3912
<li>
3574
3913
<p>If <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string
3575
- "<code>line-left</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-8">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-4">line-left alignment</a>.</p>
3914
+ "<code>line-left</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-8">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-6">line-left alignment</a>.</p>
3576
3915
<li>
3577
3916
<p>Otherwise, if <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string
3578
3917
"<code>center</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-9">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-2">center alignment</a>.</p>
3579
3918
<li>
3580
3919
<p>Otherwise, if <var>colalign</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string
3581
- "<code>line-right</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-10">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-3">line-right alignment</a>.</p>
3920
+ "<code>line-right</code>", then let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-position-alignment" id="ref-for-webvtt-cue-position-alignment-10">WebVTT cue position alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-5">line-right alignment</a>.</p>
3582
3921
<li>
3583
3922
<p>Otherwise, if <var>colalign</var> is not null, then jump to the step labeled <i>next
3584
3923
setting</i>.</p>
@@ -3593,29 +3932,32 @@
3593
3932
returned <var>percentage</var>, otherwise jump to the step labeled <i>next setting</i>.</p>
3594
3933
<li>
3595
3934
<p>Let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-8">WebVTT cue size</a> be <var>number</var>.</p>
3935
+ <li>
3936
+ <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-9">WebVTT cue size</a> is not 100, let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-6">WebVTT cue region</a> be
3937
+ null (the cue has been explicitly sized and thus drops out of the region).</p>
3596
3938
</ol>
3597
3939
<dt>If <var>name</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for "<code>align</code>"
3598
3940
<dd>
3599
3941
<ol>
3600
3942
<li>
3601
3943
<p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>start</code>", then
3602
- let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-14">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-6">start
3944
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-16">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-start-alignment" id="ref-for-webvtt-cue-start-alignment-7">start
3603
3945
alignment</a>.</p>
3604
3946
<li>
3605
3947
<p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>center</code>", then
3606
- let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-15">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-6">center
3948
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-17">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-center-alignment" id="ref-for-webvtt-cue-center-alignment-6">center
3607
3949
alignment</a>.</p>
3608
3950
<li>
3609
3951
<p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>end</code>", then
3610
- let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-16">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-5">end
3952
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-18">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-end-alignment" id="ref-for-webvtt-cue-end-alignment-6">end
3611
3953
alignment</a>.</p>
3612
3954
<li>
3613
3955
<p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>left</code>", then
3614
- let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-17">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-5">left
3956
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-19">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-left-alignment" id="ref-for-webvtt-cue-left-alignment-5">left
3615
3957
alignment</a>.</p>
3616
3958
<li>
3617
3959
<p>If <var>value</var> is a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code>right</code>", then
3618
- let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-18">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-5">right
3960
+ let <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-text-alignment" id="ref-for-webvtt-cue-text-alignment-20">WebVTT cue text alignment</a> be <a data-link-type="dfn" href="#webvtt-cue-right-alignment" id="ref-for-webvtt-cue-right-alignment-5">right
3619
3961
alignment</a>.</p>
3620
3962
</ol>
3621
3963
</dl>
@@ -3625,7 +3967,7 @@
3625
3967
</ol>
3626
3968
<p>When this specification says that a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="collect-a-webvtt-timestamp">collect a WebVTT timestamp</dfn>, the
3627
3969
user agent must run the following steps:</p>
3628
- <ol class="algorithm">
3970
+ <ol class="algorithm" data-algorithm="collect a WebVTT timestamp">
3629
3971
<li>
3630
3972
<p>Let <var>input</var> and <var>position</var> be the same variables as those of the same name in the algorithm
3631
3973
that invoked these steps.</p>
@@ -3695,18 +4037,18 @@
3695
4037
<li>
3696
4038
<p>Return <var>result</var>.</p>
3697
4039
</ol>
3698
- <h3 class="heading settled algorithm" data-algorithm="WebVTT cue text parsing rules" data-level="5.4" id="cue-text-parsing-rules"><span class="secno">5.4. </span><span class="content">WebVTT cue text parsing rules</span><a class="self-link" href="#cue-text-parsing-rules"></a></h3>
3699
- <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-node-object">WebVTT Node Object</dfn> is a conceptual construct used to represent components of <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-6">WebVTT cue text</a> so that its processing can be described without reference to the underlying
3700
- syntax.</p>
4040
+ <h3 class="heading settled algorithm" data-algorithm="WebVTT cue text parsing rules" data-level="6.4" id="cue-text-parsing-rules"><span class="secno">6.4. </span><span class="content">WebVTT cue text parsing rules</span><a class="self-link" href="#cue-text-parsing-rules"></a></h3>
4041
+ <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-node-object">WebVTT Node Object</dfn> is a conceptual construct used to represent components of <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-9">cue
4042
+ text</a> so that its processing can be described without reference to the underlying syntax.</p>
3701
4043
<p>There are two broad classes of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-1">WebVTT Node Objects</a>: <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-1">WebVTT Internal Node Objects</a> and <a data-link-type="dfn" href="#webvtt-leaf-node-object" id="ref-for-webvtt-leaf-node-object-1">WebVTT
3702
4044
Leaf Node Objects</a>.</p>
3703
4045
<p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Internal Node Object" data-noexport="" id="webvtt-internal-node-object">WebVTT Internal Node Objects</dfn> are those that can
3704
4046
contain further <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-2">WebVTT Node Objects</a>. They are conceptually similar to
3705
4047
elements in HTML or the DOM. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-2">WebVTT Internal Node Objects</a> have an ordered list of child <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-3">WebVTT Node Objects</a>. The <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-3">WebVTT
3706
4048
Internal Node Object</a> is said to be the <i>parent</i> of the children. Cycles do not occur; the
3707
- parent-child relationships so constructed form a tree structure. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-4">WebVTT Internal Node Objects</a> also have an ordered list of class names, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable classes" data-noexport="" id="webvtt-node-objects-applicable-classes">applicable classes</dfn>, and a language, known as
3708
- their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable language" data-noexport="" id="webvtt-node-objects-applicable-language">applicable language</dfn>, which is to be
3709
- interpreted as a BCP 47 language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p>
4049
+ parent-child relationships so constructed form a tree structure. <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-4">WebVTT Internal Node Objects</a> also have an ordered list of <a data-link-type="dfn" href="#cue-component-class-names" id="ref-for-cue-component-class-names-6">class names</a>, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable classes" data-noexport="" id="webvtt-node-objects-applicable-classes">applicable
4050
+ classes</dfn>, and a language, known as their <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Node Object’s applicable
4051
+ language" data-noexport="" id="webvtt-node-objects-applicable-language">applicable language</dfn>, which is to be interpreted as a BCP 47 language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p>
3710
4052
<p class="note" role="note">User agents will add a language tag as the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-1">applicable language</a> even if it is not a valid or not even well-formed language tag. <a data-link-type="biblio" href="#biblio-bcp47">[BCP47]</a></p>
3711
4053
<p>There are several concrete classes of <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-5">WebVTT Internal Node
3712
4054
Objects</a>:</p>
@@ -3717,37 +4059,39 @@
3717
4059
Objects</a>.</p>
3718
4060
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Class Object" data-noexport="" id="webvtt-class-object">WebVTT Class Objects</dfn>
3719
4061
<dd>
3720
- <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-2">WebVTT cue class span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-7">WebVTT cue text</a>, and
3721
- are used to annotate parts of the cue with <a data-link-type="dfn" href="#webvtt-node-objects-applicable-classes" id="ref-for-webvtt-node-objects-applicable-classes-1">applicable classes</a> without implying further meaning (such as italics or bold).</p>
4062
+ <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-class-span" id="ref-for-webvtt-cue-class-span-2">WebVTT cue class span</a>) in <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-10">cue text</a>, and are used
4063
+ to annotate parts of the cue with <a data-link-type="dfn" href="#webvtt-node-objects-applicable-classes" id="ref-for-webvtt-node-objects-applicable-classes-1">applicable
4064
+ classes</a> without implying further meaning (such as italics or bold).</p>
3722
4065
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Italic Object" data-noexport="" id="webvtt-italic-object">WebVTT Italic Objects</dfn>
3723
4066
<dd>
3724
- <p>These represent spans of italic text (a <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-2">WebVTT cue italics span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-8">WebVTT cue
3725
- text</a>.</p>
4067
+ <p>These represent spans of italic text (a <a data-link-type="dfn" href="#webvtt-cue-italics-span" id="ref-for-webvtt-cue-italics-span-2">WebVTT cue italics span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-5">WebVTT caption or
4068
+ subtitle cue text</a>.</p>
3726
4069
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Bold Object" data-noexport="" id="webvtt-bold-object">WebVTT Bold Objects</dfn>
3727
4070
<dd>
3728
- <p>These represent spans of bold text (a <a data-link-type="dfn" href="#webvtt-cue-bold-span" id="ref-for-webvtt-cue-bold-span-2">WebVTT cue bold span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-9">WebVTT cue
3729
- text</a>.</p>
4071
+ <p>These represent spans of bold text (a <a data-link-type="dfn" href="#webvtt-cue-bold-span" id="ref-for-webvtt-cue-bold-span-2">WebVTT cue bold span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-6">WebVTT caption or
4072
+ subtitle cue text</a>.</p>
3730
4073
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Underline Object" data-noexport="" id="webvtt-underline-object">WebVTT Underline Objects</dfn>
3731
4074
<dd>
3732
- <p>These represent spans of underline text (a <a data-link-type="dfn" href="#webvtt-cue-underline-span" id="ref-for-webvtt-cue-underline-span-2">WebVTT cue underline span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-10">WebVTT cue
3733
- text</a>.</p>
4075
+ <p>These represent spans of underline text (a <a data-link-type="dfn" href="#webvtt-cue-underline-span" id="ref-for-webvtt-cue-underline-span-2">WebVTT cue underline span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-7">WebVTT
4076
+ caption or subtitle cue text</a>.</p>
3734
4077
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Ruby Object" data-noexport="" id="webvtt-ruby-object">WebVTT Ruby Objects</dfn>
3735
4078
<dd>
3736
- <p>These represent spans of ruby (a <a data-link-type="dfn" href="#webvtt-cue-ruby-span" id="ref-for-webvtt-cue-ruby-span-3">WebVTT cue ruby span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-11">WebVTT cue text</a>.</p>
4079
+ <p>These represent spans of ruby (a <a data-link-type="dfn" href="#webvtt-cue-ruby-span" id="ref-for-webvtt-cue-ruby-span-3">WebVTT cue ruby span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-8">WebVTT caption or subtitle
4080
+ cue text</a>.</p>
3737
4081
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Ruby Text Object" data-noexport="" id="webvtt-ruby-text-object">WebVTT Ruby Text Objects</dfn>
3738
4082
<dd>
3739
- <p>These represent spans of ruby text (a <a data-link-type="dfn" href="#webvtt-cue-ruby-text-span" id="ref-for-webvtt-cue-ruby-text-span-1">WebVTT cue ruby text span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-12">WebVTT cue
3740
- text</a>.</p>
4083
+ <p>These represent spans of ruby text (a <a data-link-type="dfn" href="#webvtt-cue-ruby-text-span" id="ref-for-webvtt-cue-ruby-text-span-1">WebVTT cue ruby text span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-9">WebVTT caption or
4084
+ subtitle cue text</a>.</p>
3741
4085
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Voice Object" data-noexport="" id="webvtt-voice-object">WebVTT Voice Objects</dfn>
3742
4086
<dd>
3743
4087
<p>These represent spans of text associated with a specific voice (a <a data-link-type="dfn" href="#webvtt-cue-voice-span" id="ref-for-webvtt-cue-voice-span-3">WebVTT cue voice span</a>)
3744
- in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-13">WebVTT cue text</a>. A <a data-link-type="dfn" href="#webvtt-voice-object" id="ref-for-webvtt-voice-object-1">WebVTT Voice Object</a> has a value, which is the name of the
3745
- voice.</p>
4088
+ in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-10">WebVTT caption or subtitle cue text</a>. A <a data-link-type="dfn" href="#webvtt-voice-object" id="ref-for-webvtt-voice-object-1">WebVTT Voice Object</a> has a value, which is
4089
+ the name of the voice.</p>
3746
4090
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Language Object" data-noexport="" id="webvtt-language-object">WebVTT Language Objects</dfn>
3747
4091
<dd>
3748
- <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-language-span" id="ref-for-webvtt-cue-language-span-2">WebVTT cue language span</a>) in <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-14">WebVTT cue text</a>,
3749
- and are used to annotate parts of the cue where the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-2">applicable language</a> might be different than the surrounding text’s, without implying
3750
- further meaning (such as italics or bold).</p>
4092
+ <p>These represent spans of text (a <a data-link-type="dfn" href="#webvtt-cue-language-span" id="ref-for-webvtt-cue-language-span-2">WebVTT cue language span</a>) in <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-11">WebVTT caption or
4093
+ subtitle cue text</a>, and are used to annotate parts of the cue where the <a data-link-type="dfn" href="#webvtt-node-objects-applicable-language" id="ref-for-webvtt-node-objects-applicable-language-2">applicable language</a> might be different than the surrounding
4094
+ text’s, without implying further meaning (such as italics or bold).</p>
3751
4095
</dl>
3752
4096
<p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="WebVTT Leaf Node Object" data-noexport="" id="webvtt-leaf-node-object">WebVTT Leaf Node Objects</dfn> are those that contain data,
3753
4097
such as text, and cannot contain child <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-5">WebVTT Node Objects</a>.</p>
@@ -3764,8 +4108,9 @@
3764
4108
second, which is the time represented by the timestamp.</p>
3765
4109
</dl>
3766
4110
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-parsing-rules">WebVTT cue text parsing rules</dfn> consist of the following algorithm. The input is a
3767
- string <var>input</var> supposedly containing <a data-link-type="dfn" href="#webvtt-cue-text" id="ref-for-webvtt-cue-text-15">WebVTT cue text</a>, and optionally a fallback language <var>language</var>. This algorithm returns a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-2">list of WebVTT Node Objects</a>.</p>
3768
- <ol class="algorithm">
4111
+ string <var>input</var> supposedly containing <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue-text" id="ref-for-webvtt-caption-or-subtitle-cue-text-12">WebVTT caption or subtitle cue text</a>, and optionally a
4112
+ fallback language <var>language</var>. This algorithm returns a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-2">list of WebVTT Node Objects</a>.</p>
4113
+ <ol class="algorithm" data-algorithm="WebVTT cue text parsing">
3769
4114
<li>
3770
4115
<p>Let <var>input</var> be the string being parsed.</p>
3771
4116
<li>
@@ -3896,7 +4241,7 @@
3896
4241
string (whose value is a sequence of characters), a start tag (with a tag name, a list of classes,
3897
4242
and optionally an annotation), an end tag (with a tag name), or a timestamp tag (with a tag
3898
4243
value).</p>
3899
- <ol class="algorithm">
4244
+ <ol class="algorithm" data-algorithm="WebVTT cue text tokenizer">
3900
4245
<li>
3901
4246
<p>Let <var>input</var> and <var>position</var> be the same variables as those of the same name in the algorithm
3902
4247
that invoked these steps.</p>
@@ -4108,8 +4453,8 @@
4108
4453
<p>When the HTML specification says to consume a character, in this context, it means to advance <var>position</var> to the next character in <var>input</var>. When it says to unconsume a character, it means to move <var>position</var> back to the previous character in <var>input</var>. "EOF" is equivalent to the end-of-file marker
4109
4454
in this specification. Finally, this context is <em>not</em> "as part of an attribute" (when it
4110
4455
comes to handling a missing semicolon).</p>
4111
- <h3 class="heading settled" data-level="5.5" id="dom-construction-rules"><span class="secno">5.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</dfn></span><a class="self-link" href="#dom-construction-rules"></a></h3>
4112
- <p class="note" role="note">For the purpose of retrieving a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-20">WebVTT cue</a>’s content via the <code class="idl"><a data-link-type="idl" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-1">getCueAsHTML()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-1">VTTCue</a></code> interface, it needs to be parsed to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code>. This section describes how.</p>
4456
+ <h3 class="heading settled" data-level="6.5" id="dom-construction-rules"><span class="secno">6.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-text-dom-construction-rules">WebVTT cue text DOM construction rules</dfn></span><a class="self-link" href="#dom-construction-rules"></a></h3>
4457
+ <p class="note" role="note">For the purpose of retrieving a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-24">WebVTT cue</a>’s content via the <code class="idl"><a data-link-type="idl" href="#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-1">getCueAsHTML()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#vttcue" id="ref-for-vttcue-1">VTTCue</a></code> interface, it needs to be parsed to a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#documentfragment">DocumentFragment</a></code>. This section describes how.</p>
4113
4458
<p>To convert a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-4">list of WebVTT Node Objects</a> to a DOM tree for <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> <var>owner</var>, user
4114
4459
agents must create a tree of DOM nodes that is isomorphous to the tree of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-6">WebVTT Node Objects</a>, with the following mapping of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-7">WebVTT
4115
4460
Node Objects</a> to DOM nodes:</p>
@@ -4171,25 +4516,27 @@
4171
4516
<p>All characteristics of the DOM nodes that are not described above or dependent on characteristics
4172
4517
defined above must be left at their initial values.</p>
4173
4518
<h3 class="heading settled algorithm" data-algorithm="WebVTT rules for extracting the chapter
4174
- title" data-level="5.6" id="rules-for-extracting-the-chapter-title"><span class="secno">5.6. </span><span class="content">WebVTT rules for extracting the chapter
4519
+ title" data-level="6.6" id="rules-for-extracting-the-chapter-title"><span class="secno">6.6. </span><span class="content">WebVTT rules for extracting the chapter
4175
4520
title</span><a class="self-link" href="#rules-for-extracting-the-chapter-title"></a></h3>
4176
- <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</dfn> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-21">WebVTT cue</a> <var>cue</var> are as
4521
+ <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-rules-for-extracting-the-chapter-title">WebVTT rules for extracting the chapter title</dfn> for a <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-25">WebVTT cue</a> <var>cue</var> are as
4177
4522
follows:</p>
4178
- <ol class="algorithm">
4523
+ <ol class="algorithm" data-algorithm="WebVTT rules for extracting the chapter title">
4179
4524
<li>
4180
4525
<p>Let <var>nodes</var> be the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-6">list of WebVTT Node Objects</a> obtained by applying the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-1">WebVTT cue
4181
- text parsing rules</a> to the <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-4">text track cue text</a>.</p>
4526
+ text parsing rules</a> to the <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-11">cue text</a>.</p>
4182
4527
<li>
4183
4528
<p>Return the concatenation of the values of each <a data-link-type="dfn" href="#webvtt-text-object" id="ref-for-webvtt-text-object-6">WebVTT Text Object</a> in <var>nodes</var>, in a
4184
4529
pre-order, depth-first traversal, excluding <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-5">WebVTT Ruby Text
4185
4530
Objects</a> and their descendants.</p>
4186
4531
</ol>
4187
- <h2 class="heading settled" data-level="6" id="rendering"><span class="secno">6. </span><span class="content">Rendering</span><a class="self-link" href="#rendering"></a></h2>
4188
- <p class="note" role="note">This section describes in some detail how to visually render WebVTT cues in a user
4189
- agent. The processing model is quite tightly linked to media elements in HTML. When supporting
4190
- WebVTT in media players that don’t support CSS, equivalent visual rendering will need to be
4191
- implemented.</p>
4192
- <h3 class="heading settled algorithm" data-algorithm="Processing model" data-level="6.1" id="processing-model"><span class="secno">6.1. </span><span class="content">Processing model</span><a class="self-link" href="#processing-model"></a></h3>
4532
+ <h2 class="heading settled" data-level="7" id="rendering"><span class="secno">7. </span><span class="content">Rendering</span><a class="self-link" href="#rendering"></a></h2>
4533
+ <p class="note" role="note">This section describes in some detail how to visually render <a data-link-type="dfn" href="#webvtt-caption-or-subtitle-cue" id="ref-for-webvtt-caption-or-subtitle-cue-2">WebVTT caption or
4534
+ subtitle cues</a> in a user agent. The processing model is quite tightly linked to media elements in
4535
+ HTML, where CSS is available. <a data-link-type="dfn" href="#user-agents-that-do-not-support-css" id="ref-for-user-agents-that-do-not-support-css-1">User agents that do not support CSS</a> are expected to render
4536
+ plain text only, without styling and positioning features. <a data-link-type="dfn" href="#user-agents-that-do-not-support-a-full-html-css-engine" id="ref-for-user-agents-that-do-not-support-a-full-html-css-engine-2">User agents that do not support a full
4537
+ HTML CSS engine</a> are expected to render an equivalent visual representation to what a user agent
4538
+ with a full CSS engine would render.</p>
4539
+ <h3 class="heading settled algorithm" data-algorithm="Processing model" data-level="7.1" id="processing-model"><span class="secno">7.1. </span><span class="content">Processing model</span><a class="self-link" href="#processing-model"></a></h3>
4193
4540
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text tracks</dfn> render the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> (specifically, a <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element), or of another playback
4194
4541
mechanism, by applying the steps below. All the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> that use these
4195
4542
rules for a given <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>, or other playback mechanism, are rendered together, to avoid
@@ -4201,7 +4548,7 @@
4201
4548
<p>The output of the steps below is a set of CSS boxes that covers the rendering area of the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> or other playback mechanism, which user agents are expected to render in a
4202
4549
manner suiting the user.</p>
4203
4550
<p>The rules are as follows:</p>
4204
- <ol class="algorithm">
4551
+ <ol class="algorithm" data-algorithm="rules for updating the display of WebVTT text tracks">
4205
4552
<li>
4206
4553
<p>If the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> is an <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-audio-element">audio</a> element, or is another playback
4207
4554
mechanism with no rendering area, abort these steps.</p>
@@ -4225,12 +4572,12 @@
4225
4572
<p>For each track <var>track</var> in <var>tracks</var>, append to <var>cues</var> all the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#cue">cues</a> from <var>track</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#list-of-cues">list of cues</a> that have their <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-active-flag">text track cue
4226
4573
active flag</a> set.</p>
4227
4574
<li>
4228
- <p>Let <var>regions</var> be an empty list of <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-11">WebVTT regions</a>.</p>
4575
+ <p>Let <var>regions</var> be an empty list of <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-12">WebVTT regions</a>.</p>
4229
4576
<li>
4230
- <p>For each track <var>track</var> in <var>tracks</var>, append to <var>regions</var> all the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-12">regions</a> with an identifier from <var>track</var>’s <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-4">list of
4577
+ <p>For each track <var>track</var> in <var>tracks</var>, append to <var>regions</var> all the <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-13">regions</a> with an identifier from <var>track</var>’s <a data-link-type="dfn" href="#text-track-list-of-regions" id="ref-for-text-track-list-of-regions-4">list of
4231
4578
regions</a>.</p>
4232
4579
<li>
4233
- <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-13">WebVTT region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-5">WebVTT region object</a>.</p>
4580
+ <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-region" id="ref-for-webvtt-region-14">WebVTT region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a data-link-type="dfn" href="#webvtt-region-object" id="ref-for-webvtt-region-object-5">WebVTT region object</a>.</p>
4234
4581
<li>
4235
4582
<p>Apply the following steps for each <var>regionNode</var>:</p>
4236
4583
<ol>
@@ -4240,7 +4587,8 @@
4240
4587
<li>
4241
4588
<p>Let <var>regionWidth</var> be the <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-3">WebVTT region width</a>. Let <var>width</var> be <span class="css"><var>regionWidth</var> vw</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> is a CSS unit). <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p>
4242
4589
<li>
4243
- <p>Let <var>lineHeight</var> be <span class="css">5.33vh</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> is a CSS unit) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a> and <var>regionHeight</var> be the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-3">WebVTT region lines</a>. Let <var>lines</var> be <var>lineHeight</var> multiplied by <var>regionHeight</var>.</p>
4590
+ <p>Let <var>lineHeight</var> be <span class="css">6vh</span> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> is a CSS unit) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a> and <var>regionHeight</var> be
4591
+ the <a data-link-type="dfn" href="#webvtt-region-lines" id="ref-for-webvtt-region-lines-3">WebVTT region lines</a>. Let <var>lines</var> be <var>lineHeight</var> multiplied by <var>regionHeight</var>.</p>
4244
4592
<li>
4245
4593
<p>Let <var>viewportAnchorX</var> be the x dimension of the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-3">WebVTT region anchor</a> and <var>regionAnchorX</var> be the x dimension of the <a data-link-type="dfn" href="#webvtt-region-anchor" id="ref-for-webvtt-region-anchor-4">WebVTT region anchor</a>. Let <var>leftOffset</var> be <var>regionAnchorX</var> multiplied by <var>width</var> divided by 100.0. Let <var>left</var> be <var>leftOffset</var> subtracted
4246
4594
from <span class="css"><var>viewportAnchorX</var> vw</span>.</p>
@@ -4260,29 +4608,29 @@
4260
4608
section uses some of the variables whose values were calculated earlier in this
4261
4609
algorithm.)</p>
4262
4610
<li>
4263
- <p>The viewport (and initial containing block) is video’s rendering area.</p>
4611
+ <p>The video viewport (and initial containing block) is video’s rendering area.</p>
4264
4612
</ol>
4265
4613
<li>
4266
4614
<p>Add the CSS box <var>box</var> to <var>output</var>.</p>
4267
4615
</ol>
4268
4616
<li>
4269
- <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-22">WebVTT cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track
4617
+ <p>If <var>reset</var> is false, then, for each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-26">WebVTT cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-display-state">text track
4270
4618
cue display state</a> has a set of CSS boxes, then:</p>
4271
4619
<ul>
4272
4620
<li>
4273
- <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-4">WebVTT cue region</a> is not null, add those boxes to that region’s <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p>
4621
+ <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-7">WebVTT cue region</a> is not null, add those boxes to that region’s <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p>
4274
4622
<li>
4275
4623
<p>Otherwise, add those boxes to <var>output</var> and remove <var>cue</var> from <var>cues</var>.</p>
4276
4624
</ul>
4277
4625
<li>
4278
- <p>For each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-23">WebVTT cue</a> <var>cue</var> in <var>cues</var> that has not yet had corresponding CSS boxes added
4626
+ <p>For each <a data-link-type="dfn" href="#webvtt-cue" id="ref-for-webvtt-cue-27">WebVTT cue</a> <var>cue</var> in <var>cues</var> that has not yet had corresponding CSS boxes added
4279
4627
to <var>output</var>, in <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-track-cue-order">text track cue order</a>, run the following substeps:</p>
4280
4628
<ol>
4281
4629
<li>
4282
4630
<p>Let <var>nodes</var> be the <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-7">list of WebVTT Node Objects</a> obtained by applying the <a data-link-type="dfn" href="#webvtt-cue-text-parsing-rules" id="ref-for-webvtt-cue-text-parsing-rules-2">WebVTT
4283
- cue text parsing rules</a>, with the fallback language <var>language</var> if provided, to the <var>cue</var>’s <a data-link-type="dfn" href="#text-track-cue-text" id="ref-for-text-track-cue-text-5">text track cue text</a>.</p>
4631
+ cue text parsing rules</a>, with the fallback language <var>language</var> if provided, to the <var>cue</var>’s <a data-link-type="dfn" href="#cue-text" id="ref-for-cue-text-12">cue text</a>.</p>
4284
4632
<li>
4285
- <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-5">WebVTT cue region</a> is null, run the following substeps:</p>
4633
+ <p>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-8">WebVTT cue region</a> is null, run the following substeps:</p>
4286
4634
<ol>
4287
4635
<li><a data-link-type="dfn" href="#apply-webvtt-cue-settings" id="ref-for-apply-webvtt-cue-settings-1">Apply WebVTT cue settings</a> to obtain CSS boxes <var>boxes</var> from <var>nodes</var>.
4288
4636
<li>
@@ -4294,9 +4642,9 @@
4294
4642
<p>Otherwise, run the following substeps:</p>
4295
4643
<ol>
4296
4644
<li>
4297
- <p>Let <var>region</var> be <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-6">WebVTT cue region</a>.</p>
4645
+ <p>Let <var>region</var> be <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-region" id="ref-for-webvtt-cue-region-9">WebVTT cue region</a>.</p>
4298
4646
<li>
4299
- <p>If <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-3">WebVTT region scroll</a> setting is <a data-link-type="dfn" href="#webvtt-region-scroll-up" id="ref-for-webvtt-region-scroll-up-2">up</a> and <var>region</var> already has one child, set <var>region</var>’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#transition-property">transition-property</a> to <span class="css">top</span> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#transition-duration">transition-duration</a> to <span class="css">0.433s</span>.</p>
4647
+ <p>If <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-scroll" id="ref-for-webvtt-region-scroll-3">WebVTT region scroll</a> setting is <a data-link-type="dfn" href="#webvtt-region-scroll-up" id="ref-for-webvtt-region-scroll-up-2">up</a> and <var>region</var> already has one child, set <var>region</var>’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#propdef-transition-property">transition-property</a> to <span class="css">top</span> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-transitions/#propdef-transition-duration">transition-duration</a> to <span class="css">0.433s</span>.</p>
4300
4648
<li>
4301
4649
<p>Let <var>offset</var> be <var>cue</var>’s <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-1">computed position</a> multiplied
4302
4650
by <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-4">WebVTT region width</a> and divided by 100 (i.e. interpret it as a percentage
@@ -4308,17 +4656,15 @@
4308
4656
<dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-3">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-3">center alignment</a>
4309
4657
<dd>
4310
4658
<p>Subtract half of <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-5">WebVTT region width</a> from <var>offset</var>.</p>
4311
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-4">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-4">line-right alignment</a>
4659
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-4">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-6">line-right alignment</a>
4312
4660
<dd>
4313
4661
<p>Subtract <var>region</var>’s <a data-link-type="dfn" href="#webvtt-region-width" id="ref-for-webvtt-region-width-6">WebVTT region width</a> from <var>offset</var>.</p>
4314
4662
</dl>
4315
4663
<li>
4316
4664
<p>Let <var>left</var> be <span class="css"><var>offset</var> %</span>. <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p>
4317
4665
<li>
4318
- <p>Apply the terms of the CSS specifications to <var>nodes</var> with the same constraints that are
4319
- used when they are applied to <var>nodes</var> of a <var>cue</var> that is not part of a region.</p>
4666
+ <p><a data-link-type="dfn" href="#obtain-a-set-of-css-boxes" id="ref-for-obtain-a-set-of-css-boxes-1">Obtain a set of CSS boxes</a> <var>boxes</var> positioned relative to an initial containing
4667
+ block.</p>
4320
- <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along
4321
- with their positions.</p>
4322
4668
<li>
4323
4669
<p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>.
4324
4670
The cue is ignored.</p>
@@ -4335,25 +4681,26 @@
4335
4681
</ol>
4336
4682
<p>User agents may allow the user to override the above algorithm’s positioning of cues, e.g. by
4337
4683
dragging them to another location on the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a>, or even off the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> entirely.</p>
4338
- <p>When the algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="apply-webvtt-cue-settings">apply WebVTT cue settings</dfn> to
4339
- obtain CSS boxes from a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-8">list of WebVTT Node Objects</a> <var>nodes</var>, the user agent must run the
4340
- following algorithm.</p>
4341
- <ol class="algorithm">
4684
+ <h3 class="heading settled algorithm" data-algorithm="Processing cue settings" data-level="7.2" id="processing-cue-settings"><span class="secno">7.2. </span><span class="content">Processing cue settings</span><a class="self-link" href="#processing-cue-settings"></a></h3>
4685
+ <p>When the processing algorithm above requires that the user agent <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="apply WebVTT cue settings" data-noexport="" id="apply-webvtt-cue-settings">apply WebVTT cue
4686
+ settings</dfn> to obtain CSS boxes from a <a data-link-type="dfn" href="#list-of-webvtt-node-objects" id="ref-for-list-of-webvtt-node-objects-8">list of WebVTT Node Objects</a> <var>nodes</var>, the user agent
4687
+ must run the following algorithm.</p>
4688
+ <ol class="algorithm" data-algorithm="apply WebVTT cue settings">
4342
4689
<li>
4343
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-16">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-14">horizontal</a>, then let <var>writing-mode</var> be "horizontal-tb". Otherwise, if the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-17">WebVTT
4690
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-17">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-15">horizontal</a>, then let <var>writing-mode</var> be "horizontal-tb". Otherwise, if the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-18">WebVTT
4344
4691
cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-5">vertical
4345
- growing left</a>, then let <var>writing-mode</var> be "vertical-rl". Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-18">WebVTT cue writing
4692
+ growing left</a>, then let <var>writing-mode</var> be "vertical-rl". Otherwise, the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-19">WebVTT cue writing
4346
4693
direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-5">vertical growing
4347
4694
right</a>; let <var>writing-mode</var> be "vertical-lr".</p>
4348
4695
<li>
4349
4696
<p>Determine the value of <var>maximum size</var> for <var>cue</var> as per the appropriate rules from the following
4350
4697
list:</p>
4351
4698
<dl class="switch">
4352
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-5">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-5">line-left</a>
4699
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-5">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-7">line-left</a>
4353
4700
<dd>
4354
4701
<p>Let <var>maximum size</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-2">computed position</a> subtracted from
4355
4702
100.</p>
4356
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-6">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-5">line-right</a>
4703
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-6">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-7">line-right</a>
4357
4704
<dd>
4358
4705
<p>Let <var>maximum size</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-3">computed position</a>.</p>
4359
4706
<dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-7">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-4">center</a>, and the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-4">computed position</a> is less than or equal to 50
@@ -4366,40 +4713,40 @@
4366
4713
position</a> from 100 and then multiplying the result by two.</p>
4367
4714
</dl>
4368
4715
<li>
4369
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-9">WebVTT cue size</a> is less than <var>maximum size</var>, then let <var>size</var> be <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-10">WebVTT cue
4716
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-10">WebVTT cue size</a> is less than <var>maximum size</var>, then let <var>size</var> be <a data-link-type="dfn" href="#webvtt-cue-size" id="ref-for-webvtt-cue-size-11">WebVTT cue
4370
4717
size</a>. Otherwise, let <var>size</var> be <var>maximum size</var>.</p>
4371
4718
<li>
4372
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-19">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-15">horizontal</a>, then let <var>width</var> be <span class="css"><var>size</var> vw</span> and <var>height</var> be <span class="css">auto</span>. Otherwise, let <var>width</var> be <span class="css">auto</span> and <var>height</var> be <span class="css"><var>size</var> vh</span>.
4719
+ <p>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-20">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-16">horizontal</a>, then let <var>width</var> be <span class="css"><var>size</var> vw</span> and <var>height</var> be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a>. Otherwise, let <var>width</var> be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">auto</a> and <var>height</var> be <span class="css"><var>size</var> vh</span>.
4373
4720
(These are CSS values used by the next section to set CSS properties for the rendering; <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> are CSS units.) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p>
4374
4721
<li>
4375
4722
<p>Determine the value of <var>x-position</var> or <var>y-position</var> for <var>cue</var> as per the appropriate rules from
4376
4723
the following list:</p>
4377
4724
<dl class="switch">
4378
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-20">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-16">horizontal</a>
4725
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-21">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-17">horizontal</a>
4379
4726
<dd>
4380
4727
<dl class="switch">
4381
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-9">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-6">line-left alignment</a>
4728
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-9">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-8">line-left alignment</a>
4382
4729
<dd>
4383
4730
<p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-8">computed position</a>.</p>
4384
4731
<dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-10">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-6">center alignment</a>
4385
4732
<dd>
4386
4733
<p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-9">computed position</a> minus half
4387
4734
of <var>size</var>.</p>
4388
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-11">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-6">line-right alignment</a>
4735
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-11">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-8">line-right alignment</a>
4389
4736
<dd>
4390
4737
<p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-10">computed position</a> minus <var>size</var>.</p>
4391
4738
</dl>
4392
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-21">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">vertical growing right</a>
4739
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-22">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-6">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-6">vertical growing right</a>
4393
4740
<dd>
4394
4741
<dl class="switch">
4395
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-12">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-7">line-left alignment</a>
4742
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-12">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-left-alignment" id="ref-for-webvtt-cue-position-line-left-alignment-9">line-left alignment</a>
4396
4743
<dd>
4397
4744
<p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-11">computed position</a>.</p>
4398
4745
<dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-13">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-center-alignment" id="ref-for-webvtt-cue-position-center-alignment-7">center alignment</a>
4399
4746
<dd>
4400
4747
<p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-12">computed position</a> minus half
4401
4748
of <var>size</var>.</p>
4402
- <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-14">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-7">line-right alignment</a>
4749
+ <dt>If the <a data-link-type="dfn" href="#cue-computed-position-alignment" id="ref-for-cue-computed-position-alignment-14">computed position alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-position-line-right-alignment" id="ref-for-webvtt-cue-position-line-right-alignment-9">line-right alignment</a>
4403
4750
<dd>
4404
4751
<p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-position" id="ref-for-cue-computed-position-13">computed position</a> minus <var>size</var>.</p>
4405
4752
</dl>
@@ -4407,23 +4754,23 @@
4407
4754
<li>
4408
4755
<p>Determine the value of whichever of <var>x-position</var> or <var>y-position</var> is not yet calculated for <var>cue</var> as per the appropriate rules from the following list:</p>
4409
4756
<dl class="switch">
4410
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-11">WebVTT cue snap-to-lines flag</a> is false
4757
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-10">WebVTT cue snap-to-lines flag</a> is false
4411
4758
<dd>
4412
4759
<dl class="switch">
4413
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-22">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-17">horizontal</a>
4760
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-23">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-18">horizontal</a>
4414
4761
<dd>
4415
4762
<p>Let <var>y-position</var> be the <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-2">computed line</a>.</p>
4416
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-23">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">vertical growing right</a>
4763
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-24">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-7">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-7">vertical growing right</a>
4417
4764
<dd>
4418
4765
<p>Let <var>x-position</var> be the <a data-link-type="dfn" href="#cue-computed-line" id="ref-for-cue-computed-line-3">computed line</a>.</p>
4419
4766
</dl>
4420
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-12">WebVTT cue snap-to-lines flag</a> is true
4767
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-11">WebVTT cue snap-to-lines flag</a> is true
4421
4768
<dd>
4422
4769
<dl class="switch">
4423
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-24">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-18">horizontal</a>
4770
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-25">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-19">horizontal</a>
4424
4771
<dd>
4425
4772
<p>Let <var>y-position</var> be 0.</p>
4426
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-25">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">vertical growing right</a>
4773
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-26">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-8">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-8">vertical growing right</a>
4427
4774
<dd>
4428
4775
<p>Let <var>x-position</var> be 0.</p>
4429
4776
</dl>
@@ -4431,157 +4778,30 @@
4431
4778
<p class="note" role="note">These are not final positions, they are merely temporary positions used to
4432
4779
calculate box dimensions below.</p>
4433
4780
<li>
4434
- <p>If the <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-13">WebVTT cue snap-to-lines flag</a> is true, then run the appropriate steps from the
4435
- following list:</p>
4436
- <dl class="switch">
4437
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-26">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-19">horizontal</a>
4438
- <dd>
4439
- <ol>
4440
- <li>
4441
- <p>Let <var>edge margin</var> be a user-agent-defined horizontal length, expressed as a percentage
4442
- of the width of the <var>video</var>’s rendering area, which will be used to define a margin at the left
4443
- and right edges of the video into which this cue will not be placed. In situations with
4444
- overscan, this margin should be sufficient to place the cue within the title-safe area. In the
4445
- absence of overscan, this value should be picked for aesthetics (to avoid text being aligned
4446
- precisely on the left or right edge of the video, which can be ugly).</p>
4447
- <li>
4448
- <p>If <var>x-position</var> is less than <var>edge margin</var> and the sum of <var>x-position</var> and <var>size</var> is
4449
- more than <var>edge margin</var>, then increase <var>x-position</var> by <var>edge margin</var> and decrease <var>size</var> by the
4450
- same amount.</p>
4451
- <li>
4452
- <p>Let <var>right margin edge</var> be 100 minus <var>edge margin</var>.</p>
4453
- <li>
4454
- <p>If <var>x-position</var> is less than <var>right margin edge</var>, and the sum of <var>x-position</var> and <var>size</var> is more than <var>right margin edge</var>, then decrease <var>size</var> by <var>edge margin</var>.</p>
4455
- </ol>
4456
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-27">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">vertical growing right</a>
4457
- <dd>
4458
- <ol>
4459
- <li>
4460
- <p>Let <var>edge margin</var> be a user-agent-defined vertical length, expressed as a percentage of
4461
- the height of the <var>video</var>’s rendering area, which will be used to define a margin at the top
4462
- and bottom edges of the video into which this cue will not be placed. In situations with
4463
- overscan, this margin should be sufficient to place the cue within the title-safe area. In the
4464
- absence of overscan, this value should be picked for aesthetics (to avoid text being aligned
4465
- precisely on the top or bottom edge of the video, which can be ugly).</p>
4466
- <li>
4467
- <p>If <var>y-position</var> is less than <var>edge margin</var> and the sum of <var>y-position</var> and <var>size</var> is
4468
- more than <var>edge margin</var>, then increase <var>y-position</var> by <var>edge margin</var> and decrease <var>size</var> by the
4469
- same amount.</p>
4470
- <li>
4471
- <p>Let <var>bottom margin edge</var> be 100 minus <var>edge margin</var>.</p>
4472
- <li>
4473
- <p>If <var>y-position</var> is less than <var>bottom margin edge</var>, and the sum of <var>y-position</var> and <var>size</var> is more than <var>right margin edge</var>, then decrease <var>size</var> by <var>edge margin</var>.</p>
4474
- </ol>
4475
- </dl>
4476
- <li>
4477
4781
<p>Let <var>left</var> be <span class="css"><var>x-position</var> vw</span> and <var>top</var> be <span class="css"><var>y-position</var> vh</span>. (These are
4478
4782
CSS values used by the next section to set CSS properties for the rendering; <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw">vw</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh">vh</a> are
4479
4783
CSS units.) <a data-link-type="biblio" href="#biblio-css-values">[CSS-VALUES]</a></p>
4480
4784
<li>
4481
- <p>Apply the terms of the CSS specifications to <var>nodes</var> within the following constraints, thus
4482
- obtaining a set of CSS boxes positioned relative to an initial containing block: <a data-link-type="biblio" href="#biblio-css22">[CSS22]</a></p>
4785
+ <p><a data-link-type="dfn" href="#obtain-a-set-of-css-boxes" id="ref-for-obtain-a-set-of-css-boxes-2">Obtain a set of CSS boxes</a> <var>boxes</var> positioned relative to an initial containing
4786
+ block.</p>
4483
- <ul>
4484
- <li>
4485
- <p>The <i>document tree</i> is the tree of <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-9">WebVTT Node Objects</a> rooted at <var>nodes</var>.</p>
4486
- <li>
4487
- <p>For the purpose of selectors in STYLE blocks of a WebVTT file, the style sheet must apply to
4488
- a hypothetical document that contains a single empty element with no explicit name, no
4489
- namespace, no attributes, no classes, no IDs, and unknown primary language, that acts like the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a> for the <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> that were sourced from the given WebVTT file.
4490
- The selectors must not match other <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#text-tracks">text tracks</a> for the same <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media element</a>. In this
4491
- hypothetical document, the element must not match any selector that would match the element
4492
- itself.</p>
4493
- <p class="note" role="note">This element exists only to be the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#originating-element">originating element</a> for
4494
- the <span class="css">::cue</span>, <span class="css">::cue()</span>, <span class="css">::cue-region</span> and <span class="css">::cue-region()</span> pseudo-elements.</p>
4495
- <li>
4496
- <p>For the purpose of determining the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade">cascade</a> of the declarations in
4497
- STYLE blocks of a WebVTT file, the relative order of appearance of the style sheets must be the
4498
- same order as they were added to the collection, and the order of appearance of the collection
4499
- must be after any style sheets that apply to the associated <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element’s
4500
- document.</p>
4501
- <div class="example" id="example-29aea910">
4502
- <a class="self-link" href="#example-29aea910"></a>
4503
- <p>For example, given the following (invalid) HTML document:</p>
4504
- <pre>&lt;!doctype html>
4505
- &lt;title>Invalid cascade example&lt;/title>
4506
- &lt;video controls autoplay src="video.webm">
4507
- &lt;track default src="track.vtt">
4508
- &lt;/video>
4509
- &lt;style>
4510
- ::cue { color:red }
4511
- &lt;/style>
4512
- </pre>
4513
- <p>...and the "track.vtt" file contains:</p>
4514
- <pre>WEBVTT
4515
-
4516
- STYLE
4517
- ::cue { color:lime }
4518
-
4519
- 00:00:00.000 --> 00:00:25.000
4520
- Red or green?
4521
- </pre>
4522
- <p>The <span class="css">color:lime</span> declaration would win, because it is last in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade">cascade</a>, even though the <a data-link-type="element" href="https://www.w3.org/TR/html51/document-metadata.html#the-style-element">style</a> element is after the <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element">video</a> element in the document order.</p>
4523
- </div>
4524
- <li>
4525
- <p id="style-no-external-resources">For the purpose of resolving URLs in STYLE blocks of a WebVTT
4526
- file, or any URLs in resources referenced from STYLE blocks of a WebVTT file, if the URL’s
4527
- scheme is not "<code>data</code>", then the user agent must act as if the URL failed to
4528
- resolve.</p>
4529
- <p><strong class="advisement">Supporting external resources with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#at-ruledef-import">@import</a> or <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-image">background-image</a> would be a new ability for <a data-link-type="dfn" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#media-element">media elements</a> and <a data-link-type="element" href="https://www.w3.org/TR/html51/semantics-embedded-content.html#the-track-element">track</a> elements to issue
4530
- network requests as the user watches the video, which could be a privacy issue.</strong></p>
4531
- <li>
4532
- <p>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-internal-node-object" id="ref-for-webvtt-internal-node-object-9">WebVTT Internal Node Objects</a> are equivalent to elements with the same
4533
- contents.</p>
4534
- <li>For the purposes of processing by the CSS specification, <a data-link-type="dfn" href="#webvtt-text-object" id="ref-for-webvtt-text-object-7">WebVTT
4535
- Text Objects</a> are equivalent to <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes.
4536
- <li>No style sheets are associated with <var>nodes</var>. (The nodes are subsequently restyled using style
4537
- sheets after their boxes are generated, as described below.)
4538
- <li>The children of the <var>nodes</var> must be wrapped in an anonymous box whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has
4539
- the value <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-inline">inline</a>. This is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="webvtt-cue-background-box">WebVTT cue background box</dfn>.
4540
- <li>Runs of children of <a data-link-type="dfn" href="#webvtt-ruby-object" id="ref-for-webvtt-ruby-object-5">WebVTT Ruby Objects</a> that are not <a data-link-type="dfn" href="#webvtt-ruby-text-object" id="ref-for-webvtt-ruby-text-object-6">WebVTT Ruby Text Objects</a> must be wrapped in anonymous boxes
4541
- whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display">display</a> property has the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-display-ruby-base">ruby-base</a>. <a data-link-type="biblio" href="#biblio-css3-ruby">[CSS3-RUBY]</a>
4542
- <li>Properties on <a data-link-type="dfn" href="#webvtt-node-object" id="ref-for-webvtt-node-object-10">WebVTT Node Objects</a> have their values set as
4543
- defined in the next section. (That section uses some of the variables whose values were
4544
- calculated earlier in this algorithm.)
4545
- <li>Text runs must be wrapped according to the CSS line-wrapping rules.
4546
- <li>The viewport (and initial containing block) is <var>video</var>’s rendering area.
4547
- </ul>
4548
- <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with
4549
- their positions.</p>
4550
4787
<li>
4551
4788
<p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. The
4552
4789
cue is ignored.</p>
4553
4790
<li>
4554
4791
<p>Adjust the positions of <var>boxes</var> according to the appropriate steps from the following list:</p>
4555
4792
<dl class="switch">
4556
- <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-14">WebVTT cue snap-to-lines flag</a> is true
4793
+ <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-12">WebVTT cue snap-to-lines flag</a> is true
4557
4794
<dd>
4558
- <p>Many of the steps in this algorithm vary according to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-28">WebVTT cue writing
4559
- direction</a>. Steps labeled "<strong>Horizontal</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-29">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-20">horizontal</a>, steps labeled "<strong>Vertical</strong>" must be followed when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-30">WebVTT cue writing direction</a> is either <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">vertical growing right</a>, steps labeled "<strong>Vertical Growing Left</strong>"
4560
- must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-31">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">vertical growing left</a>, and steps labeled "<strong>Vertical
4561
- Growing Right</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-32">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">vertical growing right</a>.</p>
4562
- <ol>
4795
+ <p>Many of the steps in this algorithm vary according to the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-27">WebVTT cue writing
4796
+ direction</a>. Steps labeled "<strong>Horizontal</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-28">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-20">horizontal</a>, steps labeled "<strong>Vertical</strong>" must be followed when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-29">WebVTT cue writing direction</a> is either <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-9">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-9">vertical growing right</a>, steps labeled "<strong>Vertical Growing Left</strong>"
4797
+ must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-30">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-10">vertical growing left</a>, and steps labeled "<strong>Vertical
4798
+ Growing Right</strong>" must be followed only when the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-31">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-10">vertical growing right</a>.</p>
4799
+ <ol>
4563
- <li>
4564
- <p><strong>Horizontal</strong>: Let <var>margin</var> be a user-agent-defined vertical length which
4565
- will be used to define a margin at the top and bottom edges of the video into which cues will
4566
- not be placed. In situations with overscan, this margin should be sufficient to place all cues
4567
- within the title-safe area. In the absence of overscan, this value should be picked for
4568
- aesthetics (to avoid text being aligned precisely on the bottom edge of the video, which can
4569
- be ugly).</p>
4570
- <p><strong>Vertical</strong>: Let <var>margin</var> be a user-agent-defined horizontal length which
4571
- will be used to define a margin at the left and right edges of the video into which cues will
4572
- not be placed. In situations with overscan, this margin should be sufficient to place all cues
4573
- within the title-safe area. In the absence of overscan, this value should be picked for
4574
- aesthetics (to avoid text being aligned precisely on the left or right edges of the video,
4575
- which can be ugly).</p>
4576
4800
<li>
4577
4801
<p><strong>Horizontal</strong>: Let <var>full dimension</var> be the height of <var>video</var>’s rendering
4578
4802
area.</p>
4579
4803
<p><strong>Vertical</strong>: Let <var>full dimension</var> be the width of <var>video</var>’s rendering
4580
4804
area.</p>
4581
- <p>These dimensions must not be adjusted for overscan. (The algorithm does that
4582
- separately.)</p>
4583
- <li>
4584
- <p>Let <var>max dimension</var> be <var>full dimension</var> - (2 × <var>margin</var>).</p>
4585
4805
<li>
4586
4806
<p><strong>Horizontal</strong>: Let <var>step</var> be the height of the first line box in <var>boxes</var>.</p>
4587
4807
<p><strong>Vertical</strong>: Let <var>step</var> be the width of the first line box in <var>boxes</var>.</p>
@@ -4600,7 +4820,6 @@
4600
4820
box of the boxes in <var>boxes</var>, then increase <var>position</var> by <var>step</var>.</p>
4601
4821
<li>
4602
4822
<p>If <var>line</var> is less than zero then increase <var>position</var> by <var>max dimension</var>, and negate <var>step</var>.</p>
4603
- <p>Otherwise, increase <var>position</var> by <var>margin</var>.</p>
4604
4823
<li>
4605
4824
<p><strong>Horizontal</strong>: Move all the boxes in <var>boxes</var> down by the distance given by <var>position</var>.</p>
4606
4825
<p><strong>Vertical</strong>: Move all the boxes in <var>boxes</var> right by the distance given by <var>position</var>.</p>
@@ -4608,11 +4827,7 @@
4608
4827
<p>Remember the position of all the boxes in <var>boxes</var> as their <var>specified
4609
4828
position</var>.</p>
4610
4829
<li>
4611
- <p><strong>Horizontal</strong>: Let <var>title area</var> be a box that covers all of the <var>video</var>’s
4830
+ <p>Let <var>title area</var> be a box that covers all of the <var>video</var>’s rendering area.</p>
4612
- rendering area except for a height of <var>margin</var> at the top of the rendering area and a height
4613
- of <var>margin</var> at the bottom of the rendering area.</p>
4614
- <p><strong>Vertical</strong>: Let <var>title area</var> be a box that covers all of the <var>video</var>’s
4615
- rendering area except for a width of <var>margin</var> at the left of the rendering area and a width of <var>margin</var> at the right of the rendering area.</p>
4616
4831
<li>
4617
4832
<p><i>Step loop</i>: If none of the boxes in <var>boxes</var> would overlap any of the boxes in <var>output</var>, and all of the boxes in <var>boxes</var> are entirely within the <var>title area</var> box, then jump
4618
4833
to the step labeled <i>done positioning</i> below.</p>
@@ -4642,7 +4857,7 @@
4642
4857
<li>
4643
4858
<p>Jump back to the step labeled <i>step loop</i>.</p>
4644
4859
</ol>
4645
- <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-15">WebVTT cue snap-to-lines flag</a> is false
4860
+ <dt>If <var>cue</var>’s <a data-link-type="dfn" href="#webvtt-cue-snap-to-lines-flag" id="ref-for-webvtt-cue-snap-to-lines-flag-13">WebVTT cue snap-to-lines flag</a> is false
4646
4861
<dd>
4647
4862
<ol>
4648
4863
<li>
@@ -4650,7 +4865,7 @@
4650
4865
<li>
4651
4866
<p>Run the appropriate steps from the following list:</p>
4652
4867
<dl class="switch">
4653
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-33">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-21">horizontal</a>
4868
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-32">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-horizontal-writing-direction" id="ref-for-webvtt-cue-horizontal-writing-direction-21">horizontal</a>
4654
4869
<dd>
4655
4870
<dl class="switch">
4656
4871
<dt>If the <a data-link-type="dfn" href="#webvtt-cue-line-alignment" id="ref-for-webvtt-cue-line-alignment-10">WebVTT cue line alignment</a> is <a data-link-type="dfn" href="#webvtt-cue-line-center-alignment" id="ref-for-webvtt-cue-line-center-alignment-3">center alignment</a>
@@ -4661,7 +4876,7 @@
4661
4876
<dd>
4662
4877
<p>Move all the boxes in <var>boxes</var> up by the height of <var>bounding box</var>.</p>
4663
4878
</dl>
4664
- <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-34">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-12">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-12">vertical growing right</a>
4879
+ <dt>If the <a data-link-type="dfn" href="#webvtt-cue-writing-direction" id="ref-for-webvtt-cue-writing-direction-33">WebVTT cue writing direction</a> is <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-left-writing-direction" id="ref-for-webvtt-cue-vertical-growing-left-writing-direction-11">vertical growing left</a> or <a data-link-type="dfn" href="#webvtt-cue-vertical-growing-right-writing-direction" id="ref-for-webvtt-cue-vertical-growing-right-writing-direction-11">vertical growing right</a>
4665
4880
<dd>
4666
4881