" /> Digital Editions: March 2009 Archives

« February 2009 | Main | April 2009 »

March 27, 2009

Working with the cover

The covers on your books make a first impression. So when you're creating a cover for a book you're likely to put in some extra effort to make sure it looks good. When you're working with EPUBs and Adobe Digital Editions, there are some simple things that you can do that have a big impact on the look of the covers. In general, I'm assuming your cover pages are going to be a separate XHTML file from the rest of the content, and that the XHTML file will have, basically, a single image to represent the cover.

The right aspect ratio for the thumbnail.

Our thumbnail size is 90x130. For a cover page to fit well in that, and also look good at larger sizes, you'll want to create is a single image with that aspect ratio. (567x819 should work well.) In the CSS you'll want to set the max-width to 100%, all margins and padding set to zero. 
img { max-width: 100%; 
	padding: 0;
	margin: 0;
}

Keeping the cover always centered.

You've probably noticed that in Adobe Digital Editions, when you shrink the text enough, the reading view goes into a two column or three column mode. That's great for the text, but not so good for the image, you'd rather keep it centered. A one column view is usually best. This is one case where I'd probably just include the style information in the XHTML file for the cover. You'll want to style the 'body' tag with the oeb-column-number property and a value of 1, like this: <body style="oeb-column-number: 1;"> The inline style will override the default style, and you'll have a single column for everything in that particular body element.

Advanced techniques could be achieved via SVG.

So, now we've got a cover image that fills the thumbnail without any white bands. It also looks good in the reading view. That's as far as we're going in this blog post, but I thought I should mention that if you want more sophisticated cover pages, perhaps changing the background color in the reading view, or having an image that bleeds well off of the view at most aspect ratios... well, that's certainly possible, but requires using inline SVG to control the view, and that's beyond the scope of today's post. :)

Posted by Paul Norton at 2:08 PM | | Comments (0)