Transform EPUB with Media Overlays into a series of HTML files for reading directly in the browser.
A typical conversion creates the following files (see an example fileset):
Media Overlays conversion adds the following:
September 2024
Viewing these requires an up to date browser, specifically because they use the CSS Custom Highlight API and autoplay permissions.
As of now (Sept 2024), the latest of Chrome, Firefox, and Safari perform reasonably; though in Firefox, the highlight API is experimental right now so support has to be enabled by setting a preference (see their docs for details).
To autoplay the contents from chapter to chapter, go to the page and then go to “site settings” in your browser. Under “audio”, say “allow”. You only have to do this once for the whole demo site (per domain).
These demos were created using this conversion script.
| Feature | Basic | JS-enhanced |
|---|---|---|
| Spine navigation | Forward and back through the spine documents with links (shown as arrows) | (same) |
| TOC | TOC link opens nav.html |
TOC loads in sidebar |
| Page list | Page list is within nav.html, use landmarks navigation or click the in-page link at top |
Page list loads in sidebar and has go-to-page controls |
| Search | Not available | Full text search available from sidebar |
| Publication info | Info link opens about.html, containing publication info |
About page loads in sidebar instead |
| Keyboard shortcuts | Not available | Available (see help for details) |
| Help | Opens in new page | (same) |
| Settings | Not available | Change size, theme, playback rate, page number announcements |
| Theme | Match OS dark theme preference by default | Adds ability to turn on/off |
| Bookmarks | Bookmark any heading using your browser | (same) |
| Audio support | Play embedded audio for the page with native HTML controls | Adds synchronized highlighting and custom controls, including phrase navigation and control over announcing page numbers |
A few things (navigation document consistency across publications; colors in stylesheets or things marked !important) were adjusted manually in the EPUB source; this is, after all, just a prototype. But these aspects can and will be automated in the future.
Generate a set of HTML pages:
<body> into the template’s <main> element.index.html and can act as an entry page (though a user can enter the publication from any page)Add javascript enhancements:
What this isn’t:
Advances in these areas would make this project better.
Coordinating screen reader focus with browser text highlights.
https://stackoverflow.com/questions/31921688/moving-the-cursor-in-a-screen-reader
Use case: user wants to stop synchronized playback and use their screen reader to explore at a word or character level.
Web packaging
https://github.com/WICG/webpackage
Use case: package material for downloadable/offline distribution