epub3x cover - Page 3

JSWolf · 12-29-2023, 06:27 PM

Quote:

Originally Posted by azimuth

Question about your SVG cover code. There's a curious factor occurring when I temporarily add a color border around several elements in your cover code, just to see how its layered. For this example I temporarily shortened the first height:90vh so as to better see how its layered. Tested using a square SVG, and your wrapper code as is. Blue outer container, the red inner container (neither color spacing will be used by me in the final cover - these are just temp visuals) which I do by merely adding a 10px border to each of the two wrappers.
Here's the xhtml svg code:

Code:

<body class="cover">
<div class="picWrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 500" xml:space="preserve">
<rect fill="#BADD8C" height="100%" width="100%"/>
</svg>
</div>
</body>

For the CSS we used your code as is, plus the following.

Code:

.cover {border: 10px solid blue;}
.picWrapper {border: 10px solid red;}

Why does the lower red wrapper run slightly below page bottom?
Why does the lower red wrapper run over the lower outer blue border?
Should one container fit inside the other container (or be bound by the other container in some way)?

Or is none of this (i.e. container inside of container) really going to effect the epub cover (because the principal theory works based on your extensive test list in an above post!), + using the shortest most concise code is simply the ideal solution for epub3 (+ its fallback for epub2)?
Thank you!

You'll have to drop the boarder. The problem is that code is using the full screen. So having the boarder takes up screen space.

Turtle91 · 12-29-2023, 06:33 PM

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??

azimuth · 12-29-2023, 06:44 PM

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?

Turtle91 · 12-29-2023, 08:16 PM

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.

RbnJrg · 12-29-2023, 08:39 PM

Quote:

Originally Posted by azimuth

Question about your SVG cover code. There's a curious factor occurring when I temporarily add a color border around several elements in your cover code, just to see how its layered. For this example I temporarily shortened the first height:90vh so as to better see how its layered. Tested using a square SVG, and your wrapper code as is. Blue outer container, the red inner container (neither color spacing will be used by me in the final cover - these are just temp visuals) which I do by merely adding a 10px border to each of the two wrappers.
Here's the xhtml svg code:

Code:

<body class="cover">
<div class="picWrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 500" xml:space="preserve">
<rect fill="#BADD8C" height="100%" width="100%"/>
</svg>
</div>
</body>

For the CSS we used your code as is, plus the following.

Code:

.cover {border: 10px solid blue;}
.picWrapper {border: 10px solid red;}

Why does the lower red wrapper run slightly below page bottom?
Why does the lower red wrapper run over the lower outer blue border?
Should one container fit inside the other container (or be bound by the other container in some way)?

Or is none of this (i.e. container inside of container) really going to effect the epub cover (because the principal theory works based on your extensive test list in an above post!), + using the shortest most concise code is simply the ideal solution for epub3 (+ its fallback for epub2)?
Thank you!

Tomorrow I will ask your question, now I don't have time. But i give you a clue: you are using a border to test the layout; remove the border and instead use background colors. You'll see better how the things work. But tomorrow I will explain you the theory that is behind the code (that works in this case, for epub2 and 3; is not necessary a fallback code).

azimuth · 12-29-2023, 11:11 PM

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!

RbnJrg · 12-30-2023, 09:58 AM

Quote:

Originally Posted by azimuth

Question about your SVG cover code...

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;
}

If we want to have a cover for only ADE 2.x, the following reduced code would work:

Code:

.cover {
  margin: 0;
  overflow: hidden !important;
}

.picWrapper {
  margin: 0;
  padding: 0;
}

.pic { /* This is the epub2 layer */
  display: block;
  margin: auto;
  width: 100%;
}

The cover, to me, has to have three conditions:
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;

When we use:

Code:

  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

we are forcing the block to take the 100% of the available space. so any image that we'll put there, will touch the four extremes (top, bottom, left, right). For that reason, and to get #2 (to maintain the image proportion) we employ a svg wrapper. Of that way, the svg wrapper will touch the four extremes of the block, but the image inside will maintain the proportion,

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>

the image would maintain the proportion but we can't have the cover vertically centered; watch the following screenshot of Readium and EpubJS Reader:

Click image for larger version

Name: Captura1.png
Views: 85
Size: 29.6 KB
ID: 205481

Click image for larger version

Name: Captura2.png
Views: 67
Size: 24.2 KB
ID: 205482

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;

and putting the wrapper inside that space! If now we add a background color to our original code, we have:

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>

and here is how look the things under Readium and EpubJS:

Click image for larger version

Name: Captura3.png
Views: 75
Size: 24.7 KB
ID: 205483

Click image for larger version

Name: Captura4.png
Views: 80
Size: 26.0 KB
ID: 205484

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;
}

12-29-2023, 06:44 PM	#33
azimuth 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, 11:11 PM	#36
azimuth 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.

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

12-29-2023, 06:33 PM	#32
Turtle91 A Hairy Wizard Posts: 3,119 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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??

12-29-2023, 08:16 PM	#34
Turtle91 A Hairy Wizard Posts: 3,119 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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.