Thread: epub3x cover
View Single Post
Old 12-12-2023, 07:15 AM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,846
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
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:

Code:
body#Setup {
  height: 99vh;
  margin: 0;
  padding: 0;
}
and for #container img write:

Code:
#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)

Last edited by RbnJrg; 12-12-2023 at 12:44 PM.
RbnJrg is online now   Reply With Quote