Quote:
Originally Posted by PilcrowandStanza
guys! I love that there's a debate over ebook structure, but can we get to the answers on what actually works? Thanks!
|
The first thing you must know is that, under epub2, not all epub2 ereader will honor the code to get what you want. Under epub3, all the ereaders I know, with support for epub3, will honor the code and so you can have a full page image. Of that way, if you want your epub can be read for any ereader, you have to write code for epub2 and code for epub3. It's not easy to explain the full procedure because I don't know your image size and the text layout. But I will give an example about how you should procedure.
Look the following images. The first screenshot shows Readium supporting the property "shape-outside"; the second screenshoot shows IceCream not supporting that property.
So you need to include in your xhtml file, code to handle both situations. For example:
1. In your .xhtml file:
Code:
<p>Blah, blah, blah... a long blah, blah, blah</p>
<div class="WrapA">
<img class="picA" alt="Imagen15" src="../Images/Imagen15.png"/>
</div>
<div class="WrapB">
<img class="picB" alt="Imagen15" src="../Images/Imagen15.png"/>
</div>
<p>Blah, blah, blah... a long blah, blah, blah</p>
2. In your .css file:
Code:
.WrapA { /* This code is for epub2 */
float: left;
width: 40% !important;
margin: 0px 10px 0 0;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important; /* this property is supported by ADE */
break-inside: avoid !important;
}
.WrapB { /* This code is for epub3 */
display: none; /* Pay attention here, the code for epub3 is not showed!! */
float: left;
width: 40% !important;
-webkit-shape-outside: polygon(60% 0%, 54% 3.28%, 54% 10.90%, 62.25% 16.57%, 64.25% 24.78%, 67.25% 32.69%, 74.25% 39.85%, 74.25% 50.00%, 70.50% 55.82%, 78.25% 60.15%, 76.75% 66.12%, 83.00% 71.04%, 100% 73.88%, 100% 95%, 0% 95%, 0% 0%);
shape-outside: polygon(60% 0%, 54% 3.28%, 54% 10.90%, 62.25% 16.57%, 64.25% 24.78%, 67.25% 32.69%, 74.25% 39.85%, 74.25% 50.00%, 70.50% 55.82%, 78.25% 60.15%, 76.75% 66.12%, 83.00% 71.04%, 100% 73.88%, 100% 95%, 0% 95%, 0% 0%);
-webkit-shape-margin: 20px;
shape-margin: 20px;
shape-margin-bottom: 10px;
}
.picA, .picB {
display: block;
width: 100% !important;
margin: 0;
}
/* Now it comes the important part! */
@supports(-webkit-shape-margin: 20px) {
/* To Test epub3 code (with -webkit properties); if code is supported then */
.WrapA {
display: none; /* epub2 code is not showed!! */
}
.WrapB {
display: block; /* epub3 code is showed */
}
}
@supports(shape-margin: 20px) {
/* To Test epub3 code; if code is supported then */
.WrapA {
display: none; /* epub2 code is not showed!! */
}
.WrapB {
display: block; /* epub3 code is showed */
}
}
Of course, the code is an example an the polygon values are only valid for the example image. You don't want a image with the shape-outside property, you want a full page image, so you need to write code for a "quasi" full page image in epub2 and code for a full page image under epub3. And including code to test if epub3 is supported and of that way, to enable epub3 code and disable epub2 code.
To have a full page image under epub3, you need to use the tag <figure> of the following way:
Code:
figure {
float: left;
width: 100%;
height: 98vh; /* This is key */
margin: 0px; /* or what you want; if you add margin, you should reduce the height */
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
But, one moment. You have defined the size of the <figure> container. BUT YOU CAN'T INCLUDE YOUR IMAGE HERE WITH a <img> tag because if you do so, then the image won't maintain the proportion. YOU MUST INCLUDE THE IMAGE WITH A SVG WRAPPER. Of this way:
In your .xhtml file:
Code:
<figure>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/Img1.jpg"/></svg>
</figure>
Of course, the width (600) and height (900) of your image will be different. With an svg wrapper your avoid all the issues generated by width and height of an image; the proportion and size always will be optimal. Here is how it looks that code under BibiReader:
The image was displaced (because of the "float: left" property) less than half screen to be at full page. You can play with the property "height: 98vh" and margins values (sometimes a good value is 95vh, but don't use 100vh because in some readers can generate a blank page). You have now the code for a full page image under epub3. I leave the easy part to you (*), achieving something similar with epub2 (forget about a full page image without white spaces before or after the image, that is impossible with epub2 and with ereaders based on RMSDK). And don't forget to write both code (in the .xhtml file and the .css file) and to test the epub3 code to enable it (or leave it disabled if it is not supported).
Regards
Rubén
EDIT: (*) Please, don't think that I'm hiding information, but I practically gave you all the clues about the code for epub2
EDIT2: I think it was clear, but you have to write an epub3 and to add it a toc.ncx file so the epub3 can be read with epub2 ereaders. See Sigil "Epub3 Tools" command.