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.