---
title: "Transcript"
description: "The words of the recording or page in view: its captions as text, the cue playing marked, or its transcript as plain text."
url: https://clover.iiif.library.northwestern.edu/docs/transcript
version: "4"
---

# Transcript

\<Clover.Transcript /> (web components: \<clover-transcript>)6 kB added to a page with a Root, gzipped (web components: 33 kB added to a page with a \<clover-root>, styles included, gzipped)

The words of the recording or page in view: its captions as text, the cue playing marked, and a field to find words in them, or its transcript as plain text.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Transcript follow={true} />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/transcripts/manifest.json">
  <clover-body></clover-body>
  <clover-transcript follow="true"></clover-transcript>
</clover-root>
```

## API reference

Inside a `Root` (web components: `<clover-root>`), it reads the view’s WebVTT files and any transcript as plain text, with a choice where there are several, and renders nothing where there is neither. A WebVTT file is what its annotation `provides` (Presentation 4): captions or subtitles, which the Canvas shows too, or a transcript alone, which the Transcript reads and the Canvas never offers as captions. It reads the file in the Root’s language where there is one, the Canvas’s captions with it, and where the Root offers the languages to read the resource in (About’s), it offers none of its own: the page has one choice of language. Over the captions, a field finds words as they are typed: the cues with them marked and counted, the first current, and Previous, Next or Enter going through them, each seeking the recording there. A long transcript is drawn a chunk of cues at a time, more as the reader nears its end. `Default` and `Document` show it in their [Panel](https://clover.iiif.library.northwestern.edu/docs/panel). Its other props, and its `ref`, go to its element.

**React**

| Prop        | Type                 | Default   | Description                                                                                  |
| ----------- | -------------------- | --------- | -------------------------------------------------------------------------------------------- |
| `follow`    | `boolean`            | `true`    | Keep the cue playing in view while the media plays.                                          |
| `find`      | `boolean`            | `true`    | A field over the captions to find words in them, with steps through the cues that have them. |
| `sticky`    | `boolean`            | `false`   | The find field held in view as the cues scroll under it.                                     |
| `size`      | `"large" \| "small"` | `"large"` | The find field’s size, as Search’s: a tad smaller for a narrow column.                       |
| `as`        | element type         | `"div"`   | The element to render, such as a `section`.                                                  |
| `className` | `string`             | —         | Added to `clover-transcript`.                                                                |

**Web components**

### `<clover-transcript>`

The recording's captions as a transcript (or its WebVTT transcript, as its annotation provides one), following where it plays, and any plain-text transcript after them. Each cue goes to its time; a field over the captions finds words in them, with steps through the cues that have them.

| Name     | Type                 | Default | Description                                                                                                                                    |
| -------- | -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `follow` | `boolean`            | `true`  | "false" stops the current cue being kept in view as it plays.                                                                                  |
| `find`   | `boolean`            | `true`  | "false" leaves out the field that finds words in the captions, and its steps.                                                                  |
| `sticky` | `boolean`            | —       | The find field held in view as the cues scroll under it: at the top of the box that scrolls them, or under a panel accordion's stuck headings. |
| `size`   | `"large" \| "small"` | `large` | The find field's size, as clover-search's: large, or small, a tad smaller, for a narrow column.                                                |

## Examples

### Scroll in a box

Give it a height, and it scrolls in a box of its own. Make the box a named region the keyboard can reach, as here (WCAG 2.1.1).

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Transcript
  as="section"
  aria-label="Transcript"
  tabIndex={0}
  style={{ maxHeight: "20rem", overflowY: "auto" }}
/>
```

**Web components**

```html
<!-- The element is a box no reader is told of: the page's own region names and scrolls it. -->
<section
  aria-label="Transcript"
  tabindex="0"
  style="max-height: 20rem; overflow-y: auto"
>
  <clover-transcript></clover-transcript>
</section>
```

### The text of a page

Of an image, it shows what is written on it: here, a newspaper page’s OCR, in German.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <Clover.Body />
  <Clover.Transcript />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <clover-body></clover-body>
  <clover-transcript></clover-transcript>
</clover-root>
```

### Leave the scrolling to the reader

Use `follow={false}` (web components: `follow="false"`) to leave the scrolling to the reader. The cue playing is still marked.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Transcript follow={false} />
```

**Web components**

```html
<clover-transcript follow="false"></clover-transcript>
```

### A transcript of your own

Clover’s WebVTT parser is exported: `parseVtt` reads a file’s cues, and `cueAt` finds the one playing.

```js
import { cueAt, parseVtt } from "@nulib/clover";
 
const cues = parseVtt(await (await fetch(vttUrl)).text());
const index = cueAt(cues, video.currentTime);
const words = index >= 0 ? cues[index].text : "";
```

## Previous versions

[Clover 3.x › Viewer](https://clover.iiif.library.northwestern.edu/docs/3.x/viewer#information-panel)

- The transcript is a part, `Transcript` (web components: `<clover-transcript>`), and a Panel section of its own.
- `informationPanel.vtt.autoScroll: false` is `follow={false}` (web components: `follow="false"`).
- `ignoreCaptionLabels` is gone: every WebVTT `supplementing` body is read, as what its annotation `provides`.