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.

Wednesday, 23 July 2014

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):

In the html table of contents:

<p class="contEntry"><a href="chapter1.xhtml">Chapter One</a></p>

and In the CSS stylesheet:

.contEntry {text-indent: 0; margin-bottom: 1em; text-align: left;}

Notes: The href tells the e-reader where to jump to when the link is clicked. The style is applied to the paragraph using class="contEntry" in the <p > tag. The margin-bottom is specified using ems as the unit. One em is the width of the letter ‘m’ in the font used. If the base font size is changed by the user the space after the table of contents entries changes in proportion, maintaining your beautiful design.

Crucially, if the font size is made big enough for a particular entry in the table of contents to flow onto a second line, both lines will be flush left and the 1em bottom margin will separate one entry from another. Clearly the text-indent property also needs to be set to zero for this to happen.

Numbering Chapters

Now, you might have numbers AND names for your chapters. One way of doing that would be to use text such as ‘1: In the Beginning’, ‘2: After That’, ‘3: Subsequent Chapter’, etc. etc. for the links. HOWEVER, if the font isn’t monospaced then the numbers will not be the same width. The problem gets worse if the chapter numbers run to double digits. The result will be that the start of the chapter names won’t align underneath each other properly. Tabs won’t work in html and you can’t use html <table> tags for the contents in a Kindle or else the links won’t work and kindlegen won’t like it. It might conceivably be possible to structure such a table of contents using html <div> tags, but in all likelihood the same problem would be encountered: the <a> tags would probably not be clickable on a Kindle.

My recommended solution in this case is to set the chapter numbers flush left on one line, followed by the chapter titles set in on the left by an em or two on the next line, a bit like this:

In the html table of contents:

<p class="tocNumber">ONE</p>
<p class="tocEntry"><a href="Chapter1.xhtml">In the Beginning</a></p>
<p class="tocNumber">TWO</p>
<p class="tocEntry"><a href="Chapter2.xhtml">After That</a></p>


and In the CSS stylesheet:

.tocNumber {text-indent: 0; margin-bottom: 0; text-align: left;}
.tocEntry {text-indent: 0; margin-left: 2em; margin-bottom: 1em; text-align: left;}


Notes: This is the only use I have found so far for the margin-left property. In this case it sets the table of contents entries over two ems on the left. IF an entry runs to a second line BOTH lines will begin tidily 2ems in from the left. To achieve this the text-indent obviously needs to be set to zero as well. As before, the margin-bottom of 1 em puts a single line space between one entry in the table of contents and the next. Setting the margin-bottom of  tocNumber to zero ensures that the number and the title form a block of text on the page with no spacing inbetween. It is assumed that the number will not be long enough to flow onto a second line.

I have used styles beginning with toc… instead of cont… in this case. In general, there are TWO sets of styles in this post, those beginning cont…, which I have used for tables of contents in which the entires DO NOT have numbers, and these styles, beginning toc…, for tables of contents in which the entries DO have numbers.

As I said in my post about generating the html table of contents this method is just a bit more involved than the very basic table of contents built by the tools in Sigil. One good reason for building the html table of contents by hand, rather than entrusting it to the tools in Sigil.

Styling Subheadings:

In a very similar way you could style subheadings as follows:

In the html table of contents:

<p class="contEntry"><a href="Chapter1.xhtml">Chapter One</a></p>
<p class="contSubEntry"><a href="Chapter1.xhtml#my_meaningful_id_for_the_subheading">subhead</a></p>


and In the CSS stylesheet:

.contEntry {text-indent: 0; margin-bottom: 1em; text-align: left;}
.contSubEntry {text-indent: 0; margin-left: 2em;  margin-bottom: 1em; text-align: left;}


Obviously you might want a slightly bigger space after the last subheading in a particular chapter. In which case define another CSS style with a larger margin-bottom and apply this only to the last subheading in a particular chapter. Equally, if you were using this style, and had a chapter with NO subheadings mixed in with other chapters which DID have subheadings, a larger space after the lone chapter heading would also be indicated. So, to be completely general, you will need these styles as well:

.contEntrySpace {text-indent: 0; margin-bottom: 2em; text-align: left;}
.contSubEntrySpace {text-indent: 0; margin-left: 2em;  margin-bottom: 2em; text-align: left;}


Remember that you cannot set the margin-top property in a Kindle, so any spaces have to be applied to the pargraph before a gap.

Chapters and Subsections Numbered:

If the chapters and subsections are numbered, then use the following styles:
 
In the html table of contents:

<p class="tocNumber">ONE</p>
<p class="tocEntry"><a href="Chapter1.xhtml">Chapter One</a></p>
<p class="tocSubEntryNumber">ONE</p>
<p class="tocSubEntry"><a href="Chapter1.xhtml#my_meaningful_id_for_the_subheading">subhead</a></p>

and In the CSS stylesheet:

.tocNumber {text-indent: 0; margin-bottom: 0; text-align: left;}
.tocEntry {text-indent: 0; margin-left: 2em;  margin-bottom: 1em; text-align: left;}

.tocSubEntryNumber {text-indent: 0; margin-left: 4em;  margin-bottom: 0; text-align: left;}
.tocSubEntry {text-indent: 0; margin-left: 6em;  margin-bottom: 1em; text-align: left;}

It will also be necessary to define matching styles with spaces after them for the reasons above:

.tocEntrySpace {text-indent: 0; margin-left: 2em;  margin-bottom: 2em; text-align: left;}
.tocSubEntrySpace {text-indent: 0; margin-left: 6em;  margin-bottom: 2em; text-align: left;}

It will NOT be necessary to have spaced styles for the numbers, as they should be closely associated with the line which follows.

Styling Part Titles:

If you have divided your e-book up into parts, each containing a number of chapters, then you would want to use a similar strategy, but making the part titles in the html table of contents distinctively different from the other entries. The part titles would need to be clickable links to the relevant html files. Given that part titles are usually given in Roman numerals, I would suggest using capitals (or even Small Capitals) for the part titles and perhaps centreing them on the page. You would probably want a line space between the part title and the entry for the first chapter in it, and then a double line space after the last chapter entry, a bit like this in the Chapter:

<p class="tocPart"><a href="Part1.xhtml">PART I</a></p>
<p class="tocNumber">one</p>
<p class="tocEntry"><a href="Chapter1.xhtml">The View From the Bushes</a></p>
<p class="tocNumber">two</p>
<p class="tocEntry"><a href="Chapter2.xhtml">Breakfast in Kenton</a></p>
<p class="tocNumber">three</p>
<p class="tocEntrySpace"><a href="Chapter3.xhtml">James Stevens</a></p>
<p class="tocPart"><a href="Part2.xhtml">PART II</a></p>
<p class="tocNumber">four</p>
<p class="tocEntry"><a href="Chapter4.xhtml">Not What it Seems</a></p>


and then in the CSS stylesheet:

.tocPart {text-indent: 0; text-align: center; margin-bottom: 1em; font-size: 1.5em;}
.tocEntry {text-indent: 0; margin-left: 2em; margin-bottom: 1em; text-align: left;}

.tocNumber {text-indent: 0; margin-bottom: 0; text-align: left;}
.tocEntrySpace {text-indent: 0; margin-left: 2em; margin-bottom: 2em; text-align: left;}


In the example above, the chapters are numbered. If there are subsections and if these are numbered, use the matching tocSubEntryNumber, tocSubEntry and tocSubEntrySpace styles defined above. Equally, use contEntry contSubEntry, contEntrySpace and contSubEntrySpace instead if your chapters (and sub sections) are not numbered.

Other Possibilities:

That provides a thought-out system of styles for the html table of contents. There are TWO sets of styles, those begining cont… (used for tables of contents with NO numbers, and those beginning toc… (used for tables of contents WITH numbers). I can’t be completely general, and it IS possible that YOUR table of contents might have chapters WITHOUT numbers and sub chapters WITH numbers, or vice-versa.

In these cases, and in any other situtaions I have not thought about, note that tocNumber, tocEntry, tocSubEntryNumber and tocSubEntry are each indented successively by a further 2em from the left. The styles ending …Space have an extra 1em margin-bottom. Consider how you want YOUR table of contents indenting and rename my styles to suit your design.

Next Steps: Now the html and ncx tables of contents have been generated you can create the front (and back) covers. Then only the metadata remains to be done and the epub will nearly be finished.

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
How to test your e-pub using epubcheck
How to convert an e-pub to Kindle using kindlegen

tinyURL for this post: http://tinyurl.com/mcm5bs6

No comments:

Post a Comment

 
Twitter Bird Gadget