Can Everton Jones find out how his father stole Emperor Bokassa’s diamonds and, more importantly, where he hid them; before the world and his brother get there first?
Click on the picture link in the sidebar to read an extract of my first novel, which was published by Paradise Press in August 2012.

Thursday, 31 July 2014

How to create an html cover for your epub using Sigil

Everyone judges a book by its cover! Your ebook will need a cover. But there are differences in the way the front cover is dealt with in epub and Kindle e-books. This post is about how to generate an html cover for an epub using Sigil.

The first thing to have ready is, of course, an image file. If you are making an e-book version of a pre-existing print book, then use the print cover. In the vast majority of cases this will be just a little bit taller and thinner than the e-reader screen, most of which are 800 pixels high and 600 pixels wide. (A popular size for print books is 129 × 198 mm which scales to 800 × 521 px.) If you are making an e-book only edition, then you could use the full 800 × 600. On the other hand, if you have ambitions to bring out the e-book version as a print book sometime down the line, then I would advise you to design the cover graphic in a size appropriate for a print book cover and use that for the e-book only edition. You are then future-proof, should you want to make it into a print book later on. HOWEVER do remember that a print book file will require a 3mm ‘bleed’ for the printer, so build this into your graphic from the start and cut the bleed off the file used for the e-book cover.

Now, most e-reader screens are, as I’ve said, 800 pixels by 600 pixels, and have black and white displays. However there are some which are bigger, notably tablets such as the iPad and the Kindle Fire (both of which are colour). So to make sure your cover image will display with the best possible resolution, save the file with MORE than 800 × 600 pixels and also save it as a colour file. If you format the html cover properly, the e-reader will convert it to fit the screen, whatever size it is, and make it greyscale if necessary.

My recommendation is to save the file as a colour .jpg and to use the same size and resolution as the print file: For a book cover which is 129 × 198 mm this would be 1524 × 2339 pixels at 300 dpi. So, taking my own advice, I opened a draft book cover with my favourite image editor (GNU Image manipulation program, although photoshop will do perfectly well instead) , selected the cover minus the bleed (shown shaded in the image), and copied and pasted it into a new image file:


I saved the image file as ‘htmlCoverImage.jpg’.

Now for an epub e-book Sigil has a rather neat tool to generate the html cover, and I am (rather unusually) actually recommending using this. It is simplicity itself. Just upload the cover image to the ‘Images’ folder, by right-clicking on the images folder in the book browser and selecting ‘Add Existing Files …’ from the pop-up menu:



Sigil saves the image in the Images folder, which you can see in the book browser:



To use the tool in Sigil to create the html cover, just select ‘Add Cover …’ from the Tools menu:


In the dialog which follows, select the cover image and click ‘OK’:



You will see that Sigil has created a file called ‘cover.xhtml’ in the Text folder:


As I have suggested elsewhere, you may want to rename this file ‘DeleteMe.xhtml’, so that the various components to delete in content.opf are easier to locate when it comes to converting your epub to Kindle format.

If you look at the file in code view, it looks like this:

<head>
     <title>Cover</title>
</head>
<body>
     <div style="text-align: center; padding: 0pt; margin: 0pt;">
          <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1524 2339" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
               <image width="1524" height="2339" xlink:href="../Images/htmlCoverImage.jpg"/>
          </svg>
     </div>
</body>



Now this was a bit of a surprise to me, as the code uses an <svg> tag, which is part of html5. I have to admit I am unfamiliar with html5 and had to look up this tag in w3Schools website to understand it!

I created a test e-pub ebook with a cover generated using this tool in Sigil and it passed epubcheck and the cover worked properly on my e-pub readers. If you find that the <svg> tag causes problems, then you could make your cover as described below for the Kindle back cover instead.

The kindle guidelines do NOT include an <svg> tag in the list of html tags which the kindle supports. So this cover will NOT work on the kindle and any e-book with a cover made using this tool in Sigil will fail Kindlegen. HOWEVER as you are going to have to delete the html cover anyway for Kindle and rely on the kindle e-reader software to use the cover IMAGE instead, this won’t be a problem. Where it WILL be an issue is if you want a back cover, but more about that later!

Let’s look at the code which Sigil has generated in detail:

It begins with a <div> tag, which is html to define a ‘division’ in the document. In this case, the div has an inline CSS style with a text-align of center, so the contents will be centred on the page. padding is space added inside the edge of the div and is set to zero. The margin is space added around the outside of the div and is also set to zero.

Within the div there is an <svg> tag. SVG stands for Scalable Vector Graphic which pretty much does what it says on the lid: it creates a graphic element in your html document which will be scaled to fit, which is exactly what you want here.

According to w3Schools, the ‘outermost <svg> element needs to set up SVG and its namespace’. This is done with the two declarations:

xmlns="http://www.w3.org/2000/svg"

and

xmlns:xlink="http://www.w3.org/1999/xlink"

The preserveAspectRatio property is set to xMidYMid, which is actually the default, but Sigil makes sure and specifies it anyway. This ensures the cover image isn’t stretched in one direction and displays without distortion.

The width and height are set to 100% (also the defaults), and this ensures that the image fills the whole of the e-reader screen.

viewbox specifies the visible area of the graphic, beginning with the top left co-ordinates of the starting point and ending with the width and height in pixels.

Then within the <svg> tag there is an <image> tag. This has the height and width of the image specified in pixels and also a link to the image:

xlink:href="../Images/htmlCoverImage.jpg"

The tag is closed at the end by the final ‘/

Following that, there are the final, closing, </svg> and </div> tags.

All very interesting, but Sigil has done all of this for you! A knowledge of the syntax of the file might be useful if you need to make any last-minute changes and don’t want to go back into Sigil. Click and drag the file in the book browser in Sigil if it isn’t the FIRST item in the list. Because the source image file is of a very high resolution, when it is scaled down to fit 800 by 600 pixels it will not lose clarity. In e-readers with larger screens it will also be crisp and clear.

When you come to convert your e-pub e-book to Kindle format, you will delete the html cover entirely, leaving the image file behind. Then you will link the image file so the Kindle software can use it to display as the cover. See my posts on deleting the html cover and linking the cover image for more information. Because this is taken care of by the Kindle software you can be sure the front cover image will display crisply on all possible Kindle readers.

I like to include a back cover as the last page in my e-books. Either use the print cover for this or else make a special back cover for e-book only versions. For the e-pub version of the e-book, follow the above procedure and move the file generated by Sigil to the END of the e-book. Make sure any barcode on the back cover matches the EPUB ISBN. If you need to create a barcode, you can find a free barcode generator here: http://www.barcoding.com/upc/ (use EAN/Jan-13 as the encoding from the drop-dopwn menu).

As I have already said, the back cover made by Sigil will NOT work on Kindle. This is because Kindle does not support that <svg> tag.

So when you are creating the e-book, my advice is to create TWO back covers. ONE for the e-pub using the tool in Sigil, and with the barcode and ISBN for the e-pub edition, and ANOTHER for the Kindle, with the Kindle version ISBN and barcode. Then delete the epub back cover from the Kindle file just before converting it and likewise delete the kindle back cover from the e-pub version when you are finalising that.

To make a back cover for your Kindle edition using Sigil, place the cursor at the end of the last chapter in code view (just before the closing </body> tag) and split the chapter. This makes a new blank chapter and copies the header (important). Name the new blank chapter something like ‘kindleBackCover.xhtml’. If it is not there already, move it to the end of the document by clicking and dragging it in the book browser.

Add the back cover image to the e-book in the same way as you added the front cover image (see above) and give it an informative name such as kindleBackCoverImage.jpg.

Now switch to code view and add the following code to the <body> of the blank chapter you just created:

<body>
   <p><img alt="" height="100%" src="../Images/kindleBackCoverImage.jpg" /></p>
</body>


notes: kindleBackCoverImage.jpg is the filename of the cover image. It should match the filename in the book browser. ../Images/ is the path to the image. The file for the html cover page is in a folder called ‘Text’ and the cover image is in another folder called ‘Images’ The two dots tell the e-reader software to look in the enclosing folder (OEBPS) to locate the Images folder. I haven’t bothered to specify any alt text to display instead of the image. This would go inside the double quotes if you wanted it. height="100%" forces the image to display the full height of the e-reader screen. IF your cover image is shorter and fatter than the 800 × 600 screen dimensions, then specify width="100%" instead. The image in this case might align with the top of the e-reader screen, leaving a gap beneath it. I think the easiest approach to this problem would be to add a black border to the top and bottom of the image file to make it up to the full 800 × 600 proportions. The single <img /> tag is closed by the ‘ /’ at the end (the space matters).

If you are following my recommendations on CSS styling, you will have defined the default paragraph style to be indented. HOWEVER you will need to style the paragraph containing the cover image as unindented so that it centres correctly. Apply the style by adding something like this to the paragraph tag in the chapter: <p class="cover"> and by adding this to the CSS stylesheet: .cover { text-indent: 0; text-align: center; }. Alternatively you could use an inline CSS syle.

Additionally, in the CSS stylesheet, you might want to define a default CSS style for all <img /> tags like this: img {border: 0; margin: 0; padding: 0;}. This should ensure that all images in your ebook display by default with no border around them. Padding and margin are explained above. Set them to zero just to make sure.

Next Steps: The foregoing relates to creating a cover for an epub e-book. When converting your epub file to Kindle you will need to delete the html front cover and link the cover image as the cover instead. Once the front matter, end matter, contents and covers are done, you can get on with entering the metadata and then your e-pub is ready for testing.

Index to ‘how to …’ posts:

How to ‘unpack’ an epub file to edit the contents and see what’s inside.
How to understand what is inside an epub
How to link the html table of Contents in a Kindle e-book
How to restructure the html table of contents for a Kindle
How to delete the html cover for a Kindle ebook
How to link the cover IMAGE in a Kindle e-book
How to clean up your MS Word file before your get started
How to markup an MS Word file to identify the formats before importing it into an epub
How to create a new blank e-pub using Sigil
How to import your marked-up MS Word file into your ebook using Sigil
How to create and link a CSS stylesheet in an e-book using Sigil
How to replace the markup with CSS styles in your ebook using Sigil
How to style an e-book so it works with the limited CSS styling available to Kindle e-readers
How to understand the syntax of CSS
How to style Small Caps in an e-book
How to split your ebook up into chapters using Sigil
How to sequence your e-book
How to phrase the copyright declarations etc. in an e-book
How to generate the logical table of contents using Sigil
How to understand toc.ncx in an e-book
How to generate the html table of contents in an e-pub
How to style the html table of contents using CSS
How to create an html cover for your epub using Sigil
How to present references and notes in a book
How to use Mark Up to link notes in your e-book
How to present a bibliography in a book
How to use markup to link entries in a bibliography with the notes section
How to index an e-book
How to use the tools in MS Word to create an index
How to alphabetise an index or bibliography
How to adapt the print index in your MS Word file for an e-book using markup
How to adapt cross-references in your print index for e-book and how to use markup to make the links
How to understand content.opf
How to understand and edit the Metadata of an ebook using Sigil
How to understand the manifest in content.opf
How to understand the spine and guide in content.opf
How to test your e-pub using flightCrew in Sigil

TinyURL for this post: http://tinyurl.com/o6q9pvh

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. The first response that may spring to mind when asked this question is - why should I care about HTML validation?, hopefully the reasons below will provide a compelling answers to this question (and hopefully get you to validate your html!):
    Steve

    ReplyDelete
  4. This is on account of the digital book is anything but difficult to utilize and does not require programming establishments and other tedious procedures.free ebook for kindle

    ReplyDelete

 
Twitter Bird Gadget