Chele Cooke

Tag Archives: Html

eBook Formatting, Part 2 – Building it Up Again

Following the first section of eBook formatting in a HTML method, in which we used Microsoft Word to strip out a lot of our odd symbols, and to find the italics in our book, it is at this point that we move into Notepad++.

(As mentioned in the previous segment, Notepad++ is a free program. If you have another HTML creation program, this will work just as well.) I also used Guido Henkel’s Formatting guide, which is where much of this comes from and I highly recommend checking out. However, I have added a few details of my own.


If you’ve ever used HTML before, you’ll know that horrific moment when 60% of your punctuation has turned to a list of symbols. It’s frustrating, especially when you have to go back and change it all. As pointed out in the previous section, each symbol has it’s own HTML code. Having been through your manuscript in Word and made sure all the symbols are consistent throughout, we can now replace them with the HTML code.

Yes… your manuscript will look like a giant mess once all this is done.

So, what I did, following Henkel’s guide, is to copy my entire manuscript into Notepad on a fresh project. I put a few lines space at the top (we’ll get to that) and then I set about replacing all the symbols with their code counterparts. Like the normal notepad, you will notice that writing does not conform to the page. Each paragraph is contained on a single line. Keep it that way, it will make it so much easier in a minute.

Replacing the symbols is done in the exact same way as we did in Word. Highlight the symbol you want to change, click on Search and then Replace. The symbol you’ve highlighted should already be in the ‘find what’ box, but if not, post it in. In the ‘replace with’ box, put the code of the symbol you are replacing.

There are a number of extensive lists online for all the symbols and their HTML code. Simply google ‘HTML Symbol codes’ and you’ll get a dozen lists.

Hit replace all. You will notice that all your “ are replaced with “ , for example. This is good! We no longer want the actual symbols, just their codes. Keep doing this with all the symbols we spoke about in the last segment (and any specials you have in your manuscript.)

By now, your manuscript will look a bit of a mess, sections of code in the middle of words where there had been an apostrophe, etc.

HTML will not automatically make paragraphs, so we have to put that in. This can be done all at once, once again using the Replace function.

In the ‘find what’ box, put the following code: ^(.+)$

In the ‘replace with’ box, put: < p >$1< /p > (without the spaces in the < p> and < /p >)

Hit replace all and each line of your manuscript will now have < p > at the beginning and < /p > at the end.

At this point, I saved my work as a .html file and opened it up in my internet browser. This allowed me to preview my progress each time I hit save. Just refresh the browser page, and you’ll see each change you’ve made since your last save.

Playing with the width of the browser, the paragraphs will shift to the size of the screen, so I could actually view my work is if it were on an eBook… only, with scrolling down instead of pressing ‘next page’.

So now that I had a rough outline, I could actually start making it look pretty.

There are two methods of using HTML. One is to use <p style=”etc etc etc”> at the beginning of each line… boring and annoying in my opinion, and the other is to use a style segment, where all of the style elements are listed at the top of the document, a source section, and then we call on that source throughout the rest of the work. This method minimises the amount of code throughout the manuscript.


By the time I took this screenshot, I’d already added my copyright and dedication pages, so the actual manuscript begins below that, but the point is the style section at the top. You’ll notice that I have a lot of different segments. This is so that I can style every section exactly the way I want it.

The first one I looked at was the general paragraph tag, P.

Because I want my eBook to look as much like a regular book as possible, I need to design it. Reading the style section, you’ll notice that nowhere have I put a font name. This is because many people have their own preferences when it comes to font. Some like serif, others sans serif. They will have these choices inputted into their eReader, and if that’s what they are most comfortable reading, why change it?

You will also notice that the font size is not done in 12 point, or 10 point, etc. People change the size of the text on their screen, so instead, we’re going to use ’em’ and work from that.

My layout for a general paragraph is as such:

p {text-indent: 1.5em; margin-bottom: 0.2em; text-align:justify;}

This gives me:


That’s great. It’s justified, it has a nice indent for the beginning of the line, and it gives a gap between paragraphs that isn’t obvious, but just makes it a little easier to read. (I’ve scaled this down from the original a bit.)

However, I’m a stickler for proper layout, and I want my first line to not have an indent (as you’d have in print books.)

I created a new paragraph segment, p.first – This is to be coded in for each time it is the first paragraph in the chapter, or after a scene break.

p.first {text-indent:0em, margin-bottom: 0.2em; text-align:justify;}

Everything is exactly the same as our general paragraph style, except for the indent, which is now zero. A zero indent is also very important for when you want to centre items, like your chapter titles, for example.

Because I need to link this paragraph to the source style, I need to note it. So, I go to the first paragraph and where I’ve currently got < p >, I change it for <p class=”first”> – The < /p > at the end doesn’t need changing. I went through the entire manuscript and inputted this code for each ‘first’ paragraph.


Now, my first paragraph doesn’t have an indent, but the rest still do.

When moving on to chapter titles, I needed to deviate a little from Henkel’s guide. I’m one of those people who like the chapter number to be in a different style from the title. Here is an example of mine currently:


This means that I needed two different styles, so I created p.chapter for the chapter number and for the title.

p.chapter {text-indent:0em; text-align: center; page-break-before: always; font-size:2.5em; font-weight:bold; margin-top: 5em;}{text-indent:0em; text-align: center;  font-size:1.5em; margin-top: 1.5em; margin-bottom: 2em;}

This is the great thing about using em for your font size. It means that you can make text larger without specifying a specific size, only specifying it’s relationship to the general paragraph. In the chapter number’s case 2.5 times the size of the text. In the title, 1.5 times the size. I also added < em > and </em> around the chapter title.

Also, check out the margins for top and bottom. These give the spaces above and below your title. By putting 5em in a top margin for the chapter, it means it will start further down the page… like a real book. Also, ensure that every chapter beginning has ‘page-break-before:always;’ – This means that the chapter will start on a new page, no matter what.

When centering text, some eReaders prefer a span class. So, as well as putting the text-align:center; in the paragraph class, I also created a span class (as seen in the original image…)

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

Whenever I wanted to centre text, I had to make sure that I had the P class and the Span class both in there. In this case…

<span class=”centered”><p class=”chapter”>1</p>

<p class=”name”><em>Buryd in the East</em></p></span>

I didn’t close the span until after the name. You can do it on every line, but it’s actually not needed until the end of the entire segment you need to center.

Inputting all of this into the manuscript takes time, and each time you think you’ve created every style class you’ll need, you’ll find something else you want to look different… like your dedication, or your copyright. It is just a case of playing with it until you are happy. Keep saving, keep refreshing on your browser, and like me, you’ll see your manuscript really take form.

eBook Formatting, Part 1 – Stripping it Down

As Dead and Buryd is my first novel, and the transformation from scribbles to published book is coming entirely from my own pocket, I decided that while I would need professional assistance for things like editing and cover design, there were some elements that I could complete myself for little cost. One of the biggest elements of this is formatting.

There are people (admittedly my editor included) who suggest that formatting should be shipped out to a company. I have been told that you can always spot a self-published book, not by the writing, but by the formatting.

Of course, there are elements that will immediately give away my book as a self-published novel. The fact that I don’t have that little recognisable Publisher’s logo on my Copyright page, for example. However, the formatting of the text does not need to be one of those elements.

So, I decided to format my book myself. I’ve spent over a decade taking part in online writing and the creation of forums for Play-by-Post RPGs, I’ve got a decent enough handle on HTML (one of the methods of formatting a manuscript for eBook publication,) and I figured ‘why not?’ If I crash and burn spectacularly, I can always ship it out to a company later.

Some people will suggest Scrivener for formatting, and if someone has a good enough grasp of Scrivener, there is absolutely no reason why it can’t create a fantastic looking eBook. I, however, do not have a good enough grasp of Scrivener, so I decided on the HTML route.

Through David Gaughran’s Let’s Get Digital, I found an absolutely wonderful tutorial on HTML formatting of an eBook. Guido Henkel’s Take Pride in Your eBook Formatting is informative and detailed. However, there are a few elements that I feel were missed. One of which, as I will go into detail of in the next part, I feel is very important. However, I would recommend that anyone considering doing their own formatting take the time to read this 10 section guide.


As you can see from the image on the right, I’ve already done quite a bit of my formatting. This is from one evening’s work. A few weeks ago, I spent an evening doing a test run, which drastically sped up the process when I went about it the second time around. Don’t be fooled, even if it’s difficult the first time, it will get much easier once you are confident in what you’re doing.

For my formatting, I am using Microsoft Word, Notepad++ and Calibre, the second two of which are free programs available to download. There are better programs that you can pay for, but actually, I think both of these do the job fantastically.

This section (first of 3) will be looking exclusively at Microsoft Word.

If you’ve been writing in Word, you may realise (or may not, depending on your knowledge of Word) that Word formats your work. Even when you haven’t inserted anything, it’s all formatted. What we need to do is strip that down so that it’s nothing. No formatting, nothing but your text.

As Guido Henkel points out in his guide, you first need to ensure that all of your symbols are the same as well. ” for example, is different to “. … is different to … . If you just have …, where you have typed a full stop/period three times, there is a chance that this will spread over two lines. We don’t want that. We want it all in one place. You wouldn’t expect a comma to be on the next line from the word it comes after, for example.

Stripping away these discrepancies now will make life much easier further down the road.

The first thing to do is to determine which symbols we are looking at. This, admittedly, will require looking through your text. There is no magical way to find out which symbols you are going to be playing with. If your book is set in present day England, you might use the £ sign. You may use the & sign at some point. These are all individual to the book, but must be consistent throughout.

From searching through my text, I found that I would require the following symbols.

“ ” … — ’ ‘

Looks rather ridiculous, doesn’t it, having to search through a manuscript for these symbols we use so often, but type them out on a computer screen.

” ” … – ‘ ‘

Vastly different, and not nearly as attractive in a book.

in HTML, these symbols (the first set) all have names.

“ =  &ldquo;
” = &rdquo;
… = &hellip;
— – &mdash;
’ – &rsquo;
‘ – &lsquo;

So, to clean up the text, we must make sure that every symbol is the same. Easiest way to do it… Highlight and then replace.

Highlight an instance of the symbol you want. Let’s go with the Ellipses, and use the replace tab to replace all with the actual ellipsis sign.


Going through is actually rather simple at this point. By clicking Replace All, you don’t even need to search through the document one at a time. Unless you were planning on having an ellipsis, you won’t have … anywhere. The same will be true of the other symbols.

The only one to be especially careful of is the dash. There are different lengths of dash. You have — emdash, ‒ figure dash, – endash, and ― horizontal bar. Each of these has it’s own symbol, and is not simply a hyphen. Make sure that all of your ‘longer’ dashes are the same. Select one and make sure it is the same all the way through. You may need to search manually for this one, I know I did.


The last thing to do before moving over to Notepad++ is  to highlight all of the italics and wrap them in tags. This, unfortunately, will not word for bold font. That is something that must be done through a style element, which I will point out when we’re looking at the pure HTML.

To wrap your italics for HTML, we will be using < em > and < /em > (I’ve placed spaces in there so that it won’t turn the and into an italic)

Finding italic in Word is actually simple and can be done using the find function.


 Go into the find function and click the More >> button on the bottom left. This will extend the box down, and you will see a Format Button (circled in red on the image.) Click that and select ‘Font’. This will bring up the new box, in which you can select Italic, and click OK.

Now, underneath the search box, you’ll see ‘Font: Italic’. Delete everything from the search box where you usually type a word to find, and click ‘Find Next’. This will take you to your first instance of italicised text. Wherever you find italicised text, put < em> at the beginning and < / em> at the end.

Save a copy (I called mine Dead and Buryd Formatting) and we’re ready to move on to Notepad++.


The next installment of this will be up very shortly, along with a post looking at examples of self-published and traditionally published formatting.