--- a/ttml10-sdp-us/Overview.html Thu Oct 18 14:38:05 2012 +0700
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,2701 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset='utf-8' />
-<title>Simple Delivery Profile for Closed Captions (US)</title>
-<script src='respec.js' class='remove' async>
-</script>
-<script class='remove'>
-window.berjon = {};
-window.berjon.biblio = {
- "RFC2119" : "S. Bradner. <a href=\"http://www.ietf.org/rfc/rfc2119.txt\"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119. URL: <a href=\"http://www.ietf.org/rfc/rfc2119.txt\">http://www.ietf.org/rfc/rfc2119.txt</a> ",
- "TTML10" : "G. Adams. <a href=\"http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html\"><cite>Timed Text Markup Language (TTML) 1.0 (Second Edition)</cite></a> W3C Editor's Draft. URL: <a href=\"http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html\">http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html</a> "
-};
-respecConfig = {
- // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
- specStatus: "ED",
-
- // the specification's short name, as in http://www.w3.org/TR/short-name/
- shortName: "ttml10-sdp-us",
-
- // if your specification has a subtitle that goes below the main
- // formal title, define it here
- subtitle : "A profile of TTML for internet delivery of Captions originated in the United States",
-
- // if you wish the publication date to be other than today, set this
- // publishDate: "2009-08-06",
-
- // if the specification's copyright date is a range of years, specify
- // the start date here:
- // copyrightStart: "2005"
-
- // if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
- // and its maturity status
- // previousPublishDate: "1977-03-15",
- // previousMaturity: "WD",
-
- // if there a publicly available Editor's Draft, this is the link
- edDraftURI: "http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10-sdp-us/Overview.html",
-
- // if this is a LCWD, uncomment and set the end of its review period
- // lcEnd: "2009-08-05",
-
- // if you want to have extra CSS, append them to this list
- extraCSS: [],
-
- // editors, add as many as you like
- // only "name" is required
- editors: [
- { name: "Sean Hayes",
- company: "Microsoft", companyURL: "http://www.microsoft.com/" },
- { name: "Monica Martin",
- company: "Microsoft Open Technologies, Inc.", companyURL: "http://www.microsoft.com/" },
- { name: "Glenn Adams",
- company: "Cox Communications, Inc.", companyURL: "http://www.cox.com/" },
- ],
-
- // authors, add as many as you like.
- // This is optional, uncomment if you have authors as well as editors.
- // only "name" is required. Same format as editors.
-
- //authors: [
- // { name: "Your Name", url: "http://example.org/",
- // company: "Your Company", companyURL: "http://example.com/" },
- //],
-
- // name of the WG
- wg: "Timed Text Working Group",
-
- // URI of the public WG page
- wgURI: "http://www.w3.org/AudioVideo/TT/",
-
- // name (without the @w3c.org) of the public mailing to which comments are due
- wgPublicList: "public-tt",
-
- // URI of the patent status for this WG, for Rec-track documents
- // !!!! IMPORTANT !!!!
- // This is important for Rec-track documents, do not copy a patent URI from a random
- // document unless you know what you're doing. If in doubt ask your friendly neighbourhood
- // Team Contact.
- wgPatentURI: "http://www.w3.org/2004/01/pp-impl/34314/status",
-
- noRecTrack: true,
-};
-</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;
-}
-
-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>";
-}
-function atrisk(doc,content) {
- var atRiskConstraint = constraints;
- var prefix = atRiskConstraint < 9 ? "R000" : "R00";
- return "<div class='issue'>Constraint " + prefix + atRiskConstraint + " is at risk." + (!!content ? " " : "") + 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>";
-}
-</script>
-</head>
-<body>
-<section id='abstract'>
-<p>TTML 1.0 [[!TTML10]] provides many features to satisfy captioning and subtitling requirements, not all of which are intended for end user display. Requirements have been identified by key video and content communities to define an interoperable delivery profile using the core features specifically designed for online presentation of TTML. Such a profile allows the community of TTML users to construct constrained presentation engines for TTML. This document defines the behavior expected of a TTML content player using the presentation processor constraints for such an online delivery profile.</p>
-<p></p>
-<p>The Simple Online Delivery profile is focused on streamlined delivery of closed captions on the Internet. This interoperability profile supports core TTML features to deliver content originating legacy formats such as CEA-608 and -708 content, and is targeted primarily for delivery in US markets.</p>
-<p>The Simple Delivery Profile for Closed Captions focuses interoperability using [[!TTML10]] to support delivery of closed captions for video content. Other profiles based on [[!TTML10]] may target other types of subtitles such as on-screen text or graphics. This interoperability profile is a proper subset of [[!TTML10]] intended to support features required for US Government closed captioning requirements for online presentation.</p>
-</section>
-<section id='sotd'>
-<p>This document applies 3 guiding principles for online delivery of closed captions originated in the United States:</p>
-<ol>
-<li>Promote interoperability.</li>
-<li>Provide mandatory functionality based on a specified set of TTML features.</li>
-<li>Use this functionality to apply constraints on usage of a specified set of TTML features.</li>
-</ol>
-</section>
-<section id='conformance'>
-<h3>Simple Delivery Profile for Closed Captions</h3>
-<p>This profile identifies the content and presentation processor constraints for closed captioning using TTML. To conform to this profile, a presentation engine MUST:</p>
-<ul>
-<li>Satisfy the requirements specified by Section 3.2.1 Generic Processor Conformance [TTML] that are required to implement:
-<ul>
-<li>The mandatory [[!TTML10]] features referenced in Table E-3, Section D.2 Feature Support</li>
-<li>Supports the semantics defined for those features in the context of this profile.</li>
-</ul>
-</li>
-<li>Satisfy all requirements specified in Sections 4-8 and any references from those sections in this document.</li>
-</ul>
-<p>This constrained profile enumerates a set of required TTML features, some of which may be constrained in behavior, and the capabilities required of a Presentation Processor in [[!TTML10]]. The semantics defined in [[!TTML10]] apply unless otherwise constrained in this profile. Claims of conformance MUST use this URI and implement the required features and constraints of use and processing outlined in this profile.</p>
-<table>
-<tr>
-<th>Name</th>
-<th>Designator</th>
-</tr>
-<tr>
-<td>simple-delivery</td>
-<td>http://www.w3.org/TR/profile/simple-delivery</td>
-</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>
-<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>
-<p>The terms and definitions in [[!TTML10]] serve as the basis for this interoperability profile. Terms found here are in addition to those found in [[!TTML10]].</p>
-<table title='Table 1 - Terms and Definitions'>
-<tr>
-<th>Name</th>
-<th>Definition</th>
-</tr>
-<tr>
-<td>Required feature</td>
-<td>A TTML feature is required for use.</td>
-</tr>
-<tr>
-<td>Required feature with constraints</td>
-<td>A TTML feature is required but constrained by this profile for use and/or processing.</td>
-</tr>
-<tr>
-<td>Optional feature</td>
-<td>Any TTML feature not included in this profile.</td>
-</tr>
-</table>
-</section>
-<section id='SimpleProfile'>
-<h2>Simple Delivery Profile for Closed Captions</h2>
-<p>This profile represents a minimum set of required functionality using specified TTML features to deliver closed captions for online-delivery. This profile does not preclude optional features from use.</p>
-<p>The functionality is described in how it constrains the use of TTML features and how a presentation processor provides those captions. An example implementing this constrained profile exists in <a href="#Features_in_TTML_1.0_Used">Profile designator</a>; error handling behavior is found in <a href="#error_handling">Error Handling</a>.</p>
-<section id='Use_of_TTML_Constrained_Feature_Template'>
-<h3>Use of TTML Constrained Feature Template</h3>
-<p>This profile identifies functionality in the context of the required [[!TTML10]] features used and applies constraints. Each function is defined by:</p>
-<ul>
-<li>Usage scenario</li>
-<li>Constraints</li>
-</ul>
-<p>The template is as follows:</p>
-<section data-transform='template'>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td> </td>
-<td> </td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Usage_Scenario'>
-<h4>Usage Constraints</h4>
-</section>
-</section>
-</section>
-</section>
-<section class='Structural_Constraints'>
-<h3>Structural Constraints</h3>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>A document MUST contain both a head and body element</p>
-<p data-transform='constraint'>A document MUST contain both a styling and a layout element.</p>
-<p data-transform='constraint'>A document MUST NOT use a div element inside a div element.</p>
-<p data-transform='constraint'>A document MUST contain only a single level of span element within a p element</p>
-<p data-transform='example'>Single level of spans.</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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>A<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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s3</span>"<span style="color: blue;">></span>B<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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>C<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
-</pre>
-<p data-transform='constraint'>A document MUST reference all styles using a style attribute to a style element.</p>
-<p data-transform='constraint'>A document MUST have all elements are in order of time. That is, in a par context, a timed element MUST NOT lexically precede another timed element with an earlier start time.</p>
-</section>
-<section id='Constrained_Features'>
-<h2>Constrained Features</h2>
-<p></p>
-<section id='Constrained_TTML_Feature_core'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>core</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#core</td>
-<td>required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Use_of_Constrained_TTML_Feature_content'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>content</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#content</td>
-<td>Required with constraint</td>
-<td>Specified elements are used.</td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>A document MUST contain only the following elements:</p>
-<ul>
-<li><code>tt</code></li>
-<li><code>head</code></li>
-<li><code>body</code></li>
-<li><code>div</code></li>
-<li><code>p</code></li>
-<li><code>span</code></li>
-<li><code>br</code></li>
-<li><code>set</code></li>
-<li><code>layout</code></li>
-<li><code>styling</code></li>
-<li><code>region</code></li>
-<li><code>style</code></li>
-</ul>
-</section>
-</section>
-<section id='Use_of_Constrained_TTML_Feature_content_presentation'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>presentation</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#presentation</td>
-<td>required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Use_of_Constrained_TTML_Feature_content_profile'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>profile</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#profile</td>
-<td>required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p data-transform='constraint'>Presentation 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>
-<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'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>structure</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#structure</td>
-<td>required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-</section>
-<section id='Style_Constraints'>
-<h2>Style Constraints</h2>
-<p></p>
-<section id='Constrained_TTML_Feature_backgroundColor'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>backgroundColor-*</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#backgroundColor-block<br />
-#backgroundColor-inline</td>
-<td>Required with constraints</td>
-<td>p element<br />
-region element</td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation 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>
-<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 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> ).</p>
-<p 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.</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_color'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>color</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#color</td>
-<td>Required with constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation 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>
-<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 presentation processor 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 presentation processor MUST allow the user to specify a color for p and span elements to allow for semi-transparent and transparent opacities.</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_display_region'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>display-region</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#display-region</td>
-<td>required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_extent_region'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>extent-region</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#extent-region</td>
-<td>Required with constraints</td>
-<td>region<br />
-root</td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p data-transform='constraint'>deleted</p>
-</section>
-<section class='informative'>
-<h4>Examples</h4>
-<p>This profile supports the following caption styles:</p>
-<ul>
-<li>Pop-up</li>
-<li>Roll-up</li>
-<li>Paint-on</li>
-</ul>
-<p>Pop-up style captions are typically characterized by small blocks of text that appear all at once.</p>
-<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>
-<p>A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p>
-<p>These caption styles are further elucidated by examples below.</p>
-<p data-transform='example'>Pop-up style</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;">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: 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>
-<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;"> ></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">p:profile</span><span style="color: blue;"> </span><span style="color: red;">use</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml/profile/online-delivery</span>"<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
-<span style="color: blue;"> <!--</span><span style="color: green;"> A typical transparent region with centered text that has an outline </span><span style="color: blue;">--></span>
-<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;">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;">#000000ff 5%</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">#00000000</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;">/></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
-<span style="color: blue;"> <!--</span><span style="color: green;"> typical 'Pop-up' type region </span><span style="color: blue;">--></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> /></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">defaultFont</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:00.101</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span> This is a Pop-up caption. <span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
-<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span style="color: blue;">></span>
-
-</pre>
-<!-- div data-include=example1.xml'></div --></section>
-<section>
-<p data-transform='example'>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.</p>
-<!-- div data-include=example2.xml'></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;">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;">/></span>
-<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;">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;">/></span>
-</pre></section>
-<section>
-<p data-transform='example'>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..</p>
-<!-- div data-include=example3.xml'></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;">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;">?></span>
-<span style="color: blue;"><</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;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
-<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;">s1</span>"<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>"<span style="color: blue;">none</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>
-<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">r1</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s2</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s3</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s4</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
-<span style="color: blue;"> <!--</span><span style="color: green;">four speakers count off, and then all call 'Jump' together </span><span style="color: blue;">--></span>
-<span style="color: blue;"> <</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:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</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;"> ></span>One<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Two<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;">></span>Three<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Four<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;">></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
-<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span style="color: blue;">></span>
-</pre></section>
-<section>
-<p data-transform='example'>Roll-up and Paint-on style. Content is presented a word at a time and lines scroll up in a small fixed window (typically 3 or 4 lines). The Paint-on text is often embodied in Roll-up content.</p>
-<!-- div data-include=example4.xml'></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><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:13.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
-<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:01.000</span>'<span style="color: blue;">></span>rollup<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>style<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;">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>caption<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>support<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>
-<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:17.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
-<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:01.000</span>'<span style="color: blue;">></span>with<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>word<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;">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>at<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>a<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:05.000</span>'<span style="color: blue;">></span>time<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:06.000</span>'<span style="color: blue;">></span>temporal<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>
-<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:23.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
-<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:01.000</span>'<span style="color: blue;">></span>placement<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>this<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;">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>could<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>go<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>
-<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:27.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
-<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:01.000</span>'<span style="color: blue;">></span>on<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>all<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;">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>
-<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 id='Constrained_TTML_Feature_display_display_fontFamily_generic'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>fontFamily-generic</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#fontFamily-generic</td>
-<td>Required with constraints</td>
-<td>tts:fontFamily attribute</td>
-<td>span</td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>The document MUST use the tts:fontFamily attribute using only the following values:</p>
-<ul>
-<li>default</li>
-<li>monospaceSerif</li>
-<li>proportionalSerif</li>
-<li>monospaceSansSerif</li>
-<li>proportionalSansSerif</li>
-<li>casual</li>
-<li>cursive</li>
-<li>smallCaps</li>
-</ul>
-<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 presentation processor MUST map the generic font names to fonts as follows</p>
-<table>
-<tr>
-<th>Style Value</th>
-<th>Description</th>
-<th>Comments</th>
-</tr>
-<tr>
-<td>default</td>
-<td>default</td>
-<td>One of the below</td>
-</tr>
-<tr>
-<td>monospace</td>
-<td>Serif Monospaced with serifs</td>
-<td>Similar to Courier</td>
-</tr>
-<tr>
-<td>proportional</td>
-<td>Serif Proportionally spaced with serifs</td>
-<td>Similar to Times New Roman</td>
-</tr>
-<tr>
-<td>monospaceSansSerif</td>
-<td>Monospaced without serifs</td>
-<td>Similar to Helvetica Monospaced</td>
-</tr>
-<tr>
-<td>proportionalSansSerif</td>
-<td>Proportionally spaced without serifs</td>
-<td>Similar to Arial and Swiss</td>
-</tr>
-<tr>
-<td>casual</td>
-<td>Casual font type</td>
-<td>Similar to Dom and Impress</td>
-</tr>
-<tr>
-<td>cursive</td>
-<td>Cursive font type</td>
-<td>Similar to Coronet and Marigold</td>
-</tr>
-<tr>
-<td>smallCaps</td>
-<td>Smallcap types</td>
-<td>Similar to Engravers Gothic</td>
-</tr>
-</table>
-<p data-transform='constraint'>The presentation processor 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 presentation processor 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>
-<div class="note"><p>Presentation processor 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'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>fontSize</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#fontSize</td>
-<td>Required with constraints</td>
-<td> </td>
-<td>span<br />
-div (root)</td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation 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>
-<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 presentation processor MUST be 5% of the root container height</p>
-<div class="note"><p>This is equivalent to one cell using the default grid. A presentation processor is however not required to support the grid metric.</p></div>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_display_display_fontStyle_italic'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>fontStyle-italic</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#fontStyle-italic</td>
-<td>Required with constraints</td>
-<td>span</td>
-<td>span</td>
-<td>Support 7 font family values.</td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>The capability MUST exist for the user to specify the italic style for the font families identified in this profile.</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_length_percentage'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>length-percentage</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#length-percentage</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-<section>
-<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>
-</pre>
-<!-- div data-include=fontsize-example.xml'></div >
- <style xml:id="topLeftStyle" s:fontSize="150%" s:textAlign="left" s:backgroundColor="#ffffffff" s:color="#ff0000ff"
- s:origin='10% 10%' s:extent='40% 18%'/> -->
-<p>Convert the percentage value to a fraction (i.e. .40), multiply the numerator by 16 and divide by 100 to obtain px (pixel units).</p>
-</section>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_length_positive'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>length-positive</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#length-positive</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_styling'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-*</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#styling<br />
-#styling-referential<br />
-#styling-inline</td>
-<td>Required with constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>Styles MUST be applied either by reference or through use of inline styling.</p>
-<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>
-<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'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-inheritance-content</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#styling-inheritance-content</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_styling_inheritance_region'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-inheritance-region</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#styling-inheritance-region</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_textAlign_absolute'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>textAlign-absolute</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#textAlign-absolute</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_textDecoration_under'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>textDecoration-under</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#textDecoration-under</td>
-<td>Required with Constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>The tts:textDecoration-under attribute MUST support the constraints identified in this profile.</p>
-<p data-transform='constraint'>The capability MUST exist for the user to specify the underline decoration for the font families identified in this profile.</p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_textOutline_unblurred'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>textOutline-unblurred</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#textOutline-unblurred</td>
-<td>Required with Constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>Character edge attributes MUST be expressed using textOutline-unblurred based on the settings identified in CEA-708-D, Section 8.5.8.</p>
-<p data-transform='constraint'>A text outline MUST be expressed using textOutline-unblurred of up to 10% thickness.</p>
-<p data-transform='constraint'>The user MUST be able to specify character edge and type attributes using tts:textOutline attribute.</p>
-<p data-transform='constraint'>The user MUST be able to specify the rendering of character edge types of: none, raised, depressed, uniform or drop shadowed edges.</p>
-<p data-transform='atrisk'>Except for <code>none</code>, [[!TTML10]] provides no explicit, named edge style, such as raised, depressed, drop, etc. Some of
-these, such as <code>depressed</code> (inset) and <code>uniform</code> may be achieved with the current definition of <code>tts:textOutline</code>, however, the
-<code>raised</code> and <code>drop</code> edge style may require the use of multiple outlines (shadows), which are not presently supported. One way
-to address this may be to add an appendix that recommends how to map these CEA-708 edge types to specific <code>tts:textOutline</code> usage patterns.</p>
-<p></p>
-</section>
-</section>
-<section id='Constrained_TTML_Feature_writingMode_horizontal_lr'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>writingMode-horizontal-lr</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#writingMode-horizontal-lr</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</p>
-</section>
-</section>
-</section>
-<section id='layout_constraints'>
-<h2>Layout Constraints</h2>
-<p></p>
-<section id='Constrained_TTML_Feature_layout'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>layout</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#layout</td>
-<td>Required with constraints</td>
-<td>region attribute</td>
-<td>content</td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<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'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>lineBreak-uax14</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#lineBreak-uax14</td>
-<td>Required with constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation 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>
-<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>
-</section>
-</section>
-<section id='timing_constraints'>
-<h2>Timing Constraints</h2>
-<p></p>
-<section id='Constrained_TTML_Feature_timing'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>timing</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#timing</td>
-<td>Required with constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>Timing MUST be expressed in the hh:mm:ss.ms or hh:mm:ss:ff format used in the timeExpression.</p>
-<p data-transform='constraint'>Timing MUST be expressed in the same format throughout the document.</p>
-<p data-transform='constraint'>Presentation processors MUST support durations (dur) on the p and span elements, and MAY (but need not) support on other element types;
-as such, a document SHOULD NOT use a duration on an element type other than p or span.</p>
-<p data-transform='constraint'>For timing in hh:mm:ss.ms, the following format MUST be used:</p>
-<ul>
-<li>Exactly 2 digits MUST be used in each of the hours, minutes, and second components (include leading zeros).</li>
-<li>Exactly 3 decimal places MUST be used for the milliseconds component (include zeros).</li>
-</ul>
-<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><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;"> ></span>Test<span style="color:blue;"></</span><span style="color:#a31515;">p</span><span style="color:blue;">></span>
-</pre>
-<p data-transform='constraint'>For timing in hh:mm:ss.ms, the following format MUST be used:</p>
-<ul>
-<li>Exactly 2 digits MUST be used in each of the hours, minutes, second, and frame components (include leading zeros).</li>
-<li>A ttp:frameRate attribute MUST be present on the root element.</li>
-<li>A ttp:frameRateMultiplier attribute MAY be present on the root element.</li>
-</ul>
-<p></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;">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;"> ></span>Test<span style="color:blue;"></</span><span style="color:#a31515;">p</span><span style="color:blue;">></span>
-</pre></section>
-</section>
-<section id='Constrained_TTML_Feature_time_offset'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>time-offset</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#time-offset</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>None</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'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>frameRate and frameRateMultiplier</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#frameRate<br />
-#frameRateMultiplier</td>
-<td>Required</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-<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>
-<p>See <a href="#Constrained_TTML_Feature_timing">timing</a></p>
-</section>
-</section>
-<section id='animation'>
-<h2>Use of Constrained TTML Feature <span data-transform='term'>animation</span></h2>
-<p></p>
-<section class='Usage_Scenario'>
-<h4>Usage Scenario</h4>
-<table style="width: 100%;">
-<tr>
-<th>TTML Feature</th>
-<th>Usage type</th>
-<th>Context of Usage</th>
-<th>Scope</th>
-<th>Constraint</th>
-</tr>
-<tr>
-<td>#animation</td>
-<td>Required with constraints</td>
-<td> </td>
-<td> </td>
-<td> </td>
-</tr>
-</table>
-</section>
-<section class='Core_Constraints'>
-<h4>Constraints</h4>
-<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
-<p data-transform='constraint'>The set element MUST only animate the region or span element.</p>
-<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>
-<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>
-<section id='other_constraints'>
-<h2>Other Constraints</h2>
-<section id='Section1'>
-<h3>User Ease of Use Constraints</h3>
-<p>Constraints on reduced or simplified content are outside of this profile. External labeling could be used to support the user’s capability to select and use captions when available for:</p>
-<ul>
-<li>Reduced or simplified content for “easy reader” or</li>
-<li>Additional languages.</li>
-</ul>
-<p>For example, external labeling could be used to identify simplified or reduced, or other language supported content on a text track in HTML5. Such labeling may also be used to identify when large font size is applied to content. Requirements to support user preview and retention of default or user defined settings of selected text are outside of the scope of this profile. These requirements are relevant in the environment to which the captions are deployed.</p>
-</section>
-</section>
-<section id='Features_in_TTML_1.0_Used'>
-<h2>Features in [[!TTML10]] Used in This Profile</h2>
-<pre style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
-<span style="color: blue;"><?</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;">?></span>
-<span style="color: blue;"><?</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;">?></span>
-<span style="color: blue;"><</span><span style="color: #a31515;">profile</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#parameter</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">features</span><span style="color: blue;"> </span><span style="color: red;">xml:base</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml/feature/</span>"<span style="color: blue;">></span>
-<span style="color: blue;"> <!--</span><span style="color: green;"> required (mandatory) feature support </span><span style="color: blue;">--></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#animation<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-block<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-inline<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#color<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#content<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#core<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#display-region<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontFamily-generic<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontSize<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontStyle-italic<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#frameRate<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">optional</span>"<span style="color: blue;">></span>#frameRateMultiplier<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#layout<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#length-percentage<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#length-positive<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#lineBreak-uax14<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#presentation<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#profile<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#structure<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-content<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-region<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inline<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-referential<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textAlign-absolute<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textDecoration-under<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textOutline-unblurred<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#time-offset<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#timing<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#writingMode-horizontal-lr<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
-<span style="color: blue;"> </</span><span style="color: #a31515;">features</span><span style="color: blue;">></span>
-<span style="color: blue;"></</span><span style="color: #a31515;">profile</span><span style="color: blue;">></span>
-
-
-</pre></section>
-<section id='error_handling'>
-<h2>Error handling</h2>
-<p>A presentation process may be presented with documents that contain features that are not understood. The table that follows outlines the behavior expected under specific conditions. The pre-requisite if the caption file is syntactically valid XML.</p>
-<table style="width: 100%;">
-<tr>
-<th>Feature</th>
-<th>Requirement</th>
-<th>Action</th>
-</tr>
-<tr>
-<td>Known</td>
-<td>Required</td>
-<td>MUST interpret</td>
-</tr>
-<tr>
-<td>Unknown</td>
-<td>Required</td>
-<td>MUST ignore</td>
-</tr>
-</table>
-</section>
-<section class='appendix' id='future_needs'>
-<h2>Future Needs for TTML next for Simple Delivery</h2>
-<section class='appendix' id='Section2'>
-<h3>Values for fontFamily support</h3>
-<p>The casual, cursive and smallCaps generic font families are expected to be considered for inclusion in a future version of TTML.</p>
-</section>
-</section>
-<section class='appendix'>
-<h2>Mapping of US Government Requirements to Constrained Profile Features</h2>
-<p>A key is provided that maps the US Government technical requirements for closed captions are mapped to the constrained features of this profile.</p>
-<table style="width: 100%;">
-<tr>
-<td>Presentation</td>
-<td>#animation (set)<br />
-#display-region<br />
-#extent-region<br />
-#frameRate<br />
-#frameRateMultiplier<br />
-#layout<br />
-#length-percentage<br />
-#length-positive<br />
-#lineBreak-uax14<br />
-#textAlign-absolute<br />
-#time-offset<br />
-#timing<br />
-#writingMode-lr</td>
-</tr>
-<tr>
-<td>Character color</td>
-<td>#animation<br />
-#color</td>
-</tr>
-<tr>
-<td>Character opacity</td>
-<td>#color</td>
-</tr>
-<tr>
-<td>Character size</td>
-<td>#fontSize<br />
-#fontStyle-italic<br />
-#textDecoration-underline</td>
-</tr>
-<tr>
-<td>Fonts</td>
-<td>#fontFamily-generic<br />
-#fontStyle-italic</td>
-</tr>
-<tr>
-<td>Caption background color and opacity</td>
-<td>#backgroundColor-*</td>
-</tr>
-<tr>
-<td>Character edge attributes</td>
-<td>#textOutline-unblurred</td>
-</tr>
-<tr>
-<td>Caption window color</td>
-<td>#backgroundColor-*</td>
-</tr>
-<tr>
-<td>Language</td>
-<td>#profile</td>
-</tr>
-<tr>
-<td>Preview setting and retention</td>
-<td>See <a href="#other_constraints">Other Constraints,</a></td>
-</tr>
-</table>
-<p>TTML Mandatory Features</p>
-<ul>
-<li>core</li>
-<li>content</li>
-<li>presentation</li>
-<li>structure</li>
-<li>time-offset</li>
-<li>timing</li>
-</ul>
-<p>TTML Features Required That Support Other Requirements</p>
-<ul>
-<li>styling</li>
-<li>styling-referential</li>
-<li>styling-inline</li>
-<li>styling-inheritance-content</li>
-<li>styling-inheritance-region</li>
-</ul>
-<p></p>
-</section>
-<section class='appendix'>
-<h2>Code points</h2>
-<p data-transform='constraint'>Presentation processors SHOULD provide font glyph coverage for all characters in the “ISO 8859-1 Latin-1” space and those for ANSI INCITS 4 when mapped onto Unicode code points (see table).</p>
-<p class="note">A presentation processor follows the semantics expected for use of Unicode code points as stated in this section. The exact glyph is presentation processor dependent.</p>
-<p data-transform='constraint'>Presentation processors SHOULD support the C0, G0, C1, and G1 code sets mapped onto Unicode as in the following table. See CEA 708, Section 7.1 including Table 11.</p>
-<table style="border-collapse: collapse;width:630pt; width:835px;border:0">
-<colgroup>
-<col style="width:38pt; width:51px" />
-<col span="16" style=" width:37pt; width:49px" /></colgroup>
-<tr style="height:15pt">
-<td class="style1" style="height:20px;width:51px"></td>
-<td class="style2" style="width:49px">_0</td>
-<td class="style2" style="width:49px">_1</td>
-<td class="style2" style="width:49px">_2</td>
-<td class="style2" style="width:49px">_3</td>
-<td class="style2" style="width:49px">_4</td>
-<td class="style2" style="width:49px">_5</td>
-<td class="style2" style="width:49px">_6</td>
-<td class="style2" style="width:49px">_7</td>
-<td class="style2" style="width:49px">_8</td>
-<td class="style2" style="width:49px">_9</td>
-<td class="style2" style="width:49px">_A</td>
-<td class="style2" style="width:49px">_B</td>
-<td class="style2" style="width:49px">_C</td>
-<td class="style2" style="width:49px">_D</td>
-<td class="style2" style="width:49px">_E</td>
-<td class="style2" style="width:49px">_F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"><span> </span></td>
-<td class="style4">!</td>
-<td class="style4">"</td>
-<td class="style4">#</td>
-<td class="style4">$</td>
-<td class="style4">%</td>
-<td class="style4">&</td>
-<td class="style4">'</td>
-<td class="style4">(</td>
-<td class="style4">)</td>
-<td class="style4">*</td>
-<td class="style4">+</td>
-<td class="style4">,</td>
-<td class="style4">-</td>
-<td class="style4">.</td>
-<td class="style4">/</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+002_</td>
-<td class="style2" style="width:49px">0020</td>
-<td class="style2" style="width:49px">0021</td>
-<td class="style2" style="width:49px">0022</td>
-<td class="style2" style="width:49px">0023</td>
-<td class="style2" style="width:49px">0024</td>
-<td class="style2" style="width:49px">0025</td>
-<td class="style2" style="width:49px">0026</td>
-<td class="style2" style="width:49px">0027</td>
-<td class="style2" style="width:49px">0028</td>
-<td class="style2" style="width:49px">0029</td>
-<td class="style2" style="width:49px">002A</td>
-<td class="style2" style="width:49px">002B</td>
-<td class="style2" style="width:49px">002C</td>
-<td class="style2" style="width:49px">002D</td>
-<td class="style2" style="width:49px">002E</td>
-<td class="style2" style="width:49px">002F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">0</td>
-<td class="style4">1</td>
-<td class="style4">2</td>
-<td class="style4">3</td>
-<td class="style4">4</td>
-<td class="style4">5</td>
-<td class="style4">6</td>
-<td class="style4">7</td>
-<td class="style4">8</td>
-<td class="style4">9</td>
-<td class="style4">:</td>
-<td class="style4">;</td>
-<td class="style4"><</td>
-<td class="style4">=</td>
-<td class="style4">></td>
-<td class="style4">?</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+003_</td>
-<td class="style2" style="width:49px">0030</td>
-<td class="style2" style="width:49px">0031</td>
-<td class="style2" style="width:49px">0032</td>
-<td class="style2" style="width:49px">0033</td>
-<td class="style2" style="width:49px">0034</td>
-<td class="style2" style="width:49px">0035</td>
-<td class="style2" style="width:49px">0036</td>
-<td class="style2" style="width:49px">0037</td>
-<td class="style2" style="width:49px">0038</td>
-<td class="style2" style="width:49px">0039</td>
-<td class="style2" style="width:49px">003A</td>
-<td class="style2" style="width:49px">003B</td>
-<td class="style2" style="width:49px">003C</td>
-<td class="style2" style="width:49px">003D</td>
-<td class="style2" style="width:49px">003E</td>
-<td class="style2" style="width:49px">003F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">@</td>
-<td class="style4">A</td>
-<td class="style4">B</td>
-<td class="style4">C</td>
-<td class="style4">D</td>
-<td class="style4">E</td>
-<td class="style4">F</td>
-<td class="style4">G</td>
-<td class="style4">H</td>
-<td class="style4">I</td>
-<td class="style4">J</td>
-<td class="style4">K</td>
-<td class="style4">L</td>
-<td class="style4">M</td>
-<td class="style4">N</td>
-<td class="style4">O</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+004_</td>
-<td class="style2" style="width:49px">0040</td>
-<td class="style2" style="width:49px">0041</td>
-<td class="style2" style="width:49px">0042</td>
-<td class="style2" style="width:49px">0043</td>
-<td class="style2" style="width:49px">0044</td>
-<td class="style2" style="width:49px">0045</td>
-<td class="style2" style="width:49px">0046</td>
-<td class="style2" style="width:49px">0047</td>
-<td class="style2" style="width:49px">0048</td>
-<td class="style2" style="width:49px">0049</td>
-<td class="style2" style="width:49px">004A</td>
-<td class="style2" style="width:49px">004B</td>
-<td class="style2" style="width:49px">004C</td>
-<td class="style2" style="width:49px">004D</td>
-<td class="style2" style="width:49px">004E</td>
-<td class="style2" style="width:49px">004F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">P</td>
-<td class="style4">Q</td>
-<td class="style4">R</td>
-<td class="style4">S</td>
-<td class="style4">T</td>
-<td class="style4">U</td>
-<td class="style4">V</td>
-<td class="style4">W</td>
-<td class="style4">X</td>
-<td class="style4">Y</td>
-<td class="style4">Z</td>
-<td class="style4">[</td>
-<td class="style4">\</td>
-<td class="style4">]</td>
-<td class="style4">^</td>
-<td class="style4">_</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+005_</td>
-<td class="style2" style="width:49px">0050</td>
-<td class="style2" style="width:49px">0051</td>
-<td class="style2" style="width:49px">0052</td>
-<td class="style2" style="width:49px">0053</td>
-<td class="style2" style="width:49px">0054</td>
-<td class="style2" style="width:49px">0055</td>
-<td class="style2" style="width:49px">0056</td>
-<td class="style2" style="width:49px">0057</td>
-<td class="style2" style="width:49px">0058</td>
-<td class="style2" style="width:49px">0059</td>
-<td class="style2" style="width:49px">005A</td>
-<td class="style2" style="width:49px">005B</td>
-<td class="style2" style="width:49px">005C</td>
-<td class="style2" style="width:49px">005D</td>
-<td class="style2" style="width:49px">005E</td>
-<td class="style2" style="width:49px">005F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">`</td>
-<td class="style4">a</td>
-<td class="style4">b</td>
-<td class="style4">c</td>
-<td class="style4">d</td>
-<td class="style4">e</td>
-<td class="style4">f</td>
-<td class="style4">g</td>
-<td class="style4">h</td>
-<td class="style4">i</td>
-<td class="style4">j</td>
-<td class="style4">k</td>
-<td class="style4">l</td>
-<td class="style4">m</td>
-<td class="style4">n</td>
-<td class="style4">o</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+006_</td>
-<td class="style2" style="width:49px">0060</td>
-<td class="style2" style="width:49px">0061</td>
-<td class="style2" style="width:49px">0062</td>
-<td class="style2" style="width:49px">0063</td>
-<td class="style2" style="width:49px">0064</td>
-<td class="style2" style="width:49px">0065</td>
-<td class="style2" style="width:49px">0066</td>
-<td class="style2" style="width:49px">0067</td>
-<td class="style2" style="width:49px">0068</td>
-<td class="style2" style="width:49px">0069</td>
-<td class="style2" style="width:49px">006A</td>
-<td class="style2" style="width:49px">006B</td>
-<td class="style2" style="width:49px">006C</td>
-<td class="style2" style="width:49px">006D</td>
-<td class="style2" style="width:49px">006E</td>
-<td class="style2" style="width:49px">006F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">p</td>
-<td class="style4">q</td>
-<td class="style4">r</td>
-<td class="style4">s</td>
-<td class="style4">t</td>
-<td class="style4">u</td>
-<td class="style4">v</td>
-<td class="style4">w</td>
-<td class="style4">x</td>
-<td class="style4">y</td>
-<td class="style4">z</td>
-<td class="style4">{</td>
-<td class="style4">|</td>
-<td class="style4">}</td>
-<td class="style4">~</td>
-<td class="style6" style="width:49px">♪</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+007_</td>
-<td class="style2" style="width:49px">0070</td>
-<td class="style2" style="width:49px">0071</td>
-<td class="style2" style="width:49px">0072</td>
-<td class="style2" style="width:49px">0073</td>
-<td class="style2" style="width:49px">0074</td>
-<td class="style2" style="width:49px">0075</td>
-<td class="style2" style="width:49px">0076</td>
-<td class="style2" style="width:49px">0077</td>
-<td class="style2" style="width:49px">0078</td>
-<td class="style2" style="width:49px">0079</td>
-<td class="style2" style="width:49px">007A</td>
-<td class="style2" style="width:49px">007B</td>
-<td class="style2" style="width:49px">007C</td>
-<td class="style2" style="width:49px">007D</td>
-<td class="style2" style="width:49px">007E</td>
-<td class="style2" style="width:49px">007F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4">¡</td>
-<td class="style4">¢</td>
-<td class="style4">£</td>
-<td class="style4">¤</td>
-<td class="style4">¥</td>
-<td class="style4">¦</td>
-<td class="style4">§</td>
-<td class="style4">¨</td>
-<td class="style4">©</td>
-<td class="style4">ª</td>
-<td class="style4">«</td>
-<td class="style4">¬</td>
-<td class="style4">­</td>
-<td class="style4">®</td>
-<td class="style4">¯</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00A_</td>
-<td class="style2" style="width:49px">00A0</td>
-<td class="style2" style="width:49px">00A1</td>
-<td class="style2" style="width:49px">00A2</td>
-<td class="style2" style="width:49px">00A3</td>
-<td class="style2" style="width:49px">00A4</td>
-<td class="style2" style="width:49px">00A5</td>
-<td class="style2" style="width:49px">00A6</td>
-<td class="style2" style="width:49px">00A7</td>
-<td class="style2" style="width:49px">00A8</td>
-<td class="style2" style="width:49px">00A9</td>
-<td class="style2" style="width:49px">00AA</td>
-<td class="style2" style="width:49px">00AB</td>
-<td class="style2" style="width:49px">00AC</td>
-<td class="style2" style="width:49px">00AD</td>
-<td class="style2" style="width:49px">00AE</td>
-<td class="style2" style="width:49px">00AF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">°</td>
-<td class="style4">±</td>
-<td class="style4">²</td>
-<td class="style4">³</td>
-<td class="style4">´</td>
-<td class="style4">µ</td>
-<td class="style4">¶</td>
-<td class="style4">·</td>
-<td class="style4">¸</td>
-<td class="style4">¹</td>
-<td class="style4">º</td>
-<td class="style4">»</td>
-<td class="style4">¼</td>
-<td class="style4">½</td>
-<td class="style4">¾</td>
-<td class="style4">¿</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00B_</td>
-<td class="style2" style="width:49px">00B0</td>
-<td class="style2" style="width:49px">00B1</td>
-<td class="style2" style="width:49px">00B2</td>
-<td class="style2" style="width:49px">00B3</td>
-<td class="style2" style="width:49px">00B4</td>
-<td class="style2" style="width:49px">00B5</td>
-<td class="style2" style="width:49px">00B6</td>
-<td class="style2" style="width:49px">00B7</td>
-<td class="style2" style="width:49px">00B8</td>
-<td class="style2" style="width:49px">00B9</td>
-<td class="style2" style="width:49px">00BA</td>
-<td class="style2" style="width:49px">00BB</td>
-<td class="style2" style="width:49px">00BC</td>
-<td class="style2" style="width:49px">00BD</td>
-<td class="style2" style="width:49px">00BE</td>
-<td class="style2" style="width:49px">00BF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">À</td>
-<td class="style4">Á</td>
-<td class="style4">Â</td>
-<td class="style4">Ã</td>
-<td class="style4">Ä</td>
-<td class="style4">Å</td>
-<td class="style4">Æ</td>
-<td class="style4">Ç</td>
-<td class="style4">È</td>
-<td class="style4">É</td>
-<td class="style4">Ê</td>
-<td class="style4">Ë</td>
-<td class="style4">Ì</td>
-<td class="style4">Í</td>
-<td class="style4">Î</td>
-<td class="style4">Ï</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00C_</td>
-<td class="style2" style="width:49px">00C0</td>
-<td class="style2" style="width:49px">00C1</td>
-<td class="style2" style="width:49px">00C2</td>
-<td class="style2" style="width:49px">00C3</td>
-<td class="style2" style="width:49px">00C4</td>
-<td class="style2" style="width:49px">00C5</td>
-<td class="style2" style="width:49px">00C6</td>
-<td class="style2" style="width:49px">00C7</td>
-<td class="style2" style="width:49px">00C8</td>
-<td class="style2" style="width:49px">00C9</td>
-<td class="style2" style="width:49px">00CA</td>
-<td class="style2" style="width:49px">00CB</td>
-<td class="style2" style="width:49px">00CC</td>
-<td class="style2" style="width:49px">00CD</td>
-<td class="style2" style="width:49px">00CE</td>
-<td class="style2" style="width:49px">00CF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">Ð</td>
-<td class="style4">Ñ</td>
-<td class="style4">Ò</td>
-<td class="style4">Ó</td>
-<td class="style4">Ô</td>
-<td class="style4">Õ</td>
-<td class="style4">Ö</td>
-<td class="style4">×</td>
-<td class="style4">Ø</td>
-<td class="style4">Ù</td>
-<td class="style4">Ú</td>
-<td class="style4">Û</td>
-<td class="style4">Ü</td>
-<td class="style4">Ý</td>
-<td class="style4">Þ</td>
-<td class="style4">ß</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00D_</td>
-<td class="style2" style="width:49px">00D0</td>
-<td class="style2" style="width:49px">00D1</td>
-<td class="style2" style="width:49px">00D2</td>
-<td class="style2" style="width:49px">00D3</td>
-<td class="style2" style="width:49px">00D4</td>
-<td class="style2" style="width:49px">00D5</td>
-<td class="style2" style="width:49px">00D6</td>
-<td class="style2" style="width:49px">00D7</td>
-<td class="style2" style="width:49px">00D8</td>
-<td class="style2" style="width:49px">00D9</td>
-<td class="style2" style="width:49px">00DA</td>
-<td class="style2" style="width:49px">00DB</td>
-<td class="style2" style="width:49px">00DC</td>
-<td class="style2" style="width:49px">00DD</td>
-<td class="style2" style="width:49px">00DE</td>
-<td class="style2" style="width:49px">00DF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">à</td>
-<td class="style4">á</td>
-<td class="style4">â</td>
-<td class="style4">ã</td>
-<td class="style4">ä</td>
-<td class="style4">å</td>
-<td class="style4">æ</td>
-<td class="style4">ç</td>
-<td class="style4">è</td>
-<td class="style4">é</td>
-<td class="style4">ê</td>
-<td class="style4">ë</td>
-<td class="style4">ì</td>
-<td class="style4">í</td>
-<td class="style4">î</td>
-<td class="style4">ï</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00E_</td>
-<td class="style2" style="width:49px">00E0</td>
-<td class="style2" style="width:49px">00E1</td>
-<td class="style2" style="width:49px">00E2</td>
-<td class="style2" style="width:49px">00E3</td>
-<td class="style2" style="width:49px">00E4</td>
-<td class="style2" style="width:49px">00E5</td>
-<td class="style2" style="width:49px">00E6</td>
-<td class="style2" style="width:49px">00E7</td>
-<td class="style2" style="width:49px">00E8</td>
-<td class="style2" style="width:49px">00E9</td>
-<td class="style2" style="width:49px">00EA</td>
-<td class="style2" style="width:49px">00EB</td>
-<td class="style2" style="width:49px">00EC</td>
-<td class="style2" style="width:49px">00ED</td>
-<td class="style2" style="width:49px">00EE</td>
-<td class="style2" style="width:49px">00EF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">ð</td>
-<td class="style4">ñ</td>
-<td class="style4">ò</td>
-<td class="style4">ó</td>
-<td class="style4">ô</td>
-<td class="style4">õ</td>
-<td class="style4">ö</td>
-<td class="style4">÷</td>
-<td class="style4">ø</td>
-<td class="style4">ù</td>
-<td class="style4">ú</td>
-<td class="style4">û</td>
-<td class="style4">ü</td>
-<td class="style4">ý</td>
-<td class="style4">þ</td>
-<td class="style4">ÿ</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+00F_</td>
-<td class="style2" style="width:49px">00F0</td>
-<td class="style2" style="width:49px">00F1</td>
-<td class="style2" style="width:49px">00F2</td>
-<td class="style2" style="width:49px">00F3</td>
-<td class="style2" style="width:49px">00F4</td>
-<td class="style2" style="width:49px">00F5</td>
-<td class="style2" style="width:49px">00F6</td>
-<td class="style2" style="width:49px">00F7</td>
-<td class="style2" style="width:49px">00F8</td>
-<td class="style2" style="width:49px">00F9</td>
-<td class="style2" style="width:49px">00FA</td>
-<td class="style2" style="width:49px">00FB</td>
-<td class="style2" style="width:49px">00FC</td>
-<td class="style2" style="width:49px">00FD</td>
-<td class="style2" style="width:49px">00FE</td>
-<td class="style2" style="width:49px">00FF</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">Œ</td>
-<td class="style4">œ</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+015_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">0152</td>
-<td class="style2" style="width:49px">0153</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">Š</td>
-<td class="style4">š</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+016_</td>
-<td class="style2" style="width:49px">0160</td>
-<td class="style2" style="width:49px">0161</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">Ÿ</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">Ž</td>
-<td class="style4">ž</td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+017_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">0178</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">017D</td>
-<td class="style2" style="width:49px">017E</td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">ƒ</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+019_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">0192</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">˜</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+02D_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">02DC</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4">‐</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">―</td>
-<td class="style4">‖</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+201_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2010</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2015</td>
-<td class="style2" style="width:49px">2016</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">‧</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+202_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2027</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4">‰</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">›</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+203_</td>
-<td class="style2" style="width:49px">2030</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">203A</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4">₡</td>
-<td class="style4">₢</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">€</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+20A_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">20A1</td>
-<td class="style2" style="width:49px">20A2</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">20AC</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">₳</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+20B_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">20B3</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">°C</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">°F</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+210_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2103</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2109</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">⅓</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">⅟</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+215_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2153</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">215F</td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4">□</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+25A_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">25A1</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style3" style="height:20px;width:51px"></td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4">♩</td>
-<td class="style4"> </td>
-<td class="style4">♫</td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-<td class="style4"> </td>
-</tr>
-<tr style="height:15.0pt">
-<td class="style5" style="height:20px;width:51px">U+266_</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">2669</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px">266B</td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-<td class="style2" style="width:49px"></td>
-</tr>
-</table>
-<p data-transform='constraint'>Presentation processors MAY support the extended G2 characters sets that map onto Unicode code points (See table).</p>
-Presentation processors may also provide Glyph coverage for additional Unicode code points
-<section class='color_values'>
-<h2>Color values</h2>
-<p>For color values of the form #rrggbbaa, presentation processors MUST support combinations where the rr, gg, bb components may be either 00 or ff; and the aa component may be 00, 54, A8 or FF. e.g: #00ffff54. Additionally presentation processors SHOULD support values for rr, gg, and bb of 54 or A8, and MAY support all possible values between 00 to ff.</p>
-<table>
-<tr>
-<th>Color</th>
-<th>Value</th>
-</tr>
-<tr>
-<td>Black</td>
-<td>#000000ff</td>
-</tr>
-<tr>
-<td>White</td>
-<td>#fffffffff</td>
-</tr>
-<tr>
-<td>Red</td>
-<td>#ff0000ff</td>
-</tr>
-<tr>
-<td>Green</td>
-<td>#00ff00ff</td>
-</tr>
-<tr>
-<td>Blue</td>
-<td>#0000ffff</td>
-</tr>
-<tr>
-<td>Yellow</td>
-<td>#ffff00ff</td>
-</tr>
-<tr>
-<td>Magenta</td>
-<td>#ff00ffff</td>
-</tr>
-<tr>
-<td>Cyan</td>
-<td>#00ffffff</td>
-</tr>
-</table>
-<p></p>
-</section>
-<section class='appendix'>
-<h2>Acknowledgements</h2>
-<p>Many thanks to Robin Berjon for providing the respec.js tool used to format this document.</p>
-</section>
-</section>
-</body>
-</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp-us/Overview.src.html Sun Nov 11 13:17:27 2012 -0800
@@ -0,0 +1,2701 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Simple Delivery Profile for Closed Captions (US)</title>
+<script src='respec.js' class='remove' async>
+</script>
+<script class='remove'>
+window.berjon = {};
+window.berjon.biblio = {
+ "RFC2119" : "S. Bradner. <a href=\"http://www.ietf.org/rfc/rfc2119.txt\"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119. URL: <a href=\"http://www.ietf.org/rfc/rfc2119.txt\">http://www.ietf.org/rfc/rfc2119.txt</a> ",
+ "TTML10" : "G. Adams. <a href=\"http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html\"><cite>Timed Text Markup Language (TTML) 1.0 (Second Edition)</cite></a> W3C Editor's Draft. URL: <a href=\"http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html\">http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10/spec/ttaf1-dfxp.html</a> "
+};
+respecConfig = {
+ // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
+ specStatus: "ED",
+
+ // the specification's short name, as in http://www.w3.org/TR/short-name/
+ shortName: "ttml10-sdp-us",
+
+ // if your specification has a subtitle that goes below the main
+ // formal title, define it here
+ subtitle : "A profile of TTML for internet delivery of Captions originated in the United States",
+
+ // if you wish the publication date to be other than today, set this
+ // publishDate: "2009-08-06",
+
+ // if the specification's copyright date is a range of years, specify
+ // the start date here:
+ // copyrightStart: "2005"
+
+ // if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
+ // and its maturity status
+ // previousPublishDate: "1977-03-15",
+ // previousMaturity: "WD",
+
+ // if there a publicly available Editor's Draft, this is the link
+ edDraftURI: "http://dvcs.w3.org/hg/ttml/raw-file/tip/ttml10-sdp-us/Overview.html",
+
+ // if this is a LCWD, uncomment and set the end of its review period
+ // lcEnd: "2009-08-05",
+
+ // if you want to have extra CSS, append them to this list
+ extraCSS: [],
+
+ // editors, add as many as you like
+ // only "name" is required
+ editors: [
+ { name: "Sean Hayes",
+ company: "Microsoft", companyURL: "http://www.microsoft.com/" },
+ { name: "Monica Martin",
+ company: "Microsoft Open Technologies, Inc.", companyURL: "http://www.microsoft.com/" },
+ { name: "Glenn Adams",
+ company: "Cox Communications, Inc.", companyURL: "http://www.cox.com/" },
+ ],
+
+ // authors, add as many as you like.
+ // This is optional, uncomment if you have authors as well as editors.
+ // only "name" is required. Same format as editors.
+
+ //authors: [
+ // { name: "Your Name", url: "http://example.org/",
+ // company: "Your Company", companyURL: "http://example.com/" },
+ //],
+
+ // name of the WG
+ wg: "Timed Text Working Group",
+
+ // URI of the public WG page
+ wgURI: "http://www.w3.org/AudioVideo/TT/",
+
+ // name (without the @w3c.org) of the public mailing to which comments are due
+ wgPublicList: "public-tt",
+
+ // URI of the patent status for this WG, for Rec-track documents
+ // !!!! IMPORTANT !!!!
+ // This is important for Rec-track documents, do not copy a patent URI from a random
+ // document unless you know what you're doing. If in doubt ask your friendly neighbourhood
+ // Team Contact.
+ wgPatentURI: "http://www.w3.org/2004/01/pp-impl/34314/status",
+
+ noRecTrack: true,
+};
+</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;
+}
+
+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>";
+}
+function atrisk(doc,content) {
+ var atRiskConstraint = constraints;
+ var prefix = atRiskConstraint < 9 ? "R000" : "R00";
+ return "<div class='issue'>Constraint " + prefix + atRiskConstraint + " is at risk." + (!!content ? " " : "") + 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>";
+}
+</script>
+</head>
+<body>
+<section id='abstract'>
+<p>TTML 1.0 [[!TTML10]] provides many features to satisfy captioning and subtitling requirements, not all of which are intended for end user display. Requirements have been identified by key video and content communities to define an interoperable delivery profile using the core features specifically designed for online presentation of TTML. Such a profile allows the community of TTML users to construct constrained presentation engines for TTML. This document defines the behavior expected of a TTML content player using the presentation processor constraints for such an online delivery profile.</p>
+<p></p>
+<p>The Simple Online Delivery profile is focused on streamlined delivery of closed captions on the Internet. This interoperability profile supports core TTML features to deliver content originating legacy formats such as CEA-608 and -708 content, and is targeted primarily for delivery in US markets.</p>
+<p>The Simple Delivery Profile for Closed Captions focuses interoperability using [[!TTML10]] to support delivery of closed captions for video content. Other profiles based on [[!TTML10]] may target other types of subtitles such as on-screen text or graphics. This interoperability profile is a proper subset of [[!TTML10]] intended to support features required for US Government closed captioning requirements for online presentation.</p>
+</section>
+<section id='sotd'>
+<p>This document applies 3 guiding principles for online delivery of closed captions originated in the United States:</p>
+<ol>
+<li>Promote interoperability.</li>
+<li>Provide mandatory functionality based on a specified set of TTML features.</li>
+<li>Use this functionality to apply constraints on usage of a specified set of TTML features.</li>
+</ol>
+</section>
+<section id='conformance'>
+<h3>Simple Delivery Profile for Closed Captions</h3>
+<p>This profile identifies the content and presentation processor constraints for closed captioning using TTML. To conform to this profile, a presentation engine MUST:</p>
+<ul>
+<li>Satisfy the requirements specified by Section 3.2.1 Generic Processor Conformance [TTML] that are required to implement:
+<ul>
+<li>The mandatory [[!TTML10]] features referenced in Table E-3, Section D.2 Feature Support</li>
+<li>Supports the semantics defined for those features in the context of this profile.</li>
+</ul>
+</li>
+<li>Satisfy all requirements specified in Sections 4-8 and any references from those sections in this document.</li>
+</ul>
+<p>This constrained profile enumerates a set of required TTML features, some of which may be constrained in behavior, and the capabilities required of a Presentation Processor in [[!TTML10]]. The semantics defined in [[!TTML10]] apply unless otherwise constrained in this profile. Claims of conformance MUST use this URI and implement the required features and constraints of use and processing outlined in this profile.</p>
+<table>
+<tr>
+<th>Name</th>
+<th>Designator</th>
+</tr>
+<tr>
+<td>simple-delivery</td>
+<td>http://www.w3.org/TR/profile/simple-delivery</td>
+</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>
+<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>
+<p>The terms and definitions in [[!TTML10]] serve as the basis for this interoperability profile. Terms found here are in addition to those found in [[!TTML10]].</p>
+<table title='Table 1 - Terms and Definitions'>
+<tr>
+<th>Name</th>
+<th>Definition</th>
+</tr>
+<tr>
+<td>Required feature</td>
+<td>A TTML feature is required for use.</td>
+</tr>
+<tr>
+<td>Required feature with constraints</td>
+<td>A TTML feature is required but constrained by this profile for use and/or processing.</td>
+</tr>
+<tr>
+<td>Optional feature</td>
+<td>Any TTML feature not included in this profile.</td>
+</tr>
+</table>
+</section>
+<section id='SimpleProfile'>
+<h2>Simple Delivery Profile for Closed Captions</h2>
+<p>This profile represents a minimum set of required functionality using specified TTML features to deliver closed captions for online-delivery. This profile does not preclude optional features from use.</p>
+<p>The functionality is described in how it constrains the use of TTML features and how a presentation processor provides those captions. An example implementing this constrained profile exists in <a href="#Features_in_TTML_1.0_Used">Profile designator</a>; error handling behavior is found in <a href="#error_handling">Error Handling</a>.</p>
+<section id='Use_of_TTML_Constrained_Feature_Template'>
+<h3>Use of TTML Constrained Feature Template</h3>
+<p>This profile identifies functionality in the context of the required [[!TTML10]] features used and applies constraints. Each function is defined by:</p>
+<ul>
+<li>Usage scenario</li>
+<li>Constraints</li>
+</ul>
+<p>The template is as follows:</p>
+<section data-transform='template'>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td> </td>
+<td> </td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Usage_Scenario'>
+<h4>Usage Constraints</h4>
+</section>
+</section>
+</section>
+</section>
+<section class='Structural_Constraints'>
+<h3>Structural Constraints</h3>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>A document MUST contain both a head and body element</p>
+<p data-transform='constraint'>A document MUST contain both a styling and a layout element.</p>
+<p data-transform='constraint'>A document MUST NOT use a div element inside a div element.</p>
+<p data-transform='constraint'>A document MUST contain only a single level of span element within a p element</p>
+<p data-transform='example'>Single level of spans.</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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>A<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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s3</span>"<span style="color: blue;">></span>B<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;">span</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>C<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+</pre>
+<p data-transform='constraint'>A document MUST reference all styles using a style attribute to a style element.</p>
+<p data-transform='constraint'>A document MUST have all elements are in order of time. That is, in a par context, a timed element MUST NOT lexically precede another timed element with an earlier start time.</p>
+</section>
+<section id='Constrained_Features'>
+<h2>Constrained Features</h2>
+<p></p>
+<section id='Constrained_TTML_Feature_core'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>core</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#core</td>
+<td>required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Use_of_Constrained_TTML_Feature_content'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>content</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#content</td>
+<td>Required with constraint</td>
+<td>Specified elements are used.</td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>A document MUST contain only the following elements:</p>
+<ul>
+<li><code>tt</code></li>
+<li><code>head</code></li>
+<li><code>body</code></li>
+<li><code>div</code></li>
+<li><code>p</code></li>
+<li><code>span</code></li>
+<li><code>br</code></li>
+<li><code>set</code></li>
+<li><code>layout</code></li>
+<li><code>styling</code></li>
+<li><code>region</code></li>
+<li><code>style</code></li>
+</ul>
+</section>
+</section>
+<section id='Use_of_Constrained_TTML_Feature_content_presentation'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>presentation</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#presentation</td>
+<td>required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Use_of_Constrained_TTML_Feature_content_profile'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>profile</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#profile</td>
+<td>required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p data-transform='constraint'>Presentation 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>
+<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'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>structure</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#structure</td>
+<td>required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+</section>
+<section id='Style_Constraints'>
+<h2>Style Constraints</h2>
+<p></p>
+<section id='Constrained_TTML_Feature_backgroundColor'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>backgroundColor-*</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#backgroundColor-block<br />
+#backgroundColor-inline</td>
+<td>Required with constraints</td>
+<td>p element<br />
+region element</td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation 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>
+<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 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> ).</p>
+<p 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.</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_color'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>color</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#color</td>
+<td>Required with constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation 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>
+<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 presentation processor 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 presentation processor MUST allow the user to specify a color for p and span elements to allow for semi-transparent and transparent opacities.</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_display_region'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>display-region</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#display-region</td>
+<td>required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_extent_region'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>extent-region</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#extent-region</td>
+<td>Required with constraints</td>
+<td>region<br />
+root</td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p data-transform='constraint'>deleted</p>
+</section>
+<section class='informative'>
+<h4>Examples</h4>
+<p>This profile supports the following caption styles:</p>
+<ul>
+<li>Pop-up</li>
+<li>Roll-up</li>
+<li>Paint-on</li>
+</ul>
+<p>Pop-up style captions are typically characterized by small blocks of text that appear all at once.</p>
+<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>
+<p>A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p>
+<p>These caption styles are further elucidated by examples below.</p>
+<p data-transform='example'>Pop-up style</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;">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: 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>
+<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;"> ></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p:profile</span><span style="color: blue;"> </span><span style="color: red;">use</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml/profile/online-delivery</span>"<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span style="color: green;"> A typical transparent region with centered text that has an outline </span><span style="color: blue;">--></span>
+<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;">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;">#000000ff 5%</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">#00000000</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;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span style="color: green;"> typical 'Pop-up' type region </span><span style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> /></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">defaultFont</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:00.101</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span> This is a Pop-up caption. <span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span style="color: blue;">></span>
+
+</pre>
+<!-- div data-include=example1.xml'></div --></section>
+<section>
+<p data-transform='example'>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.</p>
+<!-- div data-include=example2.xml'></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;">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;">/></span>
+<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;">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;">/></span>
+</pre></section>
+<section>
+<p data-transform='example'>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..</p>
+<!-- div data-include=example3.xml'></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;">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;">?></span>
+<span style="color: blue;"><</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;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
+<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;">s1</span>"<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>"<span style="color: blue;">none</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>
+<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">r1</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s2</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s3</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s4</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:display</span><span style="color: blue;">=</span>'<span style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span style="color: green;">four speakers count off, and then all call 'Jump' together </span><span style="color: blue;">--></span>
+<span style="color: blue;"> <</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:10.000</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</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;"> ></span>One<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:10.330</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Two<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:10.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;">></span>Three<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:11.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.330</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Four<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</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;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r3</span>"<span style="color: blue;">></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</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:11.670</span>'<span style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Jump!<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span style="color: blue;">></span>
+</pre></section>
+<section>
+<p data-transform='example'>Roll-up and Paint-on style. Content is presented a word at a time and lines scroll up in a small fixed window (typically 3 or 4 lines). The Paint-on text is often embodied in Roll-up content.</p>
+<!-- div data-include=example4.xml'></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><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:13.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<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:01.000</span>'<span style="color: blue;">></span>rollup<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>style<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;">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>caption<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>support<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>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:17.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<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:01.000</span>'<span style="color: blue;">></span>with<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>word<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;">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>at<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>a<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:05.000</span>'<span style="color: blue;">></span>time<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:06.000</span>'<span style="color: blue;">></span>temporal<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>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:23.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<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:01.000</span>'<span style="color: blue;">></span>placement<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>this<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;">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>could<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>go<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>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:27.000</span>'<span style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<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:01.000</span>'<span style="color: blue;">></span>on<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;">span</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>all<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;">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>
+<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 id='Constrained_TTML_Feature_display_display_fontFamily_generic'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>fontFamily-generic</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#fontFamily-generic</td>
+<td>Required with constraints</td>
+<td>tts:fontFamily attribute</td>
+<td>span</td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The document MUST use the tts:fontFamily attribute using only the following values:</p>
+<ul>
+<li>default</li>
+<li>monospaceSerif</li>
+<li>proportionalSerif</li>
+<li>monospaceSansSerif</li>
+<li>proportionalSansSerif</li>
+<li>casual</li>
+<li>cursive</li>
+<li>smallCaps</li>
+</ul>
+<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 presentation processor MUST map the generic font names to fonts as follows</p>
+<table>
+<tr>
+<th>Style Value</th>
+<th>Description</th>
+<th>Comments</th>
+</tr>
+<tr>
+<td>default</td>
+<td>default</td>
+<td>One of the below</td>
+</tr>
+<tr>
+<td>monospace</td>
+<td>Serif Monospaced with serifs</td>
+<td>Similar to Courier</td>
+</tr>
+<tr>
+<td>proportional</td>
+<td>Serif Proportionally spaced with serifs</td>
+<td>Similar to Times New Roman</td>
+</tr>
+<tr>
+<td>monospaceSansSerif</td>
+<td>Monospaced without serifs</td>
+<td>Similar to Helvetica Monospaced</td>
+</tr>
+<tr>
+<td>proportionalSansSerif</td>
+<td>Proportionally spaced without serifs</td>
+<td>Similar to Arial and Swiss</td>
+</tr>
+<tr>
+<td>casual</td>
+<td>Casual font type</td>
+<td>Similar to Dom and Impress</td>
+</tr>
+<tr>
+<td>cursive</td>
+<td>Cursive font type</td>
+<td>Similar to Coronet and Marigold</td>
+</tr>
+<tr>
+<td>smallCaps</td>
+<td>Smallcap types</td>
+<td>Similar to Engravers Gothic</td>
+</tr>
+</table>
+<p data-transform='constraint'>The presentation processor 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 presentation processor 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>
+<div class="note"><p>Presentation processor 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'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>fontSize</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#fontSize</td>
+<td>Required with constraints</td>
+<td> </td>
+<td>span<br />
+div (root)</td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation 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>
+<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 presentation processor MUST be 5% of the root container height</p>
+<div class="note"><p>This is equivalent to one cell using the default grid. A presentation processor is however not required to support the grid metric.</p></div>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_display_display_fontStyle_italic'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>fontStyle-italic</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#fontStyle-italic</td>
+<td>Required with constraints</td>
+<td>span</td>
+<td>span</td>
+<td>Support 7 font family values.</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The capability MUST exist for the user to specify the italic style for the font families identified in this profile.</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_length_percentage'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>length-percentage</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#length-percentage</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+<section>
+<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>
+</pre>
+<!-- div data-include=fontsize-example.xml'></div >
+ <style xml:id="topLeftStyle" s:fontSize="150%" s:textAlign="left" s:backgroundColor="#ffffffff" s:color="#ff0000ff"
+ s:origin='10% 10%' s:extent='40% 18%'/> -->
+<p>Convert the percentage value to a fraction (i.e. .40), multiply the numerator by 16 and divide by 100 to obtain px (pixel units).</p>
+</section>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_length_positive'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>length-positive</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#length-positive</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_styling'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-*</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#styling<br />
+#styling-referential<br />
+#styling-inline</td>
+<td>Required with constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>Styles MUST be applied either by reference or through use of inline styling.</p>
+<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>
+<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'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-inheritance-content</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#styling-inheritance-content</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_styling_inheritance_region'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>styling-inheritance-region</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#styling-inheritance-region</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_textAlign_absolute'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>textAlign-absolute</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#textAlign-absolute</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_textDecoration_under'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>textDecoration-under</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#textDecoration-under</td>
+<td>Required with Constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The tts:textDecoration-under attribute MUST support the constraints identified in this profile.</p>
+<p data-transform='constraint'>The capability MUST exist for the user to specify the underline decoration for the font families identified in this profile.</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_textOutline_unblurred'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>textOutline-unblurred</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#textOutline-unblurred</td>
+<td>Required with Constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>Character edge attributes MUST be expressed using textOutline-unblurred based on the settings identified in CEA-708-D, Section 8.5.8.</p>
+<p data-transform='constraint'>A text outline MUST be expressed using textOutline-unblurred of up to 10% thickness.</p>
+<p data-transform='constraint'>The user MUST be able to specify character edge and type attributes using tts:textOutline attribute.</p>
+<p data-transform='constraint'>The user MUST be able to specify the rendering of character edge types of: none, raised, depressed, uniform or drop shadowed edges.</p>
+<p data-transform='atrisk'>Except for <code>none</code>, [[!TTML10]] provides no explicit, named edge style, such as raised, depressed, drop, etc. Some of
+these, such as <code>depressed</code> (inset) and <code>uniform</code> may be achieved with the current definition of <code>tts:textOutline</code>, however, the
+<code>raised</code> and <code>drop</code> edge style may require the use of multiple outlines (shadows), which are not presently supported. One way
+to address this may be to add an appendix that recommends how to map these CEA-708 edge types to specific <code>tts:textOutline</code> usage patterns.</p>
+<p></p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_writingMode_horizontal_lr'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>writingMode-horizontal-lr</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#writingMode-horizontal-lr</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+</section>
+<section id='layout_constraints'>
+<h2>Layout Constraints</h2>
+<p></p>
+<section id='Constrained_TTML_Feature_layout'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>layout</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#layout</td>
+<td>Required with constraints</td>
+<td>region attribute</td>
+<td>content</td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<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'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>lineBreak-uax14</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#lineBreak-uax14</td>
+<td>Required with constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation 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>
+<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>
+</section>
+</section>
+<section id='timing_constraints'>
+<h2>Timing Constraints</h2>
+<p></p>
+<section id='Constrained_TTML_Feature_timing'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>timing</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#timing</td>
+<td>Required with constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>Timing MUST be expressed in the hh:mm:ss.ms or hh:mm:ss:ff format used in the timeExpression.</p>
+<p data-transform='constraint'>Timing MUST be expressed in the same format throughout the document.</p>
+<p data-transform='constraint'>Presentation processors MUST support durations (dur) on the p and span elements, and MAY (but need not) support on other element types;
+as such, a document SHOULD NOT use a duration on an element type other than p or span.</p>
+<p data-transform='constraint'>For timing in hh:mm:ss.ms, the following format MUST be used:</p>
+<ul>
+<li>Exactly 2 digits MUST be used in each of the hours, minutes, and second components (include leading zeros).</li>
+<li>Exactly 3 decimal places MUST be used for the milliseconds component (include zeros).</li>
+</ul>
+<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><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;"> ></span>Test<span style="color:blue;"></</span><span style="color:#a31515;">p</span><span style="color:blue;">></span>
+</pre>
+<p data-transform='constraint'>For timing in hh:mm:ss.ms, the following format MUST be used:</p>
+<ul>
+<li>Exactly 2 digits MUST be used in each of the hours, minutes, second, and frame components (include leading zeros).</li>
+<li>A ttp:frameRate attribute MUST be present on the root element.</li>
+<li>A ttp:frameRateMultiplier attribute MAY be present on the root element.</li>
+</ul>
+<p></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;">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;"> ></span>Test<span style="color:blue;"></</span><span style="color:#a31515;">p</span><span style="color:blue;">></span>
+</pre></section>
+</section>
+<section id='Constrained_TTML_Feature_time_offset'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>time-offset</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#time-offset</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</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'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>frameRate and frameRateMultiplier</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#frameRate<br />
+#frameRateMultiplier</td>
+<td>Required</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+<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>
+<p>See <a href="#Constrained_TTML_Feature_timing">timing</a></p>
+</section>
+</section>
+<section id='animation'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>animation</span></h2>
+<p></p>
+<section class='Usage_Scenario'>
+<h4>Usage Scenario</h4>
+<table style="width: 100%;">
+<tr>
+<th>TTML Feature</th>
+<th>Usage type</th>
+<th>Context of Usage</th>
+<th>Scope</th>
+<th>Constraint</th>
+</tr>
+<tr>
+<td>#animation</td>
+<td>Required with constraints</td>
+<td> </td>
+<td> </td>
+<td> </td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Presentation processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The set element MUST only animate the region or span element.</p>
+<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>
+<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>
+<section id='other_constraints'>
+<h2>Other Constraints</h2>
+<section id='Section1'>
+<h3>User Ease of Use Constraints</h3>
+<p>Constraints on reduced or simplified content are outside of this profile. External labeling could be used to support the user’s capability to select and use captions when available for:</p>
+<ul>
+<li>Reduced or simplified content for “easy reader” or</li>
+<li>Additional languages.</li>
+</ul>
+<p>For example, external labeling could be used to identify simplified or reduced, or other language supported content on a text track in HTML5. Such labeling may also be used to identify when large font size is applied to content. Requirements to support user preview and retention of default or user defined settings of selected text are outside of the scope of this profile. These requirements are relevant in the environment to which the captions are deployed.</p>
+</section>
+</section>
+<section id='Features_in_TTML_1.0_Used'>
+<h2>Features in [[!TTML10]] Used in This Profile</h2>
+<pre style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
+<span style="color: blue;"><?</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;">?></span>
+<span style="color: blue;"><?</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;">?></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">profile</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#parameter</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">features</span><span style="color: blue;"> </span><span style="color: red;">xml:base</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml/feature/</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span style="color: green;"> required (mandatory) feature support </span><span style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#animation<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-block<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-inline<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#color<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#content<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#core<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#display-region<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontFamily-generic<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontSize<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#fontStyle-italic<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#frameRate<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">optional</span>"<span style="color: blue;">></span>#frameRateMultiplier<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#layout<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#length-percentage<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#length-positive<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#lineBreak-uax14<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#presentation<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#profile<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#structure<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-content<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-region<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inline<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-referential<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textAlign-absolute<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textDecoration-under<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#textOutline-unblurred<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#time-offset<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#timing<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">required</span>"<span style="color: blue;">></span>#writingMode-horizontal-lr<span style="color: blue;"></</span><span style="color: #a31515;">feature</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">features</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">profile</span><span style="color: blue;">></span>
+
+
+</pre></section>
+<section id='error_handling'>
+<h2>Error handling</h2>
+<p>A presentation process may be presented with documents that contain features that are not understood. The table that follows outlines the behavior expected under specific conditions. The pre-requisite if the caption file is syntactically valid XML.</p>
+<table style="width: 100%;">
+<tr>
+<th>Feature</th>
+<th>Requirement</th>
+<th>Action</th>
+</tr>
+<tr>
+<td>Known</td>
+<td>Required</td>
+<td>MUST interpret</td>
+</tr>
+<tr>
+<td>Unknown</td>
+<td>Required</td>
+<td>MUST ignore</td>
+</tr>
+</table>
+</section>
+<section class='appendix' id='future_needs'>
+<h2>Future Needs for TTML next for Simple Delivery</h2>
+<section class='appendix' id='Section2'>
+<h3>Values for fontFamily support</h3>
+<p>The casual, cursive and smallCaps generic font families are expected to be considered for inclusion in a future version of TTML.</p>
+</section>
+</section>
+<section class='appendix'>
+<h2>Mapping of US Government Requirements to Constrained Profile Features</h2>
+<p>A key is provided that maps the US Government technical requirements for closed captions are mapped to the constrained features of this profile.</p>
+<table style="width: 100%;">
+<tr>
+<td>Presentation</td>
+<td>#animation (set)<br />
+#display-region<br />
+#extent-region<br />
+#frameRate<br />
+#frameRateMultiplier<br />
+#layout<br />
+#length-percentage<br />
+#length-positive<br />
+#lineBreak-uax14<br />
+#textAlign-absolute<br />
+#time-offset<br />
+#timing<br />
+#writingMode-lr</td>
+</tr>
+<tr>
+<td>Character color</td>
+<td>#animation<br />
+#color</td>
+</tr>
+<tr>
+<td>Character opacity</td>
+<td>#color</td>
+</tr>
+<tr>
+<td>Character size</td>
+<td>#fontSize<br />
+#fontStyle-italic<br />
+#textDecoration-underline</td>
+</tr>
+<tr>
+<td>Fonts</td>
+<td>#fontFamily-generic<br />
+#fontStyle-italic</td>
+</tr>
+<tr>
+<td>Caption background color and opacity</td>
+<td>#backgroundColor-*</td>
+</tr>
+<tr>
+<td>Character edge attributes</td>
+<td>#textOutline-unblurred</td>
+</tr>
+<tr>
+<td>Caption window color</td>
+<td>#backgroundColor-*</td>
+</tr>
+<tr>
+<td>Language</td>
+<td>#profile</td>
+</tr>
+<tr>
+<td>Preview setting and retention</td>
+<td>See <a href="#other_constraints">Other Constraints,</a></td>
+</tr>
+</table>
+<p>TTML Mandatory Features</p>
+<ul>
+<li>core</li>
+<li>content</li>
+<li>presentation</li>
+<li>structure</li>
+<li>time-offset</li>
+<li>timing</li>
+</ul>
+<p>TTML Features Required That Support Other Requirements</p>
+<ul>
+<li>styling</li>
+<li>styling-referential</li>
+<li>styling-inline</li>
+<li>styling-inheritance-content</li>
+<li>styling-inheritance-region</li>
+</ul>
+<p></p>
+</section>
+<section class='appendix'>
+<h2>Code points</h2>
+<p data-transform='constraint'>Presentation processors SHOULD provide font glyph coverage for all characters in the “ISO 8859-1 Latin-1” space and those for ANSI INCITS 4 when mapped onto Unicode code points (see table).</p>
+<p class="note">A presentation processor follows the semantics expected for use of Unicode code points as stated in this section. The exact glyph is presentation processor dependent.</p>
+<p data-transform='constraint'>Presentation processors SHOULD support the C0, G0, C1, and G1 code sets mapped onto Unicode as in the following table. See CEA 708, Section 7.1 including Table 11.</p>
+<table style="border-collapse: collapse;width:630pt; width:835px;border:0">
+<colgroup>
+<col style="width:38pt; width:51px" />
+<col span="16" style=" width:37pt; width:49px" /></colgroup>
+<tr style="height:15pt">
+<td class="style1" style="height:20px;width:51px"></td>
+<td class="style2" style="width:49px">_0</td>
+<td class="style2" style="width:49px">_1</td>
+<td class="style2" style="width:49px">_2</td>
+<td class="style2" style="width:49px">_3</td>
+<td class="style2" style="width:49px">_4</td>
+<td class="style2" style="width:49px">_5</td>
+<td class="style2" style="width:49px">_6</td>
+<td class="style2" style="width:49px">_7</td>
+<td class="style2" style="width:49px">_8</td>
+<td class="style2" style="width:49px">_9</td>
+<td class="style2" style="width:49px">_A</td>
+<td class="style2" style="width:49px">_B</td>
+<td class="style2" style="width:49px">_C</td>
+<td class="style2" style="width:49px">_D</td>
+<td class="style2" style="width:49px">_E</td>
+<td class="style2" style="width:49px">_F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"><span> </span></td>
+<td class="style4">!</td>
+<td class="style4">"</td>
+<td class="style4">#</td>
+<td class="style4">$</td>
+<td class="style4">%</td>
+<td class="style4">&</td>
+<td class="style4">'</td>
+<td class="style4">(</td>
+<td class="style4">)</td>
+<td class="style4">*</td>
+<td class="style4">+</td>
+<td class="style4">,</td>
+<td class="style4">-</td>
+<td class="style4">.</td>
+<td class="style4">/</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+002_</td>
+<td class="style2" style="width:49px">0020</td>
+<td class="style2" style="width:49px">0021</td>
+<td class="style2" style="width:49px">0022</td>
+<td class="style2" style="width:49px">0023</td>
+<td class="style2" style="width:49px">0024</td>
+<td class="style2" style="width:49px">0025</td>
+<td class="style2" style="width:49px">0026</td>
+<td class="style2" style="width:49px">0027</td>
+<td class="style2" style="width:49px">0028</td>
+<td class="style2" style="width:49px">0029</td>
+<td class="style2" style="width:49px">002A</td>
+<td class="style2" style="width:49px">002B</td>
+<td class="style2" style="width:49px">002C</td>
+<td class="style2" style="width:49px">002D</td>
+<td class="style2" style="width:49px">002E</td>
+<td class="style2" style="width:49px">002F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">0</td>
+<td class="style4">1</td>
+<td class="style4">2</td>
+<td class="style4">3</td>
+<td class="style4">4</td>
+<td class="style4">5</td>
+<td class="style4">6</td>
+<td class="style4">7</td>
+<td class="style4">8</td>
+<td class="style4">9</td>
+<td class="style4">:</td>
+<td class="style4">;</td>
+<td class="style4"><</td>
+<td class="style4">=</td>
+<td class="style4">></td>
+<td class="style4">?</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+003_</td>
+<td class="style2" style="width:49px">0030</td>
+<td class="style2" style="width:49px">0031</td>
+<td class="style2" style="width:49px">0032</td>
+<td class="style2" style="width:49px">0033</td>
+<td class="style2" style="width:49px">0034</td>
+<td class="style2" style="width:49px">0035</td>
+<td class="style2" style="width:49px">0036</td>
+<td class="style2" style="width:49px">0037</td>
+<td class="style2" style="width:49px">0038</td>
+<td class="style2" style="width:49px">0039</td>
+<td class="style2" style="width:49px">003A</td>
+<td class="style2" style="width:49px">003B</td>
+<td class="style2" style="width:49px">003C</td>
+<td class="style2" style="width:49px">003D</td>
+<td class="style2" style="width:49px">003E</td>
+<td class="style2" style="width:49px">003F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">@</td>
+<td class="style4">A</td>
+<td class="style4">B</td>
+<td class="style4">C</td>
+<td class="style4">D</td>
+<td class="style4">E</td>
+<td class="style4">F</td>
+<td class="style4">G</td>
+<td class="style4">H</td>
+<td class="style4">I</td>
+<td class="style4">J</td>
+<td class="style4">K</td>
+<td class="style4">L</td>
+<td class="style4">M</td>
+<td class="style4">N</td>
+<td class="style4">O</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+004_</td>
+<td class="style2" style="width:49px">0040</td>
+<td class="style2" style="width:49px">0041</td>
+<td class="style2" style="width:49px">0042</td>
+<td class="style2" style="width:49px">0043</td>
+<td class="style2" style="width:49px">0044</td>
+<td class="style2" style="width:49px">0045</td>
+<td class="style2" style="width:49px">0046</td>
+<td class="style2" style="width:49px">0047</td>
+<td class="style2" style="width:49px">0048</td>
+<td class="style2" style="width:49px">0049</td>
+<td class="style2" style="width:49px">004A</td>
+<td class="style2" style="width:49px">004B</td>
+<td class="style2" style="width:49px">004C</td>
+<td class="style2" style="width:49px">004D</td>
+<td class="style2" style="width:49px">004E</td>
+<td class="style2" style="width:49px">004F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">P</td>
+<td class="style4">Q</td>
+<td class="style4">R</td>
+<td class="style4">S</td>
+<td class="style4">T</td>
+<td class="style4">U</td>
+<td class="style4">V</td>
+<td class="style4">W</td>
+<td class="style4">X</td>
+<td class="style4">Y</td>
+<td class="style4">Z</td>
+<td class="style4">[</td>
+<td class="style4">\</td>
+<td class="style4">]</td>
+<td class="style4">^</td>
+<td class="style4">_</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+005_</td>
+<td class="style2" style="width:49px">0050</td>
+<td class="style2" style="width:49px">0051</td>
+<td class="style2" style="width:49px">0052</td>
+<td class="style2" style="width:49px">0053</td>
+<td class="style2" style="width:49px">0054</td>
+<td class="style2" style="width:49px">0055</td>
+<td class="style2" style="width:49px">0056</td>
+<td class="style2" style="width:49px">0057</td>
+<td class="style2" style="width:49px">0058</td>
+<td class="style2" style="width:49px">0059</td>
+<td class="style2" style="width:49px">005A</td>
+<td class="style2" style="width:49px">005B</td>
+<td class="style2" style="width:49px">005C</td>
+<td class="style2" style="width:49px">005D</td>
+<td class="style2" style="width:49px">005E</td>
+<td class="style2" style="width:49px">005F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">`</td>
+<td class="style4">a</td>
+<td class="style4">b</td>
+<td class="style4">c</td>
+<td class="style4">d</td>
+<td class="style4">e</td>
+<td class="style4">f</td>
+<td class="style4">g</td>
+<td class="style4">h</td>
+<td class="style4">i</td>
+<td class="style4">j</td>
+<td class="style4">k</td>
+<td class="style4">l</td>
+<td class="style4">m</td>
+<td class="style4">n</td>
+<td class="style4">o</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+006_</td>
+<td class="style2" style="width:49px">0060</td>
+<td class="style2" style="width:49px">0061</td>
+<td class="style2" style="width:49px">0062</td>
+<td class="style2" style="width:49px">0063</td>
+<td class="style2" style="width:49px">0064</td>
+<td class="style2" style="width:49px">0065</td>
+<td class="style2" style="width:49px">0066</td>
+<td class="style2" style="width:49px">0067</td>
+<td class="style2" style="width:49px">0068</td>
+<td class="style2" style="width:49px">0069</td>
+<td class="style2" style="width:49px">006A</td>
+<td class="style2" style="width:49px">006B</td>
+<td class="style2" style="width:49px">006C</td>
+<td class="style2" style="width:49px">006D</td>
+<td class="style2" style="width:49px">006E</td>
+<td class="style2" style="width:49px">006F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">p</td>
+<td class="style4">q</td>
+<td class="style4">r</td>
+<td class="style4">s</td>
+<td class="style4">t</td>
+<td class="style4">u</td>
+<td class="style4">v</td>
+<td class="style4">w</td>
+<td class="style4">x</td>
+<td class="style4">y</td>
+<td class="style4">z</td>
+<td class="style4">{</td>
+<td class="style4">|</td>
+<td class="style4">}</td>
+<td class="style4">~</td>
+<td class="style6" style="width:49px">♪</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+007_</td>
+<td class="style2" style="width:49px">0070</td>
+<td class="style2" style="width:49px">0071</td>
+<td class="style2" style="width:49px">0072</td>
+<td class="style2" style="width:49px">0073</td>
+<td class="style2" style="width:49px">0074</td>
+<td class="style2" style="width:49px">0075</td>
+<td class="style2" style="width:49px">0076</td>
+<td class="style2" style="width:49px">0077</td>
+<td class="style2" style="width:49px">0078</td>
+<td class="style2" style="width:49px">0079</td>
+<td class="style2" style="width:49px">007A</td>
+<td class="style2" style="width:49px">007B</td>
+<td class="style2" style="width:49px">007C</td>
+<td class="style2" style="width:49px">007D</td>
+<td class="style2" style="width:49px">007E</td>
+<td class="style2" style="width:49px">007F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4">¡</td>
+<td class="style4">¢</td>
+<td class="style4">£</td>
+<td class="style4">¤</td>
+<td class="style4">¥</td>
+<td class="style4">¦</td>
+<td class="style4">§</td>
+<td class="style4">¨</td>
+<td class="style4">©</td>
+<td class="style4">ª</td>
+<td class="style4">«</td>
+<td class="style4">¬</td>
+<td class="style4">­</td>
+<td class="style4">®</td>
+<td class="style4">¯</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00A_</td>
+<td class="style2" style="width:49px">00A0</td>
+<td class="style2" style="width:49px">00A1</td>
+<td class="style2" style="width:49px">00A2</td>
+<td class="style2" style="width:49px">00A3</td>
+<td class="style2" style="width:49px">00A4</td>
+<td class="style2" style="width:49px">00A5</td>
+<td class="style2" style="width:49px">00A6</td>
+<td class="style2" style="width:49px">00A7</td>
+<td class="style2" style="width:49px">00A8</td>
+<td class="style2" style="width:49px">00A9</td>
+<td class="style2" style="width:49px">00AA</td>
+<td class="style2" style="width:49px">00AB</td>
+<td class="style2" style="width:49px">00AC</td>
+<td class="style2" style="width:49px">00AD</td>
+<td class="style2" style="width:49px">00AE</td>
+<td class="style2" style="width:49px">00AF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">°</td>
+<td class="style4">±</td>
+<td class="style4">²</td>
+<td class="style4">³</td>
+<td class="style4">´</td>
+<td class="style4">µ</td>
+<td class="style4">¶</td>
+<td class="style4">·</td>
+<td class="style4">¸</td>
+<td class="style4">¹</td>
+<td class="style4">º</td>
+<td class="style4">»</td>
+<td class="style4">¼</td>
+<td class="style4">½</td>
+<td class="style4">¾</td>
+<td class="style4">¿</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00B_</td>
+<td class="style2" style="width:49px">00B0</td>
+<td class="style2" style="width:49px">00B1</td>
+<td class="style2" style="width:49px">00B2</td>
+<td class="style2" style="width:49px">00B3</td>
+<td class="style2" style="width:49px">00B4</td>
+<td class="style2" style="width:49px">00B5</td>
+<td class="style2" style="width:49px">00B6</td>
+<td class="style2" style="width:49px">00B7</td>
+<td class="style2" style="width:49px">00B8</td>
+<td class="style2" style="width:49px">00B9</td>
+<td class="style2" style="width:49px">00BA</td>
+<td class="style2" style="width:49px">00BB</td>
+<td class="style2" style="width:49px">00BC</td>
+<td class="style2" style="width:49px">00BD</td>
+<td class="style2" style="width:49px">00BE</td>
+<td class="style2" style="width:49px">00BF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">À</td>
+<td class="style4">Á</td>
+<td class="style4">Â</td>
+<td class="style4">Ã</td>
+<td class="style4">Ä</td>
+<td class="style4">Å</td>
+<td class="style4">Æ</td>
+<td class="style4">Ç</td>
+<td class="style4">È</td>
+<td class="style4">É</td>
+<td class="style4">Ê</td>
+<td class="style4">Ë</td>
+<td class="style4">Ì</td>
+<td class="style4">Í</td>
+<td class="style4">Î</td>
+<td class="style4">Ï</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00C_</td>
+<td class="style2" style="width:49px">00C0</td>
+<td class="style2" style="width:49px">00C1</td>
+<td class="style2" style="width:49px">00C2</td>
+<td class="style2" style="width:49px">00C3</td>
+<td class="style2" style="width:49px">00C4</td>
+<td class="style2" style="width:49px">00C5</td>
+<td class="style2" style="width:49px">00C6</td>
+<td class="style2" style="width:49px">00C7</td>
+<td class="style2" style="width:49px">00C8</td>
+<td class="style2" style="width:49px">00C9</td>
+<td class="style2" style="width:49px">00CA</td>
+<td class="style2" style="width:49px">00CB</td>
+<td class="style2" style="width:49px">00CC</td>
+<td class="style2" style="width:49px">00CD</td>
+<td class="style2" style="width:49px">00CE</td>
+<td class="style2" style="width:49px">00CF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">Ð</td>
+<td class="style4">Ñ</td>
+<td class="style4">Ò</td>
+<td class="style4">Ó</td>
+<td class="style4">Ô</td>
+<td class="style4">Õ</td>
+<td class="style4">Ö</td>
+<td class="style4">×</td>
+<td class="style4">Ø</td>
+<td class="style4">Ù</td>
+<td class="style4">Ú</td>
+<td class="style4">Û</td>
+<td class="style4">Ü</td>
+<td class="style4">Ý</td>
+<td class="style4">Þ</td>
+<td class="style4">ß</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00D_</td>
+<td class="style2" style="width:49px">00D0</td>
+<td class="style2" style="width:49px">00D1</td>
+<td class="style2" style="width:49px">00D2</td>
+<td class="style2" style="width:49px">00D3</td>
+<td class="style2" style="width:49px">00D4</td>
+<td class="style2" style="width:49px">00D5</td>
+<td class="style2" style="width:49px">00D6</td>
+<td class="style2" style="width:49px">00D7</td>
+<td class="style2" style="width:49px">00D8</td>
+<td class="style2" style="width:49px">00D9</td>
+<td class="style2" style="width:49px">00DA</td>
+<td class="style2" style="width:49px">00DB</td>
+<td class="style2" style="width:49px">00DC</td>
+<td class="style2" style="width:49px">00DD</td>
+<td class="style2" style="width:49px">00DE</td>
+<td class="style2" style="width:49px">00DF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">à</td>
+<td class="style4">á</td>
+<td class="style4">â</td>
+<td class="style4">ã</td>
+<td class="style4">ä</td>
+<td class="style4">å</td>
+<td class="style4">æ</td>
+<td class="style4">ç</td>
+<td class="style4">è</td>
+<td class="style4">é</td>
+<td class="style4">ê</td>
+<td class="style4">ë</td>
+<td class="style4">ì</td>
+<td class="style4">í</td>
+<td class="style4">î</td>
+<td class="style4">ï</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00E_</td>
+<td class="style2" style="width:49px">00E0</td>
+<td class="style2" style="width:49px">00E1</td>
+<td class="style2" style="width:49px">00E2</td>
+<td class="style2" style="width:49px">00E3</td>
+<td class="style2" style="width:49px">00E4</td>
+<td class="style2" style="width:49px">00E5</td>
+<td class="style2" style="width:49px">00E6</td>
+<td class="style2" style="width:49px">00E7</td>
+<td class="style2" style="width:49px">00E8</td>
+<td class="style2" style="width:49px">00E9</td>
+<td class="style2" style="width:49px">00EA</td>
+<td class="style2" style="width:49px">00EB</td>
+<td class="style2" style="width:49px">00EC</td>
+<td class="style2" style="width:49px">00ED</td>
+<td class="style2" style="width:49px">00EE</td>
+<td class="style2" style="width:49px">00EF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">ð</td>
+<td class="style4">ñ</td>
+<td class="style4">ò</td>
+<td class="style4">ó</td>
+<td class="style4">ô</td>
+<td class="style4">õ</td>
+<td class="style4">ö</td>
+<td class="style4">÷</td>
+<td class="style4">ø</td>
+<td class="style4">ù</td>
+<td class="style4">ú</td>
+<td class="style4">û</td>
+<td class="style4">ü</td>
+<td class="style4">ý</td>
+<td class="style4">þ</td>
+<td class="style4">ÿ</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+00F_</td>
+<td class="style2" style="width:49px">00F0</td>
+<td class="style2" style="width:49px">00F1</td>
+<td class="style2" style="width:49px">00F2</td>
+<td class="style2" style="width:49px">00F3</td>
+<td class="style2" style="width:49px">00F4</td>
+<td class="style2" style="width:49px">00F5</td>
+<td class="style2" style="width:49px">00F6</td>
+<td class="style2" style="width:49px">00F7</td>
+<td class="style2" style="width:49px">00F8</td>
+<td class="style2" style="width:49px">00F9</td>
+<td class="style2" style="width:49px">00FA</td>
+<td class="style2" style="width:49px">00FB</td>
+<td class="style2" style="width:49px">00FC</td>
+<td class="style2" style="width:49px">00FD</td>
+<td class="style2" style="width:49px">00FE</td>
+<td class="style2" style="width:49px">00FF</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">Œ</td>
+<td class="style4">œ</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+015_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">0152</td>
+<td class="style2" style="width:49px">0153</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">Š</td>
+<td class="style4">š</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+016_</td>
+<td class="style2" style="width:49px">0160</td>
+<td class="style2" style="width:49px">0161</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">Ÿ</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">Ž</td>
+<td class="style4">ž</td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+017_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">0178</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">017D</td>
+<td class="style2" style="width:49px">017E</td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">ƒ</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+019_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">0192</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">˜</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+02D_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">02DC</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4">‐</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">―</td>
+<td class="style4">‖</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+201_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2010</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2015</td>
+<td class="style2" style="width:49px">2016</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">‧</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+202_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2027</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4">‰</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">›</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+203_</td>
+<td class="style2" style="width:49px">2030</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">203A</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4">₡</td>
+<td class="style4">₢</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">€</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+20A_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">20A1</td>
+<td class="style2" style="width:49px">20A2</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">20AC</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">₳</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+20B_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">20B3</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">°C</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">°F</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+210_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2103</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2109</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">⅓</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">⅟</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+215_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2153</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">215F</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4">□</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+25A_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">25A1</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style3" style="height:20px;width:51px"></td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4">♩</td>
+<td class="style4"> </td>
+<td class="style4">♫</td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+<td class="style4"> </td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="height:20px;width:51px">U+266_</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">2669</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px">266B</td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+<td class="style2" style="width:49px"></td>
+</tr>
+</table>
+<p data-transform='constraint'>Presentation processors MAY support the extended G2 characters sets that map onto Unicode code points (See table).</p>
+Presentation processors may also provide Glyph coverage for additional Unicode code points
+<section class='color_values'>
+<h2>Color values</h2>
+<p>For color values of the form #rrggbbaa, presentation processors MUST support combinations where the rr, gg, bb components may be either 00 or ff; and the aa component may be 00, 54, A8 or FF. e.g: #00ffff54. Additionally presentation processors SHOULD support values for rr, gg, and bb of 54 or A8, and MAY support all possible values between 00 to ff.</p>
+<table>
+<tr>
+<th>Color</th>
+<th>Value</th>
+</tr>
+<tr>
+<td>Black</td>
+<td>#000000ff</td>
+</tr>
+<tr>
+<td>White</td>
+<td>#fffffffff</td>
+</tr>
+<tr>
+<td>Red</td>
+<td>#ff0000ff</td>
+</tr>
+<tr>
+<td>Green</td>
+<td>#00ff00ff</td>
+</tr>
+<tr>
+<td>Blue</td>
+<td>#0000ffff</td>
+</tr>
+<tr>
+<td>Yellow</td>
+<td>#ffff00ff</td>
+</tr>
+<tr>
+<td>Magenta</td>
+<td>#ff00ffff</td>
+</tr>
+<tr>
+<td>Cyan</td>
+<td>#00ffffff</td>
+</tr>
+</table>
+<p></p>
+</section>
+<section class='appendix'>
+<h2>Acknowledgements</h2>
+<p>Many thanks to Robin Berjon for providing the respec.js tool used to format this document.</p>
+</section>
+</section>
+</body>
+</html>