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.

notepad

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:

format201

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.

format202

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:

format203

This means that I needed two different styles, so I created p.chapter for the chapter number and p.name 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;}

p.name{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.

Advertisements

About chelecooke

Self-Published author of the Out of Orbit series and the Teeth series. UCL Residence Assistant, obsessive cross stitcher, avid reader and TV show watcher.
This entry was posted in Self-Publishing Journey and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s