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:

IMSC uses namespaces, so that tts:fontSize is not the same as fontSize, and namespace declarations are required, like <tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" ...>
IMSC has stricter rules, for instance <p> elements can only be present within <div> elements, and cannot be direct children of <body> elements.

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

Whereas CSS properties use hyphens, like font-size, IMSC uses camelCase, like tts:fontSize.
IMSC does not use external stylesheets.

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>

... and an example that uses ebutts:linePadding:

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

IMSC basics: This takes you through what you need to get started with IMSC, including basic document structure, and the basics of how to style, time, and position subtitles. These topics will be expanded on later in their own tutorials.
Using the imscJS polyfill: You currently need a polyfill to render IMSC on the web. imscJS is a good choice as it is actively maintained and has almost complete coverage of the IMSC features. This article hows you how to make use of imscJS and how to integrate it on your own website.
Styling IMSC documents: IMSC offers many options for styling documents, and most of the IMSC styling properties have direct CSS equivalents, making them familiar to web developers. In this guide you'll learn a bit more about IMSC styling including the difference between inline and referential styling, and efficient styling using inheritance and region styling.
Subtitle placement in IMSC: IMSC allows the author to precisely control the position of subtitles, such that the text is positioned next to the speaker or to avoid obscuring an important content in your video. Learn how to define a subtitle region and how to define its width and height.
Namespaces in IMSC: This article covers the subject of XML namespaces, giving you enough information to recognize their usage in IMSC, and be able to use it effectively.
Timing in IMSC: When building an IMSC document, each defined piece of text must include timing information to specify when it should appear. There are multiple ways to describe when a subtitle should start and stop displaying, with pros and cons to each method.
Mapping video time codes to IMSC: Mapping the time or time code value that is seen within a video track or video editor timeline to an IMSC document can be a little tricky. There are a few different issues that you'll need to be aware of, which we'll cover in this article.
IMSC and other standards: IMSC is the result of an international effort to bring together popular profiles of TTML, like EBU-TT-D and SMPTE-TT. This article provides an overview how IMSC is related to these other subtitle standards, and explains the differences between the versions of IMSC.

Reference

TTML Profiles for Internet Media Subtitles and Captions

Tools

imscJS polyfill: IMSC documents can be rendered in browsers using the imscJS polyfill.
dash.js: The reference player of the DASH Industry Forum with IMSC support.

Specifications

TTML Profiles for Internet Media Subtitles and Captions 1.2

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.

Docs project team

Team:

Dave Kneeland
Pierre-Anthony Lemieux
Andreas Tai

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