12-29-2023, 06:27 PM | #31 | |
Resident Curmudgeon
Posts: 76,098
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
12-29-2023, 06:33 PM | #32 |
A Hairy Wizard
Posts: 3,215
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Might want to reread the post. They don’t intend to keep the border. It is just there to test the layering/positioning.
Do you have an answer for their question?? |
Advert | |
|
12-29-2023, 06:44 PM | #33 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
To clarify...I just open up just that one cover page in a web browser developer tools (and am assuming that the layout seen there will be same in an epub [minus the temporary border]). The border cannot be used while in an epub.
The two containers....It is not an exact container inside a container (one overlaps the other slightly). Question: Will that matter, or impact an epub cover some how? If the second container is set exact inside the first container will that allow the first container to become 100vh? Last edited by azimuth; 12-29-2023 at 07:47 PM. |
12-29-2023, 08:16 PM | #34 |
A Hairy Wizard
Posts: 3,215
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
It shouldn't noticeably effect it. The overlap/extra bit is because the inner 'box' is surrounded by the outer 'box' there may, or may not need to be a 1 pixel 'border' (even when not visible).
Personally, I give a little extra space on the top and bottom for weird things like that; I use 95vh instead of 100vh. The little extra space at the top/bottom is so minor that noone really notices it for the 3 seconds they are looking at the cover image. |
12-29-2023, 08:39 PM | #35 | |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Last edited by RbnJrg; 12-29-2023 at 08:42 PM. |
|
Advert | |
|
12-29-2023, 11:11 PM | #36 |
Enthusiast
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
|
Edited: Good points (0 pixel, 95vh vs 99vh).
At closer look I realize now that the container is contained. I got a background color by adding an ID to SVG and set width 97%, and gave parent container a background color. RbnJrg's cover code is certainly a unique 5-star solution. His detailed description of how the cover functions (plus how to add background colors) in his next post is superb! Last edited by azimuth; 12-30-2023 at 01:38 PM. |
12-30-2023, 09:58 AM | #37 |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
It's not easy to explain how the code works, especially for me, that english is not my native language, but I will try.
The full code is composed by two layers of code: one for epub3 (ignored by epub2 ereaders) and one for epub2 (epub3 ereaders take into account both layers). As I posted before, the full code is: 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 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="800" width="600" xlink:href="../Images/Cover.jpg"/> </svg> </div> </body> Code:
.cover { margin: 0; height: 99vh; /* This property is for epub3 */ max-width: 100%; /* This property is for epub3 */ overflow: hidden !important; } .picWrapper { margin: 0; padding: 0; height: 100%; /* This property is for epub3 */ } .pic { /* This is the epub2 layer */ display: block; margin: auto; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } Code:
.cover { margin: 0; overflow: hidden !important; } .picWrapper { margin: 0; padding: 0; } .pic { /* This is the epub2 layer */ display: block; margin: auto; width: 100%; } 1) To occupy the bigger space possible. 2) To maintain the image proportion, no matter the screen where is displayed. 3) TO BE CENTERED IN THE SCREEN. To get #1 we use this properties: Code:
height: 99vh; /* This property is for epub3 in cover style*/ max-width: 100%; /* This property is for epub3 in cover style */ height: 100%; /* This property is for epub3 in picWrapper style */ /* The following properties are in pic style */ width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; Code:
position: absolute; top: 0; bottom: 0; left: 0; right: 0; Why not to use a simple svg wrapper? If we were to use a simple svg wrapper, for example: Code:
<body style="background: crimson"> <div style="background: green"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="600" height="800" xlink:href="../Images/Cover.jpg"/> </svg> </div> </body> In crimson color you can see the body space and in green you can see the space of the svg wrapper. And as the size of the svg wrapper (what is in green) is practically the same as the image, then the svg property preserveAspectRatio="xMidYMid meet" does not take place. We need to do the svg wrapper bigger and we do that with: Code:
position: absolute; top: 0; bottom: 0; left: 0; right: 0; Code:
<body class="cover" style="background: crimson"> <div class="picWrapper" style="background: green"> <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="800" width="600" xlink:href="../Images/Cover.jpg"/> </svg> </div> </body> As you can see, now the svg wrapper (what is in green) take pratically all the body space (what is in crimson). and as the svg wrapper now is quite bigger than the image inside it, then the preserveAspectRatio="xMidYMid meet" property can take place and the cover is centered, that is the #3 condition that a cover must have (at least, to me ). Well, that's all. The body space (what is in crimson) is bigger than the svg wrapper (what is in green) that is bigger than the cover (although in EpubJS the cover is so wide as the body, but that is a nice "drawback"). Of course, maybe this code may fail, but so far, is working everywhere Regards EDIT: There is another condition, not named by me, but implicit in the code. The cover must not generate a blank page, and that is what we try to achieve with: Code:
.cover { margin: 0; height: 99vh; max-width: 100%; overflow: hidden !important; } Last edited by RbnJrg; 12-30-2023 at 10:18 AM. |
|
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 |