Problems with Media overlays

2 posts / 0 new
Last post

I am encountering some problems when making eBooks with media overlays to highlight words correctly in Readium. While in IBooks all words are correctly highlighted at the right time, in Readium many of them are not highlighted at all.
I think I was able to find the source of the problem, which seems to be in the way Readium implements styling of text. In particular, my text looks like this:
<span id="f000001" style="position:absolute; left:300.7px; top:228.1px; font-size:18px;">"This </span>
<span id="f000002" style="position:absolute; left:345.66px; top:228.1px; font-size:18px;">out </span>
<span id="f000003" style="position:absolute; left:375.65px; top:228.1px; font-size:18px;">of </span>
<span id="f000004" style="position:absolute; left:395.63px; top:228.1px; font-size:18px;">all </span>
<span id="f000005" style="position:absolute; left:418.71px; top:228.1px; font-size:18px;">will </span>
<span id="f000006" style="position:absolute; left:448.68px; top:228.1px; font-size:18px;">remain</span>

Where each word id absolutely positioned in the page. As it is, not all words will highlight. If, instead, I eliminate the absolute positioning of the words, it works perfectly for all words.

Any help will be appreciated.

Thank you for your feedback!
Could you please privately share your EPUB, so I can run some tests?
(we observed Chrome-specific rendering bugs in the past, somehow related to CSS)
I am
Regards, Daniel

Secondary menu