--- /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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Constraints</h4>
+ </section>
+ </section>
+ </section>
+ </section>
+ <section class='Structural_Constraints'>
+ <h3>
+ Structural Constraints</h3>
+ <p>
+ 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;"><</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">s1</span>"<span style="color: blue;">></span>A<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">s3</span>"<span style="color: blue;">></span>B<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">s1</span>"<span style="color: blue;">></span>C<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span></pre>
+ <p data-transform='constraint'>
+ A document MUST reference all styles using a style attribute to a style element.</p>
+ <p data-transform='constraint'>
+ A document MUST have all elements are in order of time. That is, in a par context,
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None
+ </p>
+ </section>
+ </section>
+ <section id='Use_of_Constrained_TTML_Feature_content'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>content</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #content
+ </td>
+ <td>
+ Required with constraint
+ </td>
+ <td>
+ Specified elements are used.
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None
+ </p>
+ </section>
+ </section>
+ <section id='Use_of_Constrained_TTML_Feature_content_profile'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>profile</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #profile
+ </td>
+ <td>
+ required
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p data-transform='constraint'>
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None
+ </p>
+ </section>
+ </section>
+ </section>
+ <section id='Style_Constraints'>
+ <h2>
+ Style Constraints</h2>
+ <p>
+ </p>
+ <section id='Constrained_TTML_Feature_backgroundColor'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>backgroundColor-*</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #backgroundColor-block<br />
+ #backgroundColor-inline
+ </td>
+ <td>
+ Required with constraints
+ </td>
+ <td>
+ p element<br />
+ region element
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ Processors MUST support the capability to present documents where the following
+ constraints apply:</p>
+ <p data-transform='constraint'>
+ The backgroundColor MUST be expressed in #rrggbbaa format exclusively using the
+ <dfn><hexdigit></dfn> style value expression.
+ <p 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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><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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None
+ </p>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_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>
+
+ </td>
+ <td>
+
+ </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;"><</span><span style="color: #a31515;">tt</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:lang</span><span
+ style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span
+ style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span>
+<span style="color: blue;"> </span><span style="color: red;">xmlns:s</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span
+ style="color: blue;"> </span>
+<span style="color: blue;"> </span><span style="color: red;">xmlns:p</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>'<span
+ style="color: blue;"> ></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p:profile</span><span
+ style="color: blue;"> </span><span style="color: red;">use</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">http://www.w3.org/ns/ttml/profile/online-delivery</span>"<span
+ style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span
+ style="color: green;"> A typical transparent region with centered text that has an outline </span><span
+ style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">style</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">center</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">#000000ff 5%</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">#00000000</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:color</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">60% 18%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span
+ style="color: green;"> typical 'pop on' type region </span><span
+ style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span
+ style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span
+ style="color: blue;"> /></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span
+ style="color: blue;"> </span><span style="color: red;">style</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">defaultFont</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">bottomMid</span>"<span style="color: blue;"> </span><span
+ style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:00.101</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span> This is a pop on caption. <span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span
+ style="color: blue;">></span>
+ </pre>
+ <!-- div data-include=example1.xml'></div -->
+ </section>
+ <section>
+ <p data-transform='example'>
+ Positioned style. An off-screen narrator is present and no graphics are used. Content
+ placed in a single region in the bottom one-third of that region.</p>
+ <!-- div data-include=example2.xml'></div -->
+ <pre class='example' style="font-family: Segoe UI; font-size: 13; color: black; background: white;">
+<span style="color: blue;"><</span><span style="color: #a31515;">style</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">center</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:color</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">white</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">60% 18%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">style</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">topMidStyle</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">center</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:color</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">white</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">20% 10%</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">60% 18%</span>'<span style="color: blue;">/></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;"><?</span><span style="color: #a31515;">xml</span><span
+ style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span
+ style="color: red;">encoding</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">utf-8</span>"<span style="color: blue;">?></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">tt</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:lang</span><span
+ style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span
+ style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span><span
+ style="color: red;">xmlns:s</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">head</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">styling</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">style</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">s1</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">none</span>"<span style="color: blue;"> </span><span
+ style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">40% 18%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">styling</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">layout</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r1</span>"<span style="color: blue;"> </span><span
+ style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s1</span>"<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">10% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">10% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span
+ style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span
+ style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r2</span>"<span style="color: blue;"> </span><span
+ style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s2</span>"<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">50% 10%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span
+ style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span
+ style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r3</span>"<span style="color: blue;"> </span><span
+ style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s3</span>"<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">10% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span
+ style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">region</span><span
+ style="color: blue;"> </span><span style="color: red;">id</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r4</span>"<span style="color: blue;"> </span><span
+ style="color: red;">style</span><span style="color: blue;">=</span>"<span style="color: blue;">s4</span>"<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.330</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.330</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:display</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">auto</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> <</span><span
+ style="color: #a31515;">set</span><span style="color: blue;"> </span><span style="color: red;">begin</span><span
+ style="color: blue;">=</span>'<span style="color: blue;">00:00:11.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">end</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:12.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">50% 78%</span>'<span style="color: blue;">/></span>
+<span style="color: blue;"> </</span><span
+ style="color: #a31515;">region</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">layout</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">head</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">body</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">div</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span
+ style="color: green;">four speakers count off, and then all call 'Jump' together </span><span
+ style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:10.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.330</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r1</span>"<span style="color: blue;"> ></span>One<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:10.330</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:10.670</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Two<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:10.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r3</span>"<span style="color: blue;">></span>Three<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:11.330</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Four<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r1</span>"<span style="color: blue;"> ></span>Jump!<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r2</span>"<span style="color: blue;"> ></span>Jump!<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r3</span>"<span style="color: blue;">></span>Jump!<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.670</span>'<span style="color: blue;"> </span><span
+ style="color: red;">end</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:12.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">r4</span>"<span style="color: blue;"> ></span>Jump!<span
+ style="color: blue;"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">div</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">body</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">tt</span><span
+ style="color: blue;">></span></pre>
+ </section>
+ <section>
+ <p data-transform='example'>
+ 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;"><</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span
+ style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:13.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:01.000</span>'<span style="color: blue;">></span>rollup<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>style<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span>caption<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>support<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span
+ style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:17.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:01.000</span>'<span style="color: blue;">></span>with<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>word<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span>at<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>a<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:05.000</span>'<span style="color: blue;">></span>time<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:06.000</span>'<span style="color: blue;">></span>temporal<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span
+ style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:23.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:01.000</span>'<span style="color: blue;">></span>placement<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>this<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span>could<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:04.000</span>'<span style="color: blue;">></span>go<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">p</span><span
+ style="color: blue;"> </span><span style="color: red;">region</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">rollup</span>'<span style="color: blue;"> </span><span
+ style="color: red;">begin</span><span style="color: blue;">=</span>'<span style="color: blue;">00:00:27.000</span>'<span
+ style="color: blue;"> </span><span style="color: red;">dur</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:11.000</span>'<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:01.000</span>'<span style="color: blue;">></span>on<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:02.000</span>'<span style="color: blue;">></span>all<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">span</span><span
+ style="color: blue;"> </span><span style="color: red;">begin</span><span style="color: blue;">=</span>'<span
+ style="color: blue;">00:00:03.000</span>'<span style="color: blue;">></span>day<span
+ style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">p</span><span
+ style="color: blue;">></span></pre>
+
+ <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>
+
+ </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>
+
+ </td>
+ <td>
+ span<br>
+ div (root)
+ </td>
+ <td>
+
+ </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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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;"><</span><span style="color:#a31515;">style</span><span
+ style="color:blue;"> </span><span style="color:red;">xml:id</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">topLeftStyle</span>"<span
+ style="color:blue;"> </span><span style="color:red;">s:fontSize</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">150%</span>"<span
+ style="color:blue;"> </span><span style="color:red;">s:textAlign</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">left</span>"<span
+ style="color:blue;"> </span><span style="color:red;">s:backgroundColor</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">#ffffffff</span>"<span
+ style="color:blue;"> </span><span style="color:red;">s:color</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">#ff0000ff</span>"<span
+ style="color:blue;"> </span><span style="color:red;">s:origin</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">10% 10%</span>'<span
+ style="color:blue;"> </span><span style="color:red;">s:extent</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">40% 18%</span>'<span
+ style="color:blue;">/></span>
+</pre>
+ <!-- div data-include=fontsize-example.xml'></div >
+ <style xml:id="topLeftStyle" s:fontSize="150%" s:textAlign="left" s:backgroundColor="#ffffffff" s:color="#ff0000ff"
+ s:origin='10% 10%' s:extent='40% 18%'/> -->
+ <p>
+ Convert the percentage value to a fraction (i.e. .40), multiply the numerator by
+ 16 and divide by 100 to obtain px (pixel units).
+ </p>
+ </section>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_length_positive'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>length-positive</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #length-positive
+ </td>
+ <td>
+ Required
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None</p>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_styling'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>styling-*</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #styling
+ <br />
+ #styling-referential
+ <br />
+ #styling-inline
+ </td>
+ <td>
+ Required with constraints
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None</p>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_styling_inheritance_region'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>styling-inheritance-region</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #styling-inheritance-region
+ </td>
+ <td>
+ Required
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None</p>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_textAlign_absolute'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>textAlign-absolute</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #textAlign-absolute
+ </td>
+ <td>
+ Required
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None</p>
+ </section>
+ </section>
+ <section id='Constrained_TTML_Feature_textDecoration_under'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>textDecoration-under</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #textDecoration-under
+ </td>
+ <td>
+ Required with Constraints
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ None</p>
+ </section>
+ </section>
+ </section>
+ <section id='layout_constraints'>
+ <h2>
+ Layout Constraints</h2>
+ <p>
+ </p>
+ <section id='Constrained_TTML_Feature_layout'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>layout</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #layout
+ </td>
+ <td>
+ Required with constraints
+ </td>
+ <td>
+ region attribute
+ </td>
+ <td>
+ content
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ 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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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;"><</span><span style="color:#a31515;">p</span><span
+ style="color:blue;">></span> I always get the fuzzy end<span
+ style="color:blue;"><</span><span style="color:#a31515;">br</span><span
+ style="color:blue;">/></span>of the lollipop<span style="color:blue;"></</span><span
+ style="color:#a31515;">p</span><span style="color:blue;">></span>
+</pre> </section>
+ </section>
+ </section>
+ <section id='timing_constraints'>
+ <h2>
+ Timing Constraints</h2>
+ <p>
+ </p>
+ <section id='Constrained_TTML_Feature_timing'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>timing</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #timing
+ </td>
+ <td>
+ Required with constraints
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ </tr>
+ </table>
+ </section>
+ <section class='Core_Constraints'>
+ <h4>
+ Constraints</h4>
+ <p>
+ 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;"><</span><span style="color:#a31515;">p</span><span
+ style="color:blue;"> </span><span style="color:red;">begin</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">00:00:01.000</span>'<span
+ style="color:blue;"> </span><span style="color:red;">end</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">00:00:11.123</span>'<span
+ style="color:blue;"> </span><span style="color:red;">region</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span
+ style="color:blue;"> ></span>Test<span style="color:blue;"></</span><span
+ style="color:#a31515;">p</span><span style="color:blue;">></span>
+</pre>
+ <p data-transform='constraint'>
+ For timing in hh:mm:ss.ms, the following format MUST be used:
+ <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;"><</span><span style="color:#a31515;">p</span><span
+ style="color:blue;"> </span><span style="color:red;">begin</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">00:00:01:00</span>'<span
+ style="color:blue;"> </span><span style="color:red;">end</span><span
+ style="color:blue;">=</span>'<span style="color:blue;">00:00:11:22</span>'<span
+ style="color:blue;"> </span><span style="color:red;">region</span><span
+ style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span
+ style="color:blue;"> ></span>Test<span style="color:blue;"></</span><span
+ style="color:#a31515;">p</span><span style="color:blue;">></span>
+</pre> </section>
+ </section>
+ <section id='Constrained_TTML_Feature_time_offset'>
+ <h2>
+ Use of Constrained TTML Feature <span data-transform='term'>time-offset-*</span></h2>
+ <p>
+ </p>
+ <section class='Usage_Scenario'>
+ <h4>
+ Usage Scenario</h4>
+ <table style="width: 100%;">
+ <tr>
+ <th>
+ TTML Feature
+ </th>
+ <th>
+ Usage type
+ </th>
+ <th>
+ Context of Usage
+ </th>
+ <th>
+ Scope
+ </th>
+ <th>
+ Constraint
+ </th>
+ </tr>
+ <tr>
+ <td>
+ #time-offset<br />
+ #time-offset-with-frames
+ </td>
+ <td>
+ Required
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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>
+
+ </td>
+ <td>
+
+ </td>
+ <td>
+
+ </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;"><?</span><span style="color: #a31515;">xml</span><span
+ style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span
+ style="color: red;">encoding</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">utf-8</span>"<span style="color: blue;">?></span>
+<span style="color: blue;"><?</span><span style="color: #a31515;">xml</span><span
+ style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span
+ style="color: red;">encoding</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">utf-8</span>"<span style="color: blue;">?></span>
+<span style="color: blue;"><</span><span style="color: #a31515;">profile</span><span
+ style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>"<span style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">features</span><span
+ style="color: blue;"> </span><span style="color: red;">xml:base</span><span
+ style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml/feature/</span>"<span
+ style="color: blue;">></span>
+<span style="color: blue;"> <!--</span><span style="color: green;"> required (mandatory) feature support </span><span
+ style="color: blue;">--></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#animation<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-block<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#backgroundColor-inline<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#color<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#content<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#core<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#display-region<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#fontFamily-generic<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#fontSize<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#fontStyle-italic<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#frameRate<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">optional</span>"<span style="color: blue;">></span>#frameRateMultiplier<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#layout<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#length-percentage<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#length-positive<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#lineBreak-uax14<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#presentation<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#profile<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#structure<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#styling<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-content<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inheritance-region<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-inline<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#styling-referential<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#textAlign-absolute<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#textDecoration-under<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#textOutline-unblurred<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#time-offset<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#time-offset-with-frames<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#timing<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> <</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span
+ style="color: blue;">required</span>"<span style="color: blue;">></span>#writingMode-horizontal-lr<span
+ style="color: blue;"></</span><span style="color: #a31515;">feature</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"> </</span><span style="color: #a31515;">features</span><span
+ style="color: blue;">></span>
+<span style="color: blue;"></</span><span style="color: #a31515;">profile</span><span
+ style="color: blue;">></span>
+
+
+</pre>
+ </section>
+ <section id='error_handling'>
+ <h2>
+ Error handling</h2>
+ <p>
+ A presentation process may be presented with documents that contain features that
+ are not understood. The table that follows outlines the behavior expected under
+ specific conditions. The pre-requisite if the caption file is syntactically valid
+ XML.
+ <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 <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"> </span></td>
+ <td class="style4">
+ !</td>
+ <td class="style4">
+ "</td>
+ <td class="style4">
+ #</td>
+ <td class="style4">
+ $</td>
+ <td class="style4">
+ %</td>
+ <td class="style4">
+ &</td>
+ <td class="style4">
+ '</td>
+ <td class="style4">
+ (</td>
+ <td class="style4">
+ )</td>
+ <td class="style4">
+ *</td>
+ <td class="style4">
+ +</td>
+ <td class="style4">
+ ,</td>
+ <td class="style4">
+ -</td>
+ <td class="style4">
+ .</td>
+ <td class="style4">
+ /</td>
+ </tr>
+ <tr 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">
+ <</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+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">
+ </td>
+ <td class="style4">
+ ¡</td>
+ <td class="style4">
+ ¢</td>
+ <td class="style4">
+ £</td>
+ <td class="style4">
+ ¤</td>
+ <td class="style4">
+ ¥</td>
+ <td class="style4">
+ ¦</td>
+ <td class="style4">
+ §</td>
+ <td class="style4">
+ ¨</td>
+ <td class="style4">
+ ©</td>
+ <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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ Œ</td>
+ <td class="style4">
+ œ</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ Ÿ</td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ƒ</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ ‐</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ―</td>
+ <td class="style4">
+ ‖</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ‧</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ ₡</td>
+ <td class="style4">
+ ₢</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ₳</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ °C</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ °F</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ </tr>
+ <tr 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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ⅓</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ □</td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <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+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">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ </td>
+ <td class="style4">
+ ♩</td>
+ <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+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"> </span><font class="font5">708 Code(s) </font><font
+ class="font6"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style2" width="65">glyph</td><td class="style3" width="57"><span
+ style="mso-spacerun:yes"> </span><font class="font5">Unicode</font><font
+ class="font6"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style2" width="211"><span style="mso-spacerun:yes"> </span><font
+ class="font5">Unicode Description </font><font class="font6"><span
+ style="mso-spacerun:yes"> </span></font></td></tr><tr height="20"
+ style="height:15.0pt"><td class="style5" height="20"><span style="mso-spacerun:yes"> </span><font
+ class="font8">7F </font><font class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">♪ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">266A </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Eighth Note </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1025 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">… </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2026 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Horizontal ellipsis </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">102A </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">Š </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">0160 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Latin capital letter S with caron </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">102C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">OE </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">0152 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Latin capital ligature OE </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1030 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">█ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2588 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Full block </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1031 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">‘ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2018 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Left single quotation mark </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1032 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">‘ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2019 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Right single quotation mark </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1033 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">“ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">201C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Left double quotation mark </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1034 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">“ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">201D </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Right double quotation mark </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1035 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">• </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2022 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Bullet </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1039 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">™ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2122 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Trade mark sign </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">103A </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">š </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">0161 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Latin small letter S with caron </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">103C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">oe </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">0153 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Latin small ligature OE </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">103D </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">℠ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2120 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Service mark sign </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">103F </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">Ÿ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">0178 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Latin capital letter Y with dieresis</font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1076 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">⅛ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">215B </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Vulgar fraction one eighth </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1077 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">⅜ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">215C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Vulgar fraction three eighths </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1078 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">⅝ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">215D </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Vulgar fraction five eighths </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">1079 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">⅞ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">215E </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Vulgar fraction seven eighths </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107A </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">│ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2502 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light vertical </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107B </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">┐ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2510 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light down and left </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">└ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2514 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light up and right </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107D </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">─ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2500 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light horizontal </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107E </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">┘ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">2518 </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light up and left </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td></tr><tr
+ height="20" style="height:15.0pt"><td class="style5" height="20"><span
+ style="mso-spacerun:yes"> </span><font class="font8">107F </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">┌ </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style6"><span style="mso-spacerun:yes"> </span><font class="font8">250C </font><font
+ class="font7"><span style="mso-spacerun:yes"> </span></font></td><td
+ class="style7"><span style="mso-spacerun:yes"> </span><font class="font8">Box drawings light down and right</font><font
+ class="font7"><span style="mso-spacerun:yes"> </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>