A guide to ebook baking!

ebookbaking

In my last post I hinted that I may whip up a guide to creating a jolly good ebook based on what I’ve learned from working on my own book, The Range. There’s no real mystery to it as ebooks are simply html files that use the same code that sits behind web pages.

I wouldn’t call this a definitive guide that covers every aspect of putting together an ebook, however, after after reading similar guides I’m confident I know how to bring all the ingredients together and create a well presented ebook. Indeed, my own ebook (still waiting for a cover) looks pretty damn good on my kindle.

This is a rather long guide so get a nice beverage or slice of choccy cake and settle back.

When looking for guides on stuff like this I like big clear pictures as well as text instructions. I often find it infuriating when someone writing a guide says ‘…do this and this and this, then this…aaaand moving on…’ and I’m like WTF just happened? Did this person just miss out a load of important instructions with the assumption I know what XYZ actually means?

So, there are lots of big pictures here for you!

Let’s get started shall we, dear blog reader?

A few of the images in the guide might require a click to view them in the original size as my WordPress layout squishes them down to fit the theme layout.

Guide aims

The result of the guide will produce 2 things – a clean html file that you can build on and ultimately upload to Amazon Kindle, and a .mobi file you can test on an e-reader like Amazon kindle.

It’s my hope that once you’ve completed this you’ll have a much clearer understanding of the reasons why it’s best to do this yourself, rather than rely on the Kindle engine word grinder thingy to translate your Word doc for you, and how to work through this process in the future.

I’ve read lots of ebooks from new authors (and established authors too, who should know better, or their publisher should) who self edit and self publish where the layout just plain sucks.

As a reader I’m looking for 3 things when I buy or ‘Look inside’ an ebook:

Cover – Every book is judged on a cover just as every human judges almost everything around them on sight first and foremost. We see, we like, we want.

Feel – Are there huge gaps between the lines and even bigger ones between paragraphs? Is the formatting all over the place with random indents or indents where there shouldn’t be any? I’m looking for consistency, the ebook I’m looking at should resemble the same layout as a physical book.

Good story – Naturally this is important but without the first 2 in ship-shape it might not matter.

The cover and feel are the same as when you buy a new coat, for example.

At first it catches your eye, the design is nice, it fits your taste and appears to suit your needs.

So you try it on.

The mental model you have in your head from past experience tells you you should find a zipper in the right place, or buttons, or a hood that fits your head. The sleeves should be where you expect them to be and not sticking out the back in weird places. You might expect pockets that you can stick your hands in, but not in the wrong place like up near the collar.

You get the idea?

If the coat looks good but sucks when you try it on then the Good story bit – wearing it, enjoying it, taking it with you on your journey to the sea side/town/shopping/wedding etc, isn’t worth thinking about.

Back on the rack it goes.

Stupid clothes designer can’t even get the basics right!

You could try and persevere with it because you’re desperate to love it, but in the end your experience of the Good story will be tainted.

That’s why it’s important to make sure your book is in the best shape possible to reassure the reader that this author knows what they’re doing. After all you may have spent a very long time perfecting your book so why rush things at the last few stages and risk losing out on potential dedicated fans of your future works?

Request: If you know a good tip or something that can help make this guide better, please let me know in the comments and I’ll edit this to include your advice.

Ingredients

I’ll make a few of assumptions here – Instructions are based on using MS Word, Kindle Previewer and a Kindle e-reader for pc. You can use Open Office, Google Docs etc, as the results won’t vary too much when we get to the baking stage. There are tons of places to show off your ebook, and they have various rules for submitting your document, but for the purpose of this guide I’m using Amazon software as a proof checking tool.

You will need:

I suggest getting these things installed before you start baking. It shouldn’t take you more than 30 minutes or so and is pain free providing you follow the instructions. You’ve installed programs before, you know how it works.

Step 1 – Preparation.

Before we get going make sure you do a ‘Save As’ and call your book something else. With The Range I saved my Word doc file as ‘The Range ebook test1.doc’ and went from there with each change.

Always keep your original safe!

Some guides will tell you to save your Word doc (if using Word) as a .doc file and not .docx. The reason why is because .doc files translate better/easier to html than .docx files do. I reckon this is because .docx is a newer format and can stuff your ebook full of code you don’t need. See image below.

ebookcook1

Choose your source, it’s up to you. We’ll clear out all the garbage code later on anyway.

The purpose of this guide is to more or less strip away all the junk Word uses behind the scenes so you’re left with good quality clean code that is easy for an e-reader to understand. When writing a masterpiece it’s understandable that you’ll want to use formatting for chapter headings, sub headings and so on. And that’s okay for making you feel good about your writing experience, and it works nicely when you hit print.

However, when it comes to putting an ebook together most of that is irrelevant, as we’ll find out later.

A word about special characters.

Whilst Word does indeed love to cram the gaps with pointless code, some guides will instruct you to make special characters obvious in Word before you start formatting. This means making words in italics, bold or underlines easy to identify later on. For example a word in italics would look like this in html:

<i>These words are in italics</i>

The first <i> tells the web browser or e-reader that the following word is to be displayed in italics. the last </i> tells the browser or e-reader to stop displaying words in italics.

The following process will highlight or tag those special characters so you can find them in your html file. When formatting The Range I didn’t do this, just to be stubborn, as I wanted to see if it had any effect on the html code later on, which it didn’t. Word successfully translated tags like <i> and <b> for bold text in the html file.

Skip this if you want and if it doesn’t work come back and try it out.

If you want to do that, here’s how.

ebookcook2

Find the Replace tool in Word, this will be your best friend soon!

Click in the Find box.

Click the Format menu, bottom left.

Choose Font from the list.

ebookcook3

In the new window click Italic under font style.

Click OK.

In the REPLACE box copy this text including the hyphens: -STARTI- -ENDI-

Do the same for bold and underline if you have words in that format.

  • Bold: -STARTB- -ENDB-
  • Underline: -STARTU- -ENDU-

This will highlight or tag those special characters. When formatting The Range I didn’t do this, just to be stubborn, as I wanted to see if it had any effect on the html code later on. Skip this if you want and if it doesn’t work come back and try it out.

Curly quotes – get them right!

Word has a strange habit of flipping these around at times. For example:

ebookcook4When using an em dash to show dialogue being interrupted, Word does this weird thing of flipping the quote marks around.

As with the special characters, do a FIND and REPLACE for your curly quotes. That should put them the right way around.

Soft returns, tabs & spaces.

This is another weird one that Word does without you realising. Find this icon on your toolbar:

ebookcook6Click it and your Word doc will be filled with all manner of dots and arrows and things, for example:

ebookcook5As we did (or didn’t if you skipped it) with the tagging of special characters, you’ll need to get rid of these annoying arrows. Follow these simple steps to remove the junk formatting that you don’t need. Reason being is that you want your text to be clean and ready to go later on when we create proper formatting.

Turn soft returns into hard returns. In FIND/REPLACE type or copy this ^l (that’s a caret mark, SHIFT 6, and a lower case L) and replace with ^p (caret mark again lower case P)

Dump the tabs, we don’t need them, trust me. FIND/REPLACE again, search for ^t (lower case T) and replace with nothing.

Step 2 – Copy & Paste time.

Here we go then. Select all of the text in your Word doc. Copy it.

Open Notepad++ and paste it all in there.

For the sake of following this guide myself I’ve copied some of the text from this guide into Notepad++.

Here’s my screenshot.

ebookcook7

What you need to do now is go through and make sure everything is left aligned and there are no gaps, like line 10. This might take some time but it’s worth it. You don’t need to save this, unless you plan on coming back to it later on, in which case save it, for example I’d save this as ‘Ebook guide clean text1’.

If you want the word to wrap, click View and select Word Wrap from the menu.

If you have scene breaks then make these obvious. Use ## or *** for example so you can find them later on. Don’t put any gaps between the paragraphs.

ebookcook8

When you’ve finished removing line gaps, tabs etc, select the entire text and copy it.

 Step 3 – Back to Word.

Yes this might seem like a step back but it really isn’t. It’s making sure you have a clean set of rules for your formatting. Over time you may have formatted different parts of your text with a variety of styles. This might look pleasing on the eye and nice when printed but it adds to headache inducing frustration when you try and translate this to html format. It’s best to stick to a few basic styles at first.

What you need to do now is decide how many styles you want. For example, Heading 1, Heading 2, Heading 3, normal etc. We’ll be adjusting the code in our html file shortly so don’t worry too much if you don’t get them perfect.

Before pasting in your text from Notepad++ set up your styles.

I’m using Word 2007 with the ribbon, so it depends on your toolbar set up.

Find your Normal style and click Modify.

ebookcook9In The Range I used 4 different styles of Normal.

Normal – this indents the paragraph, and each following paragraph:

ebookcook10

The font you choose doesn’t matter. I tend to keep mine on Times New Roman, occasionally switching to Arial when the mood takes me.

Normal 2 – this does NOT indent the paragraph and is used for the first paragraph of a new chapter or scene break. Every author has their own style. I like to see new sections/chapter start without an indent on the first paragraph.

ebookcook11

Click Format at the bottom left, then choose Font and Paragraph to make your changes.

ebookcook12

As you can see my Normal style has the paragraph indented by 0.5cm which is what I like for the first paragraph of a chapter.

Now do the same for your Headings. I like to make a gap before and after my headings so they’re clearly defined and separate from the Normal text.

This is my Heading 1 paragraph style. I use the After spacing as 30 but it’s up to you how you want your style to look. Play around with the settings and find one that suits you.

ebookcook13

Once you’ve set up your styles, paste in the text from your Notepad++ file.

Select all the text in Word and apply the Normal style. This is what mine looks like:

ebookcook14

Now go through and apply your headings to chapters etc.

Save this version! I’d save mine as ”Ebook guide clean formatting1′. I know it may seem like there’s suddenly a lot of versions of your original manuscript but trust me it’s worth doing because you never know when you may want to refer back to a step or change later on.

Let’s say for example you change a lot of heading styles in this version but later on you don’t like them. If you’d saved as ‘Ebook guide clean formatting2’ or 3, or 4, then you will always have those to use again if you prefer them.

Add as many entries to your Table of Contents (ToC) as you like, and Author info, About the Author, Dedication and so. You can add bookmarks for chapter headings in Word if you like, so the ToC will link to them.

I didn’t do this as I added these links in the html file after. This made sense to me instead of adding bookmarks in Word which means unnecessary code has to be translated to an html file and more than likely deleted or changed anyway.

Step 4 – The html file.

Now we’re moving on to creating the html file that will eventually become your ebook.

Save your Word doc as something like ‘Ebook guide html version1’ and choose the FILTERED option in the drop menu if you can. This will reduce a lot of the junk code Word adds. If you like try saving as both filtered and web page so you can see the difference.

ebookcook15

I prefer to actually change the file format so instead of saying ‘…htm’ it says ‘….html’ with the L at the end. Personal preference I know but I like to keep things consistent. HTML stands for Hyper Text Markup Language. I don’t like the idea of the file format missing the L bit off the end.

Yeah, call me weird if you like!

Quick tip: Before you click Save, enter your author name and title into the boxes at the bottom of the window.

ebookcook16

When you click save you may get a warning window pop up saying some MS Office features may not be available when you reopen the file and do you wish to continue. Click Yes as we won’t be using this file in Word anyway.

Word will then show a slightly different screen set up to reflect a web page format.

You can close this Word doc down now as you don’t need it.

Open your saved html file in Notepad++.

It will look something like this:

ebookcook17

Personally I don’t think this looks all that impressive, more like utter junk I didn’t expect and don’t want to see.

Quick tip: Go through your entire file and remove all the spaces between lines. I’ve tried to use a Find and Replace for this but it doesn’t seem to work. I also tried a plugin (a small extra program you add to your Notepad++) that hunts all the spaces and removes them, but again that didn’t work.

For me this was a laborious task of scrolling, highlight empty line, delete, move on to the next. The reason why is because empty lines will add to the overall file size of your ebook and it’s best to have a small a file size as possible.

Again, if you know a way of how to do this please share it with others in the comments section.

Let’s take a look at some of the features of your html file.

The Head bit

This tells the rest of the file what to do and how to look. It contains all the style code and more for the text of your book. We’ll come back to the head section shortly.

The Tags bit.

If you scroll down the file you’ll start to see the actual text of your book.

ebookcook18

In the image above you can see the ‘h1’ and ‘MsoNormal’ tags. These relate to the style formats you set up in Word.

Let’s start dumping some unnecessary code.

Find the bit that says <div class=WordSection1>

You can delete this as it doesn’t serve a purpose.

Then scroll to the bottom and delete </div> also.

ebookcook19

Special formatting tags.

If you followed the earlier process to show special characters, here’s how to reverse it and swap them for html code for your text.

If not then scroll down to skip this process.

We’re looking to add the following where needed:

Italics <i> and </i>

Bold <b> and </b>

Underlined <u> and </u>

Click Search on the toolbar and click Replace.

In Find what type -STARTI-and in Replace with type <i>

In Find what type -ENDI-and in Replace with type </i>

This will change all the italic tags you set up earlier into the correct html format.

ebookcook20

Again, repeat for your bold and underlined tags.

In Find what type -STARTB- and in Replace with type <b>

In Find what type -ENDB- and in Replace with type </b>

In Find what type -STARTU- and in Replace with type <u>

In Find what type -ENDU- and in Replace with type </u>

And don’t forget to put the hyphen before and after the words in Find what.

If, like me, you didn’t go through this step, go to Search on the toolbar, click Find and type in <i> and click Find Next.

If it scrolls to the next <i> tag you’re golden and it means Word translated those words correctly.

Take a break!

Thinking this is hard work?

It may seem like a lot of bother to go through and learn but if you’re intent on self-publishing your novel and want readers to love your baby as much as you, then this really is worth doing. Just thought I’d share that with you, dear blog reader, because I have had the same feeling of ‘Awww man, more work? But I’ve written my book, I’ve done the hard part haven’t I?’

Is it really worth the risk of having a negative review based around the look of the book (that can impact on whether someone else buys it) rather than someone not liking its content?

Personally if someone reviews The Range and says they don’t like it for whatever reason, I’m okay with that (sort of…hey, you can’t please everyone, right?) but after all my hard work I don’t want some flippant comment pointing out it looked dreadful.

Moving on.

Step 5 – Header info

Moving through the code step by step, let’s look at the information in the header.

Select the junk at the top:

ebookcook21

And only that text!

Now copy in the text below and paste it in.

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″/>

So it looks like this:

ebookcook22

Click the image above to see it bigger.

I won’t claim to know what a lot of that stuff means. I do know that UTF-8 relates to the encoding of the file so it reads correctly in e-readers for example. Correct me if I’ve got that wrong.

Quick tip: Save your work!

Now we need to make a quick addition before moving to Step 6.

Copy this text:

/*===Reset===*/
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, acronym, address, code, del, dfn, img, ins, kbd, s, samp, small, strike, strong, sub, sup, tt, var, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}
body {text-align: justify; line-height: 100%;}
/* Style Definitions */

Then paste it below the first <style> tag, as the below image shows:

ebookcook23

Again, I’m not entirely sure why this is needed, but it seems to be required. Let others know in the comments if you know why. We’re all on a learning curve, right?

Step 6 – Styles

Now we’re going to change the styles you set up in Word so they’re compliant with html formatting so web browsers and e-readers can understand them.

In theory you could have skipped all the style formatting we did in Step 3, because we’re changing things around a lot here, but it’s worth knowing how to do it for future reference.

Quick tip: See the little minus symbols by the numbers? You can click those to expand or retract the text in that section. This can scrolling up and down faster.

This is what I have in my html file that relates to the formatting of my normal text:

p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-name:”Normal\,Normal 1″;
margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-indent:14.2pt;
font-size:11.0pt;
font-family:”Arial”,”sans-serif”;}

Web browsers and e-readers don’t work with things like ‘14.2pt’ as the prefer ’em’ format to tell the viewer how to display text.

Here’s a handy link that explains how to translate point values into Ems – http://reeddesign.co.uk/test/points-pixels.html

On that page you’re looking for the Points column and the EMS column. It’s EMS that you’ll need to add to your styles in your html file.

I’ve copied the style format I used in The Range and pasted it into my ebook guide html file, for example here is what I use for my normal text:

p.MsoNormal
{margin:0em;
text-align:justify;
text-indent:1.4em;
font-size:1.0em;}

You can see I’ve changed the points to em, and this was trial and error using the link above as a guide.

Doesn’t it look neater?

Style is MsoNormal.

I don’t use a margin.

The text is justified so it looks square and neat on the screen.

The text is indented slightly so it looks good on the screen. Remember, this is the standard text format for your average paragraph. We’ll come to the first paragraph of a chapter/scene shortly.

Font size is 1.0em – which equates to 12point in Word.

Quick tip: The squiggle brackets { and } are needed to capture the style data so make sure you’re not missing any. I got quite frustrated at one point because the text wasn’t displaying correctly until I realised I’d deleted one of the squiggle brackets by mistake.

To save you time I’ve copied the entire style formatting from The Range for you to use:

p.MsoNormal
{margin:0em;
text-align:justify;
text-indent:1.4em;
font-size:1.0em;}
p.normal2
{margin:0em;
text-align:justify;
text-indent:0;
font-size:1.0em;}
p.normal3
{margin-top:1.3em;
margin-bottom:1.3em;
margin-left:2.5em;
text-align:justify;
font-size:1.0em;
font-style:italic;}
p.normal4
{margin:0;
text-align:center;
text-indent:0;
font-size:1.0em;}
p.break
{margin-top:1.3em;
margin-bottom:1.3em;
text-align:center;
text-indent:0;
font-size:1.0em;}
p.toc1
{margin:0em;
text-align:left;
text-indent:0;
font-size:1.0em;}
p.toc2
{margin:0em;
text-align:left;
text-indent:1.4em;
font-size:1.0em;}
h1
{margin-bottom:2.0em;
margin-top:2.45em;
text-align:center;
page-break-after:avoid;
font-size:2.0em;
font-weight:bold;}
h2
{margin-bottom:1.3em;
margin-top:2.0em;
text-align:center;
page-break-after:avoid;
font-size:1.8em;
font-weight:normal;}
h3
{margin-bottom:1.0em;
margin-top:1.0em;
text-align:center;
page-break-after:avoid;
font-size:1.5em;
font-weight:bold;}

I’ll explain what these are for shortly.

To copy this you first need to remove all the junk in your html file. Select everything from here the <!–

ebookcook24

Down to the —> bit at the bottom just above the </style> tag.

ebookcook25

You can copy this into your html file so it looks like this:

ebookcook26And the start of the actual text looks like this:

ebookcook29

As you can see there’s no table of contents yet.

We’ll get to that.

Step 7 – Quick preview.

I always like to save this as a new version, ‘a guide to ebook baking TEST.html’ for example, before moving to the next process.

On your toolbar click Encoding and select Convert to UTF-8 without BOM. This will link with what you copied and pasted in your header from earlier and the browser will understand what UTF means.

On your toolbar click Run and select your browser. I’m using Firefox.

This is what mine looks like:

ebookcook28

The screenshot looks funny because I squished the Firefox browser down so it would fit on the screen here.

So now we have the headings and basic text layout sorted.

I don’t like the first line being indented so I want to change that to a different style.

I change the class of the first paragraph from <p class=MsoNormal> to <p class=normal2> so the first line ‘In my last post I hinted…’ does not have an indent, whereas the paragraph below ‘I wouldn’t call this an…’ has the formatting of <p class=MsoNormal> so that is indented.

ebookcook31

And in Firefox it now looks like this:

ebookcook30

With the first line indented nicely. I like that. It looks more professional.

For the moment I suggest you play with the styles of your text, adjust the EM value of the normal, Heading 1, 2, 3 etc. Use the guide I linked to above and see what looks best and what you want your book to look like. We can always change this later anyway but it’s worth playing around with these features to see how they behave.

Quick tip: Save your work!

Style garbage explained.

Let’s look at the styles I used in The Range.

p.MsoNormal
{margin:0em;
text-align:justify;
text-indent:1.4em;
font-size:1.0em;}

This one we know. It’s the normal text style for your paragraphs.

p.normal2
{margin:0em;
text-align:justify;
text-indent:0;
font-size:1.0em;}

And this one is for that first paragraph not indented.

p.normal3
{margin-top:1.3em;
margin-bottom:1.3em;
margin-left:2.5em;
text-align:justify;
font-size:1.0em;
font-style:italic;}

I’ve used this to indent longer sections of text, for example in The Range one of my characters reads a letter from an old college buddy, so I wanted this displayed differently using a wider margin and text in italics.

p.normal4
{margin:0;
text-align:center;
text-indent:0;
font-size:1.0em;}

This one is used for centred text. I used this for things like Acknowledgements, Disclaimer etc at the start of the book.

p.break
{margin-top:1.3em;
margin-bottom:1.3em;
text-align:center;
text-indent:0;
font-size:1.0em;}

The break style I used when I have a break in scenes, often indicated by a * or other symbol. I use * * * to show there is a break from one scene to another or switching character view points so the reader knows there is a change. I put a margin of 1.3em above and below the * to put a gap between the text.

p.toc1
{margin:0em;
text-align:left;
text-indent:0;
font-size:1.0em;}

The Table of Contents style is entirely up to you. I like the layout to reflect the hierarchy of the heading styles used for chapter titles. So toc1 relates to my heading 1 styles and as such isn’t indented.

p.toc2
{margin:0em;
text-align:left;
text-indent:1.4em;
font-size:1.0em;}

My toc2 style reflects my heading 2 style for sub chapter headings and is indented slightly.

Table of Contents screenshot from The Range:

therangeonkindle2

So you can see how that style works specifically for the ToC.

h1
{margin-bottom:2.0em;
margin-top:2.45em;
text-align:center;
page-break-before:avoid;
font-size:2.0em;
font-weight:bold;}

h2
{margin-bottom:1.3em;
margin-top:2.0em;
text-align:center;
page-break-before:avoid;
font-size:1.8em;
font-weight:normal;}

h3
{margin-bottom:1.0em;
margin-top:1.0em;
text-align:center;
page-break-before:avoid;
font-size:1.5em;
font-weight:bold;}

You can change these headings around as you please. Or delete them and only use one type. Just remember that when you delete them from your style guide you must make sure that you change the tags on your text to reflect those changes.

For example, if you delete the styles h2 and h3 but some of your text still has the tags:

<h2>Ingredients</h2>

<h2>Step 1 – Preparation</h2>

It won’t make sense to the e-reader, so you’ll have to change this also, to h1 for example.

It might seem like a lot of work and hassle but in the end it will make sense to you, to the e-reader and most important to the reader of your well crafted story!

Step 8 – Table of contents.

Here we’re going to create a table of contents for your chapters.

This depends on how you want your book to look. Ask yourself if you want your title page first or Table of Contents first? I think it looks best when I see these items in the following order:

  • Book cover.
  • Title page – Book name, Author name.
  • Acknowledgements
  • Dedication
  • Disclaimer
  • Chapter 1
  • Chapter 2 etc

Go with what feels right for you.

It’s not important to have the Dedication and Disclaimer in the ToC, but include it if you like. To keep things simple I haven’t added either in the example below.

ebookcook32

And here’s what it looks like in my Firefox:

ebookcook33

Looks a bit scrappy doesn’t it? I agree but that’s because it’s a web browser displaying basic html code. It will look much better in the Amazon Kindle app though!

Explanation time!

This is an example of the sort of thing I’ve been looking for online when creating The Range.

Take a look at line 78 in the image above, and line 94.

Line 78: <h1><a name=”titlepage”>A Guide to ebook baking</a></h1>

This line tells the e-reader 2 things:

  • It tells the e-reader that the words ‘A Guide to ebook baking’ have a location is called “titlepage”.
  • It uses the style tag <h1> so it will refer to the style and make it look big and bold and important.

Line 94: <p class=toc1><a href=”#titlepage”>Title Page</a></p>

This line tells the e-reader 2 things:

  • When the link is clicked the e-reader will to go to the Title Page by looking for ‘#titlepage’ in the web browser or e-reader.
  • It uses the style tag toc1 so the text will refer to that specific style.

Think of it as marrying two things together – a name and a link to it in the table of contents.

Chapter 2 will have the code:

  • <h2><a name=”ch2″>Chapter 2</a></h2>

And the table of contents code will link to it:

  • <p class=toc2><a href=”#ch2″>Chapter 2</a></p>

I really hope that makes sense!

Breaks between chapters.

You may have noticed that my headings had a bit of code that said ‘page-break-before:avoid;’

The reason for this is because I often use 2 headings, as with The Range:

  • Part 1 – Surviving (Heading 1)
  • Chapter 1 – Fear (Heading 2)

And I didn’t want a page break after each heading as when looking at the book in an e-reader you’d see them on separate pages. So I got around this by forcing a No Page Break after each heading:

h1
{margin-bottom:2.0em;
margin-top:2.45em;
text-align:center;
page-break-before:avoid;
font-size:2.0em;
font-weight:bold;}

And instead I used this:

<span style=’page-break-before:always’></span>

Which I used on lines 80, 85 and 90 as an example. This tells the e-reader to start the next section of text on a new page.

However, if you don’t need to do this you can change the heading 1 style to reflect a page break before your chapter heading by using this ‘page-break-before:always;’

h1
{margin-bottom:2.0em;
margin-top:2.45em;
text-align:center;
page-break-before:always;
font-size:2.0em;
font-weight:bold;}

So when the e-reader comes to heading 1 it will know from the style that it must put it on a new page.

Here’s the entire chunk of code for the table of contents if you want to use it:

<h1><a name=”titlepage”>A Guide to ebook baking</a></h1>

<span style=’page-break-before:always’></span>

<h1><a name=”aboutauthor”>About the Author</a></h1>
<p class=MsoNormal>Blurb about you as the author</p>

<span style=’page-break-before:always’></span>

<h2><a name=”acknowledge”>Acknowledgements</a></h2>
<p class=MsoNormal>Blurb about who you want to say thanks to – research help, family and friends etc</p>

<span style=’page-break-before:always’></span>

<h1><a name=”htmltoc”>Table of Contents</a></h1>

<p class=toc1><a href=”#titlepage”>Title Page</a></p>
<p class=toc1><a href=”#aboutauthor”>Author</a></p>
<p class=toc1><a href=”#acknowledge”>Acknowledgements</a></p>
<p class=toc1><a href=”#htmltoc”>Table of Contents</a></p>
<p class=toc2><a href=”#ch1″>Chapter 1</a></p>
<p class=toc2><a href=”#ch2″>Chapter 2</a></p>

<h2><a name=”author”>Author</a></h2>
<p class=MsoNormal>Dave Farmer</p>

<h2><a name=”ch1″>Chapter 1</a></h2>
<p class=MsoNormal>The opening text of your first chapter</p>

<h2><a name=”ch2″>Chapter 2</a></h2>
<p class=MsoNormal>The opening text of your second chapter</p>

And yes, I know I said to remove the empty lines earlier, but for the sake of making this simple to read and understand I’ve left them in.

Let’s move on to something more exciting!

Step 9 – Kindle Previewer

The Kindle Previewer is a funky bit of kit that lets you see how your e-book might look like, it emulates various Kindle readers to give you an approximation of how it will look when finished.

Before we get there, make sure your Notepad++ file has been encoded correctly.

On your toolbar click Encoding and select Convert to UTF-8 without BOM if it hasn’t been done already in this version.

If you don’t do this the Kindle Previewer won’t be able to compile your book and will show an error.

Open your Kindle Previewer, remember you installed it from the list of ingredients right at the start?

Quick tip: Make sure you save and close your Notepad++ file of your book or the Kindle Previewer will show an error message. It doesn’t seem to like sharing.

Find the Open Book link and click it.

Navigate to where your html file of your book or writing project is.

ebookcook34

It will then compile your book and show a window. It will state there are warnings and you can click the drop down arrow to view them. I found with The Range the warnings related to lack of book cover, which is understandable as it doesn’t have one yet!

Click OK.

It may take a few moments to compile and show your ebook. Here’s what mine looks like:

ebookcook35

You can use the green arrow keys to turn the pages.

At the top you can change the view and see what it looks like in different Kindle readers.

The next bit is the most exciting!

Click View then Open in Kindle for PC.

ebookcook36

And if you installed the Kindle Reader earlier it will open up and display your book.

Again this might take a few moments, longer depending on the size of your book.

Here’s what mine looks like:

ebookcook37

Looks basic I know because there’s been little formatting and work on the layout, font size, headings, styles and so on. Personally I found this a huge thrill seeing what my book looks like to another reader.

Not only have you managed to convert a Word document into an html file (though still with work to do) but also, the act of compiling it with Kindle Preview and viewing it on the Kindle reader has created a .mobi file of your book.

Look in the folder on your PC where your html file is saved and you’ll see a new folder, something like this:

ebookcook38

And inside that should be  your .mobi file:

ebookcook39

Woohoo!

If it all went to plan I’m pretty sure you should have a pretty damn good sense of achievement right now. I know I did with The Range, and still got that buzz when I went through the process for this guide.

If you have a Kindle e-reader, plug it into your PC and copy the file to it.

ebookcook40

Copy your .mobi file and paste it into the documents folder on your Kindle.

Unplug your Kindle and the file should appear in your library:

ebookcook41

There it is at the bottom.

And here’s what it looks like on my Kindle:

ebookcook42

Wrapping it all up.

If it didn’t work, don’t panic. All that work reading this guide, making changes, opening programs, installing stuff, fiddling with code you might not understand, and everything in between hasn’t been wasted.

I know a fair amount about html and making web pages so I had an advantage over those who don’t.

However, when I decided I wanted to self-publish The Range, I knew I’d have to learn a new process. And yes it took hours to get it looking good. I had dozens of versions of my book saved with odd names – therangetesthtml.html, therangeEDITcleancode.html, therangeEDITcleancode14.html… and so on.

I went back and forth between various guides online, picking up tips here and there, piecing it together, running through the browser preview bit, the Kindle Previewer compiling bit and finally Kindle reader still didn’t do what I wanted it to.

But I kept on going because I wanted my ebook to look good.

I didn’t want to upload my word doc to Kindle and hope for the best.

By uploading an html file, custom made by you, it will look as good as any book on Amazon, but only if you take the time to learn this last step.

Like I’ve said before, why skimp on those final very important bits after spending so long writing your book?

When I started learning how to do this I thought “I ought to share this with people because it took me ages to figure it all out and someone else will be looking for a guide like I did.”

I hope this helped you and at least answered some questions to keep you moving along your path to self publishing.

I’d really like to know what you thought about this guide as it took considerable time putting it all together. And any tips and suggestions are most welcome and will certainly be for the benefit of anyone else looking for a good guide.

Thanks for sticking with it to the bitter end.

Keep going, dear novelist, the world is waiting to share your imagination!

Advertisements

One thought on “A guide to ebook baking!

Speak to me!

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