epub3x cover

[azimuth]

Examples abound on the web for CSS responsive image so we tried one randomly chosen example in epub3x environ for potential use as the cover page image. My CSS refinements seemed viable [at the time] and passed certain epub3 ereaders, but failed on epub2 (+ had other code hurdles).

EDIT: Rather than have heaps of superfluous words in my comments....we'll trim this down a bit.
1. Use SVG cover (as 'RbnJrg' suggests).
2. Styled <div> for cover (as 'JSWolf' suggests).
Both commenters have viable cover solutions; either cover method is good.
3. Experimental link below.

Live JSFiddle: Link

My JSFiddle Epub3x CSS code test is for my needs (for Epub3x only, with a focus on Android cell phone based users - my primary user base).

[RbnJrg]

I have not tested your code (I can't do it right now) but I would bet that will generate a blank page after the cover. In fact, I almost sure that that blank page will be present on EpubJS (a Sigil's plugin), PocketBook and OverDrive (overflow: hidden seems not to work there). By the way, max-height is not supported by Legacy RMSDK. I also saw that you are using height: 100% for the "body" selector; that won't work UNLESS you apply the same property (height: 100%) to the "html" selector. Right now your code is ignoring that property in "body" and only is applying max-height: 100vh. And regarding using viewport units, have you considered what happens in landscape mode? Have you considered to employ, instead of vw. vh, vmin or vmax?

EDIT: I could test your code and I must say that in general is a great job. Practically works everywhere (and I tested the code with a lot of ereaders in Windows, Linux and Android). I only found issues with Bibi Reader (a Sigil's plugin) where the cover is not showed at all and with BookFusion and Infinity Reader, both in landscape mode (in portrait mode it works flawlessly). But to me, the only issue to consider is with Bibi (in fact, the code I currently use, has an issue in landscape mode with BookFusion), not for Bibi but for the rendering engine used by Bibi (others ereaders can use the same engine). Probably the property "position: absolute" in conjuntion with "object-fit: contain" is causing the problem; do the following:

In your .css stylesheet for "body" write:

body#Setup {
  height: 99vh;
  margin: 0;
  padding: 0;
}

and for #container img write:

#container img {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 0;
}

Test what happens (when you use "position: absolute" with top. bottom, right and left equal to 0, automatically the image takes all the space available, so is not necessary object-fit: contain)

[azimuth]

Yep, you're right; I had misread the "legacy RMSDK for epub2x" info.
Vmin/Vmax: good idea worth delving into.

In the case of the Bibi reader, I initially had a fallback image coded into the full CSS, but had removed it (though I'd not consider it to be a long-term solution, but a temporary option).
I'll try your code recommendations!

[RbnJrg]

Originally Posted by azimuth

In the case of the Bibi reader, I initially had a fallback image coded into the full CSS, but had removed it. Below is the fallback code (though I'd not consider it to be a long-term solution, but a temporary option).

I tested your fallback and I can't get the cover be showed under Bibi.

I'll try your code recommendations!

With the modifications I suggested, the fallback is not more necessary and the cover is displayed well in Bibi.

[azimuth]

For BookFusion, what part of the code do you suspect is effecting it's landscape mode?
Could "@supports" possibly resolve it ?

[RbnJrg]

Originally Posted by azimuth

For BookFusion, what part of the code do you suspect is effecting it's landscape mode?

This part of the code:

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 0;

With that code you are forcing the image to take a full width and a full height (but honoring its proportion). And in fact, the image does that in BookFusion. I think the issue is originated by the way the ereader computes the width in landscape mode. The vast majority of readers use multicolumn CSS to display an epub in paginated mode and here BookFusion is taking the width of two columns.

Could "@supports" possibly resolve it ?

I don't think so. Those properties are from CSS2 (so, even ADE Legacy supports them). If you, to show a cover, use a simple svg wrapper, the cover (in BookFusion) is displayed totally but aligned to the left, so very probably BookFusion is still taking a width of two columns (in landscape mode) but we can't see it because of the image alignment. If my hypothesis is correct, perhaps (I'm not sure) a solution can be achieved by using the "column-span: none" and/or "column-fill: auto" properties.

[azimuth]

My initial goal: to get a cover image to function the same visually (for epub3) in a web browser, + same as in a desktop epub, + same as in an Android eReader epub -- all to function like an SVG, but using just JPG/PNG image and CSS so the bottom of the image would not spread off page.
Having gotten that, next...we made the suggested code changes to get the cover image sit on the left panel of a two-page spread (horizontal mode).

#container img {
  display: block;
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
  margin: auto;
  border: 0;
  position: static;
  column-span: none;
  column-fill: auto;
}

Would this CSS change resolve BookFusion (on iOS) as well?

[JSWolf]

Originally Posted by azimuth

My initial goal: to get a cover image to function the same visually (for epub3) in a web browser, + same as in a desktop epub, + same as in an Android eReader epub -- all to function like an SVG, but using just JPG/PNG image and CSS so the bottom of the image would not spread off page.
Having gotten that, next...we made the suggested code changes to get the cover image sit on the left panel of a two-page spread (horizontal mode).

#container img {
  display: block;
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
  margin: auto;
  border: 0;
  position: static;
  column-span: none;
  column-fill: auto;
}

Results in Windows (desktop) -- on ADE (dual and single spread) and Thorium (single spread).
- ADE: dual page spread the cover is on left panel !
- ADE: single page spread the cover responds normal, and its following text pages.

For my Android apps, only the first App performed active dual page spread visually so we could to see it in action:
- Aldiko: dual page spread, cover is on left page panel !
- ADE: it only has single page spread option, and cover/text renders normal (vertical and horizontal), and all text pages.
- PockeBook: no dual page option (renders normal, whether vertical or horizontal), and all text pages.
- ReadEra: though it has dual page mode option ON, it still only shows the epub in single view spread (horizontal and vertical), and all text pages.
- Moon+: has horizontal dual pane mode switched ON, but cover renders normal (horizontal or vertical), and all text pages.

Would this CSS change resolve BookFusion (on iOS) as well?

That CSS code is no good. It won't work with any programs that do not handle ePub 3. Here's code that will work in both ePub 2 and ePub 3. Never use vw and vh. They will break things.

HTML

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en">
<head>
<title>White Nights</title>
<link href="9780312384425.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="cover">
<img alt="" class="cover" src="Images/9781429990110.jpg"/>
</div>
</body>
</html>

CSS

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-height: 100%;
  max-width: 100%;
}
.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}

Another issue I saw in earlier code. Do not put in any sort of line-height. That causes a problem with software that allows you to adjust the line height such as on a Kobo Reader. Also, do not put in ant sort of overall L/R margins. Same issue. Kobo Won't be able to properly set the L/R margins.

[RbnJrg]

Originally Posted by azimuth

My initial goal: to get a cover image to function the same visually (for epub3) in a web browser, + same as in a desktop epub, + same as in an Android eReader epub -- all to function like an SVG, but using just JPG/PNG image and CSS so the bottom of the image would not spread off page.

Yes, I know that But you still can use jpg/png images with a svg wrapper. For example, try using the following code that should work everywhere (with epub2 and epub3):

1) In your css stylesheet:

    .cover {
          margin: 0;
          height: 99vh;
          max-width: 100%;
          overflow: hidden !important;
    }

    .picWrapper {
          margin: 0;
          padding: 0;
          height: 100%;
    }
    
    .pic {
          display: block;
          margin: auto;
          width: 100%;
          position: absolute;
          top: 0; bottom: 0; left: 0; right: 0;
    }

2) In your .xhtml file write the following:

<body class="cover">
  <div class="picWrapper">
    <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 10 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="800" width="600" xlink:href="../Images/Your_Cover.jpg"/></svg>
  </div>
</body>

Of course, the values of your viewport (600 and 800) can be different, according to the size of the cover image in px.

Having gotten that, next...we made the suggested code changes to get the cover image sit on the left panel of a two-page spread (horizontal mode).

#container img {
  display: block;
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
  margin: auto;
  border: 0;
  position: static;
  column-span: none;
  column-fill: auto;
}

Sorry, I didn't explain myself very well. Yes, column-span and column-fill are ok but STILL position: absolute and left, right, top, bottom equal to 0 should be there. Something like:

#container img {
  display: block;
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
  margin: auto;
  border: 0;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  column-span: none;
  column-fill: auto;
}

Try also that code to see what happens.

[JSWolf]

One other note. The cover should be hi-res as you don't know the resolution of the device that will be used to read

[azimuth]

Oh yeah you're right; I forgot to test the revision in an epub3 environ (which my second code revision fails on). There are only two apparent methods to cover setup....either as an SVG, or as JSWolf showed us. Both of those CSS examples shown do work nicely! Thanks!

[JSWolf]

Originally Posted by azimuth

Oh yeah you're right; I forgot to test the revision in an epub3 environ (which my second code revision fails on). There are only two apparent methods to cover setup....either as an SVG, or as JSWolf showed us. Both of those CSS examples shown do work nicely! Thanks!

Forget SVG. Not every ePub reading software will work with SVG. My way has the best chance of working.

[RbnJrg]

Originally Posted by JSWolf

Forget SVG. Not every ePub reading software will work with SVG. My way has the best chance of working.

That is not true; sorry to be harsh, but your code doesn't work. This is how it looks under:

Bibi Reader:

The cover is not showed at all.

EpubJS Reader:

The right side of the cover is not showed.

Readium Reader:

The cover is not centered, is aligned to the top.

And your code use as anchor the "height" property (height: 100%); so, what happens when the "width" of an image is bigger than its "height"? Because the properties "max-width" and "max-height" are not supported by ADE Legacy (ADE 2.x), it happens the following:



The cover can't maintain its proportion. Conclusion: your code doesn't work. I'm wondering if you seriously tested it under ADE 2.x.

By the way, an ereader that does not support an svg wrapper is anything but an ereader.

[azimuth]

Good points. I had tested in one epub format but forgot to test it in the other [epub3 vs epub2], as both you and JSWolf noticed. I had hoped a combo vh-vw + % as fallback CSS would function as a fallback but instead it runs wild.

[JSWolf]

Originally Posted by RbnJrg

That is not true; sorry to be harsh, but your code doesn't work. This is how it looks under:

Bibi Reader:
Attachment 205200
The cover is not showed at all.

EpubJS Reader:
Attachment 205199
The right side of the cover is not showed.

Readium Reader:
Attachment 205201
The cover is not centered, is aligned to the top.

And your code use as anchor the "height" property (height: 100%); so, what happens when the "width" of an image is bigger than its "height"? Because the properties "max-width" and "max-height" are not supported by ADE Legacy (ADE 2.x), it happens the following:

Attachment 205202 Attachment 205203

The cover can't maintain its proportion. Conclusion: your code doesn't work. I'm wondering if you seriously tested it under ADE 2.x.

By the way, an ereader that does not support an svg wrapper is anything but an ereader.

You have to be doing something wrong. The cover should resize to to the full screen size. It does not vertically center. There's no need for it.