Open zkrige opened 6 years ago
I just tried with https://readium.firebaseapp.com (which is readium-js-viewer
, which itself is based on the same readium-shared-js
code as native iOS / Android reader apps). Everything looks okay in both scroll and paginated view modes:
Yes, it works fine at 100% font size, but if you increase the font size it goes wonky
I suspect this problem occurs because of how Readium applies the font-size change to DOM fragments: https://github.com/readium/readium-shared-js/blob/develop/js/helpers.js#L256 Applying a percentage value at the top-level does not work in many cases (because of CSS cascade overrides), so the current method is to walk the DOM tree, record the original computed size, then apply the desired "scale" factor as a calculated, not relative value. Although the line height is proportionally adjusted, I think that your example reveals a similar / related issue with content "gutters". I'm not sure how to address this though...
We've built our own epub reader and managed to get around this by applying webkit-text-size-adjust
to the html
tag - it seems to work on the entire document
Thanks for the tip! https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Complex html structures not rendering properly when increasing font size in reflowable epubs
This issue is a Bug
Expected Behaviour
Rendering should match iBooks - code line 10 in image below![screen shot 2018-02-07 at 12 24 35](https://user-images.githubusercontent.com/968412/35911802-8075566a-0c03-11e8-8fb7-25baa121b56b.png)
Observed behaviour
Instead Readium breaks layout slightly
10
is truncated on leftSteps to reproduce
1) open attached epub with readium 2) browse to item_GuidedTour 3) change font size to 190% 4) go to page 4
Test file(s)
https://drive.google.com/open?id=1_HI8ZstBLja7YjD7wOpQ5Rjx_-YtOW9x_w
Product