Translation

Displays the translated text for a recording. If the recording has been translated, this component shows the translation.

Basic usage

Link it to a recording element using the for attribute.

HTML

<fortyfour-recording
  id="rec"
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-recording>

<fortyfour-translation for="rec"></fortyfour-translation>

The translation text is loaded from the recording metadata. If no translation is available, the component stays hidden.

Max height

The max-height attribute sets the maximum height in pixels. If the text is longer, it becomes scrollable.

HTML

<fortyfour-translation
  for="rec"
  max-height="120"
></fortyfour-translation>

Styling

Customize the text appearance with CSS variables.

CSS

fortyfour-translation {
  --translation-font-size: 14px;
  --translation-line-height: 1.6;
  --translation-text-color: #6b7280;
}

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to link to
`max-height`	number	none	Maximum height in pixels before scrolling

CSS Variables

Variable	Default	Description
`--translation-font-size`	`14px`	Font size
`--translation-line-height`	`1.6`	Line height
`--translation-text-color`	`#6b7280`	Text color