Timed Text: Difference between revisions

Latest revision as of 17:28, 27 May 2015

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.

Flash
Real Player

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

SMIL
MPEG-4
3GPP

TTML in iTunes

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

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

Specifications

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

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

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

Timed Text: Difference between revisions

Latest revision as of 17:28, 27 May 2015

Contents

Definition

Typical applications

Related formats and software

TTML in iTunes

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

Adobe's manual and example

A Timed Text DTD (mini DTD!)

A Template and example

Links

Specifications

Introductions / discussions

Vendor documentation

Navigation menu

Timed Text: Difference between revisions

Latest revision as of 17:28, 27 May 2015

Definition

Typical applications

Related formats and software

TTML in iTunes

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

Adobe's manual and example

A Timed Text DTD (mini DTD!)

A Template and example

Links

Specifications

Introductions / discussions

Vendor documentation

Navigation menu

Slow Search