Copy link to clipboard
Copied
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;
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
CircularFlo is excellent and well supported. Problem for me is that it is Mac only.
Copy link to clipboard
Copied
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.