Image "fit resizing" algorithm leads to inconsistent results

[danielweck]

Issue moved from here (originally recorded by @rkwright):
readium/readium-js-viewer#135

The IDPF sample document Le Vrai Regime Anti-Cancer
https://code.google.com/p/epub-samples/wiki/SamplesListing#regime-anticancer-arabic
has a title page which is a a JPEG image (which is loaded via a XHTML file via an iFrame). The image is rendered correctly in Chrome (and the Readium Chrome Extension) but isn't scaled properly in IE. Instead, it appears to be significantly over-size and is consequently clipped.
Note that this info is based on loading the XHTML directly into the browser, NOT loading the EPUB sample with the CloudReader.

[danielweck]

See also:
#64

[danielweck]

Readium's current resizing trick is based on a simple CSS override: "max-width: 98%" + "width/height: auto".

https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L669

I think that CSS box-sizing (content vs. border-box) should be explicitly set, in order to cater for border+padding -surrounded images. Both box-sizing and the "max" % values should preferably be set via a reusable stylesheet with CSS "! important" statements, as they apply to all images regardless of their computedStyle or width/height attribute values. Conversely, the CSS width/height "auto" value should be applied depending on parameters that are normally analysed at runtime (e.g. image width/height might be authored relative to font size "em", in which case "auto" should not be applied).

PS: in some cases, iBooks wraps images in an extra div (e.g. block-level images, or images that have explicit dimensions via width+height attributes). I would not recommend this approach, as this would invalidate CFI expressions / annotations that target the image DOM path. However, it is worth noting that inserting an additional wrapper div is probably the only effective method that covers all use-cases.

[danielweck]

FYI:
I implemented a shared "resize image" utility function so that both scroll and column-paginated views can use it consistently:
a64dc4d

This is part of my ongoing feature branch:
https://github.com/readium/readium-shared-js/tree/feature/scroll_img_resize

UPDATE: feature branch now deleted, but commit preserved as reference (proposal: scroll view acts like regular scrolling webpage => no arbitrary resize-to-fit imposed by reading system, just application of authored CSS styles).

I have also added CSS box-sizing = border-box, which should fix some rendering issues, but not all (for example, images sized relatively to the text font size will not necessarily display as intended by the author, as we set their dimensions to "auto" in order to preserve the aspect ratio and "fit within" the containing block element). See my above comment about iBooks / wrapping div insertion.

[rkwright]

Moved to v1+ since it appears to work correctly in the Readium CE