5 Replies Latest reply on Mar 7, 2017 4:14 PM by Chris Panny

    Need Help With Read Aloud Feature For Fixed-Layout ePUB

    Chris Panny Level 1

      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">


         <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 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"/>





      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 {