SDP-US Editorial (7.1.2) - Issue 190 - Insert new Example 2
authorGlenn Adams <glenn@skynav.com>
Wed, 28 Nov 2012 23:49:46 -0700
changeset 32062295c03d3c6
parent 319 332643616ed0
child 321 5c9941317402
SDP-US Editorial (7.1.2) - Issue 190 - Insert new Example 2
ttml10-sdp-us/Overview.html
ttml10-sdp-us/Overview.src.html
     1.1 --- a/ttml10-sdp-us/Overview.html	Wed Nov 28 22:49:22 2012 -0700
     1.2 +++ b/ttml10-sdp-us/Overview.html	Wed Nov 28 23:49:46 2012 -0700
     1.3 @@ -833,6 +833,14 @@
     1.4  <div><div class="numbered constraint" title="R0012">The alpha component of backgroundColor for a region <em class="rfc2119" title="must">must</em> be zero (0).</div></div>
     1.5  <div><div class="numbered constraint" title="R0013">The presentation processor <em class="rfc2119" title="must">must</em> allow the user to specify a backgroundColor for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#color-values">Color Values</a> ).</div></div>
     1.6  <div><div class="numbered constraint" title="R0014">The presentation processor <em class="rfc2119" title="must">must</em> allow the user to specify a backgroundColor for p and span elements to allow for semi-transparent and transparent opacities.</div></div>
     1.7 +<div><div class="numbered" title="E0002">Multiple Background Styles. The <code>tts:backgroundColor</code> is specified distinctly for a region, a paragraph selected into
     1.8 +that region, and a span of text in that paragraph.</div></div>
     1.9 +<div class="example"><div class="example-title"><span>Example 2</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">&lt;region id="r1" tts:backgroundColor="#00000000"/&gt;
    1.10 +...
    1.11 +&lt;p region="r1" tts:backgroundColor="#1049edff"&gt;
    1.12 +  Twinkle, twinkle, little bat!&lt;br&gt;
    1.13 +  How &lt;span tts:backgroundColor="#ed1078ff"&gt;I wonder&lt;/span&gt; where you're at!
    1.14 +&lt;/p&gt;</pre></div>
    1.15  </section>
    1.16  </section>
    1.17  <section id="Constrained_TTML_Feature_color">
    1.18 @@ -939,8 +947,8 @@
    1.19  so that a line fills up incrementally, and then as new lines are added the upper lines are scrolled out of view.</p>
    1.20  <p>A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p>
    1.21  <p>These caption styles are further elucidated by examples below.</p>
    1.22 -<div><div class="numbered" title="E0002">Pop-up style</div></div>
    1.23 -<div class="example"><div class="example-title"><span>Example 2</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span>
    1.24 +<div><div class="numbered" title="E0003">Pop-up style</div></div>
    1.25 +<div class="example"><div class="example-title"><span>Example 3</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span>
    1.26  <span style="color: blue;">    </span><span style="color: red;">xmlns:s</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span style="color: blue;"> </span>
    1.27  <span style="color: blue;">    </span><span style="color: red;">xmlns:p</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>'<span style="color: blue;"> &gt;</span>
    1.28  <span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
    1.29 @@ -962,14 +970,14 @@
    1.30  <span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span style="color: blue;">&gt;</span></pre></div>
    1.31  <!-- div data-include=example1.xml'></div --></section>
    1.32  <section>
    1.33 -<div><div class="numbered" title="E0003">Positioned style. An off-screen narrator is present and no graphics are used. Content placed in a single region in the bottom one-third of that region.</div></div>
    1.34 +<div><div class="numbered" title="E0004">Positioned style. An off-screen narrator is present and no graphics are used. Content placed in a single region in the bottom one-third of that region.</div></div>
    1.35  <!-- div data-include=example2.xml'></div -->
    1.36 -<div class="example"><div class="example-title"><span>Example 3</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span>
    1.37 +<div class="example"><div class="example-title"><span>Example 4</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span>
    1.38  <span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">topMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 10%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span></pre></div></section>
    1.39  <section>
    1.40 -<div><div class="numbered" title="E0004">Moving regions. Content is positioned based on location of speaker, visible in the bottom two lines individually positioned in region(s) so as to avoid background content..</div></div>
    1.41 +<div><div class="numbered" title="E0005">Moving regions. Content is positioned based on location of speaker, visible in the bottom two lines individually positioned in region(s) so as to avoid background content..</div></div>
    1.42  <!-- div data-include=example3.xml'></div -->
    1.43 -<div class="example"><div class="example-title"><span>Example 4</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>"<span style="color: blue;">?&gt;</span>
    1.44 +<div class="example"><div class="example-title"><span>Example 5</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>"<span style="color: blue;">?&gt;</span>
    1.45  <span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns:s</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span style="color: blue;">&gt;</span>
    1.46  <span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
    1.47  <span style="color: blue;">    &lt;</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
    1.48 @@ -1196,8 +1204,8 @@
    1.49  <h4><span class="secno">7.8.2 </span>Constraints</h4>
    1.50  <p>None</p>
    1.51  <section>
    1.52 -<div><div class="numbered" title="E0005">Using 10% for the tts:extent of the root container region (for example, of an 720x640 region), the equivalence to pixel units (px) could be obtained. For example, using this snippet:</div></div>
    1.53 -<div class="example"><div class="example-title"><span>Example 5</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">style</span><span style="color:blue;"> </span><span style="color:red;">xml:id</span><span style="color:blue;">=</span>"<span style="color:blue;">topLeftStyle</span>"<span style="color:blue;"> </span><span style="color:red;">s:fontSize</span><span style="color:blue;">=</span>"<span style="color:blue;">150%</span>"<span style="color:blue;"> </span><span style="color:red;">s:textAlign</span><span style="color:blue;">=</span>"<span style="color:blue;">left</span>"<span style="color:blue;"> </span><span style="color:red;">s:backgroundColor</span><span style="color:blue;">=</span>"<span style="color:blue;">#ffffffff</span>"<span style="color:blue;"> </span><span style="color:red;">s:color</span><span style="color:blue;">=</span>"<span style="color:blue;">#ff0000ff</span>"<span style="color:blue;"> </span><span style="color:red;">s:origin</span><span style="color:blue;">=</span>'<span style="color:blue;">10% 10%</span>'<span style="color:blue;"> </span><span style="color:red;">s:extent</span><span style="color:blue;">=</span>'<span style="color:blue;">40% 18%</span>'<span style="color:blue;">/&gt;</span></pre></div>
    1.54 +<div><div class="numbered" title="E0006">Using 10% for the tts:extent of the root container region (for example, of an 720x640 region), the equivalence to pixel units (px) could be obtained. For example, using this snippet:</div></div>
    1.55 +<div class="example"><div class="example-title"><span>Example 6</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">style</span><span style="color:blue;"> </span><span style="color:red;">xml:id</span><span style="color:blue;">=</span>"<span style="color:blue;">topLeftStyle</span>"<span style="color:blue;"> </span><span style="color:red;">s:fontSize</span><span style="color:blue;">=</span>"<span style="color:blue;">150%</span>"<span style="color:blue;"> </span><span style="color:red;">s:textAlign</span><span style="color:blue;">=</span>"<span style="color:blue;">left</span>"<span style="color:blue;"> </span><span style="color:red;">s:backgroundColor</span><span style="color:blue;">=</span>"<span style="color:blue;">#ffffffff</span>"<span style="color:blue;"> </span><span style="color:red;">s:color</span><span style="color:blue;">=</span>"<span style="color:blue;">#ff0000ff</span>"<span style="color:blue;"> </span><span style="color:red;">s:origin</span><span style="color:blue;">=</span>'<span style="color:blue;">10% 10%</span>'<span style="color:blue;"> </span><span style="color:red;">s:extent</span><span style="color:blue;">=</span>'<span style="color:blue;">40% 18%</span>'<span style="color:blue;">/&gt;</span></pre></div>
    1.56  <!-- div data-include=fontsize-example.xml'></div >
    1.57                          <style xml:id="topLeftStyle" s:fontSize="150%" s:textAlign="left" s:backgroundColor="#ffffffff" s:color="#ff0000ff" 
    1.58                           s:origin='10% 10%' s:extent='40% 18%'/> -->
    1.59 @@ -1503,7 +1511,7 @@
    1.60  <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>The style properites of region and the content selected for the region impact how selected text flows into a region (i.e. selected text may flow outside of the region such as on a mobile device).</p></div></div>
    1.61  <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>Constraining one p element to a region logically places content from two different speakers to different region(s).</p></div></div>
    1.62  <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>When a document author wants to construct a single phrase from a speaker with more than one line in a region, the br within a p element can be used. This construction adheres to the constraints in this section. For example for one speaker with more than one line:</p></div></div>
    1.63 -<div class="example"><div class="example-title"><span>Example 6</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span> I always get the fuzzy end<span style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span style="color:blue;">/&gt;</span>of the lollipop<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
    1.64 +<div class="example"><div class="example-title"><span>Example 7</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span> I always get the fuzzy end<span style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span style="color:blue;">/&gt;</span>of the lollipop<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
    1.65  </section>
    1.66  </section>
    1.67  <section id="timing_constraints">
    1.68 @@ -1543,7 +1551,7 @@
    1.69  <li>Exactly 2 digits <em class="rfc2119" title="must">must</em> be used in each of the hours, minutes, and second components (include leading zeros).</li>
    1.70  <li>Exactly 3 decimal places <em class="rfc2119" title="must">must</em> be used for the milliseconds component (include zeros).</li>
    1.71  </ul>
    1.72 -<div class="example"><div class="example-title"><span>Example 7</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01.000</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11.123</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div>
    1.73 +<div class="example"><div class="example-title"><span>Example 8</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01.000</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11.123</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div>
    1.74  <div><div class="numbered constraint" title="R0049">For timing in hh:mm:ss.ms, the following format <em class="rfc2119" title="must">must</em> be used:</div></div>
    1.75  <ul>
    1.76  <li>Exactly 2 digits <em class="rfc2119" title="must">must</em> be used in each of the hours, minutes, second, and frame components (include leading zeros).</li>
    1.77 @@ -1551,7 +1559,7 @@
    1.78  <li>A ttp:frameRateMultiplier attribute <em class="rfc2119" title="may">may</em> be present on the root element.</li>
    1.79  </ul>
    1.80  <p></p>
    1.81 -<div class="example"><div class="example-title"><span>Example 8</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01:00</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11:22</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
    1.82 +<div class="example"><div class="example-title"><span>Example 9</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01:00</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11:22</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
    1.83  </section>
    1.84  <section id="Constrained_TTML_Feature_time_offset">
    1.85  <h3><span class="secno">9.2 </span>Use of Constrained TTML Feature <span>time-offset</span></h3>
     2.1 --- a/ttml10-sdp-us/Overview.src.html	Wed Nov 28 22:49:22 2012 -0700
     2.2 +++ b/ttml10-sdp-us/Overview.src.html	Wed Nov 28 23:49:46 2012 -0700
     2.3 @@ -634,6 +634,16 @@
     2.4  <div data-transform='constraint'>The alpha component of backgroundColor for a region MUST be zero (0).</div>
     2.5  <div data-transform='constraint'>The presentation processor MUST allow the user to specify a backgroundColor for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#color-values">Color Values</a> ).</div>
     2.6  <div data-transform='constraint'>The presentation processor MUST allow the user to specify a backgroundColor for p and span elements to allow for semi-transparent and transparent opacities.</div>
     2.7 +<div data-transform='example'>Multiple Background Styles. The <code>tts:backgroundColor</code> is specified distinctly for a region, a paragraph selected into
     2.8 +that region, and a span of text in that paragraph.</div>
     2.9 +<pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
    2.10 +&lt;region id="r1" tts:backgroundColor="#00000000"/&gt;
    2.11 +...
    2.12 +&lt;p region="r1" tts:backgroundColor="#1049edff"&gt;
    2.13 +  Twinkle, twinkle, little bat!&lt;br&gt;
    2.14 +  How &lt;span tts:backgroundColor="#ed1078ff"&gt;I wonder&lt;/span&gt; where you're at!
    2.15 +&lt;/p&gt;
    2.16 +</pre>
    2.17  </section>
    2.18  </section>
    2.19  <section id='Constrained_TTML_Feature_color'>