Example ePub
This page shows examples of HTML files and usage to aid in creating special features for ePub.
Contents |
[edit] Cover images
It is often the case that Ebook Covers need the cover image to be rescaled to fit the screen resolution of the target devices. Here is an example that provides this feature. It depends on SVG support which may not be present in all eBook readers but is part of the standard.
<?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="calibre:cover" content="true"/> <title>Cover</title> <style type="text/css" title="override_css"> @page {padding: 0pt; margin:0pt} body { text-align: center; padding:0pt; margin: 0pt; } </style> </head> <body> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 429 750" preserveAspectRatio="xMidYMid meet"> <image width="429" height="750" xlink:href="../Images/cover.png"/> </svg> </div> </body> </html>
Notes: This is the entire file for a cover image. The image size (429 x 750 pixels in this example) must be specified in the viewBox and in the image reference itself. Of course the href to the actual image must be correct. Generally JPG, GIF, and PNG files are supported. The style statements could have been put in a CSS file if desired.
See also: ebook Covers
[edit] Images at the top of a page
A problem with Text overflowing image if it's at top of screen is peculiar to iBooks but the fix works with any reader. The solution is to put the image tag inside a "span" and then insert this combo (span + img) inside the paragraph tag, like this:
<p><span class = "float"><img src="images/image.png" alt = "" />image caption</span>paragraph text</p>
And then place this in the CSS
.float {
float: left;
margin-right: 1em;
margin-bottom: 0.5em;
}
Works with or without the caption.
If the text is a list (ordered or unordered), just insert the combo (span + img) inside the first list item, then add the property "list-style-position: inside;" in the css, like this:
<ul> <li class="inside"><span class = "float"><img src="images/image.png" alt = "" /></span>list item text</li> </ul>
The CSS looks like:
li.inside {
list-style-position: inside;
}
[edit] Forcing a page break
If you set the display property for a div to be inline-block, iBooks will display the contents of the entire div together on a single page, skipping to a new page if necessary, unless the entire div can't fit on a page by itself, in which case it will be divided across pages.
<div {display: inline-block}>
This can be used to keep a caption or figure reference with an image, or to avoid a Header appearing at or near the bottom of the page. It works in iBooks, Adobe Digital Editions, and on Barnes & Noble's nook. It likely works elsewhere.
[edit] sidebars
This example includes a fallback for MOBI files from Amazon that do not support sidebars. The CSS can be simplified if ePub is all that is needed.
@media amzn-kf8 { /* this code only applies for mobi8 books*/
hr.m7 {
display: none; /* horizontal lines are hidden under mobi8 */
}
div#sidebar {
float: left;
width: 50%;
font-size: 120%;
text-indent: 0em;
text-align: justify;
margin: 1em 1em 1em 1ex;
padding: 1em 1em 1em 1ex;;
border-top: 6px solid black;
border-bottom: 6px solid black;
}
.fl {
display: table-cell;
width: 0.3em;
font-size: 8em;
line-height: 80%;
color: rgb(192, 192, 192);
}
.tf {
display: table-cell;
vertical-align: bottom;
padding-left: 0.5em;
}
}
@media amzn-mobi { /* this code only applies for mobi7 books*/
hr.m7 {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
div#sidebar {
text-align: center;
}
.fl {
display: none; /* this class is hidden under mobi7 */
}
.tf {
font-size: 1.2em;
font-weight: bold;
margin-left: 20%;
}
}
and in the .html page:
<hr class="m7" />
<div id="sidebar">
<div class="fl">
“
</div>
<div class="tf">
...sometext...
</div>
</div>
<hr class="m7" />
To see an how this would work see: Media:sidebar.zip (rename the extension to .epub)
[edit] Drop Caps using SVG
Substitute the letter you want for the A.
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <text x="50" y="100" text-anchor="middle" fill="black" style="font-size: 100px; font-weight: bold">A</text> </svg>
Here is the page in the book.
<p><img class="DropImage" alt="A" src="../Images/Image1.svg" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc.... </p>
Here is the CSS.
p {
text-align: justify;
}
.DropImage {
float: left;
margin: -12px 5px 0 0;
}
[edit] Add more
- See Table
