Book Design
Ebook Formatting – Part 5 – Getting our hands dirty

Ebook Formatting – Part 5 – Getting our hands dirty

Now that we have a vague idea of how HTML works, it’s time to start messing with our file.

Everything you see inside the <body> </body> tags is the text of your book, formatted so it will be easy to read.

The first important tag you’ll have to take into account is the heading tag.

Headings are the titles of your chapters and the voices of your Table of Contents, and are marked by the letter H followed by a number:

<h1> <h2> <h3> etc. depending on how many levels of headings your have.

So the title of your first chapter would look something like this:

<h1>Chapter 1</h1>

The normal text instead will be considered as a paragraph and so enclosed in the <p> </p> tags. And you’ll have to use them for each paragraph (meaning, for every time your sentence ends and a new line starts).

Example: 

<p>It was a dark and stormy night.</p>

All parts of text enclosed in the <h1> etc. tags will be automatically added to your Table of Contents (when we’ll go back to generate it in a while). That’s why you should check that all your headings have the proper tags.

For example if you chapter title is written like this:

<p>Chapter 13</p>

You’ll have to manually replace the p with h1.

So that your final text structure will look like this: 

<h1>Chapter 1</h1>

<p> It was a dark and stormy night.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Any blank lines between the tags don’t make any difference on your text layout, they only help you have a more ordered and cleaner file so you can easily find the things you need to fix.

So even if your text looks like this: 

<p>Today was sunny.

I took a walk in the park.</p>

You don’t actually have a line break, and your text will turn out on the same line. So on your reading device it will show like this:

Today was sunny.I took a walk in the park.

If you want to break the line you must:

1- close the tab and open a new tab:

<p>Today was sunny.</p>

<p>I took a walk in the park.</p>

Or

2- insert a forced line break with the tag <br/> (this is one of those self-closing tabs so you just have to write it once).

There is a big difference between the two.

The first one is the proper way to close a paragraph.

The second one should be used only on particular occasions, for example if you need to make a heading that covers two lines but you want it to appear as one line in the TOC.

So you’ll write it like this:

<h1>Chapter 1 <br/>A New Adventure</h1>

That will show up like this:

Chapter 1
A New Adventure

And in your TOC will be on the same line:

Chapter 1 A New Adventure

(Also notice I put a space between the 1 and the <br/> so that the words were not sticking together).

The problem with the <br/> tag is that when you use it in a justified text, the writing will be spread on the full length of the line and will look weird if the sentence is short. That’s why is generally better to use the <p> tag.


Giving Some Emphasis 

If you need to make your text stand out and want to use bold or italic, here are some ways to do it.

Usually for big chunks of text is better to rely on the style sheet (we’ll see how in the next posts). But if you only have to put emphasis on a word or two, it’s quicker to use generic tags:

– <em> </em> will make your text italic.

– <strong> </strong> will make it bold.

If you already know something about HTML you’ll probably know or have used <i> for italic and <b> for bold, but in our case, it’s preferable to use <em> and <strong> because they act a bit differently and are more functional, especially if your device uses software that read the text aloud for visually impaired people.

Example. You write this:

<p>My <strong>cat</strong> is very <em>smart</em>.</p>

And you’ll have this:

My cat is very smart.

So those are the most important tags you need for a clean text, and the main things to take into account if you need to jump in and fix some mistakes or change a few sentences.

Next time we’ll see how to add links and images.

Leave a Reply

Your email address will not be published.