readium-js-viewer icon indicating copy to clipboard operation
readium-js-viewer copied to clipboard

Published 20 hours ago • verified publisher icon readium

Complex html structures not rendering properly

Open zkrige opened this issue 7 years ago • 5 comments

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

Observed behaviour

Instead Readium breaks layout slightly 10 is truncated on left screen shot 2018-02-07 at 12 36 56

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

zkrige avatar Feb 07 '18 10:02 zkrige

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: screen1 screen2

danielweck avatar Feb 14 '18 16:02 danielweck

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

zkrige avatar Feb 15 '18 05:02 zkrige

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

danielweck avatar Feb 26 '18 20:02 danielweck

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

zkrige avatar Feb 28 '18 08:02 zkrige

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

danielweck avatar Feb 28 '18 09:02 danielweck