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 apply any CSS properties 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 an EPUB. 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.


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.