Added CSS properties for region related objects.
authorSilvia Pfeiffer
Mon, 11 Feb 2013 22:29:39 +1100
changeset 64 3f7cad970767
parent 63 d1542c7153ab
child 65 eaa048745a0e
Added CSS properties for region related objects.
608toVTT/region.html
--- a/608toVTT/region.html	Mon Feb 11 09:44:38 2013 +1100
+++ b/608toVTT/region.html	Mon Feb 11 22:29:39 2013 +1100
@@ -671,7 +671,7 @@
 
       <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>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 DocumentFragment node.</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>
     </section>
 
 
@@ -681,7 +681,89 @@
       <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>These rules are extended with the following steps.</p>
-XXX
+
+      <section>
+        <h3>Prepare region list</h3>
+
+        <p>Extend step 7 to include regions and prepare the region list:</p>
+        <ol start="7">
+          <li><p>Let <var>cues</var> be an empty list of <a href="#text-track-cue" class="externalDFN">text track cues</a> and <var>regions</var> be an empty list of <a href="#text-track-region" class="internalDFN">text track regions</a>. For each track <var>track</var> in <var>tracks</var> append to <var>regions</var> all the <a href="#text-track-region" class="internalDFN">regions</a> from <var>track</var>'s <a href="#text-track-list-of-regions">text track list of regions</a>.</p></li>
+        </ol>
+      </section>
+
+      <section>
+        <h3>Prepare region CSS boxes</h3>
+
+        <p>Add a step 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>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Render cues into region CSS boxes</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>
+        <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>
+              </li>
+
+              <li><p>Otherwise run the following substeps:</p>
+                <ol>
+                  <li>XXX</li>
+                </ol>
+              </li>
+            </ul>
+          </li>
+        </ol>
+      </section>
+
+      <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>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 '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 'line-height' shorthand property must be set to '0.0533vh'</li>
+          <li>the 'color' property must be set to 'rgba(255,255,255,1)'</li>
+          <li>the 'overflow' property must be set to 'hidden'</li>
+          <li>the 'width' property must be set to <var>width</var></li>
+          <li>the 'min-height' property must be set to '0px'</li>
+          <li>the 'max-height' property must be set to <var>height</var></li>
+          <li>the 'left' property must be set to <var>left</var></li>
+          <li>the '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 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>
+          <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
+          <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>
+
+        <p>If there are style sheets that apply to the media element or other playback mechanism, then they must be interpreted as defined in the next section.</p>
+      </section>
     </section>
 
 
@@ -871,6 +953,9 @@
        <dt id="refs708">[CEA-708]</dt>
        <dd><cite><a href="http://www.ce.org/Standards/Standard-Listings/R4-3-Television-Data-Systems-Subcommittee/CEA-708-D.aspx">CEA-708-D: Digital Television (DTV) Closed Captioning</a></cite>, CEA (Consumer Electronics Association).</dd>
 
+       <dt id="refsCSS">[CSS]</dt>
+       <dd><cite><a href="http://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I. Hickson, H. Lie. 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>