--- a/ttml10-sdp-us/Overview.html Fri Sep 21 11:26:59 2012 +0800
+++ b/ttml10-sdp-us/Overview.html Fri Sep 21 14:09:15 2012 +0800
@@ -83,211 +83,215 @@
};
</script>
<style>
- .style1
- {
- height: 15.0pt;
- width: 38pt;
- color: black;
- font-size: 9.0pt;
- font-weight: 400;
- font-style: normal;
- text-decoration: none;
- font-family: "Courier New", monospace;
- text-align: right;
- vertical-align: middle;
- white-space: normal;
- border-style: none;
- border-color: inherit;
- border-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- }
- .style2
- {
- width: 37pt;
- color: black;
- font-size: 9.0pt;
- font-weight: 400;
- font-style: normal;
- text-decoration: none;
- font-family: Segoe, sans-serif;
- text-align: center;
- vertical-align: middle;
- white-space: normal;
- border-style: none;
- border-color: inherit;
- border-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- }
- .style3
- {
- height: 15.0pt;
- width: 38pt;
- color: black;
- font-size: 9.0pt;
- font-weight: 400;
- font-style: normal;
- text-decoration: none;
- font-family: Calibri, sans-serif;
- text-align: right;
- vertical-align: middle;
- white-space: normal;
- border-style: none;
- border-color: inherit;
- border-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- }
- .style4
- {
- color: black;
- font-size: 9.0pt;
- font-weight: 400;
- font-style: normal;
- text-decoration: none;
- font-family: Segoe, sans-serif;
- text-align: center;
- vertical-align: middle;
- white-space: nowrap;
- border-left-style: none;
- border-left-color: inherit;
- border-left-width: medium;
- border-right-style: none;
- border-right-color: inherit;
- border-right-width: medium;
- border-top: .5pt solid windowtext;
- border-bottom-style: none;
- border-bottom-color: inherit;
- border-bottom-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- background: #EEECE1;
- }
- .style5
- {
- height: 15.0pt;
- width: 38pt;
- color: black;
- font-size: 9.0pt;
- font-weight: 700;
- font-style: normal;
- text-decoration: none;
- font-family: "Courier New", monospace;
- text-align: right;
- vertical-align: middle;
- white-space: normal;
- border-style: none;
- border-color: inherit;
- border-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- }
- .style6
- {
- width: 37pt;
- color: black;
- font-size: 9.0pt;
- font-weight: 400;
- font-style: normal;
- text-decoration: none;
- font-family: Segoe, sans-serif;
- text-align: center;
- vertical-align: middle;
- white-space: normal;
- border-left-style: none;
- border-left-color: inherit;
- border-left-width: medium;
- border-right-style: none;
- border-right-color: inherit;
- border-right-width: medium;
- border-top: .5pt solid windowtext;
- border-bottom-style: none;
- border-bottom-color: inherit;
- border-bottom-width: medium;
- padding-left: 1px;
- padding-right: 1px;
- padding-top: 1px;
- background: #EEECE1;
- }
+.style1
+{
+ height: 15.0pt;
+ width: 38pt;
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 400;
+ font-style: normal;
+ text-decoration: none;
+ font-family: "Courier New", monospace;
+ text-align: right;
+ vertical-align: middle;
+ white-space: normal;
+ border-style: none;
+ border-color: inherit;
+ border-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+}
+.style2
+{
+ width: 37pt;
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 400;
+ font-style: normal;
+ text-decoration: none;
+ font-family: Segoe, sans-serif;
+ text-align: center;
+ vertical-align: middle;
+ white-space: normal;
+ border-style: none;
+ border-color: inherit;
+ border-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+}
+.style3
+{
+ height: 15.0pt;
+ width: 38pt;
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 400;
+ font-style: normal;
+ text-decoration: none;
+ font-family: Calibri, sans-serif;
+ text-align: right;
+ vertical-align: middle;
+ white-space: normal;
+ border-style: none;
+ border-color: inherit;
+ border-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+}
+.style4
+{
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 400;
+ font-style: normal;
+ text-decoration: none;
+ font-family: Segoe, sans-serif;
+ text-align: center;
+ vertical-align: middle;
+ white-space: nowrap;
+ border-left-style: none;
+ border-left-color: inherit;
+ border-left-width: medium;
+ border-right-style: none;
+ border-right-color: inherit;
+ border-right-width: medium;
+ border-top: .5pt solid windowtext;
+ border-bottom-style: none;
+ border-bottom-color: inherit;
+ border-bottom-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+ background: #EEECE1;
+}
+.style5
+{
+ height: 15.0pt;
+ width: 38pt;
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 700;
+ font-style: normal;
+ text-decoration: none;
+ font-family: "Courier New", monospace;
+ text-align: right;
+ vertical-align: middle;
+ white-space: normal;
+ border-style: none;
+ border-color: inherit;
+ border-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+}
+.style6
+{
+ width: 37pt;
+ color: black;
+ font-size: 9.0pt;
+ font-weight: 400;
+ font-style: normal;
+ text-decoration: none;
+ font-family: Segoe, sans-serif;
+ text-align: center;
+ vertical-align: middle;
+ white-space: normal;
+ border-left-style: none;
+ border-left-color: inherit;
+ border-left-width: medium;
+ border-right-style: none;
+ border-right-color: inherit;
+ border-right-width: medium;
+ border-top: .5pt solid windowtext;
+ border-bottom-style: none;
+ border-bottom-color: inherit;
+ border-bottom-width: medium;
+ padding-left: 1px;
+ padding-right: 1px;
+ padding-top: 1px;
+ background: #EEECE1;
+}
- div.template
- {
- padding: 0 8px 0 8px;
- background: #eeeeee;
- }
- div.numbered:before
- {
- content: attr(title) " - ";
- font-weight: bold;
- }
- div.numbered
- {
- padding: 0 12px 0 8px;
- }
- span.numbered
- {
- font-weight: bold;
- padding-left: 2em;
- }
-
- span.ttmlTerm
- {
- font-weight: bold;
- }
- table
- {
- font-family: verdana,arial,sans-serif;
- font-size: 11px;
- color: #333333;
- border-width: 1px;
- border-color: #666666;
- border-collapse: collapse;
- }
- table th
- {
- border-width: 1px;
- padding: 8px;
- border-style: solid;
- border-color: #666666;
- background-color: #dedede;
- }
- table tr td
- {
- border-width: 1px;
- padding: 8px;
- border-style: solid;
- border-color: #666666;
- background-color: #ffffff;
- }
+div.template
+{
+ padding: 0 8px 0 8px;
+ background: #eeeeee;
+}
+div.numbered:before
+{
+ content: attr(title) " - ";
+ font-weight: bold;
+}
+div.numbered
+{
+ padding: 0 12px 0 8px;
+}
+span.numbered
+{
+ font-weight: bold;
+ padding-left: 2em;
+}
+
+span.ttmlTerm
+{
+ font-weight: bold;
+}
+table
+{
+ font-family: verdana,arial,sans-serif;
+ font-size: 11px;
+ color: #333333;
+ border-width: 1px;
+ border-color: #666666;
+ border-collapse: collapse;
+}
+table th
+{
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ background-color: #dedede;
+}
+table tr td
+{
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ background-color: #ffffff;
+}
</style>
-
<script>
- function term(doc, content) {
- // perform transformations to make it render and prettier
- return '<span class="ttmlTerm">' + doc._esc(content) + '<\/span>';
- }
- function template(doc, content) {
- // perform transformations to make it render and prettier
- return '<div class="template">' + content + '<\/div>';
- }
- var constraints = 0;
- function constraint(doc, content) {
- // perform transformations to make it render and prettier
- var prefix = constraints < 9 ? "R000" : "R00";
- return "<div class=numbered title=" + prefix + (++constraints) + ">" + content + "<\/div>";
- }
- var examples = 0;
- function example(doc, content) {
- // perform transformations to make it render and prettier
- var prefix = examples < 9 ? "E000" : "E00";
- return "<div class=numbered title=" + prefix + (++examples) + ">" + content + "<\/div>";
- }
+function term(doc, content) {
+ // perform transformations to make it render and prettier
+ return '<span class="ttmlTerm">' + doc._esc(content) + '<\/span>';
+}
+function template(doc, content) {
+ // perform transformations to make it render and prettier
+ return '<div class="template">' + content + '<\/div>';
+}
+var constraints = 0;
+function constraint(doc, content) {
+ // perform transformations to make it render and prettier
+ var prefix = constraints < 9 ? "R000" : "R00";
+ return "<div class=numbered title=" + prefix + (++constraints) + ">" + content + "<\/div>";
+}
+function atrisk(doc,content) {
+ var atRiskConstraint = constraints;
+ var prefix = atRiskConstraint < 9 ? "R000" : "R00";
+ return "<div class='issue'>Constraint " + prefix + atRiskConstraint + " is at risk.<\/div>"
+}
+var examples = 0;
+function example(doc, content) {
+ // perform transformations to make it render and prettier
+ var prefix = examples < 9 ? "E000" : "E00";
+ return "<div class=numbered title=" + prefix + (++examples) + ">" + content + "<\/div>";
+}
</script>
</head>
<body>
@@ -329,7 +333,7 @@
</tr>
</table>
<p>Conformance to this profile does not preclude the use of other features defined in [[!TTML10]] but such behavior is not defined here.</p>
-<p>Note: Error handling behavior is described in <a href="#error_handling">Error Handling</a>.</p>
+<div class="note"><p>Error handling behavior is described in <a href="#error_handling">Error Handling</a>.</p></div>
</section>
<section id='terms'>
<h2>Terms and Definitions</h2>
@@ -531,8 +535,8 @@
<section class='Core_Constraints'>
<h4>Constraints</h4>
<p data-transform='constraint'>Processors MUST support the capability to present documents referencing this profile using the following URI: <dfn>http://www.w3.org/TR/profile/simple-delivery</dfn></p>
-<p>NOTE: See also <a href="#conformance">Conformance</a></p>
-<p>NOTE: The use attribute could indicate the geographical region for which the profile is used. For example, specific styling capabilities could be used in a particular geographical region. See also <a href="#other_constraints">Other Constraints</a>.</p>
+<div class="note"><p>See also <a href="#conformance">Conformance</a></p></div>
+<div class="note"><p>The use attribute could indicate the geographical region for which the profile is used. For example, specific styling capabilities could be used in a particular geographical region. See also <a href="#other_constraints">Other Constraints</a>.</p></div>
</section>
</section>
<section id='Use_of_Constrained_TTML_Feature_content_structure'>
@@ -595,7 +599,7 @@
<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
<p data-transform='constraint'>The backgroundColor MUST be expressed in #rrggbbaa format exclusively using the <dfn><hexdigit></dfn> style value expression.</p>
<p data-transform='constraint'>The backgroundColor MUST support the colors outlined in <a href="#color-values">Color Values</a>.</p>
-<p>Note: These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p>
+<div class="note"><p>These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p></div>
<p data-transform='constraint'>The alpha component of backgroundColor MUST support the opacity values outlined in <a href="#color-values">Color Values</a> .</p>
<p data-transform='constraint'>The alpha component of backgroundColor for a region MUST be 00.</p>
<p data-transform='constraint'>The player 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> ).</p>
@@ -629,7 +633,7 @@
<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
<p data-transform='constraint'>The color MUST be expressed in #rrggbbaa format exclusively using the <dfn><hexdigit></dfn> style value expression.</p>
<p data-transform='constraint'>The color MUST support the colors outlined in <a href="#color-values">Color Values</a>.</p>
-<p>Note: These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p>
+<div class="note"><p>These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p></div>
<p data-transform='constraint'>The alpha component of color MUST support the opacity values outlined in <a href="#color-values">Color Values</a> .</p>
<p data-transform='constraint'>The player MUST allow the user to specify a color 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> ).</p>
<p data-transform='constraint'>The player MUST allow the user to specify a color for p and span elements to allow for semi-transparent and transparent opacities.</p>
@@ -693,10 +697,10 @@
<li>Roll-up</li>
<li>Paint-on</li>
</ul>
-<p>Note: Pop-up style captions are typically characterized by small blocks of text that appear all at once.</p>
-<p>Note: Roll-up style captions are typically characterized by words (or small groups of letters) appearing sequentially,
-so that a line fills up incrementally, and then as new lines are added the upper lines are scrolled out of view.</p>
-<p>Note: A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p>
+<div class="note"><p>Pop-up style captions are typically characterized by small blocks of text that appear all at once.</p></div>
+<div class="note"><p>Roll-up style captions are typically characterized by words (or small groups of letters) appearing sequentially,
+so that a line fills up incrementally, and then as new lines are added the upper lines are scrolled out of view.</p></div>
+<div class="note"><p>A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p></div>
<p>Examples are provided of each style to aid in understanding the common forms.</p>
<section>
<p data-transform='example'>Pop-up style</p>
@@ -817,7 +821,7 @@
<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span>day<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
</pre>
-<p>Note: As shown in the Roll-up example, a function of time for a k line Roll-up of content: The begin time of the N+kth p element is equal to the begin time plus duration of the Nth p element less the begin time of the first span in the N+kth p.</p>
+<div class="note"><p>As shown in the Roll-up example, a function of time for a k line Roll-up of content: The begin time of the N+kth p element is equal to the begin time plus duration of the Nth p element less the begin time of the first span in the N+kth p.</p></div>
</section>
</section>
</section>
@@ -857,7 +861,7 @@
<li>cursive</li>
<li>smallCaps</li>
</ul>
-<p>Note: fontFamily values that do not not correspond to generic font family names in [[!TTML10]], such as <code>casual</code>, <code>cursive</code> and <code>smallCaps</code>, may be used. These are to be interpreted as local font names, which, if not available, the <code>default</code> font family is to be used.</p>
+<div class="note"><p>Values of tts:fontFamily that do not not correspond to generic font family names in [[!TTML10]], such as <code>casual</code>, <code>cursive</code> and <code>smallCaps</code>, may be used. These are to be interpreted as local font names, which, if not available, the <code>default</code> font family is to be used.</p></div>
<p data-transform='constraint'>A player MUST map the generic font names to fonts as follows</p>
<table>
<tr>
@@ -908,8 +912,8 @@
</table>
<p data-transform='constraint'>The player MUST allow the user to specify a generic fontFamily for the document using the values shown in the preceding table.</p>
<p data-transform='constraint'>The player MUST allow the user to specify character edge attributes and types for the generic fontFamily names for the values shown in the preceding table.</p>
-<p>Note: Player and Unicode code point support is defined in <a href="#code-points">Code Point support</a></p>
-<p>Note: Text outline can be specified using a style property to apply to characters selected for specific areas for content flowed into a region. Text outline applies a specific character edge to content. For example, when the textOutline style property is used, a type of shadow or thickness can be applied to content.</p>
+<div class="note"><p>Player and Unicode code point support is defined in <a href="#code-points">Code Point support</a></p></div>
+<div class="note"><p>Text outline can be specified using a style property to apply to characters selected for specific areas for content flowed into a region. Text outline applies a specific character edge to content. For example, when the textOutline style property is used, a type of shadow or thickness can be applied to content.</p></div>
</section>
</section>
<section id='Constrained_TTML_Feature_display_display_fontSize'>
@@ -939,14 +943,14 @@
<h4>Constraints</h4>
<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
<p data-transform='constraint'>document MUST only specify tts:fontSize(s) using a value of 50%, 75%, 100%, 150% or 200%.</p>
-<p>Note: Use of a fontSize of less than 75% (i.e. 50%) could result in unreadable content for a user.</p>
-<p>Note: Specifying a fontSize is used for a document could allow the user to select a preferred fontSize.</p>
-<p>Note: If a specific fontSize is not supported, then, follow the semantics for a presentation processor defined in [[!TTML10]], Section 8.2.9.</p>
+<div class="note"><p>Use of a fontSize of less than 75% (i.e. 50%) could result in unreadable content for a user.</p></div>
+<div class="note"><p>Specifying a fontSize is used for a document could allow the user to select a preferred fontSize.</p></div>
+<div class="note"><p>If a specific fontSize is not supported, then, follow the semantics for a presentation processor defined in [[!TTML10]], Section 8.2.9.</p></div>
<section>
<!-- <p data-transform='example'>Example to show how to specify an initial font.</p> -->
<!-- div data-include=example3.xml'></div --></section>
<p data-transform='constraint'>The default font height of the player MUST be 5% of the root container height</p>
-<p>Note: This is equivalent to one cell using the default grid. A player is however not required to support the grid metric.</p>
+<div class="note"><p>This is equivalent to one cell using the default grid. A player is however not required to support the grid metric.</p></div>
</section>
</section>
<section id='Constrained_TTML_Feature_display_display_fontStyle_italic'>
@@ -1003,7 +1007,7 @@
<h4>Constraints</h4>
<p>None</p>
<section>
-<p data-transform='example'>Note: 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:</p>
+<p data-transform='example'>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:</p>
<pre class='example' style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
<span style="color:blue;"><</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;">/></span>
@@ -1073,7 +1077,7 @@
<p data-transform='constraint'>Styles MUST be applied with a single style element using the style attribute.</p>
<p data-transform='constraint'>Style elements MUST NOT reference other styles.</p>
<p data-transform='constraint'>Style elements MUST NOT be child elements of region elements.</p>
-<p>Note: The constraints in this section result in a document that contains style blocks that are complete and self-contained.</p>
+<div class="note"><p>The constraints in this section result in a document that contains style blocks that are complete and self-contained.</p></div>
</section>
</section>
<section id='Constrained_TTML_Feature_styling_inheritance_content'>
@@ -1277,6 +1281,7 @@
<p data-transform='constraint'>Active region(s) MUST NOT overlap.</p>
<p data-transform='constraint'>No more than 4 region(s) MUST be active concurrently.</p>
<p data-transform='constraint'>No more than four lines of text MUST be selected into all active regions at any given time.</p>
+<p data-transform='atrisk'/>
</section>
</section>
<section id='Constrained_TTML_Feature_lineBreak-uax14'>
@@ -1306,9 +1311,9 @@
<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
<p data-transform='constraint'>At most 32 characters MUST be present in any displayed text line.</p>
<p data-transform='constraint'>At most one p element MUST be selected into a region at a time.</p>
-<p>NOTE: 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>
-<p>NOTE: Constraining one p element to a region logically places content from two different speakers to different region(s).</p>
-<p>NOTE: 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 class="note"><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 class="note"><p>Constraining one p element to a region logically places content from two different speakers to different region(s).</p></div>
+<div class="note"><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>
<pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
<span style="color:blue;"><</span><span style="color:#a31515;">p</span><span style="color:blue;">></span> I always get the fuzzy end<span style="color:blue;"><</span><span style="color:#a31515;">br</span><span style="color:blue;">/></span>of the lollipop<span style="color:blue;"></</span><span style="color:#a31515;">p</span><span style="color:blue;">></span>
</pre></section>
@@ -1389,7 +1394,7 @@
<section class='Core_Constraints'>
<h4>Constraints</h4>
<p>None</p>
-<p>Note: Since the ttp:timebase attribute is outside of this profile, the implicit timebase used here is media as specified in [[!TTML10]].</p>
+<div class="note"><p>Since the ttp:timebase attribute is outside of this profile, the implicit timebase used here is media as specified in [[!TTML10]].</p></div>
</section>
</section>
<section id='frameRate'>
@@ -1414,7 +1419,7 @@
<td> </td>
</tr>
</table>
-<p>Note: Use of the #frameRateMultiplier feature is optional in a document (see <a href="#Features_in_TTML_1.0_Used">Features in [[!TTML10]] Used in This Profile</a>).</p>
+<div class="note"><p>Use of the #frameRateMultiplier feature is optional in a document (see <a href="#Features_in_TTML_1.0_Used">Features in [[!TTML10]] Used in This Profile</a>).</p></div>
</section>
<section class='Core_Constraints'>
<h4>Constraints</h4>
@@ -1450,8 +1455,8 @@
<p data-transform='constraint'>The use of set elements applied to a region element MUST only animate the tts:display, tts:origin or tts:extent attribute.</p>
<p data-transform='constraint'>The use of set elements applied to a span element MUST only animate the tts:color attribute.</p>
<p data-transform='constraint'>No more than 6 set elements MUST be used within a given element</p>
-<p>Note: Animation is constrained to the scenarios where the region needs to be moved – i.e. when the “snap” display effect is required.</p>
-<p>Note: Animation is constrained to the scenarios to change the foreground color of content when flashing text is required.</p>
+<div class="note"><p>Animation is constrained to the scenarios where the region needs to be moved – i.e. when the “snap” display effect is required.</p></div>
+<div class="note"><p>Animation is constrained to the scenarios to change the foreground color of content when flashing text is required.</p></div>
</section>
</section>
</section>