A certain well-known self-published author had recently requested me to present a brief tutorial on how I format my e-books.

This tutorial assumes a minimal knowledge of html, but I will try to go through the use of CSS without going in depth into what it is and what it can do. Now, I’m not the best of teachers and I don’t plan to go through everything you can do with ebooks; there’s just too many options. The below is simply a step-by-step description of what I do with my novels. Use it as basis for your own explorations, or take it straight.

1. HTML File

Save your manuscript in as simple html as possible. In MS Word, that means Save As Web Page, Filtered. While this still doesn’t strip all unnecessary formatting, it will make your job much easier. Other editors will have other options, and from what I’ve heard, Scrivener magically transforms your writing into a beautiful butterfly, but I’ve been only using Word so that’s what I’m sticking to.

2. Text Editor

Open the resulting html in a programming text editor. There’s a number of freeware options, I’m using JEdit. It doesn’t matter what software you’re using as long as it has html syntax highlight and saves as unformatted text. Sometimes I even do some minor tweaks in plain old Notepad.

3. CSS Code

Replace EVERYTHING above the <body> tag with the following code:

<?xml version=”1.0″ encoding=”utf-8″?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<style type=”text/css”>

p { text-indent: 1em; margin-top: 0em; margin-bottom: 0em;}

p.spaced { text-indent: 0em; margin-top: 1.2em; }

p.title { font-weight:bold; font-size: 2em; text-indent: 0em; text-align: center; margin-top:2em; }

p.chapter { font-style: italic; font-weight:bold; font-size: 1.5em; text-indent: 0em; text-align: center; margin-bottom: 1.5em; }

p.vignette { page-break-before:always; text-indent: 0em; text-align: center; margin-top: 3em; }

p.pagebreak { page-break-before:always; }

p.lowpage { margin-top: 3em; }

p.right { text-align: right; }

p.centered { text-indent: 0em; text-align: center; }

p.hidden { visibility: hidden; display: none; }

p.poem { margin-top: 1.5em; margin-bottom:1.5em; padding-left: 2em; padding-right: 2em; font-style: italic; text-indent: 0em; }

p.first { text-indent: 0em; margin-top: 2em; }

span.centered { text-indent: 0em; text-align: center; }

</style>

</head>

Aside: put simply, the CSS, or Cascading Style Sheets, are a way of uniformly formatting the paragraphs (or anything, really) in your html file, instead of applying the same strings of format tags every single time. Think Styles in Word, except here they’re called Classes. The way you do it is by putting the class name after the “p” in <p> tag, like so:

<p class=”first”> First line of paragraph </p>

Everything in the above code that’s after “p.” is the name of the class, everything in {brackets} is the definition of the class. You can play with the above definitions if you don’t like them. These ones are taken straight from one of my own books, and are slight modifications of the ones Guido Henkel uses in his formatting guide. You probably won’t need all of them, anyway – you can scrap the “poem” style if your book doesn’t have any poems, for example.

Three of those styles will be covered separately later: vignette, hidden and pagebreak.

4. Find & replace

This is the most menial part of the job. Run through your manuscript, replacing all the paragraph tags your word processor has created with new, proper ones. Don’t worry if (in case you’ve used MS Word) the old tags look like a mangled heap of random letters. All you need to do is copy the entire tag (e.g. <p class=MsoNormal align=right style=’text-align:right’>) paste it into “Find” box, and in “Replace” box copy one of the following:

<p class=”first”> – for first paragraph line

<p> – for regular paragraph text (its class is defined as the very first in the style sheet)

<p class=”chapter”> – for chapter titles

And use whatever other styles you need throughout. Remember to close tags (</p>) although the end tags should already be there if you did everything right. For the simple formatting, like italic or bold, I prefer to use just <i> and <b> tags instead of classes. It may be bad form for websites, but is sufficient for e-books.

Aside: “centered” text. I got this tip from Guido Henkel and been using it since, although I’m not 100% sure it’s necessary. For centered text you need to use <span> tag as well as <p>, like so:

<p class=”centered”><span class=”centered”> centre text </span></p>

5. Scour the text for punctuation and special characters.

To ensure all punctuation and special characters are properly rendered after converting to epub or mobi, you must replace them with html codes. The following codes are the most used in books:

Character HTML Code ” (left double quote mark) “ ” (right double quote mark) ” ‘ (left single quote mark) ‘ ‘ (right single quote mark, or apostrophe) ’ & (ampersand) & – (emdash) — … (ellipse) …

Aside: for diacritics and other special characters (I used a lot of long vowels in my book) you need to find out other, numeric codes. Usually just googling “(character) html code” is enough. Here’s a table of some popular ones.

In part two I’ll go through converting the html into epubs and mobis using Calibre, creating Table of Contents and putting in illustrations and chapter vignettes.

Still confused? Not enough time to do it yourself? I’m now offering book formatting services – see here for prices.