Quote:
Originally Posted by fbrzvnrnd
Uh. This is strange: I cut and paste your suggested code in my EPUB3, and I got the result I told... I attach the EPUB3.
|
Well, good news and bad news. The good news are I found the cause of your issue and I also found the perfect solution (?); the bad news are you won't be able to apply a solution based on svg
I will explain the things.
First, the svg solution.
You need to apply the "border" property (border: 10px solid black or whatever) to the tag <body>. Something like:
Code:
<body style="border: 10px solid black; margin: 0; padding: 0">
or
Code:
<body class="bordered">
and in your .css file to define the class "bordered" as:
Code:
.bordered {
border: 10px solid black; /* of course you change the border style here */
margin: 0;
padding: 0
}
After that, you need to use a svg image with a height and a width of 100% with no border; you can put whatever inside this svg, no problem with this. By using a svg image with a heigh and width of 100%, the body will be forced to expand with that size and you'll have what you want. Please, open the
SVGepub2.epub book I attach in ADE 4.5 (or any ADE). It'll will show the borders as you want.
The cause of your issues.
Your problems are due to a bug in ADE 4.5 for svg images
in epub3! There is no way you can have what you want, even by using javascript meanwhile ADE won't fix the svg bug. Please, open the
SVGepub3.epub ebook I attach in ADE 4.5. That ebook is the same epub2 you opened previously but compiled/saved as epub3 with the Sigil plugin ePub3-itizer. As you will be able to see, the width is ok but the height isn't. If you open this same epub3 with Readium, the look will be perfect. For this reason, the ADE bug, you can't use a solution based on svg images.
The perfect solution (?)
I tried this only in ADE and with epub3. It won't work with epub2, only with epub3. But as you are working with epub3, this aproximation could work for you.
Instead of using svg images, you will use tables! First, you need to define the height of the <html> and <body> tags in your .css file. The height of them is linked with the thickness of the border you want to use. With a thickness of 10px, I found a height of 95% works fine. The css style I used were:
Code:
html {
height: 95%;
margin: 0;
padding: 0;
}
body {
height: 95%;
margin: 0;
padding: 0;
border: 10px solid black;
}
#content {
display: table;
font-family: serif;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
text-indent: 0;
text-align: center;
}
.row {
display: table-cell;
vertical-align: middle;
height: 100%;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
color: purple;
}
and in the .xhtml file, I wrote the following:
Code:
<body>
<div id="content">
<div class="row">#uno</div>
</div>
</body>
Please, check the SVGepub3Bis.epub I attach. With it, you'll understand better what I want to say and what I made.
Regards
Rubén