Need Help With Read Aloud Feature For Fixed-Layout ePUB

Report · Mar 07, 2017

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

<body>

</par>

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

Toby

I tried nesting span tags in between the word “Toby” with the fragment identifier so that the above would include the following:

Toby

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;

}

It's only an island if you look at it from the water.

Report · Mar 07, 2017

Hello,

If you are trying to inter mingle the SMIL tags with the InDesign export you are going to have a hard time. I got a proof of concept working where you put the SMIL at the end of InDesigns export, a sort of overlay. Even built a plugin to get the SMIL ( geometry ) positions working.

ePub Read Aloud - Kerntiff Publishing Systems

The link to the sample ePub is broken, I will try and find the file and post a link so you can rip it apart.

The project died, lack of interest 😞

P.

Report · Mar 07, 2017

That's too bad the project dried up. There is an app for the Mac called Circular Flo that you may have heard of that is supposed to generate the necessary code and then recompile it all back into an ePUB file. I'm on a Windows machine so it does me no good. That said, I'm doing this manually, which is fine because it's good to know what's going on under the hood on these documents.

I've read this post by Alberto Pettarin and also read Chptr 6 Media Overlays of Epub 3 Best Practices, which did shed some light on the process, but I'm still striking out with getting it to work. I know someone who managed to do this with InDesign, but she's very hard to get hold of, that's why I posted here.

I'd like to have a look at the sample ePUB. Def let me know if you find it.

It's only an island if you look at it from the water.

Report · Mar 07, 2017

Hello,

I will dig the sample out or create a new one.

Here is a sample of what our ( now dead ) plugin did.

http://kerntiff.com/TEST/SMIL.epub

Rip it open, there might be some useful snippets in there for you. Quite interest to know how / if it works on windows.

P.

Report · Mar 07, 2017

CircularFlo is excellent and well supported. Problem for me is that it is Mac only.

Report · Mar 07, 2017

I don't know why software companies still write apps just for the mac in this day and age. There's a whole other market of Windows users who design and develop.

It's only an island if you look at it from the water.

Adobe Community

Need Help With Read Aloud Feature For Fixed-Layout ePUB