These are off the top of my head. I’ve never done a read aloud book and I have no idea what happens behind the scenes.
You could crack open the EPUB but I don’t even want to think about that if it’s fixed layout.
Another thought would be to convert the dropcaps to outlines and anchor it. Then use a no fill no stroke .01% scale for the real first letter.
Yes, This is a fixed layout book so when indesign exports it puts every word into a different span for positioning purposes which is great. Except for my case, it also export drop caps as separate pieces and so I'm trying to find a clever way of combining the drop cap with the rest of the word in the css or html.
You might also want to reconsider the design and kill the drop cap.
I've thought of that . I would rather keep the design if I can as the author loves the drop cap. It's a children's book and they are popular in that niche.
My other concern about the drop cap being separate, is the first word is really no longer a real word when it comes to the live text feature of the epub.
I wonder if Apple would even accept it as is.
I wish I could help, but this one is out of my area of expertise.
Do come back and let us know what you finally wind up doing, though. It might help someone else in the same situation.
I sure will. Read Aloud are great and offer kids learning on many levels so I do hope I can figure this out in a clean and 'easy' way.
I appreciate your idea there but sadly we get right back to two spans and for the media overlay to highlight the word, it has to all be in one span somehow.
This is starting to drive me nuts. I've download a few from the iBookstore with read aloud with drop caps but I can't crack them open to see how they did it.:(
How are you adding the overlays?
You would have to merge the two spans and fiddle with the style by adding some thing like this.
Would you be interested in helping me solve this for some type of compensation?
I am still unable to find a solution to this issue and would very much like to solve my issue but also give the solution to all those who will run into this issue moving forward. Being Indesign is the culprit here in how it separates each word into a separate <div>, it also separates all drop caps as well which is a problem with doing a read along.
Please message me if interested and we can talk further.
How do you see the highlight working? Do you want some thing like this.
The yellow / red is showing how the read aloud would highlight. If you want the bottom part of the H to be highlighted with the rest of the word "ello", I don't think I can help at this time.
Edited to say:
Actually I am not sure if that is true. You might be able to highlight two HTML objects at the same time. That might be what you should be looking at.
Any quite happy to look at your files, if you want.