Added rendering of regions and cues in regions.
authorSilvia Pfeiffer
Wed, 13 Feb 2013 22:11:18 +1100
changeset 66 c96214825d69
parent 65 eaa048745a0e
child 67 ed44cac9324d
Added rendering of regions and cues in regions.
608toVTT/region.html
--- a/608toVTT/region.html	Tue Feb 12 13:16:18 2013 +1100
+++ b/608toVTT/region.html	Wed Feb 13 22:11:18 2013 +1100
@@ -230,13 +230,27 @@
         <h3>Extension of text track cue</h3>
 
         <p>In addition to the existing attributes, each <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue" class="externalDFN"><dfn>text track cue</dfn></a> also consists of:</p>
-
         <dl>
          <dt><dfn id="text-track-cue-region-identifier">A region identifier</dfn></dt>
          <dd>
           <p>A string that references by identifier the region that a cue belongs to, if it is not null.</p>
          </dd>
         </dl>
+
+        <p>Also, update the following <var>text track cue</var> attribute definitions:</p>
+        <dl>
+          <dt><dfn id="text-track-cue-text-position">A text position</dfn>
+          <dd>
+           <p>A number giving the position of the text of the cue within each line. If the cue is not within a region, to be interpreted as a percentage of the video, as defined by the <span title="text track cue writing direction">writing direction</span>, otherwise to be interpreted as a percentage of the region width.</p>
+          </dd>
+
+          <dt>The <dfn title="text track cue display state">display state</dfn>
+          <dd>
+           <p>This is used as part of the rendering model, to keep cues in a consistent position. It must initially be empty. Whenever the <span>text track cue active flag</span> is unset, the user agent must empty the <span>text track cue display state</span>.</p>
+          </dd>
+        </dl>
+
+        <p>When a <span>text track cue</span> whose <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-active-flag">active flag</a> is set has its <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-writing-direction">writing direction</a>, <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-snap-to-lines-flag">snap-to-lines flag</a>, <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-line-position">line position</a>, <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-text-position">text position</a>, <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-size">size</a>, <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-alignment">alignment</a>, <a href="#text-track-cue-region-identifier">region identifier</a> or <a href="http://www.w3.org/TR/html5/single-page.html#text-track-cue-text">text</a> change value, then the user agent must empty the <span>text track cue display state</span>, and then immediately run the <span>text track</span>'s <a href="#rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>.</p>
       </section>
     </section>
 
@@ -259,7 +273,7 @@
         <ol>
           <li>An optional U+FEFF BYTE ORDER MARK (BOM) character.</li>
 
-          <li>The string "<code title="">WEBVTT</code>".</li>
+          <li>The string "<code>WEBVTT</code>".</li>
 
           <li>Optionally, either a U+0020 SPACE character or a U+0009 CHARACTER TABULATION (tab) character followed by any number of characters that are not U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</li> <!-- allows for Emacs line -->
 
@@ -292,7 +306,7 @@
         each consist of any sequence of zero or more characters other than
         U+000A LINE FEED (LF) characters and U+000D CARRIAGE RETURN (CR) characters
         except that the entire resulting string must not contain the substring
-        "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+        "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
         U+003E GREATER-THAN SIGN).</p>
       </section>
 
@@ -304,7 +318,7 @@
         
         <ul>
           <li>The <a href="#webvtt-metadata-header-name" class="internalDFN">WebVTT metadata header name</a> is the string
-          "<code title="">Region</code>".</li>
+          "<code>Region</code>".</li>
           <li>The <a href="#webvtt-metadata-header-value" class="internalDFN">WebVTT metadata header value</a> are <a href="#webvtt-region-metadata-header" class="internalDFN">WebVTT region settings</a>.
           </li>
         </ul>
@@ -340,7 +354,7 @@
           <li><p>A U+003D EQUALS SIGN character (=).</p></li>
           <li><p>An arbitrary string of one or more characters other than U+0020 SPACE
           or U+0009 CHARACTER TABULATION character. The string must not contain the substring
-          "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+          "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
           U+003E GREATER-THAN SIGN).</p></li>
         </ol>
         <p class ="note">The <a href="#webvtt-region-identifier">WebVTT region identifier</a> gives
@@ -349,7 +363,7 @@
         <p>A <dfn id="webvtt-region-width">WebVTT region width setting</dfn> consists of the
         following components, in the order given:</p>
         <ol>
-         <li><p>The string "<code title="">width</code>".</p></li>
+         <li><p>The string "<code>width</code>".</p></li>
          <li><p>A U+003D EQUALS SIGN character (=).</p></li>
          <li><p>One or more <span>ASCII digits</span>.</p></li>
          <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
@@ -361,7 +375,7 @@
         <p>A <dfn id="webvtt-region-height">WebVTT region height setting</dfn> consists of the
         following components, in the order given:</p>
         <ol>
-         <li><p>The string "<code title="">height</code>".</p></li>
+         <li><p>The string "<code>height</code>".</p></li>
          <li><p>A U+003D EQUALS SIGN character (=).</p></li>
          <li><p>One or more <span>ASCII digits</span>.</p></li>
         </ol>
@@ -372,7 +386,7 @@
         <p>A <dfn id="webvtt-region-anchor">WebVTT region anchor setting</dfn> consists of the
         following components, in the order given:</p>
         <ol>
-         <li><p>The string "<code title="">regionanchor</code>".</p></li>
+         <li><p>The string "<code>regionanchor</code>".</p></li>
          <li><p>A U+003D EQUALS SIGN character (=).</p></li>
          <li><p>One or more <span>ASCII digits</span>.</p></li>
          <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
@@ -390,7 +404,7 @@
         <p>A <dfn id="webvtt-region-viewport-anchor">WebVTT region viewport anchor setting</dfn>
         consists of the following components, in the order given:</p>
         <ol>
-         <li><p>The string "<code title="">regionviewport</code>".</p></li>
+         <li><p>The string "<code>regionviewport</code>".</p></li>
          <li><p>A U+003D EQUALS SIGN character (=).</p></li>
          <li><p>One or more <span>ASCII digits</span>.</p></li>
          <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
@@ -449,7 +463,7 @@
           <li><p>A U+003A COLON character (:).</p></li>
           <li><p>An arbitrary string of one or more characters other than U+0020 SPACE
           or U+0009 CHARACTER TABULATION character. The string must not contain the substring
-          "<code title="">--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
+          "<code>--></code>" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS,
           U+003E GREATER-THAN SIGN).</p></li>
         </ol>
         <p class ="note">A <a href="#webvtt-region-cue-setting">WebVTT region cue setting</a>
@@ -539,8 +553,7 @@
         <p>When the algorithm above requires that the user agent <dfn id="collect-webvtt-region-settings">collect WebVTT region settings</dfn> from a string <var>input</var> for a <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#text-track" class="externalDFN">text track</a>, the user agent must run the following algorithm. This algorithm returns a list of WebVTT Region Objects.</p>
 
         <ol>
-          <li><p>Let <var>settings</var> be the result of <a href="http://www.w3.org/TR/html5/single-page.html#split-a-string-on-spaces" class="externalDFN">splitting <var
-             title="">input</var> on spaces</a>.</p></li>
+          <li><p>Let <var>settings</var> be the result of <a href="http://www.w3.org/TR/html5/single-page.html#split-a-string-on-spaces" class="externalDFN">splitting <var>input</var> on spaces</a>.</p></li>
           
           <li>For each token <var>setting</var> in the list <var>settings</var>, run the following substeps:</p>
             <ol>
@@ -553,15 +566,15 @@
               <li><p>Run the appropriate substeps that apply for the value of <var>name</var>, as follows:</p>
                 
               <dl>
-                <dt><p>If <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code title="">id</code>"</p></dt>
+                <dt><p>If <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code>id</code>"</p></dt>
                 <dd><p>Let <var>region's <a href="#text-track-region-identifier">identifier</a> be <var>value</var>.</p>
                 </dd>
 
-                <dt><p>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code title="">width</code>"</p></dt>
+                <dt><p>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code>width</code>"</p></dt>
                 <dd><p>If <a href="#parse-a-percentage-string">parse a percentage string</a> from <var>value</var> returns a <var>percentage</var>, let <var>region</var>'s <a href="#text-track-region-width">text track region width</a> be <var>percentage</var>.</p>
                 </dd>
 
-                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code title="">height</code>"</dt>
+                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code>height</code>"</dt>
                 <dd>
                   <ol>
                     <li><p>If <var>value</var> contains any characters other than <span>ASCII digits</span>, then jump to the step labeled <i>next setting</i>.</p></li>
@@ -572,7 +585,7 @@
                   </ol>
                 </dd>
 
-                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code title="">regionanchor</code>"</dt>
+                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code>regionanchor</code>"</dt>
                 <dd>
                   <ol>
                     <li><p>If <var>value</var> does not contain a U+002C COMMA character (,), then jump to the step labeled <i>next setting</i>.</p></li>
@@ -587,7 +600,7 @@
                   </ol>
                 </dd>
 
-                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code title="">regionviewport</code>"</dt>
+                <dt>Otherwise if <var>name</var> is a <a href="http://www.w3.org/TR/html5/single-page.html#case-sensitive" class="externalDFN">case-sensitive</a> match for "<code>regionviewport</code>"</dt>
                 <dd>
                   <ol>
                     <li><p>If <var>value</var> does not contain a U+002C COMMA character (,), then jump to the step labeled <i>next setting</i>.</p></li>
@@ -670,16 +683,16 @@
     <section>
       <h2>WebVTT DOM construction rules</h2>
 
-      <p>In addition to the <a href="http://dev.w3.org/html5/webvtt/#webvtt-cue-text-dom-construction-rules" class="externalDFN">WebVTT cue text DOM construction rules</a> we also need to create nodes for <a href="#webvtt-region-object">WebVTT region objects</a>.</p>
+      <p>In addition to the <a href="http://dev.w3.org/html5/webvtt/#webvtt-cue-text-dom-construction-rules" class="externalDFN">WebVTT cue text DOM construction rules</a> we also need to create nodes for <a href="#webvtt-region-object" class="internalDFN">WebVTT region objects</a> and <a href="#webvtt-regin-cue-span-object" class="internalDFN">WebVTT region cue span objects</a>.</p>
 
-      <p>To convert a <a href="#webvtt-region-object">WebVTT region object</a> to a DOM tree for <code>Document</code> <var>owner</var>, user agents must map a <a href="#webvtt-region">WebVTT region object</a> to a <code>DocumentFragment</code> node.</p>
+      <p>To convert a <a href="#webvtt-region-object" class="internalDFN">WebVTT region object</a> to a DOM tree for <code>Document</code> <var>owner</var>, user agents must map a <a href="#webvtt-region-object" class="internalDFN">WebVTT region object</a> to a <code>DocumentFragment</code> node.</p>
     </section>
 
 
     <section>
       <h3>Rules for updating the display of WebVTT text tracks</h3>
 
-      <p>The <a href="http://dev.w3.org/html5/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks" class="externalDFN">rules for updating the display of WebVTT text tracks</a> are defined in the WebVTT specification to render the text tracks of a HTML video element and result in a set of CSS boxes that covers the rendering area of the video element.</p>
+      <p>The <a href="http://dev.w3.org/html5/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks" class="externalDFN">rules for updating the display of WebVTT text tracks</a> are defined in the WebVTT specification to render the text tracks of a HTML video element and result in a set of CSS boxes that cover the rendering area of the video element.</p>
 
       <p>These rules are extended with the following steps.</p>
 
@@ -695,26 +708,97 @@
       <section>
         <h3>Prepare region CSS boxes</h3>
 
-        <p>Add a step after step 8 to prepare the CSS boxes for regions:</p>
+        <p>Add the following steps after step 8 to prepare the CSS boxes for regions:</p>
         <ul>
           <li><p>If <var>reset</var> is false, then, for each <span>text track region</span> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a href="#webvtt-region-object" class="internalDNF">WebVTT region object</a>.</p></li>
+
+          <li><p>Apply the following steps for each <var>regionNode</var>:</p>
+            <ol>
+              <li><p>Prepare some variables  for the application of CSS properties to <var>regionNode</var> as follows:</p>
+
+                <ul>
+                  <li><p>Let <var>regionWidth</var> be the <a href="#text-track-region-width">text track region width</a>. Let <var>width</var> be '<var>regionWidth</var> vw' ('vw' is a CSS unit).<a href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
+
+                  <li><p>Let <var>lineHeight</var> be '0.0533vh' ('vh' is a CSS unit).<a href="#refsCSSVALUES">[CSSVALUES]</a> and <var>regionHeight</var> be the <a href="#text-track-region-height">text track region height</a>. Let <var>height</var> be '<var>lineHeight</var> multiplied by <var>regionHeight</var>.</p></li>
+
+                  <li><p>Let <var>viewportAnchorX</var> be the x dimension of the <a href="#text-track-region-viewport">text track region viewport anchor</a> and <var>regionAnchorX</var> be the x dimension of the <a href="#text-track-region-anchor">text track region anchor</a>. Let <var>leftOffset</var> be <var>regionAnchorX</var> multiplied by <var>width</var> divided by 100.0. Let <var>left</var> be <var>leftOffset</var> subtracted from '<var>viewportAnchorX</var> vw'.</p></li>
+
+                  <li><p>Let <var>viewportAnchorY</var> be the y dimension of the <a href="#text-track-region-viewport">text track region viewport anchor</a> and <var>regionAnchorY</var> be the y dimension of the <a href="#text-track-region-anchor">text track region anchor</a>. Let <var>topOffset</var> be <var>regionAnchorY</var> multiplied by <var>height</var> divided by 100.0. Let <var>top</var> be <var>topOffset</var> subtracted from '<var>viewportAnchorY</var> vh'.</p></li>
+                </ul>
+              </li>
+
+              <li><p>Apply the terms of the CSS specifications to <var>regionNode</var> within the following constraints, thus obtaining a CSS box <var>box</var> positioned relative to an initial containing block:</p>
+                <ol>
+                  <li><p>No style sheets are associated with <var>regionNode</var>. (The regionNodes are subsequently restyled using style sheets after their boxes are generated, as described below.)</p></li>
+                  <li><p>Properties on <var>regionNode</var> have their values set as defined in the next section. (That section uses some of the variables whose values were calculated earlier in this algorithm.)</p></li>
+                  <li><p>The viewport (and initial containing block) is video's rendering area.</p></li>
+                </ol>
+              </li>
+
+              <li><p>Add the CSS box <var>box</var> to <var>output</var>.</p></li>
+            </ol>
+          </li>
         </ul>
       </section>
 
       <section>
-        <h3>Render cues into region CSS boxes</h3>
+        <h3>Extend reusing already rendered CSS boxes of cues</h3>
 
-        <p>Make step 10's substeps apply to text track cues that have an empty string as a <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> and add an alternative for text track cues in regions:</p>
+        <p>Replace step 9 with the following extended step 9:</p>
+
+        <ol start=9>
+          <li><p>If <var>reset</var> is false, then, for each <span>text track cue</span> <var>cue</var> in <var>cues</var>: if <var>cue</var>'s <span>text track cue display state</span> has a set of CSS boxes, then:</p>
+            <ul>
+              <li><p>if there is a <a href="#webvtt-region">WebVTT region</a> whose <a href="#webvtt-region-identifier">region identifier</a> is identical to <var>cue</var>'s <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a>:</p>
+             <p>add those boxes to that region's <var>box</var> and remove <var>cue</var> from <var>cues</var>.</p></li>
+             <li><p>otherwise:</p>
+               <p>add those boxes to <var>output</var> and remove <var>cue</var> from <var>cues</var>.</p></li>
+            </ul>
+          </li>
+        </ol>
+      </section>
+
+      <section>
+        <h3>Extend rendering cues into region CSS boxes</h3>
+
+        <p>Make step 10's substeps apply only to text track cues whose <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> does not match with the <a href="#webvtt-region-identifier">region identifier</a> of a <a href="#webvtt-region">WebVTT region</a>, if any. Add alternative substeps for text track cues in regions:</p>
         <ol start="10">
           <li><p>For each <span>text track cue</span> <var>cue</var> in <var >cues</var> that has not yet had corresponding CSS boxes added to <var>output</var>, in <span>text track cue order</span>, run the following substeps:</p>
             <ul>
               <li><p>If <var>cue</var> has an empty <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> or there is no <a href="#webvtt-region">WebVTT region</a> whose <a href="#webvtt-region-identifier">region identifier</a> is identical to <var>cue</var>'s <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a>, run the following substeps:</p>
-                <p>[Run substep 1-17 as defined.]</p></li>
+                <p>[Run substep 1-17 as defined in the WebVTT spec.]</p></li>
               </li>
 
               <li><p>Otherwise run the following substeps:</p>
                 <ol>
-                  <li>XXX</li>
+                  <li><p>Let <var>region</var> be the <a href="#webvtt-region">WebVTT region</a> whose <a href="#webvtt-region-identifier">region identifier</a> matches the <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> of <var>cue</var>.</p></li>
+
+                  <li><p>If <var>region</var>'s <a href="#text-track-region-scroll" class="internalDFN">text track region scroll</a> setting is '<code>up</code>' and <var>region</var> already has one or more children, set <var>region</var>'s 'transition-property' to 'top' and 'transition-duration' to '0.433s'.</p></li>
+
+                  <li><p>Let <var>nodes</var> be the <span>list of WebVTT Node Objects</span> obtained by applying the <span>WebVTT cue text parsing rules</span> to the <var>cue</var>'s <span>text track cue text</span>.</p></li>
+
+                  <li><p>Apply the Unicode Bidirectional Algorithm's Paragraph Level steps to the concatenation of the values of each <span>WebVTT Text Object</span> in <var>nodes</var>, in a pre-order, depth-first traversal, excluding <span title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</span> and their descendants, to determine the <i>paragraph embedding level</i> of the first
+Unicode paragraph of the cue. <a href="#refsBIDI">[BIDI]</a></p>
+                    <p class="note">Within a cue, paragraph boundaries are only denoted by Type B characters, such as U+000A LINE FEED (LF), U+0085 NEXT LINE (NEL), and U+2029 PARAGRAPH SEPARATOR. (This means each line of the cue is reordered as if it was a separate paragraph.)</p>
+                  </li>
+
+                  <li><p>If the <i>paragraph embedding level</i> determined in the previous step is even (the <i>paragraph direction</i> is left-to-right), let <var>direction</var> be 'ltr', otherwise, let it be 'rtl'.</p>
+                  </li>
+
+                  <li><p>Let <var>offset</var> be the <span>text track cue text position</span> multiplied by the <var>width</var> of the <a href="#webvtt-region-object">WebVTT region object</a> whose <a href="#webvtt-region-identifier">region identifier</a> is identical to <var>cue</var>'s <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> and divided by 100 (i.e. interpret it as a percentage of the region width).</p>
+                  </li>
+
+                  <li><p>If <var>direction</var> is 'ltr', let <var>left</var> be <var>offset</var> and let <var>rigth</var> be 'auto'; otherwise let <var>left</var> be 'auto' and <var>right</var> be <var>offset</var>.</p></li>
+
+                  <li><p>Apply the terms of the CSS specifications to <var>nodes</var> in the same way that they are applied to in step 10, substep 12 is applied to <var>nodes</var> of a <var>cue</var> that is not part of a region, except that the initial containing block is <var>region</var>.</p>
+                    <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with their positions.</p>
+                  </li>
+
+                  <li><p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. The cue is ignored.</p></li>
+
+                  <li><p>Let <var>cue</var>'s <span>text track cue display state</span> have the CSS boxes in <var>boxes</var>.</p></li>
+
+                  <li><p>Add the CSS boxes in <var>boxes</var> to <var>region</var>.</p></li>
                 </ol>
               </li>
             </ul>
@@ -725,18 +809,16 @@
       <section>
         <h3>Applying CSS properties to WebVTT Region Objects and their children</h3>
 
-        <p>When following the extended <a href="#rules-for-updating-the-display-of-WebVTT-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>, user agents must set properties of <a href="#webvtt-region-object">WebVTT region objects</a> at the CSS user agent cascade layer as defined in this section. <a href="#refsCSS">[CSS]</a></p>
+        <p>When following the extended <a href="#rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a>, user agents must set properties of <a href="#webvtt-region-object">WebVTT region objects</a> at the CSS user agent cascade layer as defined in this section. <a href="#refsCSS">[CSS]</a></p>
 
         <p>Every <a href="#webvtt-region-object">WebVTT region object</a> is initialised with the following CSS settings:</p>
         <ul>
           <li>the 'position' property must be set to 'absolute'</li>
-          <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
-          <li>the 'direction' property must be set to <var>direction</var></li>
-          <li>the 'writing-mode' property must be set to <var>writing-mode</var></li>
+          <li>the 'writing-mode' property must be set to 'horizontal-tb'</li>
           <li>the 'background' shorthand property must be set to 'rgba(0,0,0,0.8)'</li>
           <li>the 'word-wrap' property must be set to 'break-word'</li>
           <li>the 'overflow-wrap' property must be set to 'break-word'</li>
-          <li>the 'font' shorthand property must be set to '5vh sans-serif'</li>
+          <li>the 'font' shorthand property must be set to '(0.0533/1.3)vh sans-serif'</li>
           <li>the 'line-height' shorthand property must be set to '0.0533vh'</li>
           <li>the 'color' property must be set to 'rgba(255,255,255,1)'</li>
           <li>the 'overflow' property must be set to 'hidden'</li>
@@ -744,12 +826,13 @@
           <li>the 'min-height' property must be set to '0px'</li>
           <li>the 'max-height' property must be set to <var>height</var></li>
           <li>the 'left' property must be set to <var>left</var></li>
+          <li>the 'right' property must be set to <var>right</var></li>
           <li>the 'top' property must be set to <var>top</var></li>
           <li>the 'display' property must be set to 'inline-flex'</li>
           <li>the 'flex-flow' property must be set to 'column'</li>
           <li>the 'justify-content' property must be set to 'flex-end'</li>
         </ul>
-        <p>The variables <var>direction</var>, <var>writing-mode</var>, <var>width</var>, <var>height</var>, <var>top</var>, and <var>left</var> are the values with those names determined by the <a href="#rules-for-updating-the-display-of-WebVTT-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a> for the <a href="#text-track-region" class="internalDFN">text track region</a> from which the <a href="#webvtt-region-object" class="internalDFN">WebVTT region object</a> was constructed.</p>
+        <p>The variables <var>width</var>, <var>height</var>, <var>top</var>, and <var>left</var> are the values with those names determined by the <a href="#rules-for-updating-the-display-of-webvtt-text-tracks" class="internalDFN">rules for updating the display of WebVTT text tracks</a> for the <a href="#text-track-region" class="internalDFN">text track region</a> from which the <a href="#webvtt-region-object" class="internalDFN">WebVTT region object</a> was constructed.</p>
 
         <p>The children of every <a href="#webvtt-region-object">WebVTT region object</a> are not initialised with the <a href="http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects" class="externalDFN">CSS properties of (root) List of WebVTT Node Objects</a> but instead with these CSS settings:</p>
         <ul>
@@ -757,8 +840,6 @@
           <li>the 'width' property must be set to 'auto'</li>
           <li>the 'left' property must be set to <var>left</var></li>
           <li>the 'text-align' property must be set as described for <a href="http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects" class="externalDFN">(root) List of WebVTT Node Objects</a> not part of a region</li>
-          <li>the 'transition-property' property must be set to 'top'</li>
-          <li>the 'transition-duration' property must be set to '0.433s'</li>
         </ul>
 
         <p>All other non-inherited properties must be set to their initial values; inherited properties must inherit their values from the media element for which the text track region is being rendered, if any. If there is no media element (i.e. if the text track is being rendered for another media playback mechanism), then inherited properties on the WebVTT region objects must take their initial values.</p>
@@ -768,6 +849,12 @@
     </section>
 
 
+    <section>
+      <h3>CSS extensions</h3>
+      <p>XXX ::cue-region([name]) XXX</p>
+    </section>
+
+
     <section class="appendix">
       <h2>Extension of the HTML TextTrack API</h2>
 
@@ -911,7 +998,7 @@
             <tr> <td> <a href="#text-track-region-scroll-none" class="interalDFN">None</a>
                  <td> "<code></code>" (the empty string)
             <tr> <td> <a href="#text-track-region-scroll-up" class="internalDFN">"Up</a>
-                 <td> "<code title="">up</code>"
+                 <td> "<code>up</code>"
           </table>
 
           <p>On setting, the <span>text track scroll</span> must be set to the value given on the first cell of the row in the table above whose second cell is a <span>case-sensitive</span> match for the new value, if any. If none of the values match, then the user agent must instead throw a <code>SyntaxError</code> exception.</p>
@@ -942,7 +1029,7 @@
 
           <p>The <span>supported property indices</span> of a <code>TextTrackRegionList</code> object at any instant are the numbers from zero to the number of <a href="#text-track-region" class="internalDFN">regions</a> in the list represented by the <code>TextTrackRegionList</code> object minus one, if any. If there are no <a href="#text-track-region" class="internalDFN">regions</a> in the list, there are no <span>supported property indices</span>.</p>
 
-          <p>To <span>determine the value of an indexed property</span> for a given index <var title="">index</var>, the user agent must return the <var title="">index</var> of the <span>text track region</span> in the list represented by the <code>TextTrackRegionList</code> object.</p>
+          <p>To <span>determine the value of an indexed property</span> for a given index <var>index</var>, the user agent must return the <var>index</var> of the <span>text track region</span> in the list represented by the <code>TextTrackRegionList</code> object.</p>
 
           <p>The <dfn id="dom-TextTrackRegionList-getRegionById"><code>getRegionById(<var>id</var>)</code></dfn> method, when called with an argument other than the empty string, must return the first <span>text track region</span> in the list represented by the <code>TextTrackRegionList</code> object whose <span>text track region identifier</span> is <var>id</var>, if any, or null otherwise. If the argument is the empty string, then the method must return null.</p>
           <p>
@@ -958,7 +1045,10 @@
 
        <dt id="refsCSS">[CSS]</dt>
        <dd><cite><a href="http://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I. Hickson, H. Lie. W3C.</dd>
-       
+
+       <dt id="refsCSSVALUES">[CSSVALUES]</dt>
+       <dd><cite><a href="http://dev.w3.org/csswg/css3-values/">CSS3 Values and Units</a></cite>, H. Lie, T. Atkins, E. Etemad. W3C.</dd>
+
        <dt id="refsFCC">[FCC]</dt>
        <dd><cite><a href="http://www.fcc.gov/guides/captioning-internet-video-programming">Captioning of Internet Video Programming, 13 June 2012</a></cite>, US FCC (Federal Communications Commission).</dd>