Need Help With Read Aloud Feature For Fixed-Layout ePUB
InDesign CC 2017 Windows
I’m trying to learn how to add a media overlay to a fixed-layout ePUB for iBooks. I’ve exported my 1-page (test) book from InDesign and cracked open the ePUB. (It’s part of a children’s story).
For test purposes, I’m trying to get the first two words to sync with the first two spoken words from the narration (mp3) track, where each word should change to a blue color as they become active. So far, I’ve not had success, here’s what I’ve done so far:
Created my SMIL file with what I believe is the correct markup; chime in if it’s not.
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops" version="3.0">
<body>
<par id="p001">
<text src="toby-got-out-1.xhtml#f001"/>
<audio clipBegin="00:00:04.972" clipEnd="00:00:05.564" src="./audio/TGO_01_Toby_is.mp3"/>
</par>
<par id="p002">
<txet src="toby-got-out-1.xhtml#f002"/>
<audio clipBegin="00:00:05.564" clipEnd="00:00:05.928" src="./audio/TGO_01_Toby_is.mp3"/>
</par>
</body>
</smil>
I’m not sure I’m correctly setting up the XHTML document to reference the SMIL. When I look at the HTML code, each word is already surrounded in span tags, with id and class attributes. See example:
<span id="_idTextSpan000" class="CharOverride-1" style="position:absolute;top:0px;left:200px;letter-spacing:-7.14px;">Toby </span>
I tried nesting span tags in between the word “Toby” with the fragment identifier so that the above would include the following:
<span id="_idTextSpan000" class="CharOverride-1" style="position:absolute;top:0px;left:200px;letter-spacing:-7.14px;"> <span id="f001">Toby </span></span>
The ePUB does pass validation, but text coloring isn't working in iBooks so I wonder, is this a bad practice? If so, how should I proceed?
Before I forget, here's my CSS:
.-epub-media-overlay-active {
color:#0000cc;
}
AdChoices