Timed Text

The educational technology and digital learning wiki
Jump to navigation Jump to search

Definition

“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

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

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

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

TTML in iTunes

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

TTML in Flash CS3/4/5/6/CC

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

Adobe's manual and example

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!)

<!-- 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:

id
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

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 CS3 and examples

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

Links

Specifications

Introductions / discussions


Vendor documentation

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Timed_Text&oldid=55776"