[ttml] Address editorial note: add example for textAlign applied to span
authorNigel Megitt <nigel.megitt@bbc.co.uk>
Fri, 07 Aug 2015 16:56:59 +0100
changeset 955 92170886f8a3
parent 954 8244178598ce
child 956 cf95fd42c4f9
[ttml] Address editorial note: add example for textAlign applied to span

Update ednotes.xlsx
In ttml2.xml remove editorial note, add example fragment and image.
Add textAlign_2.png image, derived by taking screenshot of rendered textAlign_2.html
ttml2/spec/ednotes.xlsx
ttml2/spec/images/textAlign_2.html
ttml2/spec/images/textAlign_2.png
ttml2/spec/ttml2.xml
Binary file ttml2/spec/ednotes.xlsx has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml2/spec/images/textAlign_2.html	Fri Aug 07 16:56:59 2015 +0100
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    display: block;
+    font: 18px helvetica;
+    font-weight: lighter;
+    height: 700px;
+    width: 700px; 
+    position: absolute;
+}
+.area1 {
+    /* Analog to the r1 region, setting up the location and CSS inheritable styles */
+    position: absolute;
+    width: 446px;
+    height: 72px;
+    top: 0px;
+    left: 15%;
+    background-color: green;
+    color: white;
+    margin: 0px;
+}
+.area2 {
+    /* Analog to the r2 region, setting up the location and CSS inheritable styles */
+    position: absolute;
+    width: 446px;
+    height: 72px;
+    top: 76px;
+    left: 15%;
+    background-color: black;
+    color: white;
+    margin: 0px;
+}
+.baseStyle
+{
+    color: white;
+}
+p.startEnd
+{
+    text-align: left;
+}
+p.startEnd span.outer
+{
+    line-height: 72px; /* Create a line the full height of the area within which to apply vertical alignment of the inner span */
+}
+p.startEnd span.inner
+{
+    /* Makes displayAlign="center" work, when it's in a span.outer and does the "end" alignment horizontally */
+    line-height: initial; /* reset the line height to normal within the span */
+    display: inline-block;
+    text-align: right;
+    vertical-align: middle;
+}
+p.centerStart
+{
+    text-align: center;
+}
+p.centerStart span.outer
+{
+    line-height: 72px; /* Create a line the full height of the area within which to apply vertical alignment of the inner span */
+}
+p.centerStart span.inner
+{
+    /* Makes displayAlign="center" work, when it's in a span.outer and does the "start" alignment horizontally */
+    line-height: initial; /* reset the line height to normal within the span*/
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+}
+</style>
+</head>
+<body>
+
+<div class="baseStyle">
+   <p class="area1 startEnd">
+        <span class="outer">
+            <span class="inner">span textAlign="end"<br/>p textAlign="start"
+        </span></span>
+    </p>
+    <p class="area2 centerStart">
+        <span class="outer">
+            <span class="inner">span textAlign="start"<br/>p textAlign="center"
+        </span></span>
+    </p>
+</div>
+
+</body>
+</html>
Binary file ttml2/spec/images/textAlign_2.png has changed
--- a/ttml2/spec/ttml2.xml	Fri Aug 07 15:50:43 2015 +0100
+++ b/ttml2/spec/ttml2.xml	Fri Aug 07 16:56:59 2015 +0100
@@ -10971,12 +10971,12 @@
 <p>If a computed value of the property associated with this attribute is not supported,
 then a <loc href="#terms-presentation-processor">presentation processor</loc> must use the value <code>start</code>.</p>
 <p>The <att>tts:textAlign</att> style is illustrated by the following example.</p>
-<table id="style-attribute-textAlign-example-1" role="example">
-<caption>Example Fragment &ndash; Text Align</caption>
-<tbody>
-<tr>
-<td>
-<eg xml:space="preserve">
+  <table id="style-attribute-textAlign-example-1" role="example">
+    <caption>Example Fragment &ndash; Text Align</caption>
+    <tbody>
+      <tr>
+        <td>
+          <eg xml:space="preserve">
 &lt;region xml:id="r1"&gt;
   &lt;style tts:extent="355px 43px"/&gt;
   &lt;style tts:origin="0px 0px"/&gt;
@@ -11001,25 +11001,70 @@
   The frumious Bandersnatch!
 &lt;/p&gt;
 </eg>
-</td>
-</tr>
-</tbody>
-</table>
-<p></p>
-<table id="style-attribute-textAlign-example-1-images" role="example-images">
-<caption>Example Rendition &ndash; Text Align</caption>
-<tbody>
-<tr>
-<td><graphic source="images/textAlign.png" alt="TTML textAlign style property"/></td>
-</tr>
-</tbody>
-</table>
-<p></p>
-<ednote>
-<name>Text Align on Span Example</name>
-<date>2014-11-29</date>
-<edtext>Insert example fragment and image of use of tts:textAlign on a span element.</edtext>
-</ednote>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p></p>
+  <table id="style-attribute-textAlign-example-1-images" role="example-images">
+    <caption>Example Rendition &ndash; Text Align</caption>
+    <tbody>
+      <tr>
+        <td><graphic source="images/textAlign.png" alt="TTML textAlign style property"/></td>
+      </tr>
+    </tbody>
+  </table>
+  <p></p>
+<table id="style-attribute-textAlign-example-2" role="example">
+<caption>Example Fragment &ndash; Differing Text Align on p and span</caption>
+<tbody>
+<tr>
+<td>
+<eg xml:space="preserve">
+&lt;region xml:id="r1"&gt;
+  &lt;style tts:extent="446px 72px"/&gt;
+  &lt;style tts:origin="0px 0px"/&gt;
+  &lt;style tts:backgroundColor="green"/&gt;
+  &lt;style tts:color="white"/&gt;
+  &lt;style <phrase role="strong">tts:textAlign="start"</phrase>/&gt;
+  &lt;style tts:displayAlign="center"/&gt;
+&lt;/region&gt;
+&lt;region xml:id="r2"&gt;
+  &lt;style tts:extent="446px 72px"/&gt;
+  &lt;style tts:origin="0px 76px"/&gt;
+  &lt;style tts:backgroundColor="black"/&gt;
+  &lt;style tts:color="white"/&gt;
+  &lt;style <phrase role="strong">tts:textAlign="center"</phrase>/&gt;
+  &lt;style tts:displayAlign="center"/&gt;
+&lt;/region&gt;
+...
+&lt;p region="r1"&gt;
+  &lt;span <phrase role="strong">tts:textAlign="end"</phrase>&gt;
+    span textAlign="end"&lt;br/&gt;
+    p textAlign="start"
+  &lt;/span&gt;
+&lt;/p&gt;
+&lt;p region="r2"&gt;
+  &lt;span <phrase role="strong">tts:textAlign="start"</phrase>&gt;
+    span textAlign="start"&lt;br/&gt;
+    p textAlign="center"
+  &lt;/span&gt;
+&lt;/p&gt;
+</eg>
+</td>
+</tr>
+</tbody>
+</table>
+<p></p>
+<table id="style-attribute-textAlign-example-2-images" role="example-images">
+<caption>Example Rendition &ndash; Differing Text Align on p and span</caption>
+<tbody>
+<tr>
+<td><graphic source="images/textAlign_2.png" alt="TTML textAlign style property on p and span"/></td>
+</tr>
+</tbody>
+</table>
+<p></p>
 <note role="derivation">
 <p>The semantics of the style property
 represented by this attribute are based upon that defined by <bibref ref="xsl11"/>,