- Posts 23328
- Location Mobilism
- WRZ$
221.00
- Device Not Specified
Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.
The front matter of a book communicates a lot of helpful and important information to readers. But publishers and authors often find themselves wondering how to handle that information in their ebook files. In the next few installments of my column here on Digital Book World, I would like to delve into some best practices, ideas and options for these opening and ending parts of your ebook. We will begin this series by talking about cover images.
Note: As is my standard practice, the examples below all contain markup that is suitable for EPUB 3 files. If you are still creating an EPUB 2 file for some reason, your mileage may vary.
Every ebook file should include a cover image. The common practice is to display the cover image inside its own HTML file at the beginning of the ebook. To satisfy the broadest range of retailer requirements, cover images inside EPUB files should be created according to the following specs:
- File type: JPG or PNG
- File name: Can be anything, but some retailers like it to be the ISBN.
- Color: RGB (CMYK is not allowed)
- File size: Less than 5MB
- Dimensions: At least 1200px on the shortest side, no larger than 4 million pixels (width x height).
- Transparency: None
- Content: It is best to only include the book title and the author name on your cover image. Some retailers or distributors may not allow price, email addresses, website addresses or other information.
In the early days of EPUB file creation, it became common to wrap cover images inside an <svg> tag to try to force the reading systems, especially Adobe Digital Editions, to properly scale and center the image. However, this hack can cause problems on some reading systems, and it is not necessary for proper image display today.
I always recommend using standard HTML and CSS to scale your cover image (and all internal images). The HTML can be written like this:
<body class=”fullpage”>
<section id=”cover” epub:type=”cover”>
<img id=”coverimage” src=”images/cover.jpg” alt=”cover image” />
</section>
</body>
The <section> tag includes the proper epub:type attribute to show semantically that this document/section is the cover image. The <img> tag also includes an alt attribute that says what the image is for accessibility purposes.
The following CSS, adapted from my Images Single File sample, could be used to properly scale the cover image:
section#cover {
text-align: center;
display: block;
height: 95%;
}
img#coverimage {
padding: 0;
margin: 0;
height: 95%;
}
img#coverimage:only-of-type {height: 95vh;}
I like to add some additional code to my cover image styling to maintain more control over the page view. Specifically, I add a class name to the body tag (in this case, fullpage) and assign zero margin and padding to it, like this:
body.fullpage {
margin: 0;
padding: 0;
}
Additionally, in EPUB 3 you can use the renditions feature to tell the reading system that you do not want the page to display in a two-page spread if the reading system has a reason to display the book that way. To do this, add properties=”rendition:spread-none” to the spine item for the cover HTML file. You may also want to add the default renditions declaration to the metadata to ensure that the reading system knows that automatic page spreads are fine throughout the rest of the book, like this: <meta property=”rendition:spread”>auto</meta>. Renditions are not widely supported in reading systems at this time, but this prepares your file for the future. Additionally, the rendition:spread values are intended for use in Fixed Layout EPUB files, but I have heard from “people in the know” that this usage should be acceptable in reflowable, as well.
Some publishers have also adopted the technique of adding linear=”no” to the cover image HTML file in the OPF spine. However, linear=”no” is not supported on most reading systems, and in those places where it is supported, it just makes the cover image not show up in the regular flow of content of the book. I do not recommend including this in your EPUB.
In your OPF file, there are two ways to mark the cover image so that reading systems can display the proper image in the user’s library. The standard EPUB 3 approach is to add properties=”cover-image” to the manifest listing of the actual cover image file (not the HTML file). It is also a good idea to include the EPUB 2 method to ensure older systems can properly display the cover image. This involves adding <meta name=”cover” content=”coverimage” /> to your OPF metadata section. Note that the value of the content=”coverimage” attribute should point to the actual ID of the cover image in your EPUB. Also note that some reading systems will still not display the image in the library for sideloaded EPUB files, even with this markup in place.
That’s essentially all you need to know to add a cover image to your EPUB file. In the next article, we will discuss the copyright page.