Complex html structures not rendering properly

[zkrige]

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

Observed behaviour

Instead Readium breaks layout slightly 10 is truncated on left

Steps 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

• Native application (Readium SDK C++)
  • official "launcher"
  • iOS 11.2

[danielweck]

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:

[zkrige]

Yes, it works fine at 100% font size, but if you increase the font size it goes wonky

[danielweck]

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...

[zkrige]

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

[danielweck]

Thanks for the tip! https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust