Portrait/full page image styling

[momoha2]

I found out a problem in ADE with the code for portrait image styling when using ePub3 instead of ePub2. From what I understood, softwares either use vh or %. ADE with ePub2 uses % but vh with ePub3, but it doesn’t support @supports....! So this results in images not being displayed correctly in ADE when using ePub3. The solution is to use vh straight away, without apply it through @supports, but then it won’t be displayed correctly in the softwares not supporting vh.

The ADE display problem is something that can’t be ignored for my company, so I did a LOT of tests and came up with a code that seems to perfectly solve the problem, AND also makes us able to make an image full page, ratio preserved, beautifully centered in the page. I tested my code on ADE on Windows 10, iBooks on iPad, and on Android, Bluefire, Google Books and Gitden Reader.

I would love if you guys can test it and see if really it is as good as I’m thinking, and if so, for it to be implemented in the Blitz framework maybe?

Full page images (the height="98%" is for Bluefire, else it creates a blank page before the image):

  <div>
    <svg style="height: 100vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="98%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
  </div>

Image with caption:

  <div>
    <svg style="height: 70vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="70%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
  </div>

[JayPanoz]

Thanks for logging this issue and providing a solution, this is greatly appreciated.

Given there’s SVG involved, I guess it would be a good idea to provide a little bit of historic background.

During the initial development of Blitz, it came to our knowledge than some distributors may alter SVG elements containing only an image as it’s been discouraged by some resellers. Actually I can even point to this recommendation in Apple Books’ guidelines for instance since it’s online:

To ensure proper viewing of images in content, use the HTML img tag instead of wrapping images in svg:image. (Interior Image Requirements)

So it seems some have been going the extra mile and automated this change in order to meet those recommendations. Out of curiosity, I tested that at the time, and indeed svg:image could be modified to img, with very minimal styles making the issue even worse.

So in order to strike a balance, we decided to use img with default styles limiting the damage and let people come up with their own solutions whenever possible – remember we don’t really know what your targets are so for complex issues, we kinda implemented the least worst solution.

---

Now I’ll also mention preserveAspectRatio="xMidYMid meet" is very important as regards this distortion/sizing issue, which is why we’re using object-fit (MDN doc) as it basically achieves the same. We’re not using @supports for this style.

Problem is both @supports and object-fit aren’t supported in IE11, which is relevant because Adobe Digital Editions 4.5 is using the Trident WebView on Windows:

• @supports support
• object-fit support

We hoped that maybe they would update to the Edge WebView at some point but well, this is the ebook ecosystem so it’s useless to hope for updates bringing the latest and greatest support possible.

Anyways, I came up with a (quite frankly) over engineered CSS alternative months ago, using background-image to benefit from background-size (MDN doc) when object-fit is not supported (they’re once again basically the same i.e. keeping the aspect ratio but for different things), which is a property supported in IE11 and it works – and can even be accessible. Buuuuuuuut, Kobo discourages that in their EPUB guidelines.

So it did not ship – once again, trying to strike a balance.

---

Now, how this could possibly be added to Blitz?

First things first: object-fit polyfills already exist so it would be kinda trivial to implement that for ADE 4.5 on Windows. It could simply be replacing figure > img with svg:image if some CSS is not supported – but that’s because I don’t like Reading-System sniffing i.e. checking for epubReadingSystem.name = "RMSDK" if it’s Windows.

DOMContentReady doesn’t include images, window.load indeed does so there may be a possibility to leverage it so that the change is not visible.

However, “BlitzJS” is not under active development. Actually, it’s been halted for lack of resources – testing is time-consuming.

Personally, I’d vastly prefer to handle such “polyfilling” of unsupported CSS with JavaScript instead of CSS hacks or HTML markup but others can feel free to chime in. And please be assured I’m publicising this preference knowing the state of JS support – in this case, it makes sense.

Thanks again for raising this issue, this is one example for which documentation fails short – as it doesn’t explain why we didn’t use SVG. 👍

[JayPanoz]

Given the Blitz project is under an “End of Life process”, this issue has been frozen, labeled documentation and wontfix, and won’t be addressed any further. Please check #66 for more details.