SubtitleStyles (legacy)

SubtitleStyles is the legacy style block for subtitles. It is still fully supported — existing projects render identically — but new projects should use the flat fields on Subtitle (animation, font, stroke, background, position, margin, …). A subtitle object cannot combine styles with the flat style fields.

interface SubtitleStyles {
  color?: string;
  background?: string;
  backgroundPadding?: number;
  isBold?: boolean;
  isItalic?: boolean;
  fontSize?: number;
  fontFamily?: string;
  textTransform?: "uppercase" | "lowercase" | "capitalize";
  outline?: {
    width: number;
    color: string;
  };
  position?:
    | "top-left"
    | "top-center"
    | "top-right"
    | "bottom-left"
    | "bottom-center"
    | "bottom-right"
    | "center-center"
    | "center-left"
    | "center-right";
  marginV?: number;
  marginH?: number;
  mode?:
    | "normal"
    | "none"
    | "one-word"
    | "karaoke"
    | "progressive"
    | "highlight"
    | "fill"
    | "pop"
    | "bounce"
    | "fade"
    | "typewriter"
    | "slide";
  slideDirection?: "up" | "down" | "left" | "right";
  activeWord?: {
    color?: string;
    background?: string;
  };
}

Property	Default	Flat equivalent on Subtitle	Notes
color	#FFFFFF	font.color	Hex with optional alpha.
background	none	background.color (+opacity)	Hex with optional alpha.
backgroundPadding	0	background.padding	Box padding in px.
fontSize	50	font.size	Pixels.
fontFamily	Poppins	font.family	Google Fonts family name.
isBold, isItalic	false	font.bold, font.italic	Typography flags.
textTransform	none	font.transform	uppercase, lowercase, or capitalize.
outline	none	stroke	Requires width and color.
position	bottom-center	position	Full 9-grid; flat form adds top/center/bottom.
marginV, marginH	5% of project size	margin.y, margin.x	Integer pixels.
mode	normal	animation	All 12 animations — see Subtitle.
slideDirection	up	direction	slide mode only.
activeWord	none	activeWord	Color and/or background of the spoken word.

Used By

• Subtitle