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:

How to style the html table of contents using CSS

An e-book, like a website, uses reflowable text. That is to say the user can change the point size of the text and, when that happens, it FLOWS to fill the available space. This creates certain design difficulties when creating an e-book. As the point size changes, the text RE-flows and the number of words which will fit on a line AND the number of lines which will fit on the screen change. Consequently the ends of lines and ends of pages will vary depending on the point size selected by the user. Your design needs to take account of this.

This post is about some issues around styling the reflowable text in the html table of contents in an ebook.

*Update 27 August 2014: I have re-written this post to make the styles I am using completely general. Earlier posts have been updated to take account of this change.*

Styling the Heading:

The table of contents will most likely begin with a heading of some kind. For consistency of design it would be best to use the same styling as for the chapter headings, so one possible style might be implemented as follows:

In the html table of contents:

<p class="chapterHeading">Contents</p>

and in the CSS Stylesheet:

.chapterHeading {text-indent: 0; text-align: center; font-size: 2.5em; font-style: italic; margin-bottom: 4 em;}

Obviously your own style for chapter headings might differ. In my example it is centred on the page with the type 2.5 times bigger than the main text, in italic with a 4 line space below it. (See my posts on CSS styling which works on a Kindle and on understanding the syntax of CSS for more information.)

Styling the Chapter Links

Assuming you have a basic e-book with just a linear sequence of named chapters, you could have the entries in the html table of contents flush left and separated by a space (see my earlier post on how to generate the html table of contents for an explanation of how to make the table of contents):

How to generate the html table of contents in an e-pub

The html table of contents is a page, near the front of your e-book, which consists of hyperlinks to the various chapters and possibly sections of chapters which follow it in your book. (See my recent post on how to sequence your e-book for more information about where to put the html table of contents and what to include in it.) It is essentially serves the same purpose as the table of contents in a print book and readers will expect to see one. And not only the reader: kindlegen will not like it if there is no html table of contents either! It is completely different in terms of the way it is constructed from the logical table of contents (toc.ncx), which is accessed by the e-reader directly.

Sigil does contain a built-in tool for generating the html table of contents using the various <h1>, <h2>, etc. tags which were used to build the logical table of contents (see my post on how to generate the logical table of contents for more information). If you wanted to use this tool you could access it from the ‘Tools/Table of Contents/Build the html table of contents …’ menu item.

However I am NOT recommending that you do this. In my opinion this leads to far too much complexity in the e-book and is too inflexible. In particular this tool creates a special CSS stylesheet to format the html table of contents and editing this to style yours to your satisfaction would be a lot of trouble. Furthermore, TWO stylesheets is one stylesheet too far, as far as I am concerned. Keep it simple and fewer things can go wrong!

My recommendation is to build the html table of contents yourself. It might sound like a lot of work, but it is fairly straightforward and at least allows you to style and structure it to your satisfaction. In particular, I have some strongly held views on how certain sorts of tables of contents should be styled and the very basic one produced automatically by Sigil just isn’t up to it. (See my post on how to style the html table of contents for more information.)

By all means use Sigil to create the html table of contents, but do it manually, rather than use the automatic tool. You could use Komodo Edit or even a text editor just as well, provided you ‘unpack’ the epub file first.

So, consider first of all a simple e-book with just a linear series of chapters: ‘Chapter1.xhtml’, ‘Chapter 2.xhtml’ etc.

The html table of contents would be impemented like this:

How to understand toc.ncx in an e-book

The logical table of contents in an e-book is a file called toc.ncx. To say that the syntax of this file is complicated would be an understatement. However it is not impossible to understand, and this post goes through toc.ncx line by line and explains how it is constructed.

Whilst Sigil can generate toc.ncx for you, it may be useful to have an understanding of the way it is put together in case for some reason you need to edit it manually at a late stage in preparing your e-book. And, if that were not reason enough, I want to understand what I am producing, so I have made it my business to understand the syntax of this file.

This will probably be a scary post for non-programmers, but I hope I have made it accessible, without skimping on detail.

To view toc.ncx, open the e-pub in Sigil and double-click on toc.ncx in the book browser. (It will be the last item in the list.)

In this example, the file looked like this in code view. (I have left some repetitive bits out, replaced by an ellipsis.) All will be explained below:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
     <head>
          <meta content="urn:uuid:4ef905ed-782e-440e-84b7-49b7f88099f4" name="dtb:uid"/>
          <meta content="2" name="dtb:depth"/>
          <meta content="0" name="dtb:totalPageCount"/>
          <meta content="0" name="dtb:maxPageNumber"/>
     </head>

How to generate the logical table of contents using Sigil

The logical table of contents in an e-book is a file called toc.ncx. Sigil generates this for you and I strongly recommend against trying to do it for yourself. The e-reader uses toc.ncx to build a table of contents which is usually displayed by pressing some sort of button on the e-reader or else by selecting a choice from a menu. (See images below) It is quite separate from the html table of contents. Every e-book HAS to contain a logical table of contents, so that an e-reader which is set up to access it (and that is most if not all of them) can do so. Your e-book will FAIL epubcheck and kindlegen if it does not have an ncx table of contents.

This post is somewhat out of sequence. You will need to have completed the end matter before you generate the table(s) of contents. But, as the linking and styling of the end matter is considerably more complex than for the front matter and main text, I will deal with all of that later. (See my posts on how to do endnotes, a bibliography and an index which have now been published.)

At its simplest, an e-book will most likely just consist of a linear sequence of chapters. To build the logical table of contents using Sigil, you NEED an <h1> (main heading) tag at the start of each chapter, enclosing the chapter heading.

Generating toc.ncx in a basic e-book:

I am going to start with a simple example to show how Sigil uses the <h1> tags to make the logical table of contents.

Chapter one in a basic e-book might look like this in code view:

<body>
   <h1>Chapter One</h1>
   <p … >It was a dark and stormy night … </p>
   …
</body>

I have replaced unnecessary detail with an ellipsis (…).

The main point is that EACH chapter you want included in the table of contents should begin with an <h1> tag. Once you have edited these into your ebook, click the ‘Tools/Table of Contents/Generate table of contents …’ menu item in Sigil: