Skip to main content

How to Style TTML Captions

Learn to create custom styling for TTML captions generated

Updated over 2 weeks ago

Overview

Videolinq outputs TTML (Timed Text Markup Language) captions in real time for use in broadcast, web players, and event production environments. While Videolinq generates the raw TTML output, including support for multiple languages, it is the customer’s responsibility to pull, style, and redirect this content to their chosen destination.

This article explains how to apply styling to TTML output and clarifies the workflow steps so you understand where Videolinq’s role ends and where your integration begins.

TTML Workflow Breakdown

  1. Ingest: A live video stream is ingested into the Videolinq platform.

  2. Processing: Videolinq extracts the audio and generates real-time subtitles in the language(s) selected by the user.

  3. Output: Captions are exported as TTML feeds per language via a secure endpoint (e.g., /ttml/{lang} format assigned during setup).

  4. Customer Action:

    • You, the customer, are responsible for running your script and method to fetch TTML feeds Videolinq provides (Sample Node.js or Python script are available on request).

    • Users can apply custom styling to the TTML data before pushing it to their chosen display destination (OBS, vMix, HTML5 player, AWS MediaLive, etc.).

    • Videolinq provides a Viewer tool to monitor the feed, but it is for monitoring only, not for production delivery.

Styling TTML

TTML styling is handled by adding XML attributes inside the TTML structure. These define visual elements such as font size, color, alignment, and position.

Common Styling Attributes

Attribute

Description

Example

tts:fontSize

Sets text size

tts:fontSize="18px"

tts:color

Sets font color

tts:color="white"

tts:backgroundColor

Sets the background behind captions

tts:backgroundColor="black"

tts:textAlign

Aligns text (start, center, end)

tts:textAlign="center"

tts:origin

Defines X, Y position in %

tts:origin="10% 80%"

tts:extent

Defines width/height of text region

tts:extent="80% 20%"

Script Examples

Request Access

Custom examples in Node.js and Python are available to licensed customers upon request. These scripts help fetch TTML feeds from Videolinq, apply custom styling, and redirect the output to your preferred destination.

To request access to the script package, please contact support or visit your control panel.

Integration Options

After styling, push the TTML data to your desired destination:

  • HTML5 subtitle layers

  • OBS or vMix via web overlay

  • AWS MediaLive or MediaConnect subtitle pipelines

  • Third party CEA-608/708 workflows.

Additional Tools Provided

  • Node and Python scripts: Available to SME and Enterprise users to fetch and redirect TTML output per language.

  • Live Caption Viewer: Browser-based HTML tool to preview multilingual TTML feeds generated by Videolinq (read-only monitoring only).

Summary

Videolinq provides multilingual TTML caption feeds based on your live audio input. The platform handles the entire upstream process, including signal ingest, speech-to-text transcription, translation, and publishing of the TTML feeds. However, the final stage of the workflow - how and where those TTML feeds are delivered - is left in your control.

As the customer, you are responsible for:

  • Pulling the data for each required language

  • Applying custom styling (position, color, font, etc.)

  • Routing the final TTML output to your chosen endpoint (OTT player, SDI workflow, mobile app, or third-party encoding tool)

Videolinq supports this flexible model by providing generic sample scripts in Node and Python to help you retrieve and route the TTML streams. These are meant as starting points, and each customer must adapt them to their environment and broadcast needs.

This approach provides you with full control over how subtitles appear, making it easier to meet brand guidelines, accessibility standards, and production objectives. In special cases, Videolinq can offer professional services to assist with building custom connectors.

Disclaimer: This document outlines general TTML customization practices for Videolinq customers. Certain examples are simplified for instructional use and may differ from production workflows. Access to scripts and implementation support is provided to active account holders.

Did this answer your question?