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).