Layout of Title Page of EPUB Sample is different across browsers

[rkwright]

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:
readium/readium-shared-js#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]

Moved here:

readium/readium-shared-js#88