[ttml] Address editorial note for padding on content element example.
authorNigel Megitt <nigel.megitt@bbc.co.uk>
Fri, 07 Aug 2015 15:50:43 +0100
changeset 954 8244178598ce
parent 953 adf162739046
child 955 92170886f8a3
[ttml] Address editorial note for padding on content element example.

Added second padding example document fragment.
Added padding_2.png example and padding_2.html source (png generated by manually cropping screenshot of rendered html).
Updated ednotes.xlsx to indicate that this editorial note is closed.
ttml2/spec/ednotes.xlsx
ttml2/spec/images/padding_2.html
ttml2/spec/images/padding_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/padding_2.html	Fri Aug 07 15:50:43 2015 +0100
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    /* Sets up a 16:9 holding area akin to the root container with a dotted line around */
+    display: block;
+    font: 18px helvetica;
+    font-weight: lighter  ;
+    height: 100px;
+    width: 700px; 
+    position: absolute;
+}
+.withLinePadding {
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+.blackBackground {
+    background-color: black;
+}
+.greenBackground {
+    background-color: green;
+}
+.area2 {
+    /* Analog to the area2 region */
+    position: absolute;
+    width: 90%;
+    height: 20%;
+    top: 20%;
+    left: 5%;
+    margin: 0px;
+}
+.baseStyle
+{
+    text-align: center;
+    color: white;
+}
+p.area2 span.outer
+{
+    line-height: 20px;
+}
+span.inner
+{
+    /* Makes displayAlign="center" work, when it's in a span.outer */
+    line-height: initial;
+    display: inline-block;
+    vertical-align: middle;
+}
+</style>
+</head>
+<body>
+
+<div class="baseStyle greenBackground">
+    <p class="area2">
+        <span class="outer">
+            <span class="inner">
+                <span class="blackBackground withLinePadding">The crew was complete: it included a Boots--<br/>
+                    A maker of Bonnets and Hoods--
+                </span>
+            </span>
+        </span>
+    </p>
+</div>
+
+</body>
+</html>
Binary file ttml2/spec/images/padding_2.png has changed
--- a/ttml2/spec/ttml2.xml	Fri Aug 07 15:47:22 2015 +0100
+++ b/ttml2/spec/ttml2.xml	Fri Aug 07 15:50:43 2015 +0100
@@ -10021,14 +10021,9 @@
 the computed value for a given edge, then the value least distant from 0, i.e., the least padding, is used.</p>
 </note>
 <p>The <att>tts:padding</att> style is illustrated by the following example.</p>
-<ednote>
-<name>Enhance Padding Example</name>
-<date>2013-08-24</date>
-<edtext>Enhance padding example to demonstrate padding on content elements.</edtext>
-</ednote>
 <p></p>
 <table id="style-attribute-padding-example-1" role="example">
-<caption>Example Fragment &ndash; Padding</caption>
+<caption>Example Fragment &ndash; Padding on region</caption>
 <tbody>
 <tr>
 <td>
@@ -10056,7 +10051,7 @@
 <p>When rendering an area to which padding applies, the background color that
 applies to the area is rendered into the padded portion of the area.</p>
 <table id="style-attribute-padding-example-1-images" role="example-images">
-<caption>Example Rendition &ndash; Padding</caption>
+<caption>Example Rendition &ndash; Padding on region</caption>
 <tbody>
 <tr>
 <td>
@@ -10065,7 +10060,42 @@
 </tr>
 </tbody>
 </table>
-<note role="derivation">
+<table id="style-attribute-padding-example-2" role="example">
+    <caption>Example Fragment &ndash; Padding on 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:displayAlign="center"/&gt;
+  &lt;style tts:textAlign="center"/&gt;
+  &lt;style tts:backgroundColor="green"/&gt;
+&lt;/region&gt;
+...
+&lt;p region="r1"&gt;
+  &lt;span tts:backgroundColor="black" tts:color="white" <phrase role="strong">tts:padding="0c 0.5c"</phrase>&gt;
+  The crew was complete: it included a Boots--&lt;br/&gt;
+  A maker of Bonnets and Hoods--
+  &lt;/span&gt;
+&lt;/p&gt;
+</eg>
+      </td>
+    </tr>
+  </tbody>
+  </table>
+  <p>When rendering spans to which padding applies, the padding applies to each generated line area independently.</p>
+  <table id="style-attribute-padding-example-2-images" role="example-images">
+    <caption>Example Rendition &ndash; Padding on span</caption>
+    <tbody>
+      <tr>
+        <td>
+          <graphic source="images/padding_2.png" alt="TTML padding style property"/>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <note role="derivation">
 <p>The semantics of the style property
 represented by this attribute are based upon that defined by <bibref ref="xsl11"/>,
 &sect; 7.31.15, except that individual shorthand values map to writing