Accessibility/Video Text Format Comparison: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(ups had to reference style in TTML)
(trying WebSRT for top-to-bottom rendered subtitles)
Line 9: Line 9:
<pre>
<pre>
<tt xml:lang="en-US" xmlns="http://www.w3.org/ns/ttml">
<tt xml:lang="en-US" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
  </head>
   <body>
   <body>
     <div>
     <div>
Line 15: Line 20:
       <p begin="00:00:20.11" end="00:00:21.96">...the head-snarlers</p>
       <p begin="00:00:20.11" end="00:00:21.96">...the head-snarlers</p>
       <p begin="00:00:21.99" end="00:00:24.36">Everything is safe.&lt;br/>Perfectly safe.</p>
       <p begin="00:00:21.99" end="00:00:24.36">Everything is safe.&lt;br/>Perfectly safe.</p>
    </div>
   </body>
   </body>
</tt>
</tt>
</pre>
</pre>


WebSRT:
WebSRT:


<pre>
<pre>
  ; not sure how to specify that this is in de-DE
  ; not sure how to specify that these are subtitles
   1
   1
   00:00:15.00" --> 00:00:17.95
   00:00:15.00" --> 00:00:17.95
Line 39: Line 49:
   Perfectly safe.
   Perfectly safe.
</pre>
</pre>


WMML:
WMML:
Line 53: Line 64:
</wmml>
</wmml>
</pre>
</pre>
Analysis:
* All three formats provide for the basic needs.
* You cannot specify the default language in WebSRT.
* You cannot specify the type of time-aligned text in WebSRT.




Line 60: Line 78:


<pre>
<pre>
<tt xml:lang="de_DE" xmlns="http://www.w3.org/ns/ttml">
<tt xml:lang="de-DE" xmlns="http://www.w3.org/ns/ttml">
   <head>
   <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
     <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
     <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
       <style xml:id="s1"
       <style xml:id="s1"
Line 79: Line 100:
   </head>
   </head>
   <body>
   <body>
     <div>
     <div style="s1" >
       <p region="c1" begin="00:00:15.00" end="00:00:17.95">
       <p region="c1" begin="00:00:15.00" end="00:00:17.95">
         Auf der <span tts:fontStyle="italic">linken</span> Seite sehen wir...
         Auf der <span tts:fontStyle="italic">linken</span> Seite sehen wir...
Line 86: Line 107:
         Auf der <span tts:fontWeight="bold">rechten</span> Seite sehen wir die....
         Auf der <span tts:fontWeight="bold">rechten</span> Seite sehen wir die....
       </p>
       </p>
       <p style="s1" begin="00:00:20.11" end="00:00:21.96">
       <p begin="00:00:20.11" end="00:00:21.96">
         <!-- Can't provide a URL hyperlink in TTML :( -->
         <!-- Have to use xlink to provide URL hyperlink in TTML -->
         ..die Enthaupter.
         ..die <span  xlink:href="http://orange.blender.org/blog/creative-commons-license-2/"
                              xlink:actuate="onRequest" xlink:show="replace"
                              xmlns:xlink="http://www.w3.org/1999/xlink">Enthaupter</span>.
       </p>
       </p>
       <p style="s1" begin="00:00:21.99" end="00:00:24.36">
       <p begin="00:00:21.99" end="00:00:24.36">
         <!-- Can't just mark a section as emphasised - gotta chose how -->
         <!-- Can't just mark a section as emphasised - gotta chose how to emphasise -->
         Alles ist <span tts:textDecoration="underline">sicher</span>.<br/>Vollkommen sicher.</p>
         Alles ist <span tts:textDecoration="underline">sicher</span>.<br/>Vollkommen sicher.</p>
    </div>
   </body>
   </body>
</tt>
</tt>
</pre>
</pre>


WebSRT:
WebSRT:


<pre>
<pre>
   1
   ; not sure how to specify that this is in de-DE
  ; not sure how to specify that these are subtitles
  ; not sure how to provide a background color
 
  1
   00:00:15.00" --> 00:00:17.95
   00:00:15.00" --> 00:00:17.95
   Auf der <i>linken</i> Seite sehen wir...
   Auf der <i>linken</i> Seite sehen wir...
Line 107: Line 136:
   00:00:18.16 --> 00:00:20.08
   00:00:18.16 --> 00:00:20.08
   Auf der <b>rechten</b> Seite sehen wir die....
   Auf der <b>rechten</b> Seite sehen wir die....
  ; next cue: Can't provide a URL in WebSRT cues :(


   3
   3
   00:00:20.11 --> 00:00:21.96
   00:00:20.11 --> 00:00:21.96
   ...die <a href="http://orange.blender.org/blog/creative-commons-license-2/">Enthaupter</a>.
   ...die Enthaupter.
 
  ; next cue: Can't provide a specially marked section in WebSRT cues :(


   4
   4
   00:00:21.99 --> 00:00:24.36
   00:00:21.99 --> 00:00:24.36
   Alles ist <mark>sicher</mark>.
   Alles ist sicher.
   Vollkommen sicher.
   Vollkommen sicher.
</pre>
</pre>


WMML:
WMML:
Line 122: Line 156:
<pre>
<pre>
<!DOCTYPE wmml>
<!DOCTYPE wmml>
<wmml lang="de_DE" kind="subtitles">
<wmml lang="de-DE" kind="subtitles">
   <head>
   <head>
     <style type="text/css">
     <style type="text/css">
Line 153: Line 187:
</pre>
</pre>


Top-to-bottom rendered subtitles:
 
Analysis:
 
* TTML needs to use some XML namespace (e.g. xlink) to provide for hyperlinks.
* WebSRT does not provide for default language specification.
* WebSRT does not provide a role/type/kind attribute to signify that these are subtitles
* WebSRT does not provide for general styling, e.g. how to specify a background color. (TBD?)
* WebSRT does not enable reuse of styling between individual cues. (TBD?)
* WebSRT does not provide for URL hyperlinking in cues.
* WebSRT does not provide for special emphasis sections ("mark"-style).
 
 
=== Top-to-bottom rendered subtitles ===
 
TTML:
 
<pre>
<tt xml:lang="zh" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
    <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <style xml:id="s1"
        tts:writingMode="tbrl"
      />
    </styling>
    <layout xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <region xml:id="subtitleArea"
        style="s1"
        tts:padding="2% 2% 2% 64%"
        tts:textAlign="right"
      />
    </layout>
  </head>
  <body>
    <div style="s1">
      <p begin="00:00:15.00" end="00:00:17.95">在左边我们可以看到...</p>
      <p begin="00:00:18.16" end="00:00:20.08">在右边我们可以看到...</p>
      <p begin="00:00:20.11" end="00:00:21.96">...捕蝇草械.</p>
      <p begin"00:00:21.99" end="00:00:24.36">一切都安全.&lt;br/>非常地安全.</p>
    </div>
  </body>
</tt>
</pre>
 
 
WebSRT:
 
<pre>
  ; not sure how to specify that this is in zh
  ; not sure how to specify that these are subtitles
 
    cue {
      writing-mode: tb-rl;
      margin: 2% 2% 2% 64%;
    }
 
  1
  00:00:15.00" --> 00:00:17.95 A:start D:vertical
  在左边我们可以看到...
 
  2
  00:00:18.16 --> 00:00:20.08 A:start D:vertical
  在右边我们可以看到...
 
  3
  00:00:20.11 --> 00:00:21.96 A:start D:vertical
  ...捕蝇草械.
 
  4
  00:00:21.99 --> 00:00:24.36 A:start D:vertical
  一切都安全.
  非常地安全.
</pre>
 
 
WMML:


<pre>
<pre>
Line 173: Line 284:
</wmml>
</wmml>
</pre>
</pre>
Analysis:
* TTML has no margin attribute, just padding.


2. Captions
2. Captions

Revision as of 03:24, 5 July 2010

On this page we will find a comparison of time-aligned text example files for several typical application areas. The example files are written in TTML, WebSRT and WMML and try to determine the simplicity/complexity of authoring these formats and whether they fall short in some requirements.

Subtitles

Simple, unformatted subtitles

TTML: 

<tt xml:lang="en-US" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
  </head>
  <body>
    <div>
      <p begin="00:00:15.00" end="00:00:17.95">At the left we can see...</p>
      <p begin="00:00:18.16" end="00:00:20.08">At the right we can see the...</p>
      <p begin="00:00:20.11" end="00:00:21.96">...the head-snarlers</p>
      <p begin="00:00:21.99" end="00:00:24.36">Everything is safe.<br/>Perfectly safe.</p>
    </div>
  </body>
</tt>


WebSRT: 

  ; not sure how to specify that this is in de-DE
  ; not sure how to specify that these are subtitles

  1
  00:00:15.00" --> 00:00:17.95
  At the left we can see...

 2
  00:00:18.16 --> 00:00:20.08
  At the right we can see the...

  3
   00:00:20.11 --> 00:00:21.96
  ...the head-snarlers

  4
  00:00:21.99 --> 00:00:24.36
  Everything is safe.
  Perfectly safe.


WMML: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="subtitles">
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95">At the left we can see...</cue>
    <cue start="00:00:18.16" end="00:00:20.08">At the right we can see the...</cue>
    <cue start="00:00:20.11" end="00:00:21.96">...the head-snarlers</cue>
    <cue start="00:00:21.99" end="00:00:24.36">Everything is safe.<br/>Perfectly safe.</cue>
  </cuelist>
</wmml>


Analysis:

  • All three formats provide for the basic needs.
  • You cannot specify the default language in WebSRT.
  • You cannot specify the type of time-aligned text in WebSRT.


Formatted subtitles with hyperlink

TTML: 

<tt xml:lang="de-DE" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
    <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <style xml:id="s1"
        tts:backgroundColor=rgba(0,0,0,0.5)
      />
    </styling>
    <layout xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <region xml:id="c1"
        style="s1"
        tts:textAlign="left"
      />
      <region xml:id="c2"
        style="s1"
        tts:textAlign="right"
      />
    </layout>
  </head>
  <body>
    <div style="s1" >
      <p region="c1" begin="00:00:15.00" end="00:00:17.95">
        Auf der <span tts:fontStyle="italic">linken</span> Seite sehen wir...
      </p>
      <p region="c2" begin="00:00:18.16" end="00:00:20.08">
        Auf der <span tts:fontWeight="bold">rechten</span> Seite sehen wir die....
      </p>
      <p begin="00:00:20.11" end="00:00:21.96">
        <!-- Have to use xlink to provide URL hyperlink in TTML -->
        ..die <span  xlink:href="http://orange.blender.org/blog/creative-commons-license-2/"
                               xlink:actuate="onRequest" xlink:show="replace"
                               xmlns:xlink="http://www.w3.org/1999/xlink">Enthaupter</span>.
      </p>
      <p begin="00:00:21.99" end="00:00:24.36">
        <!-- Can't just mark a section as emphasised - gotta chose how to emphasise -->
        Alles ist <span tts:textDecoration="underline">sicher</span>.<br/>Vollkommen sicher.</p>
    </div>
  </body>
</tt>


WebSRT: 

  ; not sure how to specify that this is in de-DE
  ; not sure how to specify that these are subtitles
  ; not sure how to provide a background color

   1
  00:00:15.00" --> 00:00:17.95
  Auf der <i>linken</i> Seite sehen wir...

  2
  00:00:18.16 --> 00:00:20.08
  Auf der <b>rechten</b> Seite sehen wir die....

  ; next cue: Can't provide a URL in WebSRT cues :(

  3
  00:00:20.11 --> 00:00:21.96
  ...die Enthaupter.

  ; next cue: Can't provide a specially marked section in WebSRT cues :(

  4
  00:00:21.99 --> 00:00:24.36
  Alles ist sicher.
  Vollkommen sicher.


WMML: 

<!DOCTYPE wmml>
<wmml lang="de-DE" kind="subtitles">
  <head>
    <style type="text/css">
    wmml {
      background: rgba(0,0,0,0.5);
    }
    cue.c1 {
      text-align: left;
    }
    cue.c2 span {
      text-align: right;
    }
    </style>
  </head>
  <cuelist>
    <cue id="c1" start="00:00:15.00" end="00:00:17.95">
      Auf der <i>linken</i> Seite sehen wir...
    </cue>
    <cue id="c2" start="00:00:18.16" end="00:00:20.08">
      Auf der <b>rechten</b> Seite sehen wir die....
    </cue>
    <cue id="c3" start="00:00:20.11" end="00:00:21.96" style="color: red;">
      ...die <a href="http://orange.blender.org/blog/creative-commons-license-2/">Enthaupter</a>.
    </cue>
    <cue id="c4" start="00:00:21.99" end="00:00:24.36">
      Alles ist <mark>sicher</mark>.<br/>Vollkommen sicher.
    </cue>
  </cuelist>
</wmml>


Analysis:

  • TTML needs to use some XML namespace (e.g. xlink) to provide for hyperlinks.
  • WebSRT does not provide for default language specification.
  • WebSRT does not provide a role/type/kind attribute to signify that these are subtitles
  • WebSRT does not provide for general styling, e.g. how to specify a background color. (TBD?)
  • WebSRT does not enable reuse of styling between individual cues. (TBD?)
  • WebSRT does not provide for URL hyperlinking in cues.
  • WebSRT does not provide for special emphasis sections ("mark"-style).


Top-to-bottom rendered subtitles

TTML: 

<tt xml:lang="zh" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
      <ttm:role>x-subtitles</ttm:role>
    </metadata>
    <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <style xml:id="s1"
        tts:writingMode="tbrl"
      />
    </styling>
    <layout xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <region xml:id="subtitleArea"
        style="s1"
        tts:padding="2% 2% 2% 64%"
        tts:textAlign="right"
      />
    </layout> 
  </head>
  <body>
    <div style="s1">
      <p begin="00:00:15.00" end="00:00:17.95">在左边我们可以看到...</p>
      <p begin="00:00:18.16" end="00:00:20.08">在右边我们可以看到...</p>
      <p begin="00:00:20.11" end="00:00:21.96">...捕蝇草械.</p>
      <p begin"00:00:21.99" end="00:00:24.36">一切都安全.<br/>非常地安全.</p>
    </div>
  </body>
</tt>


WebSRT: 

  ; not sure how to specify that this is in zh
  ; not sure how to specify that these are subtitles

    cue {
      writing-mode: tb-rl;
      margin: 2% 2% 2% 64%;
    }

  1
  00:00:15.00" --> 00:00:17.95 A:start D:vertical
  在左边我们可以看到...

  2
  00:00:18.16 --> 00:00:20.08 A:start D:vertical
  在右边我们可以看到...

  3
  00:00:20.11 --> 00:00:21.96 A:start D:vertical
  ...捕蝇草械.

  4
  00:00:21.99 --> 00:00:24.36 A:start D:vertical
  一切都安全.
  非常地安全.


WMML: 

<!DOCTYPE wmml>
<wmml lang="zh" kind="subtitles">
  <head>
    cue {
      writing-mode: tb-rl;
      margin: 2% 2% 2% 64%;
      text-align: right;
    }
  </head>
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95">在左边我们可以看到...</cue>
    <cue start="00:00:18.16" end="00:00:20.08">在右边我们可以看到...</cue>
    <cue start="00:00:20.11" end="00:00:21.96">...捕蝇草械.</cue>
    <cue start="00:00:21.99" end="00:00:24.36">一切都安全.<br/>非常地安全.</cue>
  </cuelist>
</wmml>


Analysis:

  • TTML has no margin attribute, just padding.


2. Captions 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="captions">
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95" voice="Proog">At the left we can see...</cue>
    <cue start="00:00:18.16" end="00:00:20.08" voice="Proog">At the right we can see the...</cue>
    <cue start="00:00:20.11" end="00:00:21.96" voice="Proog">...the head-snarlers<br/>[Whizzing noises]</cue>
    <cue start="00:00:21.99" end="00:00:24.36" voice="Proog">Everything is safe.<br/>Perfectly safe.</cue>
  </cuelist>
</wmml>

3. Lyrics 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="lyrics">
  <head>
    <title>Can't buy me Love</title>
    <meta name="m:title" content="Can't buy me love"/>
    <meta name="m:artist" content="Beatles, The"/>
    <meta name="m:author" cotent="Lennon & McCartney"/>
    <meta name="m:album" content="Beatles 1 - 27 #1 Singles"/>
    <meta name="m:by" content="Wooden Ghost"/>
  </head>
  <cuelist>
    <cue start="00:00:00.45" end="00:00:05.60">
      Can't <t at="00:00.75">buy</t> <t at="00:00.95">me</t> <t="00:01.40">love,</t> <t at="00:02.60">love,</t> <t at="00:03.95">love, </t> <t at="00:05.30">love</t>
    </cue>
    <cue start="00:00:05.90" end="00:00:08.90">
       Can't <t at="00:06.20">buy</t> <t at="00:06.40">me</t> <t at="00:06.70">love,</t> <t at="00:08.00">love</t>
    </cue>
    <cue start="00:00:09.35" end="00:00:11.55">
      I'll <t at="00:09.50">buy</t> <t at="00:09.75">you</t> <t at="00:10.15">a</t> <t at="00:10.25">dia</t><t at="00:10.50">mond</t> <t at="00:10.75">ring</t> <t at="00:11.10">my</t> <t at="00:11.40">friend</t>
    </cue>
  </cuelist>
</wmml>

4. Karaoke 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="karaoke">
  <head>
    <title>Can't buy me Love</title>
    <meta name="m:title" content="Can't buy me love"/>
    <meta name="m:artist" content="Beatles, The"/>
    <meta name="m:author" cotent="Lennon & McCartney"/>
    <meta name="m:album" content="Beatles 1 - 27 #1 Singles"/>
    <meta name="m:by" content="Wooden Ghost"/>
    <style>
      t {
        font-weight: bold;
        color: yellow;
      }
    </style>
  </head>
  <cuelist>
    <cue start="00:00:00.45" end="00:00:05.60">
      Can't <t at="00:00.75">buy</t> <t at="00:00.95">me</t> <t="00:01.40">love,</t> <t at="00:02.60">love,</t> <t at="00:03.95">love, </t> <t at="00:05.30">love</t>
    </cue>
    <cue start="00:00:05.90" end="00:00:08.90">
       Can't <t at="00:06.20">buy</t> <t at="00:06.40">me</t> <t at="00:06.70">love,</t> <t at="00:08.00">love</t>
    </cue>
    <cue start="00:00:09.35" end="00:00:11.55">
      I'll <t at="00:09.50">buy</t> <t at="00:09.75">you</t> <t at="00:10.15">a</t> <t at="00:10.25">dia</t> <t at="00:10.50">mond</t> <t at="00:10.75">ring</t> <t at="00:11.10">my</t> <t at="00:11.40">friend</t>
    </cue>
  </cuelist>
</wmml>

5. Chapter markers

Simple: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="chapters">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:18.00">Introductory Titles</cue>
    <cue start="00:00:18.01" end="00:01:10.00">The Jack Plugs</cue>
    <cue start="00:01:10.01" end="00:02:30.00">Robotic Birds</cue>
  </cuelist>
</wmml>

With image: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="chapters">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:18.00"><img src="intro.png"/> Introductory Titles</cue>
    <cue start="00:00:18.01" end="00:01:10.00"><img src="plugs.png"/> The Jack Plugs</cue>
    <cue start="00:01:10.01" end="00:02:30.00"><img src="birds.png"/> Robotic Birds</cue>
  </cuelist>
</wmml>

6. Texted audio descriptions 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="descriptions">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:05.00">The orange open movie project presents</cue>
    <cue start="00:00:05.01" end="00:00:12.00">Introductory titles are showing on the background of a water pool with fishes swimming and mechanical objects lying on a stone floor.</cue>
    <cue start="00:00:11.01" end="00:00:14.80">elephants dream</cue>
  </cuelist>
</wmml>

7. Timed Metadata

Timed slides for a presentations (slide transcripts given, too): 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="metadata">
  <head>
    <title>Really Achieving Your Childhood Dreams</title>
    <meta name="dc:title" content="Really Achieving Your Childhood Dreams"/>
    <meta name="dc:author" cotent="Randy Pausch"/>
    <meta name="dc:location" content="Carnegie Mellon University"/>
    <meta name="dc:date" content="18th Sept 2007"/>
    <meta name="dc:source" content="http://www.labnol.org/home/randy-pausch-last-lecture-video-with-transcript/4211/"/>
  </head>
  <cuelist>
    <cue start="00:00:00.00" end="00:00:44.00"><img src="intro.png"/>"Really Achieving Your Childhood Dreams" by Randy Pausch, Carnegie Mellon University, Sept 18, 2007</cue>
    <cue start="00:00:44.00" end="00:01:18.00"><img src="elephant.png"/>The elephant in the room...</cue>
    <cue start="00:01:18.00" end="00:02:05.00"><img src="denial.png"/>I'm not in denial...</cue>
  </cuelist>
</wmml>
Retrieved from "https://wiki.mozilla.org/index.php?title=Accessibility/Video_Text_Format_Comparison&oldid=236413"