Ensure that text highlighting during playback does not impede the ability to read the text.



Example 1 — Defining the background highlight (EPUB 3)
.-epub-overlay-active {
   background-color: rgb(255,255,220);
Example 2 — Assigning a default color to improve contrast (EPUB 3)
.-epub-overlay-active {
   color: rgb(0,0,0);
   background-color: rgb(255,255,0);

Frequently Asked Questions

Can I only apply background shading?

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

Also consider the 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 in ebooks. As one paragraph loses focus, for example, its text size will shrink and the next will increase, causing the layout to "move" on the user. 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 users.

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.


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">

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


The name that you use for the CSS class is not important, but a name that indicates the purpose of the class is recommended for clarity.