Timed Text

## Contents

* 1 Definition
* 2 Typical applications
* 3 Related formats and software
* 4 TTML in iTunes
* 5 TTML in Flash CS3/4/5/6/CC
* 5.1 Adobe's manual and example
* 5.2 A Timed Text DTD (mini DTD!)
* 5.3 A Template and example
* 6 Links
* 6.1 Specifications
* 6.2 Introductions / discussions
* 6.3 Vendor documentation

## Definition[edit | edit source]

"The Timed-Text specification should cover all necessary aspects of timed text on the Web. Typical applications of timed text are the real time subtitling of foreign-language movies on the Web, captioning for people lacking audio devices or having hearing impairments, karaoke, scrolling news items or teleprompter applications." (Timed-Text, retrieved 18:16, 27 September 2007 (MEST)).

Timed text (also called TTML or simply TT) is quite a complex format, but in some contexts (e.g. Flash captioning) understanding of a small subset will do.

See also: WebVTT (another, similar standard)

## Typical applications[edit | edit source]

According to this:

* Subtitles of movies on the Web (foreign languages)
* Captions for people lacking audio devices or having hearing disabilities
* Karaoke
* Scrolling news, credits rolls
* TickerTape, marquee, "crawls"
* Text overlay
* TelePrompter

## Related formats and software[edit | edit source]

Timed Text is supported to various degrees by various software, e.g.

* Flash
* Real Player

There is also an interaction with other formats, e.g.

* SMIL
* MPEG-4
* 3GPP

## TTML in iTunes[edit | edit source]

Apple uses iTunes Timed Text (iTT) which is a subset of TTML, Version 1.0

"The iTT file format is a subset of the TimedText Markup Language ,Version 1.0 W3C Candidate Recommendation 23 February 2010 (TTML) (http://www.w3.org/TR/2010/CR-ttaf1-dfxp-20100223/) from the World WideWeb Consortium (W3C) (http://w3.org/). All iTT documents are TTML documents that use the restricted subsetof TTML. An iTT document specifies the font style, font color,text alignment, and layout of the timed text, as well as the text itself and the timing. [...] .Once the iTT document has been created and saved with the .itt extension, it is delivered as an asset in the <assets> block in either an asset-only update or withthe full film metadata.xml" (iTunes Package Film Specification 5.0, p. 143, retrieved May 2015).

## TTML in Flash CS3/4/5/6/CC[edit | edit source]

Flash CS3 and later versions support a subset of the W3C Working Draft 27 April 2006

### Adobe's manual and example[edit | edit source]

I find the documentation in Flash CS3 a bit sloppy. Also, I don't think that id's should be numbers. In addition, I tried to validate the Adobe example against both the candidate specification and the older April version and it doesn't validate. Maybe it's no only Adobe's fault, but I really don't like situations where you are supposed to use a standard and where examples given don't match standards.

Here is the example from the Using Timed Text captions in the Flash CS5 Documentation (probably the same as the CS3 one):

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="1" tts:textAlign="right"/>
<style id="2" tts:color="transparent"/>
<style id="3" style="2" tts:backgroundColor="white"/>
<style id="4" style="2 3" tts:fontSize="20"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="00:00:00.00" dur="00:00:03.07">I had just joined <span tts:fontFamily="monospaceSansSerif,proportionalSerif,TheOther"tts:fontSize="+2">Macromedia</span> in 1996,</p>
<p begin="00:00:03.07" dur="00:00:03.35">and we were trying to figure out what to do about the internet.</p>
<p begin="00:00:06.42" dur="00:00:03.15">And the company was in dire straights at the time.</p>
<p begin="00:00:09.57" dur="00:00:01.45">We were a CD-ROM authoring company,</p>
<p begin="00:00:11.42" dur="00:00:02.00">and the CD-ROM business was going away.</p>
<p begin="00:00:13.57" dur="00:00:02.50">One of the technologies I remember seeing was Flash.</p>
<p begin="00:00:16.47" dur="00:00:02.00">At the time, it was called <span tts:fontWeight="bold" tts:color="#ccc333">FutureSplash</span>.</p>
<p begin="00:00:18.50" dur="00:00:01.20">So this is where Flash got its start.</p>
<p begin="00:00:20.10" dur="00:00:03.00">This is smart sketch running on the <span tts:fontStyle="italic">EU-pin computer</span>,</p>
<p begin="00:00:23.52" dur="00:00:02.00">which was the first product that FutureWave did.</p>
<p begin="00:00:25.52" dur="00:00:02.00">So our vision for this product was to</p>
<p begin="00:00:27.52" dur="00:00:01.10">make drawing on the computer</p>
<p begin="00:00:29.02" dur="00:00:01.30" style="1">as <span tts:color="#ccc333">easy</span> as drawing on paper.</p>
</div>
</body>
</tt>

### A Timed Text DTD (mini DTD!)[edit | edit source]

<!-- mini-tt.dtd
Mini Timed TEXT DTD for use with Flash CS3
Version 0.9 Sept 27 2007
Copyright: Freeware
Daniel K. Schneider, TECFA, http://edutechwiki.unige.ch/en/Timed_Text
Disclaimer: It's not complete, I don't understand Timed Text
I find Adobe's doc shaky. My only claim is that this validates their example ;)
-->

<!ELEMENT tt (head, body)>
<!ATTLIST tt xmlns CDATA #FIXED "http://www.w3.org/2006/04/ttaf1">
<!ATTLIST tt xml:lang CDATA #FIXED "en">
<!ATTLIST tt xmlns:tts CDATA #FIXED "http://www.w3.org/2006/04/ttaf1#styling">

<!ELEMENT head (styling?)>

<!ELEMENT styling (style*)>

<!ELEMENT style EMPTY>
<!ATTLIST style
style CDATA #IMPLIED
id CDATA #REQUIRED
tts:backgroundColor CDATA #IMPLIED
tts:color CDATA #IMPLIED
tts:fontFamily CDATA #IMPLIED
tts:fontSize CDATA #IMPLIED
tts:fontStyle (normal|italic|inherit) "inherit"
tts:fontWeight CDATA #IMPLIED
tts:textAlign (left|right|center|start|end|inherit) "inherit"
tts:wrapOption (wrap|noWrap|inherit) "inherit"

<!ELEMENT body (div)>
<!ELEMENT div (p*)>
<!ATTLIST div xml:lang CDATA #FIXED "en">

<!ELEMENT p (#PCDATA|span)*>
<!ATTLIST p
begin CDATA #REQUIRED
dur CDATA #IMPLIED
end CDATA #IMPLIED
style CDATA #IMPLIED

<!ELEMENT span (#PCDATA)>
<!ATTLIST span
tts:backgroundColor CDATA #IMPLIED
tts:color CDATA #IMPLIED
tts:fontFamily CDATA #IMPLIED
tts:fontSize CDATA #IMPLIED
tts:fontStyle (normal|italic|inherit) "inherit"
tts:fontWeight CDATA #IMPLIED
tts:textAlign (left|right|center|start|end|inherit) "inherit"
tts:wrapOption (wrap|noWrap|inherit) "inherit"

I then made this mini DTD that should help you writing these files. Disclaimer:

* I made it in 30 minutes and I hate computers and don't know how to use them.
* Adobe probably implements more features, but this should do for starters.

Notes about attributes:

Attributes of the style element can't be ID attributes the way they are used. Same holds for the style attribute of p element and that can refer to one of the styles defined in the styling section.

color
Either use a the typical #RRGGBB hex notation
or choose from white | black | silver | grey | maroon | red | purple | fuchsia | magenta | green | lime | olive | yellow | navy | blue | teal | aqua | cyan | transparent

FontFamily
Choose from a combination of monospace, sansSerif, serif, monospaceSansSerif, monospaceSerif, proportionalSansSerif

Duration
Choose from of these formats:

00:03:00.1  (hours:minutes:seconds:milliseconds)
03:00.1     (minutes:seconds:milliseconds)
10          (seconds)

### A Template and example[edit | edit source]

Template using my mini DTD

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Let's start</p>

</div>
</body>
</tt>

Example that works, see Flash video component tutorial for more.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="0" dur="9" style="title">Daniel's Office</p>
<p begin="5" dur="4">My Palm Tree (from NYC)</p>
<p begin="10" dur="13" style="title">Books ....</p>
<p begin="11" dur="7">My Bookshelf</p>
<p begin="18" dur="5">My favorite Flash Drawing <span tts:color="red">Book</span></p>
<p begin="24" dur="16" style="title">Computers ....</p>
<p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
<p begin="30" dur="5">My <span tts:backgroundColor="yellow" tts:color="black">Ubuntu Linux workstation</span></p>
<p begin="35" dur="5"><span tts:backgroundColor="transparent"></span>Working hard on Flash Tutorials using the Xemacs Editor</p>
<p begin="40" dur="4">The outside (not my bike)</p>
</div>
</body>
</tt>

Flash CS6 and examples

* Flash video captions tutorial
* Examples files are the same as for CS3 below...

Flash CS3 and examples

* Flash CS3 video component tutorial
* flash-cs3-video-simple-server-caption2.html
* Grab the flash-cs3-video-video-simple-server-caption2.* files from

http://tecfa.unige.ch/guides/flash/ex/component-video-intro/

## Links[edit | edit source]

### Specifications[edit | edit source]

* Timed-Text W3C Home Page
* Timed Text (TT) Authoring Format 1.0 - Distribution Format Exchange Profile (DFXP) OLD W3C Working Draft 27 April 2006.
* Timed Text Markup Language (TTML) 1.0. W3C Recommendation 18 November 2010.
* Timed Text Markup Language 1 (TTML1). Latest edition of version 1, 2013
* Timed Text Markup Language 2 (TTML2). Latest edition of version 2. (W3C First Public Working Draft on 12 February 2015)

### Introductions / discussions[edit | edit source]

* What is Timed Text?, InDelv.com, Aug 2007.

* WebVTT versus TTML: XML considered harmful for web captions?, Andreas Tai, Institut fuer Rundfunktechnik, Munich in Balisage: The Markup Conference 2013.

### Vendor documentation[edit | edit source]

* Timed Text Tags (dead link)
* Use Timed Text captions (List of supported tabs, Adobe Flash)
* Upload subtitles and closed captions (YouTube documentation, Google)