IMSC: Untertitel und Beschriftung für das Web

IMSC (TTML-Profile für Internet-Medienuntertitel und -beschriftungen) ist ein Dateiformat zur Darstellung von Untertiteln und Beschriftungen. Es verwendet XML, um Inhalt, Timing, Layout und Styling zu beschreiben. IMSC ist vom Konzept her HTML und CSS sehr ähnlich — tatsächlich haben die meisten IMSC-Styles ein direktes Äquivalent in CSS.

Konzepte und Nutzung

IMSC wird vom W3C standardisiert und weltweit von Inhaltsproduzenten (z. B. 20th Century Fox), Online-Diensten (z. B. Netflix) und traditionellen Rundfunkanstalten (z. B. dem BBC) genutzt. Viele Plattformen und Abspielgeräte unterstützen es, z. B. iOS-Geräte und der dashJS-Player.

IMSC unterstützt eine breite Palette von Weltsprachen und Schriftsystemen sowie reichhaltiges Styling. Zusätzlich zu textbasierten Untertiteln unterstützt IMSC auch PNG-Untertitel.

Jedes IMSC-Dokument ist eigenständig und kombiniert Inhalte, Timing, Layout und Styling-Informationen. Der Inhalt des Dokuments wird mit Tags strukturiert, die denen in HTML ähnlich sind, wie <body>, <div>, <p>, <span>, und <br>. Timing und Styling werden mit Attributen wie begin, end, color, tts:backgroundColor, tts:fontSize, tts:fontFamily ausgedrückt — diese Konzepte sind denjenigen, die mit CSS vertraut sind, meist bekannt.

Unterschiede zwischen IMSC, HTML und CSS

IMSC unterscheidet sich in mehreren Punkten von HTML:

IMSC verwendet Namespaces, sodass tts:fontSize nicht dasselbe wie fontSize ist, und Namespace-Deklarationen erforderlich sind, wie <tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" …>.
IMSC hat strengere Regeln, zum Beispiel können <p>-Elemente nur innerhalb von <div>-Elementen vorhanden sein und nicht direkte Kinder von <body>-Elementen.

Während Attributnamen und Syntax ähnlich sind, unterscheidet sich das Styling in einigen Punkten von CSS:

Während CSS-Eigenschaften Bindestriche verwenden, wie font-size, verwendet IMSC camel case, wie tts:fontSize.
IMSC verwendet keine externen Stylesheets.

Unterschiede zwischen IMSC und WebVTT

IMSC ist nicht mit WebVTT verwandt, das eine andere Möglichkeit bietet, Untertitel und Beschriftungen für das Web zu erstellen.

WebVTT wird bis zu einem gewissen Grad nativ von Browsern unterstützt, während IMSC nicht unterstützt wird.

Es gibt jedoch ein IMSC-Polyfill, genannt imscJS, das verwendet wird, um alle Beispiele in dieser Dokumentation darzustellen. Aus der Sicht eines Entwicklers ermöglicht imscJS ein konsistentes Erlebnis über Browser hinweg.

IMSC unterstützt auch Styles wie tts:linePadding und tts:fillLineGap sowie Funktionen wie Unterstützung für HDR und stereoskopisches 3D, die für Untertitel und Beschriftungen nützlich sind, aber in WebVTT nicht verfügbar sind.

Unten steht ein Beispiel, das tts:fillLineGap verwendet:

xml

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

… und ein Beispiel, das ebutts:linePadding verwendet:

Nicht zuletzt ist IMSC kompatibel mit SMPTE-TT und EBU-TT-D, die in den USA und Europa weit verbreitet sind. IMSC wird auch aktiv bei der Erstellung von Fernseh- und Filminhalten verwendet. Die Implementierung von IMSC-Unterstützung beseitigt daher die Notwendigkeit einer Umwandlung in WebVTT.

Im Gegensatz zu IMSC, das Markup verwendet, verwendet WebVTT eine Kombination aus CSS und Klartext.

Anleitungen

IMSC-Grundlagen: Dieser Leitfaden führt Sie durch das, was Sie benötigen, um mit IMSC zu beginnen, einschließlich der grundlegenden Dokumentenstruktur und der Grundlagen, wie Sie Untertitel stylen, zeitlich anpassen und positionieren. Diese Themen werden später in eigenen Anleitungen vertieft.
Verwendung des imscJS-Polyfills: Derzeit benötigen Sie ein Polyfill, um IMSC im Web darzustellen. imscJS ist eine gute Wahl, da es aktiv gewartet wird und fast alle IMSC-Funktionen abdeckt. Dieser Artikel zeigt Ihnen, wie Sie imscJS nutzen und es in Ihre eigene Website integrieren können.
Styling von IMSC-Dokumenten: IMSC bietet viele Optionen zum Styling von Dokumenten, und die meisten IMSC-Styling-Eigenschaften haben direkte CSS-Äquivalente, was sie Webentwicklern vertraut macht. In diesem Leitfaden lernen Sie mehr über das Styling von IMSC-Dokumenten, einschließlich der Unterschiede zwischen Inline- und referenziellem Styling sowie effizientem Styling mit Vererbung und Regionsstyling.
Untertitelplatzierung in IMSC: IMSC ermöglicht es dem Autor, die Position von Untertiteln präzise zu steuern, sodass der Text neben dem Sprecher positioniert oder wichtiges Videoinhalt nicht verdeckt wird. Erfahren Sie, wie Sie eine Untertitelregion definieren und deren Breite und Höhe festlegen.
Namespaces in IMSC: Dieser Artikel behandelt das Thema XML-Namespaces und bietet genug Informationen, um deren Verwendung in IMSC zu erkennen und effektiv zu nutzen.
Timing in IMSC: Beim Erstellen eines IMSC-Dokuments muss jedes definierte Textstück Timing-Informationen enthalten, um anzugeben, wann es angezeigt werden soll. Es gibt mehrere Möglichkeiten, zu beschreiben, wann ein Untertitel ein- und ausgeblendet werden soll, mit Vor- und Nachteilen für jede Methode.
Zeitcodes von Videos auf IMSC abbilden: Das Abbilden der Zeit oder Zeitcode-Werte, die in einer Video-Timeline oder im Videobearbeitungszeitstrahl angezeigt werden, auf ein IMSC-Dokument kann etwas knifflig sein. Es gibt einige verschiedene Probleme, auf die Sie achten müssen, welche wir in diesem Artikel behandeln.
IMSC und andere Standards: IMSC ist das Ergebnis eines internationalen Bemühens, beliebte Profile von TTML zusammenzuführen, wie EBU-TT-D und SMPTE-TT. Dieser Artikel bietet einen Überblick darüber, wie IMSC mit diesen anderen Untertitelstandards zusammenhängt und erklärt die Unterschiede zwischen den IMSC-Versionen.

Referenz

TTML-Profile für Internet-Medienuntertitel und -beschriftungen

Werkzeuge

imscJS-Polyfill: IMSC-Dokumente können in Browsern mit dem imscJS Polyfill gerendert werden.
dash.js: Der Referenzplayer des DASH Industry Forum mit IMSC-Unterstützung.

Spezifikationen

TTML-Profile für Internet-Medienuntertitel und -beschriftungen 1.2

Browser-Kompatibilität

IMSC hat derzeit keine native Unterstützung in Browsern, kann aber verwendet werden, um zeitgesteuerten Text in Webdokumenten effektiv über das imscJS Polyfill darzustellen.

Siehe auch

Timed Text Working Group: Der IMSC-Standard wird von der W3C Timed Text Group entwickelt, der Sie beitreten können, wenn Sie direkt zum Standard beitragen möchten.
IMSC-Standards-Repository: Im IMSC GitHub-Repository können Sie Feedback zu den Spezifikationen geben und Probleme melden.
Web Video Text Tracks Format (WebVTT): WebVTT ist ein weiteres Mittel zur Implementierung von Untertiteln und Beschriftungen im Web, das in Browsern über einige native Unterstützung und einige nützliche Funktionen verfügt.

Dokumentationsprojekt-Team

Team:

Dave Kneeland
Pierre-Anthony Lemieux
Andreas Tai

Wenn Sie sich an der Dokumentation von IMSC beteiligen möchten, wenden Sie sich bitte an Andreas Tai.