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:
Use the same color consistently throughout; do not change the color of the highlight unless it serves a specific purpose (for example, to distinguish a sound, such as an onomatopoeia, from the rest of the text).
Use a color that contrasts both font and background colors; the ideal color will depend on the design or background of each book.
Avoid pastels or light colors in favor of high-chroma colors.