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, 21 May 2014

How to style an ebook so it works with the limited CSS styling available to Kindle e-readers.

The kindle e-reader only allows a subset of html tags and has limited CSS styling available. Whilst the Amazon Kindle Publishing Guidelines looks like a comprehensive reference, it contains a number of untruths and can be confusing at best and misleading at worst. Experience has taught me that:

  • Kindle ignores the margin-top property, even though the Amazon Kindle Publishing Guidelines state the exact opposite.
  • Kindle also ignores the margin-right property.
  • Kindle cannot accept a display property with a value of ‘none’.
  • Kindle ignores any @font rule, and so trying to embed fonts is futile.
  • Kindle will not display .png images properly, use .jpg instead.
  • In common with nearly all e-readers, the Kindle won’t do small caps accurately.
As a consequence I have developed the following work-arounds:

IMPORTANT: everything below is CaSe seNSiTiVe and also the spaces, semicolons, quote marks etc. must be entered exactly as shown. Obviously the style names, whilst they are also CaSe seNSiTiVe, can be whatever you want, provided they match in the stylesheet and in the chapters. The actual styling chosen can also be customised to your own taste. You might want a bigger chapter heading or you might not want it in italic, for example. Just customise the code examples below.

TO MAKE YOUR LIFE EASIER: use the styles which will work in the Kindle in your e-pub as well. Then when you convert the epub to Kindle you will have very little extra work to do.

I am being a bit vague about the terms ‘style’ and ‘class’ in what follows. In essence, EITHER define the CSS as a CLASS in the stylesheet like this: .className {style definition} [beginning with a full-point, period or full-stop] And then apply this to the html tags in the chapter like this: <class="className">. OR an alternative method (not recommended) is to use an ‘inline’ STYLE in the html tag in the chapter like this: <style="style definition"> . In this case the style definition is included in the tag directly rather than in the stylesheet. As the style definition part will be the same in both cases the distinction between ‘class’ and ‘style’ is not helpful, it just reflects which of these two methods has been used to apply it. It is called a ‘class’ if the style is defined in the stylesheet and a ‘style’ if it is included in the html tag. The examples below show how to apply CSS styling using the classes method and I hope are self-explanatory. There is a further note at the bottom of this post about inline styles.

In all that follows (see below), the default paragraph style is set using this definition in the CSS Stylesheet:

p {text-align: justify; text-indent: 1em; margin: 0;}

Leading Space before a heading:

If you want a space before the heading at the start of a chapter, apply CSS styling to a blank paragraph:

In the chapter:

<p class="chapterOpeningSpace">&nbsp;</p>

In the CSS stylesheet:

.chapterOpeningSpace {margin-bottom: 4em;}

This method is necessary because Kindles will ignore the margin-top property. In essence, apply all spacing to the BOTTOM of paragraphs.

Notice that I am specifying sizes using em’s. One em is the width of the character ‘m’ in the font used. Specifying sizes in this way ensures that when the user changes the font size on the Kindle reader the space changes to a size in proportion with the rest of the text on the page. Specifying your sizes using em’s will ensure your design retains its proportions when the font size is changed. Note also that ‘&nbsp;’ is the special html way of specifying a non-breaking space.

Displayed Quotations:

Because you cannot set the margin-right property, the best you can do in a Kindle to implement a displayed quotation (sometimes called a block quote) is to reduce the type size and put a space above and below the quotation. You cannot indent both left and right, and indenting only on the left doesn’t look right to me. You could decide to set the quotation in italics instead of – or as well as – reducing the point size, but that is a design choice (and one which is frowned upon by Oxford style). Personally I have found it just too complicated to accommodate italic in displayed quotations, particularly so when you consider that the italic will be combined with other styling conventions for foreign words, book titles, proper names, etc. etc. NB following Oxford style, displayed quotations should NOT be enclosed by quotes NOR should they begin or end with an ellipsis. The different type treatment is considered sufficient explanation to the reader. A displayed quotation would normally begin with an unindented paragraph. Here, assuming the paragraph above the quotation is indented, the code would look like this:

In the chapter:

<p class="space">The final, indented, paragraph introducing the displayed quotation:</p>
<p class="blockQuoteUnindentSpace">The text of the displayed quotation. In this example the quotation is just one paragraph long.</p>
<p class="noindent">The text of the next paragraph of the main text, which would normally be unindented, following the displayed quotation.</p>

In the CSS stylesheet:

.blockQuoteUnindentSpace {margin-bottom: 1em; font-size: 0.9em;}
.space {margin-bottom: 1em;}
.noindent {text-indent: 0em;}

I have found that 0.9em is about the largest size which displays noticeably smaller than the running text. I think anything smaller than 0.9em makes the quotation difficult to read. Specifying 0.9em for the font-size makes the displayed quotation 90% of the size of the main text. If the main text is resized by the user, the displayed quotation text changes in proportion. You will obviously need similar styles for: blockQuoteUnindent, blockQuote and blockQuoteSpace. These last two would be indented paragraphs.

Indented and Unindented Paragraphs:

To make your life easier, make the default paragraph style indented:

In the CSS stylesheet:

p {text-align: justify; text-indent: 1em; margin: 0;}

Then use a style for the unindented paragraphs such as:

In the chapter:

<p class="noindent">Text of an unindented paragraph.</p>

In the CSS stylesheet:

.noindent {text-indent: 0;}

Here the style nearest to the paragraph i.e. noindent overrides the default paragraph style in the stylesheet. This is the meaning of ‘Cascading’ in the name ‘Cascading Style Sheet’.

Space before a paragraph:

When you have an unindented paragraph it would normally be preceeded by a space. But, because the margin-top property cannot be used, you will need to apply a style to the paragraph BEFORE the unindented one which places the space BELOW the paragraph:

In the chapter:

<p class="space">previous paragraph</p>
<p class="noindent">unindented paragraph</p>

In the CSS stylesheet:

.space {margin-bottom: 1em;}
.noindent {text-indent: 0;}

Obviously, if the paragraph above the unindented paragraph is itself unindented then it will need a different style:

In the chapter:

<p class="noindentSpace">unindented paragraph with a space below it</p>
<p class="noindent">Following unindented paragraph</p>

In the CSS stylesheet:

.noindentSpace {text-indent: 0; margin-bottom: 1em;}
.noindent {text-indent: 0;}

Centred Text:

I prefer to style the preliminary matter in the ebook with the text centred on the page. In a printed book I would carefully arrange the line lengths to create a pleasing appearance on the page. However this won’t work in an e-book, because the text size can be changed, which affects the line lengths. So I use a style like this, applied to each block of centred text:

In the chapter:

<p class="prelims">Text in the preliminary matter, such as the ISBN of the ebook or the copyright statement</p>

In the CSS stylesheet:

.prelims {text-indent: 0; text-align: center;}

Note that the text-indent property has been set to zero so that the centreing is applied to the whole width of the screen. Also note the American spelling of ‘center’.

For an entry in the prelims with space after it another style is needed:

In the chapter:

<p class="prelimsSpace">Text in the prelims with a space after it</p>

In the CSS stylesheet:

.prelimsSpace {text-indent: 0; text-align: center; margin-bottom: 1em;}

Use a similar style for chapter headings:

In the chapter:

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

In the CSS stylesheet:

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

Headings (and building the table of contents):

Some e-readers seem to have built-in styling which they apply by default to <h1> tags. Sigil uses <h1>, <h2> etc. tags to build the table of contents. (See a separate post which I will link here.) So <h1> tags will need to be in your epub ebook. BUT to ensure the formatting of your chapter heading is not changed by the e-reader, I recommend the following strategy:

In the Chapter:

<h1>Chapter Heading</h1>
<p class="chapterHeading">Chapter Heading</p>

In the CSS stylesheet:

h1 {display: none; font-size: 1pt;}
.chapterHeading {text-indent: 0; font-size: 2.5em; font-style: italic; margin-bottom: 1em;}

What this achieves is to make the entire <h1> tag invisible in an epub. The second <p> tag repeats the chapter heading which gets displayed using the styling in the CSS stylesheet. For a Kindle, because it won’t let you specify a display property of none, you will need to edit out all the <h1> tags once the logical table of contents (toc.ncx) has been built by Sigil. I actually edit out the <h1> tags using an html editor such as Komodo Edit, rather than Sigil.

Italic Text:

I have found that Sigil sometimes picks up <i> tags in the chapters and creates a custom style in the header of the chapter to do the italic styling for you. You might just live with this, but I prefer to rely on my own coding. So I tend to use a <span> tag and use CSS to do the italics:

In the chapter:

<p>This sentence has a word in <span class="italicText">italics</span> in it .</p>

In the CSS stylesheet:

.italicText {font-style: italic;}

It is advisable to use find and replace to put in the <span> tags. Use markup in the original MS Word file to identify all italic text by enclosing it with ‘/i/’ and ‘/ii/’. (See my earlier post on replacing markup with CSS styling for more information.) However it is also a good idea to FIRST do the closing </span> tags and THEN the opening <span> tags.

I have not noticed Sigil doing the equivalent with bold tags: <b></b>. However in an analogous way you could use the following method to style bold text using CSS:

In the Chapter:

<p>This sentence has a word in <span class="boldText">bold face</span> in it.</p>

In the CSS stylesheet:

.boldText {font-weight: bold;}

Small Caps:

Because of the possibility of an unindented paragraph falling at the top of a page, I like to draw attention to it by setting the first three words in Small Caps. Small Caps doesn’t work properly on almost all e-readers and so I use a <span> tag to do this.

In the chapter:

<p class="noindent">T<span class="smallCaps">HE</span> F<span class="smallCaps">IRST</span> T<span class="smallCaps">HREE</span> words of this paragraphs are in small capitals.</p>

In the CSS stylesheet:

.smallCaps {font-size: 0.8em;}
.noindent {text-indent: 0;}

Here, rather than using the SMALL CAPS font-variant, I have defined a CSS style which makes the text 80% of its normal size and I have applied that to a span tag enclosing the lower case small caps, which I have retyped as normal capitals. It is a nuisance to do, although the process can largely be automated using find and replace if you mark up your MS Word file suitably beforehand. A small but important point to take account of is that the punctuation needs NOT to be in small caps. The same goes for the interword spaces. IF punctuation is enclosed inside the <span> tags it will display smaller and look decidedly odd. A further thing to take into account if you are using small caps for the first few words in an unindented paragraph is that, following Oxford Style, IF one of the words consists of just one letter, such as ‘a’ or ‘I’  then ANOTHER word has to be in small caps as well. AND the small caps must continue to the end of a proper name if there is one. (I have devoted an entire post to doing small-caps using CSS.)

Please note that in line with all other naming conventions within an ebook, make sure your CSS style/class names are all single text strings WITH NO SPACES.

The style examples above are all created by using a combination of the following CSS properties:
text-indent, text-align, font-size, font-style, font-weight and margin-bottom. All of these will work in an epub AND in a Kindle. margin-left also works and can be useful in creating indexes (see a separate post) but, because margin-right will be ignored by Kindle, margin-left is otherwise of limited use. Create your styles using this subset of CSS and your epub and Kindle will both work and look the same.

For reference, text-align can have values of center, right, left or justify. (Note the US spelling of center.) And font-style can have values of normal, italic or oblique. (I haven’t tried oblique with a Kindle, and as it’s similar to italic I can’t see what that would achieve.) font-weight can have a number of different values, but bold is the only one I can see as being of interest, and is certainly the only value I have tried out on a Kindle. The other properties covered here all take a numerical value. Again, specify the value in ems to get a pleasing result when the text is resized by the user. If the value is zero, then don’t bother specifying a unit. And remember to separate the colon in the style definition from the value with a space and to close up a numerical value and the unit. (see my next post on the syntax of CSS for more information.)

In the Amazon Kindle Publishing Guidelines, they advise that IF styling specified in the CSS stylesheet is not getting properly applied THEN you should try using an ‘inline’ CSS style instead. The style examples above all work properly when applied via a stylesheet. The advantages of this is that editing the stylesheet changes the styling throughout the e-book to match. If you have applied the styling using inline styles then EACH tag containing the style will have to be changed one-by-one. I’m including inline styles in this post purely for reference.

Next Steps: When you have applied the styling to your e-book, you can edit the stylesheet to tweek your design for a pleasing result. When you are satisfied, you can then split the book up into chapters and get on with creating the preliminary matter, and creating the html and logical tables of contents, editing the metadata, creating the html cover, linking the cover image and the html table of contents and then converting the e-book from epub to kindle format. My next post will be a reference guide to the syntax of CSS.

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

TinyURL for this post:

No comments:

Post a Comment

Twitter Bird Gadget