CSS Styling of Media Overlays

The currently-playing content will highlight as it is read aloud. Apple Books has a default blue highlight, but you can specify another style by defining your own CSS styles for the media overlay active class. This class supports standard CSS styling (for example, color, text-shadow, and so on) to indicate that the content is active. If the book’s text has a defined color (not default black), the book must include a defined -epub-media-overlay-active color because the text color will overwrite Apple Books’ default color for the actively-playing word.

To define your own media overlay active class, you must define the class name in the package document (.opf) metadata, using the meta property, active-class. For example:

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

Then, include that class name in your stylesheet. CSS example:

.-epub-media-overlay-active {    color: red;}

When styling media overlays using CSS, follow these best practices: