docs.rodeo

MDN Web Docs mirror

IMSC: subtitles and captioning for the Web

IMSC (TTML Profiles for Internet Media Subtitles and Captions) is a file format for representing subtitles and captions. It uses XML to describe content, timing, layout, and styling. IMSC is very similar to HTML and CSS in concept — in fact, most IMSC styles have a direct equivalent in CSS.

Concepts and usage

IMSC is standardized by the W3C, and used around the world by content producers (e.g., 20th Century Fox), online services (e.g., Netflix), and traditional broadcasters (e.g., the BBC). Many platforms and players support it, e.g., iOS devices and the dashJS player.

IMSC supports a wide range of world languages and scripts, and rich styling. In addition to text-based subtitles, IMSC also supports PNG subtitles.

Each IMSC document is self-contained and combines content, timing, layout and styling information. The content of the document is structured using tags similar to those used in HTML such as <body>, <div>, <p>, <span>, and <br>. Timing and styling are expressed using attributes such as begin, end, color, tts:backgroundColor, tts:fontSize, tts:fontFamily — these are mostly familiar concepts to anyone familiar with CSS.

Differences between IMSC, HTML, and CSS

IMSC differs from HTML in a number of ways:

While attributes names and syntax are similar, styling differs from CSS in a couple of ways:

Differences between IMSC and WebVTT

IMSC is unrelated to WebVTT, which is another way of making subtitles and captions for the Web.

WebVTT is supported natively to some extent by browsers, while IMSC is not.

There is however an IMSC polyfill, called imscJS, which is used to render all the examples in this documentation. From a developer’s perspective, imscJS allows a consistent experience across browsers.

IMSC also supports styles, like tts:linePadding and tts:fillLineGap, and features, such as support for HDR and stereoscopic 3D, that are useful for subtitle and captions, but not available in WebVTT.

Below is an example that uses tts:fillLineGap:

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling"
    xml:lang="en">
    <head>
      <styling>
       <style xml:id="defaultStyle"
              tts:fontSize="125%"
              tts:lineHeight="120%"/>
       <style xml:id="spanStyle"
              tts:backgroundColor="black"
              tts:color="white"/>
       <style xml:id="fillGap"
             itts:fillLineGap="true"/>
      </styling>
     <layout>
     <region xml:id="top"
             tts:origin="5% 5%"
             tts:extent="90% 40%"
             tts:textAlign="center"
             tts:displayAlign="before"/>
     <region xml:id="bottom"
            tts:origin="5% 55%"
            tts:extent="90% 40%"
            tts:textAlign="center"
            tts:displayAlign="after"/>
    </layout>
  </head>
 <body style="defaultStyle">
  <div>
    <p region="top">
      <span style="spanStyle">Without itts:fillLineGap<br/>
      Gaps between lines appear.</span>
    </p>
    <p region="bottom" style="fillGap">
      <span style="spanStyle">With itts:fillLineGap<br/>
      Gaps between lines are "filled".<br/></span>
    </p>
    </div>
 </body>
</tt>

{{EmbedGHLiveSample("imsc-examples/fillLineGap/fillLineGap.html", '100%', '256px')}} 

… and an example that uses ebutts:linePadding:

{{EmbedGHLiveSample("imsc-examples/linePadding/linePadding.html", '100%', '256px')}} 

Last but not least, IMSC is compatible with SMPTE-TT and EBU-TT-D, which are widely used in the USA and in Europe. IMSC is also actively used in the authoring of TV and movie content. Implementing IMSC support therefore removes the need for conversion to WebVTT.

In contrast to IMSC, which uses markup, WebVTT uses a combination of CSS and plaintext.

Tutorials

Reference

Tools

Specifications

Browser compatibility

IMSC does not have native support in browsers at this current moment, but it can be used to effectively render timed text in web documents via the imscJS polyfill.

See also

Docs project team

Team:

If you want to get involved with documenting IMSC, please contact Andreas Tai.

In this article

View on MDN