Home » Books, Poetry & Writing » Publishing Tips » Self publishing

Easily Format an eBook for Kindle and Nook in HTML

Ranked #4,933 in Books, Poetry & Writing, #181,759 overall

Use Simple HTML to Format Your eBook

Formatting an eBook can be difficult, but it's not as hard as people make it out to be. Using simple tags and techniques, you can change your raw manuscript into an eBook in no time. Author Brian Kittrell is here to show you the same techniques he uses every time he sends a new eBook out for distribution.

You will need no special tools for this tutorial unless you want to use a particular tool with which you are familiar and comfortable. So long as you have a basic text editor and an internet browser to view the tutorial, you'll be able to participate.

And, before you start, don't get scared! Coding in HTML is easier than any other language to prepare an eBook, and it's even easier than learning a foreign language. So, let's get started!

Some Recommendations...

Just in case you don't have a text tool on your computer, I'll provide a few free ones here with syntax highlighting. This feature makes it super easy to work in HTML. (If you're a developer and you don't see your software listed, shoot me a message and I'll add it if it's freeware/open source.)
Notepad++
Open source (free) software utilized by programmers the world over. Syntax highlighting for many different programming languages.
Programmer's NotePad
Another open source (free) editor with syntax highlighting.

Self-Publishing Books for Extended Learning

Here are some books for extended learning in self-publishing you may want to check out.
Loading

Step 1: Prepare Manuscript

The first thing you need to do is open your manuscript in whichever word processor you use. I've made a list of things you should do before moving it over into an HTML editor or text editor (from here forward referred to as "editor").


  • Note italicized, bold, underlined, or other formatted text.


    • This can be done in Microsoft Word and OpenOffice. Search Google for "search for italics in word" or "search for italics in open office" for this process.

    • Make detailed notes about the location of the special formatted text. If you have a huge number of them, I'd recommend cutting them down or skipping this step (and not including special formatting).


  • Note any special section headers/chapter headers you may have (if they don't follow a standard format). For instance, most books will have "Chapter X" or "Chapter 10", but your book may have "Step 10: Search Engine Optimization", and that might be under the special section header "Building a Website for Your Business", and that might be in "Chapter 5". This step will be harder for narrative non-fiction, so get busy! Just note their names so you can find them quickly later.

  • You have two options dealing with tables:


    • Get rid of them.

    • Turn them into JPG images by taking a screen shot. If you do this, save them somewhere and note their names and locations--for instance, copy/paste the last sentence before the table so you can easily find it later. Doing this will save you lots of time because you can use the Find... tool to locate that sentence and then pop that table in right after that.


  • KEEP the big spaces between chapters. It will help during formatting. If you don't have spaces (and instead use pagebreaks and so forth), don't worry about adding any. We'll get to that.

  • Get rid of smart quotes and other entities with HTML browsers really, really hate. Here's how to do it in Word. (And Google will help with other software, I promise!)



Every book is different, and you should take a second to think about anything special about your book that is uncommon to other eBooks. Keep in mind strange things your book does or needs that you may need to keep in mind for later. Let's move forward.

Some HTML books...

If you need deeper understanding of everything behind HTML, I'd recommend getting an in-depth guide, like one of these:
Loading

Step 2: Importing Manuscript into Editor

type=textNow, you're ready to import your manuscript into your editor. Open your editing tool (whether NotePad, NotePad++, pNotePad, or whichever text or programming editor you'll be using), copy the entire manuscript, and paste it into the editor. Unfortunately, most editors won't open a Word document file or a file from most word processors; HTML editors just aren't as advanced as word processors in respect to formatting and "prettiness".

You can quickly select everything in the manuscript by clicking in the body text and hitting CTRL + A (windows). Then, copy (CTRL + C, Windows), and paste in the text editor (CTRL + V, Windows).

Turn on Word Wrap if it is disabled.

Scan over the text to see if anything strange has happened. If any of the text looks weird or funny, correct it.

Turn off Word Wrap so every paragraph is on its own line.

Save the file somewhere you can find it later. I always save mine as "MyBook_unformatted" so I can keep track of each step.

Step 3: Adding the Header Code

Go to the top of your manuscript inside the edtior, and paste the following:

<?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: 1.5em;}
p.boldcenter {
text-align: center;
font-weight: bold;}
p.timelapse {
text-align: center;
font-weight: bold;}
p.chapter {
text-align: center;
font-weight: bold;
page-break-before:always;}
</style>
</head>
<body>

At the end of the document, copy and paste this code (after the last line):

</body>

Now, save your eBook file. (At this point, I like to save it as "MyBook_preformat", but do what you like. It's your workflow.)

Let's look at this for a moment. Yes, I know it's code, but I never promised you'd get away with not coding anything. I promised to make it easy, so let's get started. ;)

The most important tag here is the p {text-indent: 1.5em;} definition. (In CSS styles, each time we declare something about an HTML tag, it's called a definition.) What this tag basically tells the eReader is that anything surrounded by the p tag should be indented because it's a paragraph, and we want the text to look as much like a regular book as possible.

So, anything in your body of text should be surrounded with the <p> opening tag and the </p> closing tag. Each line in your manuscript (each separate paragraph) needs to be separated in this fashion. For instance:

Correct:
<p>The quick brown fox jumped over the lazy dog. Waking the dog, the fox ran from the fight. The dog, being slower but witty, intercepted the fox at the meadow along the shortest route. Bearing his teeth, the dog watched the fox emerge from the wooded path.</p>
<p>With the roar of a growl, the dog charged, and the fox was taken by surprise. Following a brief skirmish, the fox was able to break free and retreat while the dog smiled in victory; his thirst for vengeance had been sated that day.</p>

Incorrect:
<p>The quick brown fox jumped over the lazy dog. Waking the dog, the fox ran from the fight. The dog, being slower but witty, intercepted the fox at the meadow along the shortest route. Bearing his teeth, the dog watched the fox emerge from the wooded path.
With the roar of a growl, the dog charged, and the fox was taken by surprise. Following a brief skirmish, the fox was able to break free and retreat while the dog smiled in victory; his thirst for vengeance had been sated that day.</p>

Do you see the difference? In the correct version, there are two separate paragraphs, and each one has a beginning P tag and a closing P tag. This will cause the first and second paragraphs to be indented, whereas the incorrect version will put everything as one paragraph and indent only the beginning.

Note: You will leave section headers/chapter headings alone for now. We'll get to that. Just do the narrative bits for now.

Now, a short break and we'll move on to the other tags.

Further reading...

Need something a little deeper than a basic internet tutorial?
Loading

Step 4: Setting Up Style Tags

  • The Bold Center Tag


    • p.boldcenter {
    text-align: center;
    font-weight: bold;}

    What does it do?
    This will cause any text surrounded by the tags to be turned bold and centered on the page. Sometimes, left-justification just isn't appropriate, and you may want the ability to set off certain bits of text.

    How do I use it?
    Easy. Code with it like this:

    <p style="boldcenter"> TEXT </p>
    The opening tag with the style set, and the closing tag. (DON'T FORGET CLOSING TAGS!)

  • Time Lapse


    • p.timelapse {
    text-align: center;
    font-weight: bold;}

    What does it do?
    This will cause any text surrounded by the tags to be turned bold and centered on the page. I use this for centering and bolding my "* * *" time lapses. Yes, I know the code is the same as the boldcenter style, but this is just to open your brain up and think of new possibilities.

    How do I use it?
    Easy. Code with it like this:

    <p style="timelapse"> TEXT </p>
    The opening tag with the style set, and the closing tag. (DON'T FORGET CLOSING TAGS!)

  • Chapter Heading Style


    • p.chapter {
    text-align: center;
    font-weight: bold;
    page-break-before:always;}

    What does it do?
    This will cause anything surrounded by the tag to:

    1. Have a page break before it. (Beginning with this tagged text, it will start at the top of a fresh, new page, regardless of what came before or comes after.) This is useful for giving it more of a book feel, and it also makes sure your chapters don't start as the last line of some other chapter text. (That is so irritating!!)

    2. Bold the text to make it stand out more.

    3. Center the text to make it more of a section heading.


    How do I use it?
    Easy. Code with it like this:

    <p style="chapter"> TEXT </p>
    The opening tag with the style set, and the closing tag. (DON'T FORGET CLOSING TAGS!)

    Now, go through and set up your paragraphs, chapters, time lapses, and all that other good stuff. Then, we'll move on to basic HTML formatting of other text (like those italics, bold words outside of chapter headers (and which don't need to be centered), and so forth.

    Need an eReader?

    There's no easier and better way to check the quality of your newly-formatted eBook than by loading it directly onto an eReader:
    Loading

    Step 5: Formatting Special Text

    Now, remember that list of words you made for your italics, bolds, and underlines? This is where I explain how to fix them.

    Making text italicized
    To make text italicized, you'll apply a beginning tag of <i> and an ending tag of </i>. For example:

    I want my text to be in <i>italics</i>.

    Making text bold
    To make text italicized, you'll apply a beginning tag of <b> and an ending tag of </b>. For example:

    I want my text to be in <b>bold</b>.

    Making text underlined
    To make text italicized, you'll apply a beginning tag of <u> and an ending tag of </b>. For example:

    I want my text to be <u>underlined</u>.

  • Wrapping it Up


    • Remember: Only text between the tags will be affected by the tags. Also, don't forget to close all of your tags! If you leave it open, it will turn the rest of your document into whatever the tag says. For instance, leaving a bold tag open will bold everything until the end of the document! Always pay close attention to your tags!

    When you're done, save your document as "MyBook_formatted.html". Be sure to save it as an HTML file instead of just a plain text. This can be done easily via the "Save As..." function under File (along the top toolbar) in most programs.

    Other Lenses

    Here are some other lenses you may be interested in reading, based upon the fact you're reading this one!
    Video Tutorial: Working with Book Cover Templates from Lightning Source
    For print on demand (hard copy) books, this lens explores the very basics of working with book cover templates from Lightning Souce Ingram, in a tasty, easy-to-digest video tutorial format!

    Guestbook Comments

    • Leilani-m Dec 9, 2011 @ 2:41 am | delete
      Excellent lens and extremely helpful! I want to publish e book, but I didn't know how to do it or where to start :)
    • aquarian_insight Dec 8, 2011 @ 4:24 am | delete
      Thank you again - another fine and helpful lens.
    • BrianKittrell Dec 7, 2011 @ 1:11 pm | delete
      @Favored1 Yes, much of it can also be applied to Squidoo articles. Anything that can use HTML.
    • senditondown Dec 6, 2011 @ 9:59 pm | delete
      Another fine job Brian. Am going now to apply what I've learned.
    • favored1 Dec 6, 2011 @ 7:07 pm | delete
      This is the best explanation I have ever read. Does this work in Squidoo text? Can I use this format on my lenses?
    • BrianKittrell Dec 5, 2011 @ 4:58 pm | delete
      If you are getting good results, I recommend to do it the way you have been. Working directly in HTML and CSS can give better results when you need very precise control over formatting and appearance. It's more or less taking out the middle man (in your case, Google Docs) and working directly in the raw code. It ends up being cleaner and more universal in the end.
    • mercin Dec 5, 2011 @ 8:53 am | delete
      I used Google Docs for formatting and it worked fine. I used the Header formatting, bold, italic etc. Is there some other major advantage to using HTML that I am missing?
    Show All

    by

    BrianKittrell

    Brian Kittrell is a speculative fiction (fantasy, horror, and science fiction) and author and novelist. His newest release, The Circle of Sorcerers, is... more »

    Feeling creative? Create a Lens!

    Explore related pages

    Related Tags