Highlighting

When text is synchronized during playback, it can also be styled to make it more obvious which passage is being narrated. EPUB 3 allows you to define the CSS class to apply to the active element in the package document metadata using the special media:active-class property:

<meta property="media:active-class">
   -epub-overlay-active
</meta>

In this case, the reading system will check all attached CSS files for a class named -epub-overlay-active and will apply whatever styles are defined in it to each synchronized element for the duration of its playback

Note

The name that you use for the CSS class is not important. It can be any name you choose, but for clarity a name that indicates its purpose is recommended.

For example, to apply a yellow background to the active text a basic rule such as the following could be created:

.-epub-overlay-active {
   background-color: rgb(255,255,0);
}

Be aware when applying background shading that it may not contrast well with text colors you've already assigned. If the shading will cause insufficient contrast in some situations, consider also specifying a default color:

.-epub-overlay-active {
   color: rgb(0,0,0);
   background-color: rgb(255,255,0);
}

Samples

The EPUB Samples Project contains the following publications that implement Media Overlays:

Moby Dick: OPF CSS

Compliance References and Standards

Frequently Asked Questions

Can I only use background shading with overlays?

No, you can make any changes to the active text, but be aware that the choices you make may impact on the accessibility of the publication.

Also consider the ebook medium. Increasing the font size might seem to be a good choice to make the active text more pronounced, but the practical result may be text that jumps around on the page. As one paragraph loses focus, for example, its text size will shrink and the next will increase, causing the layout to "move" on the reader. It may also be the case that text that was visible when the page was originally rendered will get pushed out of the viewport as the new highlighting is applied.

Can I highlight words within sentences (or within paragraphs) using overlays?

Yes and no. If you are using pre-recorded audio, you cannot. The playback will only be as granular as your overlay file, as highlighting is applied to each par in turn.

Highlighting at both the sentence and word level is common in reading systems that provide text-to-speech playback. This rendering is typical a combination of heuristic lookaheads to determine each sentence (or part of a sentence) combined with word-level highlighting as each word is fed to the TTS engine for rendering.

Overlays can take advantage of TTS playback to offer similar functionality, but at the price of audio quality (synthesized voices) and assurance that the content will render (not all reading systems provide TTS voicing). If no audio element is provided in a par, the reading system is expected to render text content synthetically (audio/video content referenced from the text element would be initiated). Any word-by-word highlighting offered by the TTS engine would compliment the active overlay highlighting.

But choosing this kind of playback is suboptimal for the pitfalls already listed and because of the further conflicts that may arise between the highlighting you apply and the highlighting the reading system applies during TTS playback. Color clashes could make the text illegible for readers.

When mixing overlays and TTS technologies is necessary (e.g., to narrate the body and synthetically render indexes and other tedious to narrate backmatter), it's best to err on the side of a simple highlighting scheme for the overlays.