This is the seventh installment of a series of articles. To read the previous one, please click here

As you can probably tell by now from the last installment, we are by now getting pretty close to real tangible results that you can actually use, so let’s press on without delay.

The first thing we are going to do next is to turn our previously marked up document and turn it into a valid HTML file. In order to do that, we will have to wrap our text with proper header information. Simply use the sample below and paste the next few lines into the beginning of your existing text file.

<?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">
      html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
      p
      {
        text-indent: 1.5em;
        margin-bottom: 0.2em;
      }
    </style>
  </head>
  <body>

Once you have done that, copy the following line and insert it at the very end of your text file.

  </body>

We have now wrapped your entire marked-up book text with proper HTML headers and have a valid XHTML file. Make sure to save it with an .html extension, and then load the file in your web browser. You can now already see a preliminary version of your book. You might want to resize the browser window to roughly resemble the size of an eBook reader and you will better see how the text flows on a smaller display. Exciting, isn’t it?

You may have noticed that we have the first style sheet information in our file now. It is very basic and determines only the look of the <p> tags.

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

Let us play with this paragraph style for a moment so you get a feel for what it does and how you can affect its results.

For example, change the text-indent value to 5em, save the file and then hit the Reload button in your browser. You should now see that the first-line indentation in your book has changed quite a bit — excessively so, I should say.

Change it back to its original value and let us adjust the margin-bottom value to 4em. Save the file and refresh it in your browser.

As you will see, we have now dramatically increased the spacing between individual paragraphs. We are on a roll. Are you feeling dangerous, yet? If so, let’s do something radical!

Change the margin value back to its original value and include the following line right underneath it.

font-weight: bold;

I am sure you know what is going to happen once we save this file and refresh it in the browser. As expected, all of your text is now in bold typeface. Pretty cool, but let’s take it up another notch. Insert the following line underneath the font-weight line.

font-size: 2em;

If you view this version in your browser, you now see that your book is in a really large, bold print. Very cool, isn’t it? Especially, since this is just how our chapter headings should look like… All we would need is a way to tell the browser, which those chapter headings are. Which gives me an idea.

Replace the paragraph style in your file with the following block.

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

p.chapter
{
  text-indent: 1.5em;
  font-weight: bold;
  font-size: 2em;
}

If you remember how style sheets work, you already see what is happening. We have created a second paragraph style named “chapter” and we will be using that one to style our chapter headings.

Here is a short sample text I will be using in the following examples to show you how to massage the different parts of your eBook. It’s a little piece from my book Terrorlord from the “Jason Dark: Ghost Hunter” series, in case you’re curious. As you can see, the example has chapter headings and I have wrapped them with a parametrized paragraph tag. As a result the browser will use the chapter style to render the text between these paragraphs, while using the standard paragraph style for the other text blocks.


<?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">
      html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
      p
      {
        text-indent: 1.5em;
        margin-bottom: 0.2em;
      }
      p.chapter
      {
        text-indent: 1.5em;
        font-weight: bold;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <p class="chapter">CHAPTER 1</p>
    <p>Jason Dark was leaning over the chess board when Siu Lin entered the room with a dog-eared book in her hands.</p>
    <p>“Trying to solve another one of the London Illustrated’s chess challenges?” she asked.</p>
    <p class="chapter">CHAPTER 2</p>
    <p>She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.</p>
    <p>Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.</p>
    <p>***</p>
  </body>

This may all look a little garbled right now, because of the blog layout, but feel free to copy this and save it to use it as your sandbox playground, if you wish. If you load it up in the browser, this thing starts to look like a book, actually, doesn’t it? And it will only get better from here.

When we start a new chapter in our book, we usually want it to start on a new page, and styles can help us do that. Insert the following line in the chapter paragraph style.

page-break-before: always;

Unfortunately, web browsers do not handle page breaks properly — traditionally, there are no page breaks in web pages — so you won’t see them when you preview your book right now. If we were to load it onto an eBook reader, though, it would work. Right now you will just have to take my word for it.

Page breaks are nice and all, but usually, we would not want the chapter heading to be right at the top of the page. It should be moved down a little, leaving some white space around it, at the top and at the bottom. Very easy exercise, really. All you have to do is insert the following to lines in the “chapter” style.

margin-top:5em;
margin-bottom:2em;

Save it and refresh your browser, and you will see that you now have nice, clean spacing around the “CHAPTER 1” and “CHAPTER 2” headings in our example. And all of that without really changing your actual book text itself.

We’re doing it all through styles, which means if you think the white space is a bit too much, all you have to do is change the style values and it will automatically affect all your chapter headings throughout the entire book.

Now, you may have noticed the three stars at the end of my eBook source file. I will use these for another specialized styling, because I want these three stars to be centered on the page, something you will encounter in most books at one point or another. Someone versed in HTML would probably go about and simply wrap these stars with <center> and </center> tags. Sadly, that’s a bad idea when it comes to eBooks.

Centering text in eBooks is one of the most error prone undertakings because device manufacturers seem to have different takes on what “centering” means. Sounds ridiculous, I know, but I am not lying to you.

To create foolproof centering we have to double-stitch our approach, to make sure every device understands exactly what it is we’re trying to do.

First we will include the following two styles in our file.


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

Since both declarations look identical, this might seem redundant, but sadly, some devices, like the iPad, require the <span> tag for centered elements, while others require the more commonly used <p> tag. I think it is also important to point out that the text-indent: 0em; setting is important in this context. Without it, the device would actually render our text slightly off-center because it would center the text and then add a 1.5em indentation to it. Not what we want, so we have to reset the indentation to zero.

To center our text line, we will now wrap it with the proper HTML tags and make it look like this.

<p class="centered"><span class="centered">***</span></p>

This may not look nice in code form, but it solves all our problems and the line will now be centered correctly on all devices I have come across. I am enclosing here a little preview, roughly what the example looks like with all our little improvements in place.

CHAPTER 1

Jason Dark was leaning over the chess board when Siu Lin entered the room with a dog-eared book in her hands.

“Trying to solve another one of the London Illustrated’s chess challenges?” she asked.

CHAPTER 2

She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.

Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.

***

In all of this, you may have noticed that I did not set any default font face, size or text justification. This is not an oversight, let me tell you. I did that on purpose.

eBook readers allow users to use their preferred settings. Font size, justification and font type are very personal things and who are we to mess with what people like? By not setting our own values, the eBook device will automatically fall back onto the user preferences and immediately display our book in the user’s preferred way. It may be a small thing, but trust me, it goes over really well with your readers. Usability is key!

Go ahead now, and make the proper adjustments to your own book file. Mark up your chapter headings and the centered text portions, adjust the styles to your linking and take a look at your own book. As you may have noticed, it has already turned into a pretty reliable and predictable thing. Let me stress again at this point, that this is the reason why you do not want to export your eBooks straight from a word processor. See, how much control you have over the look and feel of your book with just a few simple steps? And it only gets better…

In the next installment we will add still some more frills to our book and then in the not too distant future, go to the next step, building the actual eBook in Calibre.

Take pride in your eBook formatting
Part I • Part II • Part III • Part IV • Part V • Part VI • Part VII • Part VIII • Part IX

Need help with an eBook project? Check here for more information.