Online Subtitle Translator

Every WebVTT file must start with WEBVTT as the first line of the file, and it must occupy a single line. This is the file format identifier, used to inform the parser that this is a WebVTT format subtitle file.

WebVTT files must use UTF-8 encoding.

Each subtitle cue consists of the following parts:

• Optional identifier: Used to reference the subtitle, cannot contain --> or newlines
• Timeline: Format is start time --> end time
• Subtitle text: The displayed subtitle content, can contain multiple lines

Cues are separated by blank lines

Time format:

• HH:MM:SS.mmm (hours:minutes:seconds.milliseconds)
• or MM:SS.mmm (minutes:seconds.milliseconds)

Minutes and seconds are required.

NOTE: Comments, used to add author notes, will not be displayed on the screen.

Comment content can be single line or multi-line. A subtitle file can have multiple comments.

Optional settings can be added after the timeline, separated by spaces:

• size: Width of the subtitle area, range 0-100%
  You can imagine the subtitle on the screen is located in a box (cue-box), size means the percentage of screen width this box occupies
• position: Horizontal position, range 0-100%, default is centered (50%) The position of the subtitle in the horizontal direction, from the left side of the screen to the right side means 0%~100%, this property is related to align. The value of the align property indicates which edge of the subtitle box aligns with position.
• align: Alignment method, options are start, center (default), end, left, right
  The start and end options respect the left-to-right order of the language. For right-to-left languages, such as Arabic and Hebrew, start means right side, end means left side

The STYLE section is used to define CSS styles for subtitles and must be located after the header section and before the first subtitle cue.

Common CSS selectors:

• ::cue: Select all subtitle text
• ::cue(.class): Select text with a specific class
• ::cue(v[voice]): Select specific voice tags
• ::cue([lang="en-US"]): Select specified language
• ::cue-region: Select all region subtitle text
• ::cue-region(#id): Select region subtitle text with specified id

Supported CSS properties include color, font, background, text alignment, etc., but with limitations.

WebVTT supports the following text formatting tags:

• <b>: Bold
• <i>: Italic
• <u>: Underline
• <v>: Voice tag, used to identify speakers
• <c>: Custom class name tag, can contain multiple class names (e.g., <c.red.bg_yellow>)

<v> and <c> are discussed separately in the sections below

The <v> tag is used to identify speakers: In the example, the speakers are named Alice and Bob. The specified speakers will not be displayed in the subtitles, but are distinguished by styles, positions, and other means. Through CSS, you can use ::cue(v[voice="Alice"]) to set styles for specific speakers.

Note: There cannot be blank lines in the STYLE section.

The <c> tag allows you to add custom class names to text fragments for CSS style control.

Syntax: <c.className>text</c>

Common use cases:

• Multilingual subtitles (e.g., Chinese-English comparison)
• Special effect markers (e.g., sound effects, background music)
• Highlighting important information

The protocol also specifies styles like <c.red.bg_yellow>, requiring players to support a set of color styles, including subtitle colors (https://w3c.github.io/webvtt/#default-text-color) and background colors (https://w3c.github.io/webvtt/#default-text-background). When using these built-in styles, subtitle authors do not need to specify STYLE.

Note: Built-in subtitle colors and background colors are well supported by players like VLC, but the browser HTML video tag has almost no support.

REGION is used to define subtitle display regions, allowing subtitles to be displayed at different positions on the screen. By using region:regionID in the timeline settings, you can specify which region the subtitle should be displayed in.

Main properties:

• id: Region identifier, referenced in subtitle cues via region:id
• width: Region width
• lines: Maximum number of lines
• regionanchor: Region anchor (e.g., 0%,0%)
• viewportanchor: Viewport anchor (e.g., 0%,100%)
• scroll: Scroll method (up means scroll up)

Note: Player applications support some properties, but browsers have almost no support