The following sections discuss the technical considerations and design tips to keep in mind when designing content for books with JavaScript interactivity.
By default, Apple Books recognizes gestures and clicks to cue menus, pagination, and zoom. However, in books with JavaScript interactivity, Apple Books needs to know when to ignore gestures and clicks so that the reader can interact with the interactive portions of your book without prompting Apple Books' user interface options to appear. You can disable this default behavior for the interactive element by sending the preventDefault message to the event object.
Note: It is important to keep a significant portion of the page edge unaffected by preventDefault to allow the reader to turn the page.
For information on preventDefault, see Handling Events in Safari Web Content Guide.
Design interactive books to work on both iOS devices and macOS. Interactivity on desktop computers use input from a mouse while interactivity on iOS devices use touch input. This means that your script must determine if it should provide a touch or mouse event as required by that platform. You can query if a platform supports mouse or touch events by using the hasFeature method defined in the EPUB 3 (epubReadingSystem object) documentation. For example, if navigator.epubReadingSystem.hasFeature('touch-events') returns true, then you should provide touch events in your JavaScript.
If your book uses features that are specific to iOS like the accelerometer or multi-finger gestures, you need to include input alternatives, like buttons, that are supported on desktop computers.
Keep in mind that a finger is larger than a mouse, so interactive objects should have a hit area that's large enough for a finger. Because Apple Books scales the page to fit the screen of the device, the size of the hit area is relative to the page size defined in the viewport and may vary for different devices.
When placing interactive objects, avoid placing them close to page edges and text. Objects too close to the edge of the page may cause the reader to unintentionally turn the page. Similarly, objects placed too close to text may cause the reader to unintentionally trigger the re-reading of a word in read aloud content.
Most of the interaction in a book should have a cue so that the reader knows what they can interact with. On macOS, you can use CSS to style the mouse so that interactive areas are indicated with a pointer (see http://www.w3schools.com/cssref/pr_class_cursor.asp). In iOS, you’ll want to use visual cues like the following:
Animate or move elements on a page, alerting the reader that elements on the page or in the book can have interaction. In the example below, the title page begins as a blank page, but has text and images that move onto the screen. This example indicates interactivity in the following pages of the book.
Use bold formatting or add a glow behind words that trigger sound or animation. In the example below, touching winds triggers a wind noise.
Add a glow, pulse, or wiggle to an interactive object. In the example below, the flower on the left is glowing, the flower in the middle is pulsing, and the flower on the right is wiggling.
Have an animatable element perform a behavior that prompts the reader to interact with the other elements. In the example below, the pulsing stars and blinking eyes invite the reader to discover that the stars can be interacted with, and that the moon can be dragged across the screen.
Create a scene with an out of place element, an unusual blank area, or incomplete image that prompts the reader to investigate the odd element, fill in the blank, or complete the image. In the two examples below, the single red flower invites the reader to interact with the other flower stalks or the empty hillside to complete the flowered landscape.
Design elements to feel separate from rest of page, as if they were on a separate layer. When working with drag and drop elements, be sure to keep them behind any text in your book, like in the example below.
Make the element float, wiggle, or move. In the example below, the rotating halo around the sun invites readers to drag the sun across the screen.
Each page of an interactive, fixed-layout book is a separate web view, similar to two Safari windows next to each other. Content is isolated on each page with the spine as a firm barrier between the two pages. The body must have dimensions defined in the CSS identical to the aspect ratio of the viewport dimensions.