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