VTT

Overview

WebVTT (VTT) is a captioning format designed for the web. It extends the simple time-boxed model of SRT with support for cue settings (position, alignment, line), styling via classes, text formatting, and non-dialogue metadata. For film platforms and festival sites, VTT enables accessible, polished captions that adapt gracefully to varied screen sizes and UI overlays.

Capabilities and Syntax

A VTT file begins with the WEBVTT header and may include comments, regions, and style blocks. Cues use HH:MM:SS.mmm timing (dot for milliseconds) and can specify settings like line:, position:, size:, align:. Ruby annotations, italics, and b-i-u formatting are supported, as are speaker prefixes and voice spans (<v Anna>). Regions group cues for scrolling karaoke or side panels.

Production Workflow

Author captions in tools that export VTT natively or convert from SRT while adding placement and classes. Use classes to move captions away from burned-in text or to style SDH descriptors. Test across browsers and streaming stacks—some implementations differ in support for CSS styling in ::cue and shadow DOM scoping. For accessibility, adhere to reading speed guidelines, include non-speech information, and ensure color contrast against variable video content.

Use in Interactive Experiences

Because VTT can carry metadata cues, it doubles as a timeline trigger track: synchronize haptic seats, smart-lighting, or trivia overlays without altering picture. Keep such usage separate from accessibility captions to avoid clutter; ship a dedicated metadata VTT and a user-selectable caption VTT.

Migration and Pitfalls

Beware line wrapping differences between players; avoid absolute pixel positioning in favor of percentage-based settings. Validate with linters, and store authoritative caption masters in a version-controlled repository alongside edits to the locked dialogue script.

Related Terms

• SRT, IMSC1/TTML, ::cue CSS, SDH/CC.