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, 5 June 2014

How to style Small Caps in an e-book

I have found that Small Capitals are poorly implemented in e-book readers. In principle, a CSS font-variant property with a value of small-caps could be used to implement small caps, but I have found this not to work very well. Because the rationale for including small caps and the way they have to be done is quite involved, I’m devoting this entire post to it.

In a book, you would expect the first paragraph of a chapter to be unindented. The following paragraphs of the main text are usually indented. But when there is a ‘scene break’, i.e. a change of place, or any other change of perspective, such as point of view, narration or time, the paragraph after the change is usually not indended and set off from the preceeding text by a space.

In a print book, this presents a possible problem if the scene break falls at the foot of a page. The space representing the scene break is subsumed in the page break, and the absence of a visible gap might lead to the reader being confused by a change of scene which hadn’t sufficiently clearly been flagged up. A strategy I have seen used to correct this is to print a short series of stars (centred on the line) in the scene break if it falls at the foot of a page. Actually, it’s a bugger to typeset, but it does deal with the problem. The Chicago Manual of Style referes to this as an ‘ornamental break’. However I tend not to like doing this, as I find myself asking why a particular scene break is apparently being given more prominence than another. Should a reader ask the same question, it will take their attention away from the story, which is always to be avoided. The typesetting and styling should keep the reader immersed in the story at all times. And this is as true of e-books as it is of print books.

But, whilst this strategy works in a print book, notwithstanding my own reservations, it doesn’t work in a e-book, because there are no page boundaries as such: the pages are created by the e-book reader to accommodate however much of the text will fit on the screen.

A strategy I have seen employed in printed hardback thrillers is to set the first three or so words of the paragraph after a scene break in Small Capitals. This is a perfect solution for e-books, as the scene break is flagged very clearly to the reader wherever it occurs on the screen. And, in my humble opinion, looks rather classy. However it is just a bit complicated to do.

Before launching into the details of how to achieve this using html and CSS, I should add a few remarks concerning the publishing industry conventions you should be observing:


Firstly, decide how many words you want to put in Small Capitals at the start of the paragraph. My recommendation would be just three words. Particularly because you don’t want them to extend onto a second line. Then, if one of the three words is a single letter, such as ‘a’, or ‘I’, add an extra word in Small Capitals. Also, if the last word in Small Capitals is part of a proper name, continue the Small Capitals to the end of the proper name. Check out the free sample of my own e-book in the right-hand sidebar to see an example of how this works out in practice.

Now, as I’ve said, the CSS font-variant property with a value of small-caps could be used, but I have found that this leads to unreliable results. Instead, I would recommend the following approach:

At the markup stage, enclose the lowercase Small Capitals with something like /sc/ and /scc/ (see my post on marking up your MS Word file). The marked-up MS Word file will then look like this:

S/sc/mall/scc/ C/sc/apitals/scc/

Then retype the lower case Small Capitals using normal CAPITALS:

S/sc/MALL/scc/ C/sc/APITALS/scc/

(You could use Find and Replace in MS Word to speed this up, but it involves a fair degree of familiarity with Word, and isn’t for the fainthearted! If in doubt, do it manually!)

In the CSS stylesheet, define a style like this:

.smallCaps {font-size: 0.8em;}

Then, once you have imported the marked-up MS Word file into your epub as unformatted text, replace all instances of /scc/ with </span>:

S/sc/MALL</span> C/sc/APITALS</span>

And then replace all instances of /sc/ with <span class="smallCaps">:

S<span class="smallCaps">MALL</span> C<span class="smallCaps">APITALS</span>

This will then display the characters enclosed by the <span> tags at 80% of the size of the normal characters.

I have found this to be the best % to reduce the text by to simulate small caps. Obviously, you could experiment with a different %. But bear in mind that I am pretty sure the Kindle software rounds off the text dimensions to the nearest 0.1em. I think 70% is too small and 90% is too big, so, on the Goldilocks theory, 80%, or rather 0.8em, is just about right!

It is, however, VERY IMPORTANT to note that you should take care that punctuation, including interword spaces, falls OUTSIDE the <span> tags, otherwise the punctuation will get shrunk too and will look daft. ONLY enclose the lowercase Small Capitals with the span tags.

This way of doing Small Capitals is very labour-intensive, HOWEVER I DO recommend it. What you lose in time you gain in the certainty that the ebook will format properly on a wide range of e-readers. Use as limited a range of styling using CSS as you can and you can be sure you will get it right.

There is a further post on CSS to follow, relating to the styling of the html table of contents, but it belongs after the post on how to generate it, and will be published in sequence.

Next Steps: Now you have your e-book properly styled, you are ready to begin splitting up the single chapter into the individual chapters using Sigil, and creating the preliminary matter and end matter, covers, tables of contents (both of them) etc. etc.

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

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

1 comment:

  1. I like! Very thorough explanation and effective solution. Thank you.

    ReplyDelete

 
Twitter Bird Gadget