Made it valid
authorPhilippe Le Hegaret <plh@w3.org>
Fri, 24 Aug 2012 13:41:37 -0400
changeset 266 05e35b09a44e
parent 265 9b365f38996b
child 267 ba7393dfe522
Made it valid
ttml10-sdp/Overview.html
--- a/ttml10-sdp/Overview.html	Thu Aug 23 17:05:47 2012 +0800
+++ b/ttml10-sdp/Overview.html	Fri Aug 24 13:41:37 2012 -0400
@@ -1,5503 +1,2686 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Simple Delivery Profile for Closed Captions</title>
-    <meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
-    <!-- 
-      === NOTA BENE ===
-      For the three scripts below, if your spec resides on dev.w3 you can check them
-      out in the same tree and use relative links so that they'll work offline,
-     -->
-    <script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
-    <script class='remove'>
-      var 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",
-
-          // if your specification has a subtitle that goes below the main
-          // formal title, define it here
-          subtitle   :  "A profile of TTML for internet delivery",
-
-          // 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/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
-          // it is recommended that the respec.css stylesheet be kept
-          extraCSS:             ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css"],
-
-          // 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/" },
-         ],
-
-          // 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://w3.org/ttwg",
-          
-          // 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:  "",
-      };
-    </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 type="text/javascript" id='Local transforms'>
-        function term(doc, content) {
-            // perform transformations to make it render and prettier
-            return '<span class="ttmlTerm">' + doc._esc(content) + '</span>';
-        }
-        function template(doc, content) {
-            // perform transformations to make it render and prettier
-            return '<div class="template">' + content + '</div>';
-        }
-        var constraints = 0;
-        function constraint(doc, content) {
-            // perform transformations to make it render and prettier
-            var prefix = constraints < 9 ? "R000" : "R00";
-            return "<div class=numbered title=" + prefix + (++constraints) + ">" + content + "</div>";
-        }
-        var examples = 0;
-        function example(doc, content) {
-            // perform transformations to make it render and prettier
-            var prefix = examples < 9 ? "E000" : "E00";
-            return "<div class=numbered title=" + prefix + (++examples) + ">" + content + "</div>";
-        }
-    </script>
-</head>
-<body>
-    <section id='abstract'>
-        <p>
-            TTML 1.0 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 presentation
-            processor using the player constraints for such an online delivery profile.
-            <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 TTML
-        1.0 to support delivery of closed captions for video content. Other profiles based
-        on TTML 1.0 may target other types of subtitles such as on-screen text or graphics.
-        This interoperability profile is a proper subset of TTML 1.0 plus features required
-        to support US Government closed captioning requirements for online presentation.</p>
-    </section>
-    <section id='sotd'>
-        <p>
-            This document is a draft member contribution.</p>
-        <p>
-            This document applies 3 guiding principles for online delivery of closed captions.
-            <ul>
-                <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>
-            </ul>
-    </section>
-    <section id='conformance'>
-        <h3>
-            Simple Delivery Profile for Closed Captions</h3>
-        <p>
-            This profile identifies the content and player constraints for closed captioning
-            using TTML. To conform to this profile, a presentation engine MUST:
-            <ul>
-                <li>Satisfy the requirements specified by Section 3.2.1 Generic Processor Conformance
-                    [TTML] that are required to implement:</li>
-                <ul>
-                    <li>The mandatory TTML 1.0 features referenced in Table E-3, Section D.2 Feature Support
-                        <li>
-                    Supports the semantics defined for those features in the context of this profile.
-                </ul>
-                <li>Satisfy all requirements specified in Sections 4-8 and any references from those
-                    sections in this document. </li>
-            </ul>
-            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 TTML 1.0. The semantics defined in TTML 1.0 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 TTML 1.0 but such behavior is not defined here.
-        </p>
-    </section>
-    <section id='terms'>
-        <h2>
-            Terms and Definitions</h2>
-        <p>
-            The terms and definitions in TTML 1.0 serve as the basis for this interoperability
-            profile. Terms found here are in addition to those found in TTML 1.0.
-        </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 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 TTML 1.0 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>
-                                &nbsp;
-                            </td>
-                            <td>
-                                &nbsp;
-                            </td>
-                            <td>
-                                &nbsp;
-                            </td>
-                            <td>
-                                &nbsp;
-                            </td>
-                            <td>
-                                &nbsp;
-                            </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>
-            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>
-        <pre class="example" style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">s1</span>&quot;<span style="color: blue;">&gt;</span>A<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">s3</span>&quot;<span style="color: blue;">&gt;</span>B<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">s1</span>&quot;<span style="color: blue;">&gt;</span>C<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</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,
-            no element shall lexically precede another 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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:
-                    <p data-transform='constraint'>
-                        A document MUST contain only the following elements:
-                        <ul>
-                            <li>tt </i>
-                                <li>head </li>
-                                <li>body </li>
-                                <li>div </li>
-                                <li>p </i>
-                                    <li>span </i>
-                                        <li>br </li>
-                                        <li>set </li>
-                                        <li>layout </i>
-                                            <li>styling </li>
-                                            <li>region </li>
-                                            <li>style </li>
-                        </ul>
-                    </p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p data-transform='constraint'>
-                    Processors MUST support the capability to present documents referencing this profile
-                    using the following URI: <dfn>http://www.w3.org/TR/profile/simple-delivery</dfn>
-                </p>
-                <p>
-                    NOTE: See also <a href="#conformance">Conformance</a></p>
-                <p>
-                    NOTE: The use attribute could indicate the geographical region for which the profile
-                    is used. For example, specific styling capabilities could be used in a particular
-                    geographical region. See also <a href="#other_constraints">Other Constraints</a>.
-                </p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:</p>
-                <p data-transform='constraint'>
-                    The backgroundColor MUST be expressed in #rrggbbaa format exclusively using the
-                    <dfn>&lt;hexdigit></dfn> style value expression.
-                    <p data-transform='constraint'>
-                        The backgroundColor MUST support the colors outlined in <a href="#annexe_color">Color
-                            Values</a>.
-                        <p>
-                            Note: These colors are identical to those identified in the CEA708-D, Section 8.8
-                            [RBG resolution of 4 bits for each primary (03)].</p>
-                        <p data-transform='constraint'>
-                            The alpha component of backgroundColor MUST support the opacity values outlined
-                            in <a href="#annexe_color">Color Values</a> .
-                            <p data-transform='constraint'>
-                                The alpha component of backgroundColor for a region MUST be 00.
-                                <p data-transform='constraint'>
-                                    The player MUST allow the user to specify a backgroundColor for p and span elements
-                                    based on a minimum of an 8-color palette of white, black, red, green, blue, yellow,
-                                    magenta, and cyan (See Minimum Color List in <a href="#annexe_color">Color Values</a>
-                                    ).
-                                    <p data-transform='constraint'>
-                                        The player 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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:</p>
-                <p data-transform='constraint'>
-                    The color MUST be expressed in #rrggbbaa format exclusively using the <dfn>&lt;hexdigit></dfn>
-                    style value expression.</p>
-                    <p data-transform='constraint'>
-                        The color MUST support the colors outlined in <a href="#annexe_color">Color Values</a>.
-                    </p>
-                    <p>
-                        Note: These colors are identical to those identified in the CEA708-D, Section 8.8
-                        [RBG resolution of 4 bits for each primary (03)].</p>
-                </p>
-                <p data-transform='constraint'>
-                    The alpha component of color MUST support the opacity values outlined in <a href="#annexe_color">
-                        Color Values</a> .
-                </p>
-                <p data-transform='constraint'>
-                    The player MUST allow the user to specify a color for p and span elements based
-                    on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta,
-                    and cyan (See Minimum Color List in <a href="#annexe_color">Color Values</a> ).
-                </p>
-                <p data-transform='constraint'>
-                    The player MUST allow the user to specify a color for p and span elements to allow
-                    for semi-transparent and transparent opacities.
-                </p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    None
-                </p>
-            </section>
-        </section>
-        <section id='Constrained_TTML_Feature_display_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 with constraints
-                        </td>
-                        <td>
-                            region<br />
-                            root
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p data-transform='constraint'>
-                    Processors MUST support the capability to present documents in the following common
-                    forms:
-                    <ul>
-                        <li>Pop-up</li>
-                        <li>Roll-up</li>
-                        <li>Paint-on</li>
-                    </ul>
-                    Examples are provided of each style to aid in understanding the common forms.
-                </p>
-                <section>
-                    <p data-transform='example'>
-                        Pop-up style</p>
-                    <pre class="example" style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
- 
-    <span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span
-        style="color: blue;">&nbsp;</span><span style="color: red;">xml:lang</span><span
-            style="color: blue;">=</span>&quot;<span style="color: blue;">en-us</span>&quot;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">http://www.w3.org/ns/ttml</span>&quot;<span style="color: blue;">&nbsp;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: red;">xmlns:s</span><span
-    style="color: blue;">=</span>&#39;<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>&#39;<span
-        style="color: blue;">&nbsp;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: red;">xmlns:p</span><span
-    style="color: blue;">=</span>&#39;<span style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>&#39;<span
-        style="color: blue;">&nbsp;&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">head</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p:profile</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">use</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">http://www.w3.org/ns/ttml/profile/online-delivery</span>&quot;<span
-            style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">styling</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--</span><span
-    style="color: green;">&nbsp;A&nbsp;typical&nbsp;transparent&nbsp;region&nbsp;with&nbsp;centered&nbsp;text&nbsp;that&nbsp;has&nbsp;an&nbsp;outline&nbsp;</span><span
-        style="color: blue;">--&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">style</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">bottomMidStyle</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">s:textAlign</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">center</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:textOutline</span><span style="color: blue;">=</span>&quot;<span
-                        style="color: blue;">#000000ff&nbsp;5%</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                            style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>&quot;<span
-                                style="color: blue;">#00000000</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                    style="color: red;">s:color</span><span style="color: blue;">=</span>&quot;<span
-                                        style="color: blue;">#ffffffff</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                            style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                                                style="color: blue;">20%&nbsp;58%</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                                                    style="color: red;">s:extent</span><span style="color: blue;">=</span>&#39;<span
-                                                        style="color: blue;">60%&nbsp;18%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">styling</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">layout</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--</span><span
-    style="color: green;">&nbsp;typical&nbsp;&#39;pop&nbsp;on&#39;&nbsp;type&nbsp;region&nbsp;</span><span
-        style="color: blue;">--&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">region</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">bottomMid</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span style="color: blue;">bottomMidStyle</span>&quot;<span
-                style="color: blue;">&nbsp;/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">layout</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">head</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">body</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">div</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">defaultFont</span>&quot;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">bottomMid</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:00.101</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                    style="color: blue;">00:00:03.000</span>&#39;<span style="color: blue;">&gt;</span>&nbsp;This&nbsp;is&nbsp;a&nbsp;pop&nbsp;on&nbsp;caption.&nbsp;<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">div</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">body</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span
-    style="color: blue;">&gt;</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: 13; color: black; background: white;">
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">bottomMidStyle</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">s:textAlign</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">center</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:textOutline</span><span style="color: blue;">=</span>&quot;<span
-                        style="color: blue;">black&nbsp;1px</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                            style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>&quot;<span
-                                style="color: blue;">transparent</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                    style="color: red;">s:color</span><span style="color: blue;">=</span>&quot;<span
-                                        style="color: blue;">white</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                            style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                                                style="color: blue;">20%&nbsp;58%</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                                                    style="color: red;">s:extent</span><span style="color: blue;">=</span>&#39;<span
-                                                        style="color: blue;">60%&nbsp;18%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">topMidStyle</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">s:textAlign</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">center</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:textOutline</span><span style="color: blue;">=</span>&quot;<span
-                        style="color: blue;">black&nbsp;1px</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                            style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>&quot;<span
-                                style="color: blue;">transparent</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                    style="color: red;">s:color</span><span style="color: blue;">=</span>&quot;<span
-                                        style="color: blue;">white</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                                            style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                                                style="color: blue;">20%&nbsp;10%</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                                                    style="color: red;">s:extent</span><span style="color: blue;">=</span>&#39;<span
-                                                        style="color: blue;">60%&nbsp;18%</span>&#39;<span style="color: blue;">/&gt;</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: 13; color: black; background: white;">
-<span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">version</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">1.0</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">encoding</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">utf-8</span>&quot;<span style="color: blue;">?&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:lang</span><span
-        style="color: blue;">=</span>&quot;<span style="color: blue;">en-us</span>&quot;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">http://www.w3.org/ns/ttml</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">xmlns:s</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>&#39;<span
-                        style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">head</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">styling</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">style</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">s1</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">s:display</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">none</span>&quot;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:extent</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">40%&nbsp;18%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">styling</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">layout</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">region</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">r1</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span style="color: blue;">s1</span>&quot;<span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.000</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.000</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">10%&nbsp;10%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">10%&nbsp;10%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span
-    style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">region</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">r2</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span style="color: blue;">s2</span>&quot;<span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.330</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:10.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.330</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:10.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">50%&nbsp;10%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">50%&nbsp;10%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span
-    style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">region</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">r3</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span style="color: blue;">s3</span>&quot;<span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">10%&nbsp;78%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">10%&nbsp;78%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span
-    style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">region</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">id</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">r4</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">style</span><span style="color: blue;">=</span>&quot;<span style="color: blue;">s4</span>&quot;<span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.000</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:11.330</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.000</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:11.330</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">50%&nbsp;78%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:display</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">auto</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span
-    style="color: #a31515;">set</span><span style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span
-        style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.670</span>&#39;<span
-            style="color: blue;">&nbsp;</span><span style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span
-                style="color: blue;">00:00:12.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-                    style="color: red;">s:origin</span><span style="color: blue;">=</span>&#39;<span
-                        style="color: blue;">50%&nbsp;78%</span>&#39;<span style="color: blue;">/&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span
-    style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">layout</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">head</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">body</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">div</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--</span><span
-    style="color: green;">four&nbsp;speakers&nbsp;count&nbsp;off,&nbsp;and&nbsp;then&nbsp;all&nbsp;call&nbsp;&#39;Jump&#39;&nbsp;together&nbsp;</span><span
-        style="color: blue;">--&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:10.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.330</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r1</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>One<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:10.330</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:10.670</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r2</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>Two<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:10.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r3</span>&quot;<span style="color: blue;">&gt;</span>Three<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:11.330</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r4</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>Four<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:11.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:12.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r1</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>Jump!<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:11.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:12.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r2</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>Jump!<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:11.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:12.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r3</span>&quot;<span style="color: blue;">&gt;</span>Jump!<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:11.670</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">end</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:12.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&quot;<span
-                    style="color: blue;">r4</span>&quot;<span style="color: blue;">&nbsp;&gt;</span>Jump!<span
-                        style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">div</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">body</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span
-    style="color: blue;">&gt;</span></pre>
-                </section>
-                <section>
-                    <p data-transform='example'>
-                        Rollup 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: 13; color: black; background: white;">
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">rollup</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:13.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">dur</span><span style="color: blue;">=</span>&#39;<span
-                    style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:01.000</span>&#39;<span style="color: blue;">&gt;</span>rollup<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:02.000</span>&#39;<span style="color: blue;">&gt;</span>style<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:03.000</span>&#39;<span style="color: blue;">&gt;</span>caption<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:04.000</span>&#39;<span style="color: blue;">&gt;</span>support<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">rollup</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:17.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">dur</span><span style="color: blue;">=</span>&#39;<span
-                    style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:01.000</span>&#39;<span style="color: blue;">&gt;</span>with<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:02.000</span>&#39;<span style="color: blue;">&gt;</span>word<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:03.000</span>&#39;<span style="color: blue;">&gt;</span>at<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:04.000</span>&#39;<span style="color: blue;">&gt;</span>a<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:05.000</span>&#39;<span style="color: blue;">&gt;</span>time<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:06.000</span>&#39;<span style="color: blue;">&gt;</span>temporal<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">rollup</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:23.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">dur</span><span style="color: blue;">=</span>&#39;<span
-                    style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:01.000</span>&#39;<span style="color: blue;">&gt;</span>placement<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:02.000</span>&#39;<span style="color: blue;">&gt;</span>this<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:03.000</span>&#39;<span style="color: blue;">&gt;</span>could<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:04.000</span>&#39;<span style="color: blue;">&gt;</span>go<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">region</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">rollup</span>&#39;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span style="color: blue;">00:00:27.000</span>&#39;<span
-                style="color: blue;">&nbsp;</span><span style="color: red;">dur</span><span style="color: blue;">=</span>&#39;<span
-                    style="color: blue;">00:00:11.000</span>&#39;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:01.000</span>&#39;<span style="color: blue;">&gt;</span>on<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:02.000</span>&#39;<span style="color: blue;">&gt;</span>all<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">span</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">begin</span><span style="color: blue;">=</span>&#39;<span
-        style="color: blue;">00:00:03.000</span>&#39;<span style="color: blue;">&gt;</span>day<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span
-    style="color: blue;">&gt;</span></pre>
-
-   <p> Note: As shown in the rollup example, a function of time for a k line rollup 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>   
-             </section>
-            </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>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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:
-                    <ul>
-                        <li>Default </li>
-                        <li>monospaceSerif </li>
-                        <li>proportionalSerif </li>
-                        <li>monospaceSansSerif </li>
-                        <li>proportionalSansSerif </li>
-                        <li>Casual </li>
-                        <li>Cursive </li>
-                        <li>Smallcap</li>
-                    </ul>
-                 </p>
-                <p>
-                    Note: fontStyle strings(s) not bound to generic classes in TTML 1.0, such as casual,
-                    cursive and smallcap styles, may be used. These would be interpreted as local font
-                    names, if not found then the default style would be used.
-                    <p data-transform='constraint'>
-                        A player MUST map the generic font names to fonts as follows</p>
-                    <table>
-                        <tr>
-                            <th>
-                                Style
-                            </th>
-                            <th>
-                                Style Name
-                            </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>
-                                    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>
-                                Smallcap
-                            </td>
-                            <td>
-                                Small types
-                            </td>
-                            <td>
-                                Similar to Engravers Gothic
-                            </td>
-                        </tr>
-                    </table>
-                    <p data-transform='constraint'>
-                        The player MUST allow the user to specify a generic fontFamily for the document
-                        using the fontStyle(s) shown in the preceding table.</p>
-                    <p data-transform='constraint'>
-                        The player MUST allow the user to specify character edge attributes and types for
-                        the generic fontFamily names for the fontStyle(s) shown in the preceding table.</p>
-                    <p>
-                        Note: Player and Unicode code point support is in <a href="#code_points">Code Point
-                            support</a></p>
-            </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>
-                            &nbsp;
-                         </td>
-                        <td>
-                            span<br>
-                            div (root)
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:</p>
-                <p data-transform='constraint'>
-                    document MUST only specify tts:fontSize(s) using a value of 50, 75%, 100%, 150%
-                    or 200%.</p>
-                <p>
-                    Note: Use of a fontSize of less than 75% (i.e. 50%) could result in unreadable content
-                    for a user.</p>
-                <p>
-                    Note: Specifying a fontSize is used for a document could allow the user to select
-                    a preferred fontSize.</p>
-                <section>
-                    <p data-transform='example'>
-                        Example to show how to specify an initial font.</p>
-                    <!-- div data-include=example3.xml'></div -->
-                </section>
-                <p data-transform='constraint'>
-                    The default font height of the player MUST be 5% of the root container height</p>
-                <p>
-                    Note: This is equivalent to one cell using the default grid. A player is however
-                    not required to support the grid metric.</p>
-            </section>
-        </section>
-        <section id='Constrained_TTML_Feature_display_display_fontStyle_italics'>
-            <h2>
-                Use of Constrained TTML Feature <span data-transform='term'>fontStyle-italics</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-italics
-                        </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>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:</p>
-                <p data-transform='constraint'>
-                    Processors MUST support the capability to provide presentation semantic support
-                    for values of the tts:fontStyle attribute as defined for the fontFamily-generic
-                    feature.
-                </p>
-                <p>
-                    Note: Various fontStyle(s) unspecified in TTML 1.0, such as casual, cursive and
-                    smallcap styles, may be used. Players that recognize the string as a particular
-                    font style could use a comparable style.</p>
-                <p>
-                    Note: A default fontStyle - white, mid-weight san serif with an initial font height
-                    of 5% of the video height and with a black outline using textOutline-unblurred of
-                    10% of the fontSize - is suggested.
-                </p>
-                <p data-transform='constraint'>
-                    The capability MUST exist for the user to specify the italic style for the fontStyle(s)
-                    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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    None</p>
-                <section>
-                    <p data-transform='example'>
-                        Note: Using 10% for the tts:extent of the root container region (for example, of
-                        an 720x640 region), the equivalence to pixel units (px) could be obtained. For example,
-                        using this snippet:</p>
-                         <pre class='example' style="font-family: Segoe UI; font-size: 13; color: black; background: white;"><span 
-        style="color:blue;">&lt;</span><span style="color:#a31515;">style</span><span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">xml:id</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">topLeftStyle</span>&quot;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:fontSize</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">150%</span>&quot;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:textAlign</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">left</span>&quot;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:backgroundColor</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">#ffffffff</span>&quot;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:color</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">#ff0000ff</span>&quot;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:origin</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">10%&nbsp;10%</span>&#39;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">s:extent</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">40%&nbsp;18%</span>&#39;<span 
-        style="color:blue;">/&gt;</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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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>
-                        Note: The constraints in this section result in a document that contains style blocks
-                        that are complete and self-contained.</p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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 fontStyle constraints identified
-                    in this profile.</p>
-                <p data-transform='constraint'>
-                    The capability MUST exist for the user to specify the underline style for the fontStyle(s)
-                    identified in this profile.</p>
-                <p>
-                    Note: See also <a href="#Constrained_TTML_Feature_fontStyle">tts:fontStyle attribute</a>.</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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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%.</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>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </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>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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 a region at any given time.</p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    Processors MUST support the capability to present documents where the following
-                    constraints apply:</p>
-                <p data-transform='constraint'>
-                    At most 32 characters MUST be present in any displayed text line.
-                </p>
-                <p data-transform='constraint'>
-                    At most one p element MUST be selected into a region at a time.
-                </p>
-                <p>
-                    NOTE: The fontStyle, fontSize and the characteristics of region impact how selected text
-                    flows into a region (i.e. selected text may flow outside of the region such as on
-                    a mobile device).
-                </p>
-                <p>
-                    NOTE: Constraining one p element to a region logically places content from two different
-                    speakers to different region(s).</p>
-                <p>
-                    NOTE: When a document author wants to construct a single phrase from a speaker with
-                    more than one line in a region, the br within a p element can be used. This construction
-                    adheres to the constraints in this section. For example for one speaker with more
-                    than one line:
-                </p>
-<pre class=example style="font-family: Segoe UI; font-size: 13; color: black; background: white;"><span 
-        style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span 
-        style="color:blue;">&gt;</span>&nbsp;I&nbsp;always&nbsp;get&nbsp;the&nbsp;fuzzy&nbsp;end<span 
-        style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span 
-        style="color:blue;">/&gt;</span>of&nbsp;the&nbsp;lollipop<span style="color:blue;">&lt;/</span><span 
-        style="color:#a31515;">p</span><span style="color:blue;">&gt;</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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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'>
-                    Durations (dur) SHALL only be used on the span element.
-                </p>
-                <p>
-                    Note: The use of dur on a span supports rollup style content. For content other
-                    than rollup, the default behavior is to remain present until the end of the container.
-                    Therefore, durations are not needed on the span element.
-                </p>
-                 <p data-transform='constraint'>
-                     For timing in hh:mm:ss.ms, the following format MUST be used:
-                     <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>
-                 </p>
-               
-<pre class='example' style="font-family: Segoe UI; font-size: 13; color: black; background: white;"><span 
-        style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">begin</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">00:00:01.000</span>&#39;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">end</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">00:00:11.123</span>&#39;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">region</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">r1</span>&quot;<span 
-        style="color:blue;">&nbsp;&gt;</span>Test<span style="color:blue;">&lt;/</span><span 
-        style="color:#a31515;">p</span><span style="color:blue;">&gt;</span>
-</pre>  
-               <p data-transform='constraint'>
-                     For timing in hh:mm:ss.ms, the following format MUST be used:
-                     <ul>
-                         <li>Exactly 2 digits SHALL 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>
-                
- <pre class='example' style="font-family: Segoe UI; font-size: 13; color: black; background: white;"><span 
-        style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">begin</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">00:00:01:00</span>&#39;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">end</span><span 
-        style="color:blue;">=</span>&#39;<span style="color:blue;">00:00:11:22</span>&#39;<span 
-        style="color:blue;">&nbsp;</span><span style="color:red;">region</span><span 
-        style="color:blue;">=</span>&quot;<span style="color:blue;">r1</span>&quot;<span 
-        style="color:blue;">&nbsp;&gt;</span>Test<span style="color:blue;">&lt;/</span><span 
-        style="color:#a31515;">p</span><span style="color:blue;">&gt;</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<br />
-                            #time-offset-with-frames
-                        </td>
-                        <td>
-                            Required
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    None</p>
-                <p>
-                    Note: Since the ttp:timebase attribute is outside of this profile, the implicit
-                    timebase used here is media as specified in TTML 1.0.</p>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </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>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                        <td>
-                            &nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </section>
-            <section class='Core_Constraints'>
-                <h4>
-                    Constraints</h4>
-                <p>
-                    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>
-                <p>
-                    Note: Animation is constrained to the scenarios where the region needs to be moved
-                    – i.e. when the “snap” display effect is required.</p>
-                <p>
-                    Note: Animation is constrained to the scenarios to change the foreground color of
-                    content when flashing text is required.</p>
-            </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:
-                <ul>
-                    <li>Reduced or simplified content for “easy reader” or</li>
-                    <li>
-                    Additional languages.
-                </ul>
-                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 TTML 1.0 Used in This Profile</h2>
-        <pre style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
-<span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">version</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">1.0</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">encoding</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">utf-8</span>&quot;<span style="color: blue;">?&gt;</span>
-<span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">version</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">1.0</span>&quot;<span style="color: blue;">&nbsp;</span><span
-            style="color: red;">encoding</span><span style="color: blue;">=</span>&quot;<span
-                style="color: blue;">utf-8</span>&quot;<span style="color: blue;">?&gt;</span>
-<span style="color: blue;">&lt;</span><span style="color: #a31515;">profile</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>&quot;<span style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">features</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">xml:base</span><span
-        style="color: blue;">=</span>&quot;<span style="color: blue;">http://www.w3.org/ns/ttml/feature/</span>&quot;<span
-            style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--</span><span style="color: green;">&nbsp;required&nbsp;(mandatory)&nbsp;feature&nbsp;support&nbsp;</span><span
-    style="color: blue;">--&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#animation<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#backgroundColor-block<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#backgroundColor-inline<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#color<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#content<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#core<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#display-region<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#fontFamily-generic<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#fontSize<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#fontStyle-italic<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#frameRate<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">optional</span>&quot;<span style="color: blue;">&gt;</span>#frameRateMultiplier<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#layout<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#length-percentage<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#length-positive<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#lineBreak-uax14<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#presentation<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#profile<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#structure<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#styling<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#styling-inheritance-content<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#styling-inheritance-region<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#styling-inline<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#styling-referential<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#textAlign-absolute<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#textDecoration-under<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#textOutline-unblurred<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#time-offset<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#time-offset-with-frames<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#timing<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&lt;</span><span style="color: #a31515;">feature</span><span
-    style="color: blue;">&nbsp;</span><span style="color: red;">value</span><span style="color: blue;">=</span>&quot;<span
-        style="color: blue;">required</span>&quot;<span style="color: blue;">&gt;</span>#writingMode-horizontal-lr<span
-            style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span
-                style="color: blue;">&gt;</span>
-<span style="color: blue;">&nbsp;&nbsp;&lt;/</span><span style="color: #a31515;">features</span><span
-    style="color: blue;">&gt;</span>
-<span style="color: blue;">&lt;/</span><span style="color: #a31515;">profile</span><span
-    style="color: blue;">&gt;</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.
-            <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>
-        </p>
-    </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 smallcap styles could be considered for addition to &lt;genericFamilyName>
-                expression 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>
-                    #time-offset-with-frames
-                    <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
-            <ul>
-                <li>core</li>
-                <li>content</li>
-                <li>presentation</li>
-                <li>structure</li>
-                <li>time-offset</li>
-                <li>timing</li>
-            </ul>
-        </p>
-        <p>
-            TTML Features Required That Support Other Requirements
-            <ul>
-                <li> styling</li>
-                <li>styling-referential</li>
-                <li>styling-inline</li>
-                <li>styling-inheritance-content</li>
-                <li>styling-inheritance-region</li>
-            </ul>
-        </p>
-    </section>
-    <section class='appendix'>
-        <h2>
-            Code points</h2>
-        <p data-transform='constraint'>
-            Players 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 data-transform='constraint'>
-            Players 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 border="0" cellpadding="0" cellspacing="0" style="border-collapse:
- collapse;width:630pt" width="835">
-        <colgroup>
-            <col style="mso-width-source:userset;mso-width-alt:1865;width:38pt" 
-                width="51" />
-            <col span="16" style="mso-width-source:userset;mso-width-alt:1792;
- width:37pt" width="49" />
-        </colgroup>
-        <tr height="20" style="height:15.0pt">
-            <td class="style1" height="20" width="51">
-            </td>
-            <td class="style2" width="49">
-                _0</td>
-            <td class="style2" width="49">
-                _1</td>
-            <td class="style2" width="49">
-                _2</td>
-            <td class="style2" width="49">
-                _3</td>
-            <td class="style2" width="49">
-                _4</td>
-            <td class="style2" width="49">
-                _5</td>
-            <td class="style2" width="49">
-                _6</td>
-            <td class="style2" width="49">
-                _7</td>
-            <td class="style2" width="49">
-                _8</td>
-            <td class="style2" width="49">
-                _9</td>
-            <td class="style2" width="49">
-                _A</td>
-            <td class="style2" width="49">
-                _B</td>
-            <td class="style2" width="49">
-                _C</td>
-            <td class="style2" width="49">
-                _D</td>
-            <td class="style2" width="49">
-                _E</td>
-            <td class="style2" width="49">
-                _F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                <span style="mso-spacerun:yes">&nbsp;</span></td>
-            <td class="style4">
-                !</td>
-            <td class="style4">
-                &quot;</td>
-            <td class="style4">
-                #</td>
-            <td class="style4">
-                $</td>
-            <td class="style4">
-                %</td>
-            <td class="style4">
-                &amp;</td>
-            <td class="style4">
-                &#39;</td>
-            <td class="style4">
-                (</td>
-            <td class="style4">
-                )</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+002_</td>
-            <td class="style2" width="49">
-                0020</td>
-            <td class="style2" width="49">
-                0021</td>
-            <td class="style2" width="49">
-                0022</td>
-            <td class="style2" width="49">
-                0023</td>
-            <td class="style2" width="49">
-                0024</td>
-            <td class="style2" width="49">
-                0025</td>
-            <td class="style2" width="49">
-                0026</td>
-            <td class="style2" width="49">
-                0027</td>
-            <td class="style2" width="49">
-                0028</td>
-            <td class="style2" width="49">
-                0029</td>
-            <td class="style2" width="49">
-                002A</td>
-            <td class="style2" width="49">
-                002B</td>
-            <td class="style2" width="49">
-                002C</td>
-            <td class="style2" width="49">
-                002D</td>
-            <td class="style2" width="49">
-                002E</td>
-            <td class="style2" width="49">
-                002F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </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">
-                &lt;</td>
-            <td class="style4">
-                =</td>
-            <td class="style4">
-                &gt;</td>
-            <td class="style4">
-                ?</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+003_</td>
-            <td class="style2" width="49">
-                0030</td>
-            <td class="style2" width="49">
-                0031</td>
-            <td class="style2" width="49">
-                0032</td>
-            <td class="style2" width="49">
-                0033</td>
-            <td class="style2" width="49">
-                0034</td>
-            <td class="style2" width="49">
-                0035</td>
-            <td class="style2" width="49">
-                0036</td>
-            <td class="style2" width="49">
-                0037</td>
-            <td class="style2" width="49">
-                0038</td>
-            <td class="style2" width="49">
-                0039</td>
-            <td class="style2" width="49">
-                003A</td>
-            <td class="style2" width="49">
-                003B</td>
-            <td class="style2" width="49">
-                003C</td>
-            <td class="style2" width="49">
-                003D</td>
-            <td class="style2" width="49">
-                003E</td>
-            <td class="style2" width="49">
-                003F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+004_</td>
-            <td class="style2" width="49">
-                0040</td>
-            <td class="style2" width="49">
-                0041</td>
-            <td class="style2" width="49">
-                0042</td>
-            <td class="style2" width="49">
-                0043</td>
-            <td class="style2" width="49">
-                0044</td>
-            <td class="style2" width="49">
-                0045</td>
-            <td class="style2" width="49">
-                0046</td>
-            <td class="style2" width="49">
-                0047</td>
-            <td class="style2" width="49">
-                0048</td>
-            <td class="style2" width="49">
-                0049</td>
-            <td class="style2" width="49">
-                004A</td>
-            <td class="style2" width="49">
-                004B</td>
-            <td class="style2" width="49">
-                004C</td>
-            <td class="style2" width="49">
-                004D</td>
-            <td class="style2" width="49">
-                004E</td>
-            <td class="style2" width="49">
-                004F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+005_</td>
-            <td class="style2" width="49">
-                0050</td>
-            <td class="style2" width="49">
-                0051</td>
-            <td class="style2" width="49">
-                0052</td>
-            <td class="style2" width="49">
-                0053</td>
-            <td class="style2" width="49">
-                0054</td>
-            <td class="style2" width="49">
-                0055</td>
-            <td class="style2" width="49">
-                0056</td>
-            <td class="style2" width="49">
-                0057</td>
-            <td class="style2" width="49">
-                0058</td>
-            <td class="style2" width="49">
-                0059</td>
-            <td class="style2" width="49">
-                005A</td>
-            <td class="style2" width="49">
-                005B</td>
-            <td class="style2" width="49">
-                005C</td>
-            <td class="style2" width="49">
-                005D</td>
-            <td class="style2" width="49">
-                005E</td>
-            <td class="style2" width="49">
-                005F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+006_</td>
-            <td class="style2" width="49">
-                0060</td>
-            <td class="style2" width="49">
-                0061</td>
-            <td class="style2" width="49">
-                0062</td>
-            <td class="style2" width="49">
-                0063</td>
-            <td class="style2" width="49">
-                0064</td>
-            <td class="style2" width="49">
-                0065</td>
-            <td class="style2" width="49">
-                0066</td>
-            <td class="style2" width="49">
-                0067</td>
-            <td class="style2" width="49">
-                0068</td>
-            <td class="style2" width="49">
-                0069</td>
-            <td class="style2" width="49">
-                006A</td>
-            <td class="style2" width="49">
-                006B</td>
-            <td class="style2" width="49">
-                006C</td>
-            <td class="style2" width="49">
-                006D</td>
-            <td class="style2" width="49">
-                006E</td>
-            <td class="style2" width="49">
-                006F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </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" width="49">
-                ♪</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+007_</td>
-            <td class="style2" width="49">
-                0070</td>
-            <td class="style2" width="49">
-                0071</td>
-            <td class="style2" width="49">
-                0072</td>
-            <td class="style2" width="49">
-                0073</td>
-            <td class="style2" width="49">
-                0074</td>
-            <td class="style2" width="49">
-                0075</td>
-            <td class="style2" width="49">
-                0076</td>
-            <td class="style2" width="49">
-                0077</td>
-            <td class="style2" width="49">
-                0078</td>
-            <td class="style2" width="49">
-                0079</td>
-            <td class="style2" width="49">
-                007A</td>
-            <td class="style2" width="49">
-                007B</td>
-            <td class="style2" width="49">
-                007C</td>
-            <td class="style2" width="49">
-                007D</td>
-            <td class="style2" width="49">
-                007E</td>
-            <td class="style2" width="49">
-                007F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ¡</td>
-            <td class="style4">
-                ¢</td>
-            <td class="style4">
-                £</td>
-            <td class="style4">
-                ¤</td>
-            <td class="style4">
-                ¥</td>
-            <td class="style4">
-                ¦</td>
-            <td class="style4">
-                §</td>
-            <td class="style4">
-                ¨</td>
-            <td class="style4">
-                ©</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00A_</td>
-            <td class="style2" width="49">
-                00A0</td>
-            <td class="style2" width="49">
-                00A1</td>
-            <td class="style2" width="49">
-                00A2</td>
-            <td class="style2" width="49">
-                00A3</td>
-            <td class="style2" width="49">
-                00A4</td>
-            <td class="style2" width="49">
-                00A5</td>
-            <td class="style2" width="49">
-                00A6</td>
-            <td class="style2" width="49">
-                00A7</td>
-            <td class="style2" width="49">
-                00A8</td>
-            <td class="style2" width="49">
-                00A9</td>
-            <td class="style2" width="49">
-                00AA</td>
-            <td class="style2" width="49">
-                00AB</td>
-            <td class="style2" width="49">
-                00AC</td>
-            <td class="style2" width="49">
-                00AD</td>
-            <td class="style2" width="49">
-                00AE</td>
-            <td class="style2" width="49">
-                00AF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                °</td>
-            <td class="style4">
-                ±</td>
-            <td class="style4">
-                ²</td>
-            <td class="style4">
-                ³</td>
-            <td class="style4">
-                ´</td>
-            <td class="style4">
-                µ</td>
-            <td class="style4">
-                ¶</td>
-            <td class="style4">
-                ·</td>
-            <td class="style4">
-                ¸</td>
-            <td class="style4">
-                ¹</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00B_</td>
-            <td class="style2" width="49">
-                00B0</td>
-            <td class="style2" width="49">
-                00B1</td>
-            <td class="style2" width="49">
-                00B2</td>
-            <td class="style2" width="49">
-                00B3</td>
-            <td class="style2" width="49">
-                00B4</td>
-            <td class="style2" width="49">
-                00B5</td>
-            <td class="style2" width="49">
-                00B6</td>
-            <td class="style2" width="49">
-                00B7</td>
-            <td class="style2" width="49">
-                00B8</td>
-            <td class="style2" width="49">
-                00B9</td>
-            <td class="style2" width="49">
-                00BA</td>
-            <td class="style2" width="49">
-                00BB</td>
-            <td class="style2" width="49">
-                00BC</td>
-            <td class="style2" width="49">
-                00BD</td>
-            <td class="style2" width="49">
-                00BE</td>
-            <td class="style2" width="49">
-                00BF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                À</td>
-            <td class="style4">
-                Á</td>
-            <td class="style4">
-                Â</td>
-            <td class="style4">
-                Ã</td>
-            <td class="style4">
-                Ä</td>
-            <td class="style4">
-                Å</td>
-            <td class="style4">
-                Æ</td>
-            <td class="style4">
-                Ç</td>
-            <td class="style4">
-                È</td>
-            <td class="style4">
-                É</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00C_</td>
-            <td class="style2" width="49">
-                00C0</td>
-            <td class="style2" width="49">
-                00C1</td>
-            <td class="style2" width="49">
-                00C2</td>
-            <td class="style2" width="49">
-                00C3</td>
-            <td class="style2" width="49">
-                00C4</td>
-            <td class="style2" width="49">
-                00C5</td>
-            <td class="style2" width="49">
-                00C6</td>
-            <td class="style2" width="49">
-                00C7</td>
-            <td class="style2" width="49">
-                00C8</td>
-            <td class="style2" width="49">
-                00C9</td>
-            <td class="style2" width="49">
-                00CA</td>
-            <td class="style2" width="49">
-                00CB</td>
-            <td class="style2" width="49">
-                00CC</td>
-            <td class="style2" width="49">
-                00CD</td>
-            <td class="style2" width="49">
-                00CE</td>
-            <td class="style2" width="49">
-                00CF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                Ð</td>
-            <td class="style4">
-                Ñ</td>
-            <td class="style4">
-                Ò</td>
-            <td class="style4">
-                Ó</td>
-            <td class="style4">
-                Ô</td>
-            <td class="style4">
-                Õ</td>
-            <td class="style4">
-                Ö</td>
-            <td class="style4">
-                ×</td>
-            <td class="style4">
-                Ø</td>
-            <td class="style4">
-                Ù</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00D_</td>
-            <td class="style2" width="49">
-                00D0</td>
-            <td class="style2" width="49">
-                00D1</td>
-            <td class="style2" width="49">
-                00D2</td>
-            <td class="style2" width="49">
-                00D3</td>
-            <td class="style2" width="49">
-                00D4</td>
-            <td class="style2" width="49">
-                00D5</td>
-            <td class="style2" width="49">
-                00D6</td>
-            <td class="style2" width="49">
-                00D7</td>
-            <td class="style2" width="49">
-                00D8</td>
-            <td class="style2" width="49">
-                00D9</td>
-            <td class="style2" width="49">
-                00DA</td>
-            <td class="style2" width="49">
-                00DB</td>
-            <td class="style2" width="49">
-                00DC</td>
-            <td class="style2" width="49">
-                00DD</td>
-            <td class="style2" width="49">
-                00DE</td>
-            <td class="style2" width="49">
-                00DF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                à</td>
-            <td class="style4">
-                á</td>
-            <td class="style4">
-                â</td>
-            <td class="style4">
-                ã</td>
-            <td class="style4">
-                ä</td>
-            <td class="style4">
-                å</td>
-            <td class="style4">
-                æ</td>
-            <td class="style4">
-                ç</td>
-            <td class="style4">
-                è</td>
-            <td class="style4">
-                é</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00E_</td>
-            <td class="style2" width="49">
-                00E0</td>
-            <td class="style2" width="49">
-                00E1</td>
-            <td class="style2" width="49">
-                00E2</td>
-            <td class="style2" width="49">
-                00E3</td>
-            <td class="style2" width="49">
-                00E4</td>
-            <td class="style2" width="49">
-                00E5</td>
-            <td class="style2" width="49">
-                00E6</td>
-            <td class="style2" width="49">
-                00E7</td>
-            <td class="style2" width="49">
-                00E8</td>
-            <td class="style2" width="49">
-                00E9</td>
-            <td class="style2" width="49">
-                00EA</td>
-            <td class="style2" width="49">
-                00EB</td>
-            <td class="style2" width="49">
-                00EC</td>
-            <td class="style2" width="49">
-                00ED</td>
-            <td class="style2" width="49">
-                00EE</td>
-            <td class="style2" width="49">
-                00EF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                ð</td>
-            <td class="style4">
-                ñ</td>
-            <td class="style4">
-                ò</td>
-            <td class="style4">
-                ó</td>
-            <td class="style4">
-                ô</td>
-            <td class="style4">
-                õ</td>
-            <td class="style4">
-                ö</td>
-            <td class="style4">
-                ÷</td>
-            <td class="style4">
-                ø</td>
-            <td class="style4">
-                ù</td>
-            <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 height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+00F_</td>
-            <td class="style2" width="49">
-                00F0</td>
-            <td class="style2" width="49">
-                00F1</td>
-            <td class="style2" width="49">
-                00F2</td>
-            <td class="style2" width="49">
-                00F3</td>
-            <td class="style2" width="49">
-                00F4</td>
-            <td class="style2" width="49">
-                00F5</td>
-            <td class="style2" width="49">
-                00F6</td>
-            <td class="style2" width="49">
-                00F7</td>
-            <td class="style2" width="49">
-                00F8</td>
-            <td class="style2" width="49">
-                00F9</td>
-            <td class="style2" width="49">
-                00FA</td>
-            <td class="style2" width="49">
-                00FB</td>
-            <td class="style2" width="49">
-                00FC</td>
-            <td class="style2" width="49">
-                00FD</td>
-            <td class="style2" width="49">
-                00FE</td>
-            <td class="style2" width="49">
-                00FF</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                Œ</td>
-            <td class="style4">
-                œ</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+015_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                0152</td>
-            <td class="style2" width="49">
-                0153</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                Š</td>
-            <td class="style4">
-                š</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+016_</td>
-            <td class="style2" width="49">
-                0160</td>
-            <td class="style2" width="49">
-                0161</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                Ÿ</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                Ž</td>
-            <td class="style4">
-                ž</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+017_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                0178</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                017D</td>
-            <td class="style2" width="49">
-                017E</td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ƒ</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+019_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                0192</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ˜</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+02D_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                02DC</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ‐</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ―</td>
-            <td class="style4">
-                ‖</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+201_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2010</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2015</td>
-            <td class="style2" width="49">
-                2016</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ‧</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+202_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2027</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                ‰</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ›</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+203_</td>
-            <td class="style2" width="49">
-                2030</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                203A</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ₡</td>
-            <td class="style4">
-                ₢</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                €</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+20A_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                20A1</td>
-            <td class="style2" width="49">
-                20A2</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                20AC</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ₳</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+20B_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                20B3</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                °C</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                °F</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+210_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2103</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2109</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ⅓</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ⅟</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+215_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2153</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                215F</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                □</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+25A_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                25A1</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style3" height="20" width="51">
-            </td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ♩</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                ♫</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-            <td class="style4">
-                &nbsp;</td>
-        </tr>
-        <tr height="20" style="height:15.0pt">
-            <td class="style5" height="20" width="51">
-                U+266_</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                2669</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-                266B</td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-            <td class="style2" width="49">
-            </td>
-        </tr>
-    </table>
- 
-        <p data-transform='constraint'>Players MAY support the extended G2 characters sets that map onto Unicode code points (See table).</p>
-               <table 
-        border="0" cellpadding="0" cellspacing="0" style="border-collapse:
- collapse;width:318pt" width="423"><colgroup><col 
-                style="mso-width-source:userset;mso-width-alt:3291;width:68pt" width="90" /><col 
-                style="mso-width-source:userset;mso-width-alt:2377;width:49pt" width="65" /><col 
-                style="mso-width-source:userset;mso-width-alt:2084;width:43pt" width="57" /><col 
-                style="mso-width-source:userset;mso-width-alt:7716;width:158pt" width="211" /></colgroup><tr 
-            height="20" style="height:15.0pt"><td class="style1" height="20" width="90"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font5">708 Code(s) </font><font 
-                    class="font6"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style2" width="65">glyph</td><td class="style3" width="57"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font5">Unicode</font><font 
-                    class="font6"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style2" width="211"><span style="mso-spacerun:yes">&nbsp;</span><font 
-                    class="font5">Unicode Description </font><font class="font6"><span 
-                    style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr height="20" 
-            style="height:15.0pt"><td class="style5" height="20"><span style="mso-spacerun:yes">&nbsp;</span><font 
-                    class="font8">7F </font><font class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">♪ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">266A </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Eighth Note </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1025 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">… </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2026 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Horizontal ellipsis </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">102A </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Š </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">0160 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Latin capital letter S with caron </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">102C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">OE </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">0152 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Latin capital ligature OE </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1030 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">█ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2588 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Full block </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1031 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">‘ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2018 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Left single quotation mark </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1032 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">‘ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2019 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Right single quotation mark </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1033 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">“ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">201C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Left double quotation mark </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1034 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">“ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">201D </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Right double quotation mark </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1035 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">• </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2022 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Bullet </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1039 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">™ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2122 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Trade mark sign </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">103A </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">š </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">0161 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Latin small letter S with caron </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">103C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">oe </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">0153 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Latin small ligature OE </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">103D </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">℠ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2120 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Service mark sign </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">103F </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Ÿ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">0178 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Latin capital letter Y with dieresis</font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1076 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">⅛ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">215B </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Vulgar fraction one eighth </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1077 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">⅜ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">215C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Vulgar fraction three eighths </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1078 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">⅝ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">215D </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Vulgar fraction five eighths </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">1079 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">⅞ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">215E </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Vulgar fraction seven eighths </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107A </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">│ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2502 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light vertical </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107B </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">┐ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2510 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light down and left </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">└ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2514 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light up and right </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107D </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">─ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2500 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light horizontal </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107E </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">┘ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">2518 </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light up and left </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr><tr 
-            height="20" style="height:15.0pt"><td class="style5" height="20"><span 
-                    style="mso-spacerun:yes">&nbsp;</span><font class="font8">107F </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">┌ </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style6"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">250C </font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td><td 
-                class="style7"><span style="mso-spacerun:yes">&nbsp;</span><font class="font8">Box drawings light down and right</font><font 
-                    class="font7"><span style="mso-spacerun:yes">&nbsp;</span></font></td></tr></table>
- 
-    <p data-transform='constraint'>
-            Players may also provide Glyph coverage for 
-            additional Unicode code points</p>
-    </section>
-    <section class='color_values'>
-        <h2>
-            Color values</h2>
-        <p> For color values of the form   #rrggbbaa, players 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 players 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>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Simple Delivery Profile for Closed Captions</title>
+<!-- 
+      === NOTA BENE ===
+      For the three scripts below, if your spec resides on dev.w3 you can check them
+      out in the same tree and use relative links so that they'll work offline,
+     -->
+
+<script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async>
+</script>
+<script class='remove'>
+      var 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",
+
+          // if your specification has a subtitle that goes below the main
+          // formal title, define it here
+          subtitle   :  "A profile of TTML for internet delivery",
+
+          // 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/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
+          // it is recommended that the respec.css stylesheet be kept
+          extraCSS:             ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css"],
+
+          // 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/" },
+         ],
+
+          // 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://w3.org/ttwg",
+          
+          // 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:  "",
+      };
+</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>";
+        }
+        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 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 presentation processor using the player 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 TTML 1.0 to support delivery of closed captions for video content. Other profiles based on TTML 1.0 may target other types of subtitles such as on-screen text or graphics. This interoperability profile is a proper subset of TTML 1.0 plus features required to support US Government closed captioning requirements for online presentation.</p>
+</section>
+<section id='sotd'>
+<p>This document is a draft member contribution.</p>
+<p>This document applies 3 guiding principles for online delivery of closed captions.</p>
+<ul>
+<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>
+</ul>
+</section>
+<section id='conformance'>
+<h3>Simple Delivery Profile for Closed Captions</h3>
+<p>This profile identifies the content and player 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 TTML 1.0 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 TTML 1.0. The semantics defined in TTML 1.0 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 TTML 1.0 but such behavior is not defined here.</p>
+</section>
+<section id='terms'>
+<h2>Terms and Definitions</h2>
+<p>The terms and definitions in TTML 1.0 serve as the basis for this interoperability profile. Terms found here are in addition to those found in TTML 1.0.</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 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 TTML 1.0 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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>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>
+<pre class="example" style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+<span style="color: blue;">&lt;</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;">&gt;</span>A<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>B<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>C<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</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, no element shall lexically precede another 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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p data-transform='constraint'>Processors MUST support the capability to present documents referencing this profile using the following URI: <dfn>http://www.w3.org/TR/profile/simple-delivery</dfn></p>
+<p>NOTE: See also <a href="#conformance">Conformance</a></p>
+<p>NOTE: The use attribute could indicate the geographical region for which the profile is used. For example, specific styling capabilities could be used in a particular geographical region. See also <a href="#other_constraints">Other Constraints</a>.</p>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The backgroundColor MUST be expressed in #rrggbbaa format exclusively using the <dfn>&lt;hexdigit&gt;</dfn> style value expression.</p>
+<p data-transform='constraint'>The backgroundColor MUST support the colors outlined in <a href="#annexe_color">Color Values</a>.</p>
+<p>Note: These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p>
+<p data-transform='constraint'>The alpha component of backgroundColor MUST support the opacity values outlined in <a href="#annexe_color">Color Values</a> .</p>
+<p data-transform='constraint'>The alpha component of backgroundColor for a region MUST be 00.</p>
+<p data-transform='constraint'>The player MUST allow the user to specify a backgroundColor for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#annexe_color">Color Values</a> ).</p>
+<p data-transform='constraint'>The player 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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>The color MUST be expressed in #rrggbbaa format exclusively using the <dfn>&lt;hexdigit&gt;</dfn> style value expression.</p>
+<p data-transform='constraint'>The color MUST support the colors outlined in <a href="#annexe_color">Color Values</a>.</p>
+<p>Note: These colors are identical to those identified in the CEA708-D, Section 8.8 [RBG resolution of 4 bits for each primary (03)].</p>
+<p data-transform='constraint'>The alpha component of color MUST support the opacity values outlined in <a href="#annexe_color">Color Values</a> .</p>
+<p data-transform='constraint'>The player MUST allow the user to specify a color for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#annexe_color">Color Values</a> ).</p>
+<p data-transform='constraint'>The player MUST allow the user to specify a color for p and span elements to allow for semi-transparent and transparent opacities.</p>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_display_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 with constraints</td>
+<td>region<br />
+root</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p data-transform='constraint'>Processors MUST support the capability to present documents in the following common forms:</p>
+<ul>
+<li>Pop-up</li>
+<li>Roll-up</li>
+<li>Paint-on</li>
+</ul>
+<p>Examples are provided of each style to aid in understanding the common forms.</p>
+<section>
+<p data-transform='example'>Pop-up style</p>
+<pre class="example" style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+ 
+    <span style="color: blue;">&lt;</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;"> &gt;</span>
+<span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">/&gt;</span>
+<span style="color: blue;">    &lt;</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;!--</span><span style="color: green;"> A typical transparent region with centered text that has an outline </span><span style="color: blue;">--&gt;</span>
+<span style="color: blue;">      &lt;</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;">/&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</span><span style="color: #a31515;">layout</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;!--</span><span style="color: green;"> typical 'pop on' type region </span><span style="color: blue;">--&gt;</span>
+<span style="color: blue;">      &lt;</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;"> /&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">layout</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;/</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</span><span style="color: #a31515;">body</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span> This is a pop on caption. <span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">div</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;/</span><span style="color: #a31515;">body</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span style="color: blue;">&gt;</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: 13; color: black; background: white;">
+<span style="color: blue;">&lt;</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;">white</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;">/&gt;</span>
+<span style="color: blue;">&lt;</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;">white</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;">/&gt;</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: 13; color: black; background: white;">
+<span style="color: blue;">&lt;?</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;">?&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">/&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</span><span style="color: #a31515;">layout</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">      &lt;/</span><span style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">      &lt;/</span><span style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">      &lt;/</span><span style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">        &lt;</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;">/&gt;</span>
+<span style="color: blue;">      &lt;/</span><span style="color: #a31515;">region</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">layout</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;/</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</span><span style="color: #a31515;">body</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</span><span style="color: #a31515;">div</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;!--</span><span style="color: green;">four speakers count off, and then all call 'Jump' together </span><span style="color: blue;">--&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>One<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>Two<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>Three<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>Four<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>Jump!<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>Jump!<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;">&gt;</span>Jump!<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">      &lt;</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;"> &gt;</span>Jump!<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;/</span><span style="color: #a31515;">div</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;/</span><span style="color: #a31515;">body</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span style="color: blue;">&gt;</span>
+</pre></section>
+<section>
+<p data-transform='example'>Rollup 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: 13; color: black; background: white;">
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>rollup<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>style<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>caption<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>support<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>with<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>word<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>at<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>a<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>time<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>temporal<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>placement<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>this<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>could<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>go<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>on<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>all<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>day<span style="color: blue;">&lt;/</span><span style="color: #a31515;">span</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">p</span><span style="color: blue;">&gt;</span>
+</pre>
+<p>Note: As shown in the rollup example, a function of time for a k line rollup 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>
+</section>
+</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>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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>Smallcap</li>
+</ul>
+<p>Note: fontStyle strings(s) not bound to generic classes in TTML 1.0, such as casual, cursive and smallcap styles, may be used. These would be interpreted as local font names, if not found then the default style would be used.</p>
+<p data-transform='constraint'>A player MUST map the generic font names to fonts as follows</p>
+<table>
+<tr>
+<th>Style</th>
+<th>Style Name</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>Smallcap</td>
+<td>Small types</td>
+<td>Similar to Engravers Gothic</td>
+</tr>
+</table>
+<p data-transform='constraint'>The player MUST allow the user to specify a generic fontFamily for the document using the fontStyle(s) shown in the preceding table.</p>
+<p data-transform='constraint'>The player MUST allow the user to specify character edge attributes and types for the generic fontFamily names for the fontStyle(s) shown in the preceding table.</p>
+<p>Note: Player and Unicode code point support is in <a href="#code_points">Code Point support</a></p>
+</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>&#160;</td>
+<td>span<br />
+div (root)</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>document MUST only specify tts:fontSize(s) using a value of 50, 75%, 100%, 150% or 200%.</p>
+<p>Note: Use of a fontSize of less than 75% (i.e. 50%) could result in unreadable content for a user.</p>
+<p>Note: Specifying a fontSize is used for a document could allow the user to select a preferred fontSize.</p>
+<section>
+<p data-transform='example'>Example to show how to specify an initial font.</p>
+<!-- div data-include=example3.xml'></div --></section>
+<p data-transform='constraint'>The default font height of the player MUST be 5% of the root container height</p>
+<p>Note: This is equivalent to one cell using the default grid. A player is however not required to support the grid metric.</p>
+</section>
+</section>
+<section id='Constrained_TTML_Feature_display_display_fontStyle_italics'>
+<h2>Use of Constrained TTML Feature <span data-transform='term'>fontStyle-italics</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-italics</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>Processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>Processors MUST support the capability to provide presentation semantic support for values of the tts:fontStyle attribute as defined for the fontFamily-generic feature.</p>
+<p>Note: Various fontStyle(s) unspecified in TTML 1.0, such as casual, cursive and smallcap styles, may be used. Players that recognize the string as a particular font style could use a comparable style.</p>
+<p>Note: A default fontStyle - white, mid-weight san serif with an initial font height of 5% of the video height and with a black outline using textOutline-unblurred of 10% of the fontSize - is suggested.</p>
+<p data-transform='constraint'>The capability MUST exist for the user to specify the italic style for the fontStyle(s) 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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+<section>
+<p data-transform='example'>Note: Using 10% for the tts:extent of the root container region (for example, of an 720x640 region), the equivalence to pixel units (px) could be obtained. For example, using this snippet:</p>
+<pre class='example' style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+<span style="color:blue;">&lt;</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;">/&gt;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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>
+<p>Note: The constraints in this section result in a document that contains style blocks that are complete and self-contained.</p>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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 fontStyle constraints identified in this profile.</p>
+<p data-transform='constraint'>The capability MUST exist for the user to specify the underline style for the fontStyle(s) identified in this profile.</p>
+<p>Note: See also <a href="#Constrained_TTML_Feature_fontStyle">tts:fontStyle attribute</a>.</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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%.</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></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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</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>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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 a region at any given time.</p>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>Processors MUST support the capability to present documents where the following constraints apply:</p>
+<p data-transform='constraint'>At most 32 characters MUST be present in any displayed text line.</p>
+<p data-transform='constraint'>At most one p element MUST be selected into a region at a time.</p>
+<p>NOTE: The fontStyle, fontSize and the characteristics of region impact how selected text flows into a region (i.e. selected text may flow outside of the region such as on a mobile device).</p>
+<p>NOTE: Constraining one p element to a region logically places content from two different speakers to different region(s).</p>
+<p>NOTE: When a document author wants to construct a single phrase from a speaker with more than one line in a region, the br within a p element can be used. This construction adheres to the constraints in this section. For example for one speaker with more than one line:</p>
+<pre class="example" style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+<span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span> I always get the fuzzy end<span style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span style="color:blue;">/&gt;</span>of the lollipop<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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'>Durations (dur) SHALL only be used on the span element.</p>
+<p>Note: The use of dur on a span supports rollup style content. For content other than rollup, the default behavior is to remain present until the end of the container. Therefore, durations are not needed on the span element.</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: 13; color: black; background: white;">
+<span style="color:blue;">&lt;</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;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</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 SHALL 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: 13; color: black; background: white;">
+<span style="color:blue;">&lt;</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;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</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<br />
+#time-offset-with-frames</td>
+<td>Required</td>
+<td>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>None</p>
+<p>Note: Since the ttp:timebase attribute is outside of this profile, the implicit timebase used here is media as specified in TTML 1.0.</p>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</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>&#160;</td>
+<td>&#160;</td>
+<td>&#160;</td>
+</tr>
+</table>
+</section>
+<section class='Core_Constraints'>
+<h4>Constraints</h4>
+<p>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>
+<p>Note: Animation is constrained to the scenarios where the region needs to be moved &#8211; i.e. when the &#8220;snap&#8221; display effect is required.</p>
+<p>Note: Animation is constrained to the scenarios to change the foreground color of content when flashing text is required.</p>
+</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&#8217;s capability to select and use captions when available for:</p>
+<ul>
+<li>Reduced or simplified content for &#8220;easy reader&#8221; 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 TTML 1.0 Used in This Profile</h2>
+<pre style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+<span style="color: blue;">&lt;?</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;">?&gt;</span>
+<span style="color: blue;">&lt;?</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;">?&gt;</span>
+<span style="color: blue;">&lt;</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;">&gt;</span>
+<span style="color: blue;">  &lt;</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;">&gt;</span>
+<span style="color: blue;">    &lt;!--</span><span style="color: green;"> required (mandatory) feature support </span><span style="color: blue;">--&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#animation<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#backgroundColor-block<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#backgroundColor-inline<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#color<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#content<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#core<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#display-region<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#fontFamily-generic<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#fontSize<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#fontStyle-italic<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#frameRate<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#frameRateMultiplier<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#layout<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#length-percentage<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#length-positive<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#lineBreak-uax14<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#presentation<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#profile<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#structure<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#styling<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#styling-inheritance-content<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#styling-inheritance-region<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#styling-inline<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#styling-referential<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#textAlign-absolute<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#textDecoration-under<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#textOutline-unblurred<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#time-offset<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#time-offset-with-frames<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#timing<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">    &lt;</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;">&gt;</span>#writingMode-horizontal-lr<span style="color: blue;">&lt;/</span><span style="color: #a31515;">feature</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">  &lt;/</span><span style="color: #a31515;">features</span><span style="color: blue;">&gt;</span>
+<span style="color: blue;">&lt;/</span><span style="color: #a31515;">profile</span><span style="color: blue;">&gt;</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 smallcap styles could be considered for addition to &lt;genericFamilyName&gt; expression 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 />
+#time-offset-with-frames<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'>Players SHOULD provide font glyph coverage for all characters in the &#8220;ISO 8859-1 Latin-1&#8221; space and those for ANSI INCITS 4 when mapped onto Unicode code points (see table).</p>
+<p data-transform='constraint'>Players 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="heigth: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="heigth:20px;width:51px"></td>
+<td class="style4"><span>&#160;</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">&amp;</td>
+<td class="style4">'</td>
+<td class="style4">(</td>
+<td class="style4">)</td>
+<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="heigth: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="heigth: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">&lt;</td>
+<td class="style4">=</td>
+<td class="style4">&gt;</td>
+<td class="style4">?</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="heigth: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="heigth: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="heigth: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="heigth: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="heigth: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="heigth: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="heigth: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="heigth: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">&#9834;</td>
+</tr>
+<tr style="height:15.0pt">
+<td class="style5" style="heigth: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="heigth:20px;width:51px"></td>
+<td class="style4">&#160;</td>
+<td class="style4">&#161;</td>
+<td class="style4">&#162;</td>
+<td class="style4">&#163;</td>
+<td class="style4">&#164;</td>
+<td class="style4">&#165;</td>
+<td class="style4">&#166;</td>
+<td class="style4">&#167;</td>
+<td class="style4">&#168;</td&g