Subtitle

Overview of ew-vodingest subtitle handling

Supported Input Subtitle Formats

SRT
STL
TTML1
WebVTT
Fragmented MP4 (WebVTT)

Output Subtitle Format

ew-vodingest stores subtitles as WebVTT in fragmented MP4 format for VoD. It converts other formats to WebVTT. However, not all features can be preserved, especially styling.

Styling Conversion

For each input format, ew-vodingest has it different ways to preserved styling. Please follow below sessions for more details.

WebVTT

All styling is preserved.

SRT

Supported: Italic <i>, Bold <b>, Underline <u>
Not Supported: Text position, color

STL

Justification: Converted as follows:
Hex Value Meaning WebVTT Result
0x00 Default default
0x01 Left left
0x02 Center default
0x03 Right right
Example:
```
WEBVTT

00:00:00 --> 00:00:01 align:left
text
```

Hex Value	Meaning	WebVTT Result
0x00	Default	default
0x01	Left	left
0x02	Center	default
0x03	Right	right

TTML

Reference: TTML Styling Attributes
Note: Conversion may not display perfectly; client must support CSS/WebVTT styling.

TTML Attribute	Conversion / Support
tts:backgroundColor	CSS `background-color`
tts:color	CSS `color`
tts:display	Unsupported
tts:displayAlign	Unsupported
tts:extent	Unsupported
tts:fontFamily	CSS `font-family`
tts:fontSize	CSS `font-size` (only one value, px/em)
tts:fontStyle	CSS `font-style`
tts:fontWeight	CSS `font-weight`
tts:lineHeight	Unsupported
tts:opacity	Unsupported
tts:origin	WebVTT Region `viewportanchor` (percent only)
tts:padding	Unsupported
tts:showBackground	Unsupported
tts:textAlign	WebVTT `align`
tts:textDecoration	CSS `text-decoration` (see table)
tts:textOutline	Unsupported
tts:unicodeBidi	CSS `unicode-bidi`
tts:visibility	Unsupported
tts:wrapOption	CSS `white-space`
tts:writingMode	WebVTT `vertical`
tts:zIndex	Unsupported

textDecoration Mapping:

TTML Value	CSS Value
underline	underline
lineThrough	line-through
overline	overline
noUnderline	unsupported
noLineThrough	unsupported
noOverline	unsupported

unicodeBidi Mapping:

TTML Value	CSS Value
normal	normal
embed	embed
bidiOverride	bidi-override

writingMode Mapping:

TTML Value	WebVTT Value
tbrl	rl
tblr	lr

TTML Regions & Styles

<region> → WebVTT Region (::cue-region), ID preserved
<style> → WebVTT ::cue, ID preserved
Inline style: If TTML style is set directly on text, a virtual ::cue class is created.

Example (inline style):

<p begin="00:00:00.000" end="00:00:05.000" tts:color="yellow">text</p>

Converted WebVTT:

WEBVTT

STYLE
::cue(.itemCue_1) { color: yellow; }

00:00:00.000 --> 00:00:05.000
<c.itemCue_1>text</c>

Examples

TTML <style> Example:

<style xml:id="s" tts:backgroundColor="#ffffff00" tts:color="#ffffff" ... />
<p begin="00:00:00.000" end="00:00:05.000" style="s">text</p>

Converted WebVTT:

WEBVTT

STYLE
::cue(.s) {
   background-color: #ffffff00;
   color: #ffffff;
   /* ... */
}
00:00:00.000 --> 00:00:05.000 align=right vertical=rl
<c.s>text</c>

TTML <region> Example:

<region xml:id="r" style="s" tts:origin="10% 20%" tts:color="red" />
<p begin="00:00:00.000" end="00:00:05.000">text</p>

Converted WebVTT:

WEBVTT

Region: viewportanchor=10%,20%

STYLE
::cue-region(r) {
  color: red;
  background-color: #ffffff00;
}

00:00:00.000 --> 00:00:05.000 region=r
text