Applied displayAlign="center", reordered areas so area1 is at the top, made multiRowAlign text fit always, made HTML equivalent put a dotted line around the root container.
--- a/ttml-ww-profiles/testsuite/linePadding/linePadding1.html Thu Apr 09 09:52:57 2015 -0700
+++ b/ttml-ww-profiles/testsuite/linePadding/linePadding1.html Fri Apr 17 12:10:36 2015 +0100
@@ -3,10 +3,15 @@
<head>
<style>
div {
- text-align: center;
- color: white;
+ /* Sets up a 16:9 holding area akin to the root container with a dotted line around */
display: block;
font: 6.7vh monospace, sans-serif;
+ border-style: dotted;
+ border-width: 1px;
+ border-color: black;
+ height: 90vh;
+ width: 160vh;
+ position: absolute;
}
.withLinePadding {
box-decoration-break: clone;
@@ -21,28 +26,62 @@
background-color: green;
}
.area1 {
- position: absolute;
- width: 70%;
- height: 20%;
- top: 70%;
- left: 15%;
-}
-.area2 {
+ /* Analog to the area1 region, setting up the location and CSS inheritable styles */
+ text-align: center;
+ color: white;
position: absolute;
width: 70%;
height: 20%;
top: 10%;
left: 15%;
-}</style>
+ margin: 0px;
+}
+.area2 {
+ /* Analog to the area2 region, setting up the location and CSS inheritable styles */
+ text-align: center;
+ color: white;
+ position: absolute;
+ width: 70%;
+ height: 20%;
+ top: 70%;
+ left: 15%;
+ margin: 0px;
+}
+p.area1 span.outer
+{
+ line-height: 18vh; /* Calculated as height of p, being div height of 90vh * area height 20% - needed so that inner content can be vertically aligned to something. */
+}
+p.area2 span.outer
+{
+ line-height: 18vh; /* Calculated as height of p, being div height of 90vh * area height 20% - needed so that inner content can be vertically aligned to something. */
+}
+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>
- <p class="area1"> <span class="greenBackground">Centered text on two lines<br/>without padding.</span>
-
+ <p class="area1">
+ <span class="outer">
+ <span class="inner">
+ <span class="greenBackground">Centered text on two lines<br/>without padding.
+ </span>
+ </span>
+ </span>
</p>
- <p class="area2"> <span class="blackBackground withLinePadding">Centered text on two lines<br/>with padding.</span>
-
+ <p class="area2">
+ <span class="outer">
+ <span class="inner">
+ <span class="blackBackground withLinePadding">Centered text on two lines<br/>with padding.
+ </span>
+ </span>
+ </span>
</p>
</div>
Binary file ttml-ww-profiles/testsuite/linePadding/linePadding1.png has changed
--- a/ttml-ww-profiles/testsuite/linePadding/linePadding1.ttml Thu Apr 09 09:52:57 2015 -0700
+++ b/ttml-ww-profiles/testsuite/linePadding/linePadding1.ttml Fri Apr 17 12:10:36 2015 +0100
@@ -10,8 +10,8 @@
<style xml:id="withLinePadding" ebutts:linePadding="0.5c"/>
</styling>
<layout>
- <region xml:id="area1" tts:origin="15% 70%" tts:extent="70% 20%" tts:displayAlign="center" tts:textAlign="center" tts:color="white"/>
- <region xml:id="area2" tts:origin="15% 10%" tts:extent="70% 20%" tts:displayAlign="center" tts:textAlign="center" tts:color="white"/>
+ <region xml:id="area1" tts:origin="15% 10%" tts:extent="70% 20%" tts:displayAlign="center" tts:textAlign="center" tts:color="white"/>
+ <region xml:id="area2" tts:origin="15% 70%" tts:extent="70% 20%" tts:displayAlign="center" tts:textAlign="center" tts:color="white"/>
</layout>
</head>
<body>
--- a/ttml-ww-profiles/testsuite/multiRowAlign/multiRowAlign1.html Thu Apr 09 09:52:57 2015 -0700
+++ b/ttml-ww-profiles/testsuite/multiRowAlign/multiRowAlign1.html Fri Apr 17 12:10:36 2015 +0100
@@ -3,55 +3,83 @@
<head>
<style>
div {
+ /* Sets up a 16:9 holding area akin to the root container with a dotted line around */
display: block;
font: 6.7vh monospace, sans-serif;
+ border-style: dotted;
+ border-width: 1px;
+ height: 90vh;
+ width: 160vh;
+ position: absolute;
}
.area1 {
+ /* Analog to the area1 region, setting up the location and CSS inheritable styles */
position: absolute;
- width: 90%;
+ width: 70%;
+ height: 20%;
+ top: 10%;
+ left: 15%;
+ background-color: green;
+ color: white;
+ margin: 0px;
+}
+.area2 {
+ /* Analog to the area2 region, setting up the location and CSS inheritable styles */
+ position: absolute;
+ width: 70%;
height: 20%;
top: 70%;
- left: 5%;
- background-color: green;
- text-align: center;
+ left: 15%;
+ background-color: black;
color: white;
-}
-.area2 {
- position: absolute;
- width: 90%;
- height: 20%;
- top: 10%;
- left: 5%;
- background-color: black;
- text-align: center;
- color: white;
+ margin: 0px;
}
p.startEnd
{
text-align: left;
}
-p.startEnd span
+p.startEnd span.outer
{
+ line-height: 18vh; /* Calculated as height of p, being div height of 90vh * area height 20% - needed so that inner content can be vertically aligned to something. */
+}
+p.startEnd span.inner
+{
+ /* Makes displayAlign="center" work, when it's in a span.outer and does the "end" alignment horizontally */
+ line-height: initial;
display: inline-block;
text-align: right;
+ vertical-align: middle;
}
p.centerStart
{
text-align: center;
}
-p.centerStart span
+p.centerStart span.outer
{
+ line-height: 18vh; /* Calculated as height of p, being div height of 90vh * area height 20% - needed so that inner content can be vertically aligned to something. */
+}
+p.centerStart span.inner
+{
+ /* Makes displayAlign="center" work, when it's in a span.outer and does the "start" alignment horizontally */
+ line-height: initial;
display: inline-block;
text-align: left;
+ vertical-align: middle;
}
</style>
</head>
<body>
<div>
- <p class="area1 startEnd"> <span>So rested he by the Tumtum tree<br/>And stood awhile in thought.</span>
+ <p class="area1 startEnd">
+ <span class="outer">
+ <span class="inner">multiRowAlign="end"<br/>textAlign="start"
+ </span></span>
</p>
- <p class="area2 centerStart"> <span>He took his vorpal sword in hand;<br/>Long time the manxome foe he sought-</span>
+ <p class="area2 centerStart">
+ <span class="outer">
+ <span class="inner">multiRowAlign="start"<br/>textAlign="center"
+ </span></span>
</p>
</div>
Binary file ttml-ww-profiles/testsuite/multiRowAlign/multiRowAlign1.png has changed
--- a/ttml-ww-profiles/testsuite/multiRowAlign/multiRowAlign1.ttml Thu Apr 09 09:52:57 2015 -0700
+++ b/ttml-ww-profiles/testsuite/multiRowAlign/multiRowAlign1.ttml Fri Apr 17 12:10:36 2015 +0100
@@ -9,17 +9,17 @@
<style xml:id="centerStart" tts:textAlign="center" ebutts:multiRowAlign="start"/>
</styling>
<layout>
- <region xml:id="area1" tts:origin="5% 70%" tts:extent="90% 20%" tts:backgroundColor="green" tts:displayAlign="center" tts:color="white"/>
- <region xml:id="area2" tts:origin="5% 10%" tts:extent="90% 20%" tts:backgroundColor="black" tts:displayAlign="center" tts:color="white"/>
+ <region xml:id="area1" tts:origin="15% 10%" tts:extent="70% 20%" tts:backgroundColor="green" tts:displayAlign="center" tts:color="white"/>
+ <region xml:id="area2" tts:origin="15% 70%" tts:extent="70% 20%" tts:backgroundColor="black" tts:displayAlign="center" tts:color="white"/>
</layout>
</head>
<body>
<div>
<p region="area1" style="startEnd" begin="1s" end="9s">
-So rested he by the Tumtum tree<br/>And stood awhile in thought.
+multiRowAlign="end"<br/>textAlign="start"
</p>
<p region="area2" style="centerStart" begin="1s" end="9s">
-He took his vorpal sword in hand;<br/>Long time the manxome foe he sought-
+multiRowAlign="start"<br/>textAlign="center"
</p>
</div>
</body>