files/en-us/related/imsc/index.md
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.
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 . 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.
IMSC differs from HTML in a number of ways:
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" …><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:
font-size, IMSC uses {{Glossary("camel_case", "camel case")}}, like tts:fontSize.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
Gaps between lines appear.</span>
</p>
<p region="bottom" style="fillGap">
<span style="spanStyle">With itts:fillLineGap
Gaps between lines are "filled".
</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.
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.
Team:
If you want to get involved with documenting IMSC, please contact Andreas Tai.