Initial import of TTML1.0 Simple Delivery Profile - Draft Note
authorGlenn Adams <glenn@skynav.com>
Thu, 19 Jul 2012 13:50:30 -0600 (2012-07-19)
changeset 261 456eac2d1d79
parent 260 57f3cef4e775
child 262 aa57b8587281
Initial import of TTML1.0 Simple Delivery Profile - Draft Note
ttml10-sdp/example-1.xml
ttml10-sdp/example-2.xml
ttml10-sdp/example-3.xml
ttml10-sdp/example-4.xml
ttml10-sdp/profile-detail.xml
ttml10-sdp/references.xml
ttml10-sdp/ttml-profile-src.htm
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/example-1.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,20 @@
+<tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" 
+    xmlns:s='http://www.w3.org/ns/ttml#styling' 
+    xmlns:p='http://www.w3.org/ns/ttml#parameter' >
+  <head>
+    <p:profile use="http://www.w3.org/ns/ttml/profile/online-delivery"/>
+    <styling>
+      <!-- A typical transparent region with centered text that has an outline -->
+      <style xml:id="bottomMidStyle" s:textAlign="center" s:textOutline="#000000ff 5%" s:backgroundColor="#00000000" s:color="#ffffffff" s:origin='20% 58%' s:extent='60% 18%'/>
+    </styling>
+    <layout>
+      <!-- typical 'pop on' type region -->
+      <region xml:id="bottomMid" style="bottomMidStyle" />
+    </layout>
+  </head>
+  <body>
+    <div style="defaultFont">
+      <p region="bottomMid" begin='00:00:00.101' end='00:00:03.000'> This is a pop on caption. </p>
+    </div>
+  </body>
+</tt>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/example-2.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,2 @@
+<style xml:id="bottomMidStyle" s:textAlign="center" s:textOutline="black 1px" s:backgroundColor="transparent" s:color="white" s:origin='20% 58%' s:extent='60% 18%'/>
+<style xml:id="topMidStyle" s:textAlign="center" s:textOutline="black 1px" s:backgroundColor="transparent" s:color="white" s:origin='20% 10%' s:extent='60% 18%'/>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/example-3.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" xmlns:s='http://www.w3.org/ns/ttml#styling'>
+  <head>
+    <styling>
+      <style xml:id="s1" s:display="none" s:extent='40% 18%'/>
+    </styling>
+    <layout>
+      <region xml:id="r1" style="s1">
+        <set begin='00:00:10.000' end='00:00:12.000' s:display='auto'/>
+        <set begin='00:00:10.000' end='00:00:12.000' s:origin='10% 10%'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:display='auto'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:origin='10% 10%'/>
+      </region>
+      <region id="r2" style="s2">
+        <set begin='00:00:10.330' end='00:00:10.670' s:display='auto'/>
+        <set begin='00:00:10.330' end='00:00:10.670' s:origin='50% 10%'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:display='auto'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:origin='50% 10%'/>
+      </region>
+      <region id="r3" style="s3">
+        <set begin='00:00:10.670' end='00:00:11.000' s:display='auto'/>
+        <set begin='00:00:10.670' end='00:00:11.000' s:origin='10% 78%'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:display='auto'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:origin='10% 78%'/>
+      </region>
+      <region id="r4" style="s4">
+        <set begin='00:00:11.000' end='00:00:11.330' s:display='auto'/>
+        <set begin='00:00:11.000' end='00:00:11.330' s:origin='50% 78%'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:display='auto'/>
+        <set begin='00:00:11.670' end='00:00:12.000' s:origin='50% 78%'/>
+      </region>
+    </layout>
+  </head>
+  <body>
+    <div>
+      <!--four speakers count off, and then all call 'Jump' together -->
+      <p begin='00:00:10.000' end='00:00:10.330' region="r1" >One</p>
+      <p begin='00:00:10.330' end='00:00:10.670' region="r2" >Two</p>
+      <p begin='00:00:10.670' end='00:00:11.000' region="r3">Three</p>
+      <p begin='00:00:11.000' end='00:00:11.330' region="r4" >Four</p>
+      <p begin='00:00:11.670' end='00:00:12.000' region="r1" >Jump!</p>
+      <p begin='00:00:11.670' end='00:00:12.000' region="r2" >Jump!</p>
+      <p begin='00:00:11.670' end='00:00:12.000' region="r3">Jump!</p>
+      <p begin='00:00:11.670' end='00:00:12.000' region="r4" >Jump!</p>
+    </div>
+  </body>
+</tt>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/example-4.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,25 @@
+<p region='rollup' begin='00:00:13.000' dur='00:00:11.000'>
+  <span begin='00:00:01.000'>rollup</span>
+  <span begin='00:00:02.000'>style</span>
+  <span begin='00:00:03.000'>caption</span>
+  <span begin='00:00:04.000'>support</span>
+</p>
+<p region='rollup' begin='00:00:17.000' dur='00:00:11.000'>
+  <span begin='00:00:01.000'>with</span>
+  <span begin='00:00:02.000'>word</span>
+  <span begin='00:00:03.000'>at</span>
+  <span begin='00:00:04.000'>a</span>
+  <span begin='00:00:05.000'>time</span>
+  <span begin='00:00:06.000'>temporal</span>
+</p>
+<p region='rollup' begin='00:00:23.000' dur='00:00:11.000'>
+  <span begin='00:00:01.000'>placement</span>
+  <span begin='00:00:02.000'>this</span>
+  <span begin='00:00:03.000'>could</span>
+  <span begin='00:00:04.000'>go</span>
+</p>
+<p region='rollup' begin='00:00:27.000' dur='00:00:11.000'>
+  <span begin='00:00:01.000'>on</span>
+  <span begin='00:00:02.000'>all</span>
+  <span begin='00:00:03.000'>day</span>
+</p>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/profile-detail.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
+<profile xmlns="http://www.w3.org/ns/ttml#parameter">
+  <features xml:base="http://www.w3.org/ns/ttml/feature/">
+    <!-- required (mandatory) feature support -->
+    <feature value="required">#animation</feature>
+    <feature value="required">#backgroundColor-block</feature>
+    <feature value="required">#backgroundColor-inline</feature>
+    <feature value="required">#color</feature>
+    <feature value="required">#content</feature>
+    <feature value="required">#core</feature>
+    <feature value="required">#display-region</feature>
+    <feature value="required">#fontFamily-generic</feature>
+    <feature value="required">#fontSize</feature>
+    <feature value="required">#fontStyle-italic</feature>
+    <feature value="required">#frameRate</feature>
+    <feature value="optional">#frameRateMultiplier</feature>
+    <feature value="required">#layout</feature>
+    <feature value="required">#length-percentage</feature>
+    <feature value="required">#length-positive</feature>
+    <feature value="required">#lineBreak-uax14</feature>
+    <feature value="required">#presentation</feature>
+    <feature value="required">#profile</feature>
+    <feature value="required">#structure</feature>
+    <feature value="required">#styling</feature>
+    <feature value="required">#styling-inheritance-content</feature>
+    <feature value="required">#styling-inheritance-region</feature>
+    <feature value="required">#styling-inline</feature>
+    <feature value="required">#styling-referential</feature>
+    <feature value="required">#textAlign-absolute</feature>
+    <feature value="required">#textDecoration-under</feature>
+    <feature value="required">#textOutline-unblurred</feature>
+    <feature value="required">#time-offset</feature>
+    <feature value="required">#time-offset-with-frames</feature>
+    <feature value="required">#timing</feature>
+    <feature value="required">#writingMode-horizontal-lr</feature>
+  </features>
+</profile>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/references.xml	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,43 @@
+<div id="references" class="appendix section">
+  <!--OddPage-->
+  <h2>
+    <span class="secno">F. </span>References
+  </h2>
+  <div id="normative-references" class="section">
+    <h3>
+      <span class="secno">F.1 </span>Normative references
+    </h3>
+    <dl class="bibliography">
+      <dt id="bib-RFC2119">[TTAF1]</dt>
+      <dd>
+        Glenn Adams, Ed.<a href="http://www.w3.org/TR/ttaf1-dfxp">
+          <cite>Timed Text Markup Language (TTML) 1.0</cite>
+        </a> 18 November 2010.
+        W3C Recommendation URL: <a href="http://www.w3.org/TR/ttaf1-dfxp">http://www.w3.org/TR/ttaf1-dfxp</a>
+      </dd>
+    </dl>
+    <dl class="bibliography">
+      <dt id="Dt1">[RFC2119]</dt>
+      <dd>
+        S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt">
+          <cite>Key words for use in RFCs to Indicate Requirement Levels.</cite>
+        </a> March
+        1997. Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
+      </dd>
+    </dl>
+  </div>
+  <div id="informative-references" class="section">
+    <h3>
+      <span class="secno">F.2 </span>Informative references
+    </h3>
+    <dl class="bibliography">
+      <dt id="Dt2">[RFC2119]</dt>
+      <dd>
+        CEA <a href="http://www.ce.org/Standards/Standard-Listings/R4-3-Television-Data-Systems-Subcommittee/CEA-708-D.aspx">
+          <cite>CEA-708-D Digital Television (DTV) Closed Captioning</cite>
+        </a>
+        URL: <a href="http://www.ce.org/Standards/Standard-Listings/R4-3-Television-Data-Systems-Subcommittee/CEA-708-D.aspx">http://www.ce.org/Standards/Standard-Listings/R4-3-Television-Data-Systems-Subcommittee/CEA-708-D.aspx</a>
+      </dd>
+    </dl>
+  </div>
+</div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ttml10-sdp/ttml-profile-src.htm	Thu Jul 19 13:50:30 2012 -0600
@@ -0,0 +1,5500 @@
+<!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='http://dev.w3.org/2009/dap/ReSpec.js/js/respec.js' class='remove'></script>
+    <script class='remove'>
+      var respecConfig = {
+          // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
+          specStatus:           "NOTE",
+          
+          // the specification's short name, as in http://www.w3.org/TR/short-name/
+          shortName:            "ttml-interop",
+
+          // 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://dev.w3.org/...",
+
+          // 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", 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>
+        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.
+    </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>