### TTML2 Common Caption Style Examples
Source: https://www.w3.org/TR/ttml2/index
Provides examples of common caption styling techniques used in TTML2, such as pop-on, roll-up, and paint-on captions.
```APIDOC
Common Caption Style Examples:
Pop-On Caption Example: Demonstrates the pop-on caption style.
Roll-Up Caption Example: Illustrates the roll-up caption style.
Paint-On Caption Example: Shows the paint-on caption style.
```
--------------------------------
### TTML2 tts:textShadow Example
Source: https://www.w3.org/TR/ttml2/index
An example demonstrating the use of the tts:textShadow attribute to apply a lime-colored shadow with specific offsets and blur to a span of text.
```XML
I serve it with greens in those
shadowy scenes,
And I use it for striking a light:
```
--------------------------------
### TTML2 Region Style Animation Example
Source: https://www.w3.org/TR/ttml2/index
Illustrates the basic structure for using the 'set' element to animate region styling, although the example is incomplete.
```XML
...
```
--------------------------------
### TTML2 Media Timing Example 2
Source: https://www.w3.org/TR/ttml2/index
A second TTML2 fragment illustrating media timing. This example shows how the computed document times are shifted to align with media times, resulting in different absolute begin and end times for the content.
```xml
...
First paragraph
Second paragraph
```
--------------------------------
### TTML2 Opacity Example
Source: https://www.w3.org/TR/ttml2/index
An example demonstrating the usage of the tts:opacity style attribute in TTML2 to control the transparency of text spans.
```html
And then there were none.
```
--------------------------------
### Pop-On Caption Example in TTML
Source: https://www.w3.org/TR/ttml2/index
Demonstrates the implementation of Pop-On captions using TTML. This example showcases how to define regions, time content, and style captions for a pop-on effect, where captions appear simultaneously and remain on screen for their duration.
```xml
Lorem ipsum dolor sit
Amet consectetur adipiscing elit
Sed do eiusmod tempor incididunt labore
et dolore magna aliqua
Ut enim ad minim veniam quis, nostrud
```
--------------------------------
### TTML2 Media Timing Example 1
Source: https://www.w3.org/TR/ttml2/index
An example TTML2 fragment demonstrating media timing where the document times are directly mapped to media times. The 'ttp:timeBase="media"' attribute is used.
```xml
...
First paragraph
Second paragraph
```
--------------------------------
### TTML2 Text Decoration Example
Source: https://www.w3.org/TR/ttml2/index
An example fragment demonstrating the usage of the tts:textDecoration attribute within TTML2 to apply different text decorations (underline, noUnderline, lineThrough) to various spans of text.
```XML
...
The sea was wet as wet
could be,
The sand was dry as dry. There weren't any
You couldn't
could not see a cloud
Because no cloud was in the sky.
```
--------------------------------
### TTML Source Document Example
Source: https://www.w3.org/TR/ttml2/index
This snippet shows a sample TTML document with two regions and content distributed across them. It defines layout, styling, and temporal activation of content.
```ttml
Text 1
Text 2
Text 3
Text 4
```
--------------------------------
### TTML2 Conformance and Example Fragment
Source: https://www.w3.org/TR/ttml2/index
Details the general conformance requirements for TTML2 documents and processors. Includes a sample TTML fragment illustrating basic structure.
```APIDOC
Conformance:
- This section specifies general conformance requirements for TTML2 documents and processors.
- Sections or appendices marked 'Non-Normative' are considered non-normative.
- Paragraphs marked as 'Note' are considered non-normative.
Example Fragment:
- Example code fragments are depicted with a light blue-green background and labeled 'Example Fragment'.
- Fragments are often abbreviated and may require augmentation to be valid TTML documents.
```
```XML
```
--------------------------------
### TTML2 Gain Example
Source: https://www.w3.org/TR/ttml2/index
An HTML fragment demonstrating the usage of the tta:gain attribute on audio and paragraph elements to control audio gain levels.
```html
```
--------------------------------
### TTML2 Region Animation Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates how to define a region with time-varying position using 'set' elements within TTML2. This example shows a region 'r1' that moves over time within a 40x16 cell grid.
```XML
...
```
--------------------------------
### TTML2 Image Element Examples
Source: https://www.w3.org/TR/ttml2/index
Demonstrates various ways to use the TTML2 image element, including external image resources, embedded image resources, and fallbacks.
```html
This division has a content image that appears as a block area after this paragraph.
```
```html
This division has a background image that appears under this paragraph.
```
--------------------------------
### TTML2 Shear Example
Source: https://www.w3.org/TR/ttml2/index
An example demonstrating the usage of the tts:shear attribute in TTML2 to apply different shear transformations to paragraphs within regions.
```XML
...
山の
最多1998年
山の
最多1998年
```
--------------------------------
### TTML2 tts:textOutline Example
Source: https://www.w3.org/TR/ttml2/index
An example of using the tts:textOutline attribute within a TTML2 region style to apply a black outline with a 2px thickness and 0px blur to text.
```XML
...
```
--------------------------------
### Text Combine Example Fragment
Source: https://www.w3.org/TR/ttml2/index
An HTML fragment demonstrating the usage of the tts:textCombine attribute with 'none' and 'all' values.
```html
あい
AB34三四
あい
AB34三四
```
--------------------------------
### TTML2 Origin Feature
Source: https://www.w3.org/TR/ttml2/index
Documentation for the TTML2 origin feature, which defines the starting point for layout and positioning within a document or region.
```APIDOC
origin:
Description: Specifies the origin point for layout and positioning.
Applies to: Regions and elements.
Reference: https://www.w3.org/TR/ttml2/#feature-origin
```
--------------------------------
### TTML2 Roll-Up Caption Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates roll-up captions in TTML2, achieved through overlapped time intervals for paragraphs. This example shows how multiple lines can appear and disappear smoothly or discretely.
```xml
Lorem ipsum dolor sit Amet consectetur adipiscing elit Sed do eiusmod tempor incididunt labore et dolore magna aliqua Ut enim ad minim veniam quis, nostrud
```
--------------------------------
### TTML2 Embedded Content Examples
Source: https://www.w3.org/TR/ttml2/index
Illustrates the usage of the 'source' element with external, non-nested, and nested embedded sources in TTML2.
```html
```
```html
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8
YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII=
```
```html
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8
YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII=
```
--------------------------------
### TTML2 animate Element Examples
Source: https://www.w3.org/TR/ttml2/index
Demonstrates valid and invalid usage of the TTML2 'animate' element, highlighting attribute value matching with keyTimes for single and multiple attribute animations.
```xml
```
--------------------------------
### TTML2 Agent Metadata Example
Source: https://www.w3.org/TR/ttml2/index
An example demonstrating the usage of ttm:agent and ttm:name elements within the head section of a TTML2 document to define a person agent (Sean Connery) and a character agent (James Bond) linked to the person agent.
```xml
ConneryThomas SeanSeanSir Thomas Sean ConneryBondJames007
...
I travel, a sort of licensed troubleshooter.
...
```
--------------------------------
### TTML Metadata Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates how to specify document-level metadata in TTML, such as title and copyright information, using the 'ttm' namespace.
```xml
Timed Text TTML ExampleThe Authors (c) 2006
```
--------------------------------
### TTML2 Line Shear Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates the usage of the tts:lineShear attribute in TTML2 to apply a shear transformation to lines of text. The example shows two paragraphs with different line shear values, illustrating the visual effect.
```html
...
山の遭難そうなん 最多さいた年ねん
山の遭難そうなん 最多さいた年ねん
```
--------------------------------
### TTML2 Document Metadata Example
Source: https://www.w3.org/TR/ttml2/index
Illustrates how to use the 'metadata' element within the section to provide document-level metadata, such as title and description, using the TTML metadata namespace.
```XML
Document Metadata ExampleThis document employs document metadata.
```
--------------------------------
### TTML2 Region Padding Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates the application of tts:padding to a region element in TTML2. It shows how padding values affect the content area and background rendering.
```html
...
Just the place for a Snark! I have said it twice:
That alone should encourage the crew.
Just the place for a Snark! I have said it thrice:
What I tell you three times is true.
```
--------------------------------
### TTML2 Element Metadata Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates the use of the 'metadata' element within a content element (e.g.,
) to associate metadata specifically with that element, using the TTML metadata namespace.
```XML
Chapter 6 – Sherlock Holmes Gives a DemonstrationHolmes shows Watson how the murderer entered the window.
```
--------------------------------
### TTML2 Content Style Animation Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates how to use the 'set' element to animate the 'tts:color' style property of a paragraph element over time.
```XML
Text with Flashing Colors!
```
--------------------------------
### TTML2 Paint-On Caption Example
Source: https://www.w3.org/TR/ttml2/index
Illustrates paint-on captions in TTML2, where individual words are timed to appear sequentially. This creates an effect of text being 'painted' onto the screen word by word.
```xml
Loremipsumdolorsit
Ametconsecteturadipiscingelit
Seddoeiusmodtemporincididunt labore
etdoloremagnaaliqua
Utenimadminimveniamquis,nostrud
```
--------------------------------
### Inline Styling Example
Source: https://www.w3.org/TR/ttml2/index
Demonstrates inline styling in TTML2, where style properties are directly specified on an element using attributes from the TT Style Namespaces. Inline styling has higher priority than other association methods.
```XML
White 1 Yellow White 2
```
--------------------------------
### TTML2 Example Fragment - Font Size
Source: https://www.w3.org/TR/ttml2/index
An XML fragment illustrating the application of tts:fontSize within TTML2, showing style definitions and content with inline font size adjustments.
```xml
...
Then fill up the glasses
with treacle and ink,
Or anything else
that is pleasant to drink.
```
--------------------------------
### TTML Body Content with Timed Paragraphs
Source: https://www.w3.org/TR/ttml2/index
An example of TTML body content, featuring paragraphs ('p' elements) with specified begin and end times, assigned to a layout region, and applying styles.
```xml
It seems a paradox, does it not,
the image formed on
the Retina should be inverted?
It is puzzling, why is it
we do not see things upside-down?
You have never heard the Theory,
then, that the Brain also is inverted?
No indeed! What a beautiful fact!
But how is it proved?
Thus: what we call
the vertex of the Brain
is really its base
and what we call its base
is really its vertex,
```
--------------------------------
### Referential Styling Example
Source: https://www.w3.org/TR/ttml2/index
Illustrates referential styling in TTML2, where style properties are defined in separate