12-11-2023, 11:24 PM | #1 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
epub3x cover
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). Last edited by azimuth; 12-28-2023 at 11:21 PM. |
12-12-2023, 07:15 AM | #2 |
Wizard
Posts: 1,544
Karma: 6613969
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; } Code:
#container img { display: block; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: 0; } Last edited by RbnJrg; 12-12-2023 at 12:44 PM. |
Advert | |
|
12-12-2023, 01:13 PM | #3 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
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! Last edited by azimuth; 12-14-2023 at 04:45 PM. |
12-12-2023, 06:26 PM | #4 | ||
Wizard
Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
|
||
12-13-2023, 01:26 PM | #5 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
For BookFusion, what part of the code do you suspect is effecting it's landscape mode?
Could "@supports" possibly resolve it ? |
Advert | |
|
12-13-2023, 05:33 PM | #6 | ||
Wizard
Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: 0; Quote:
Last edited by RbnJrg; 12-13-2023 at 05:36 PM. |
||
12-13-2023, 09:52 PM | #7 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
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). Code:
#container img { display: block; height: auto; max-height: 100vh; max-width: 100vw; margin: auto; border: 0; position: static; column-span: none; column-fill: auto; } Last edited by azimuth; 12-14-2023 at 04:47 PM. |
12-14-2023, 06:22 AM | #8 | |
Resident Curmudgeon
Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
HTML Code:
<?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> Code:
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%; } Last edited by JSWolf; 12-14-2023 at 06:25 AM. |
|
12-14-2023, 10:25 AM | #9 | ||
Wizard
Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1) In your css stylesheet: Code:
.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; } Code:
<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> Quote:
Code:
#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; } |
||
12-14-2023, 11:32 AM | #10 |
Resident Curmudgeon
Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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
|
12-14-2023, 12:07 PM | #11 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
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!
Last edited by azimuth; 12-14-2023 at 12:30 PM. |
12-14-2023, 02:04 PM | #12 | |
Resident Curmudgeon
Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
12-14-2023, 07:06 PM | #13 | |
Wizard
Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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. Last edited by RbnJrg; 12-14-2023 at 07:13 PM. |
|
12-14-2023, 09:04 PM | #14 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
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.
Last edited by azimuth; 12-14-2023 at 09:10 PM. |
12-28-2023, 09:45 AM | #15 | |
Resident Curmudgeon
Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Command line: How to embed color default cover instead of missing cover? | EbokJunkie | Conversion | 9 | 07-22-2015 12:30 AM |
Sell Nook Glowlight + cover, PRS600, Kindle 3 m-edge cover, K2 cover | Waba | Flea Market | 3 | 10-12-2014 10:36 AM |
Sell HP TouchPad 32gb NIB + ipad cover + non-reflective LCD cover | Waba | Flea Market | 3 | 09-26-2011 12:45 PM |
Ended Sony PRS-505 SC w/ Cover and Separate Wedge Light Cover in Canada | notsure | Flea Market | 2 | 11-13-2010 03:28 PM |
PRS-300 Pictures: Pink 300 + Sony red cover + custom cover | h0bbes | Sony Reader | 5 | 01-04-2010 12:41 PM |