Book Design
Ebook Formatting – Part 9 – Make it Personal

Ebook Formatting – Part 9 – Make it Personal

IDs and Classes

So far we’ve only seen how to use tags that are already present in html and thus how to apply style without modifying our text files. But using only these tags would be very limiting, because there are many special cases where you need to apply a different style to different paragraphs, even if they are all defined by the <p> tag. And that’s where IDs and Classes come in to help.

We’ve already used the “ID” attribute before, to insert an anchor, but that’s not its only function. The ID is used to indicate a unique, non-repeating element within the document. If you assign the ID to a part of the text that will be the ID of only that part and no other. We were talking earlier about using the ID “cit” as an anchor for a quote. This means that when you call “cit” you will refer only and exclusively to that sentence and no other. If you have a second quote to highlight you will need to give it a different ID, such as “cit2” and so on.

Do you want your “cit” quote to be formatted in italics and have a larger margin than the rest of the text? Reference it in the stylesheet using the hashtag (as we did for links), like this:

#cit {

font-style: italic;

margin: 1em;

}

This way you’ll apply a one-character thick margin around your entire quote, so you’ll get a result like this:

This is the normal text.

   This is the text of your quote.

This is the normal text again.

Classes, on the other hand, are more generic attributes that can be applied to multiple elements at once. 

For example, we can have a class that defines all parts of the text that are dates and are formatted in italics, or a class for all parts of the text that are center-aligned, and so on. In CSS it is more common to make extensive use of classes. To define them, just put a dot in front of the class name. But before we can reference them we obviously have to create them!

So let’s move to our xhtml document.

Let’s say that at the beginning of some chapters you have written a date and you want this date to be right aligned and italicized. Now you have this situation:

<p>London, May 10, 1984</p>

<p>Today was stormy.</p>

Which will be shown like this:

London, May 10, 1984

Today was stormy.

Let’s try to create our class using the html class= syntax and call it “date” (be careful: when you choose class names always use letters or numbers, or at most hyphens, but without any space in between and easily identifiable. If you call a class “sdrgse-118” then I hope you will remember what it stands for):

<p class=”date”>London, May 10, 1984</p>

<p>Today was stormy.</p>

Now let’s go into the CSS to define the style. When deciding where to write this new rule always remember that CSS is called “cascading” not surprisingly, it means that everything you write is read in order from top to bottom and what is at the bottom is “overwritten” on what is at the top. So if you’ve set the paragraph font as normal and justified, for it to be interpreted as right-aligned italics you’ll have to write the “date” class under it like this:

p {

font-style: normal;

text-align: justify

text-indent:1.5em;

}

.date {

font-style: italic

text-align: right;

}

By doing this, when you go to preview, you’ll get this situation:

London, May 10, 1984

Today was stormy.

Isn’t it a wonder? Obviously you will have to manually write the class=”date” attribute for all the dates in your document, unfortunately there is no shortcut for this.

Anyway it is always handy to have some generic classes of this type in the CSS, for example defining the text aligned to the center, or to the right, the italic text or the bold text. The nice thing about classes is that you can apply several different classes to the same element.

Practical example. You have in the CSS these two classes:

.center {

text-align: center;

text-indent:0em;

}

.bold {

font-weight: bold;

}

The first one aligns the text in the center, the second one puts it in bold.

What if you want the text to be centered and bold at the same time?

Just write the code like this:

<p class=”center bold”>London, May 10, 1984</p>

And you’ll be set.

If we need to apply the class only to a portion of the text and not to the whole paragraph (for example if we need to apply bold or italic) then the <span> tag will help us.

An example with italics. Let’s define the class “italic:

.italic {

font-style: italic;

}

And we apply it to this sentence (it doesn’t matter if the line breaks):

<p>Formatting text in <span class=”italic”>italic</span> is very easy!</p>

And this will be the result:

Formatting text in italic is very easy!

And what if you want to apply a class not only to a paragraph but to a whole block of paragraphs?

You can do that by applying the class on a paragraph-by-paragraph basis, but you can also do it faster by putting your paragraphs inside a <div> </div> to which you’ll apply the class.

Let’s for example try formatting our colophon. We want the font size to be a little smaller than normal (let’s make it 0.8 em).

Let’s define the “colophon” class in the stylesheet:

.colophon {

font-size: 0.8em;

}

Now we go the the xhtml file with our colophon (that we could rename to colophon.xhtml to make it easy to find) and we add the div with the class this way:

<div class=”colophon”>

  <p>Copyright © 2021 Allison Wade</p>

</div>

And the font will appear smaller.

(If for some obscure reason this doesn’t work, go back to the old way and apply the class individually to each paragraph).

Add style directly into the HTML

There is another way to add the style to your document without having to use CSS but only editing the xhtml file. 

Generally it is not recommended, because it works only with one file at a time and if the style is repeated you need to copy-paste it endlessly, but in some cases it can be useful when you have only one page to modify and you want to do it quickly without wasting time with classes.

This system consists in using the tag <style> </style> that must be inserted directly in the <head> of the document.

The code inside the tag will be the same as that of a normal CSS. So we will have something like this:

<style type=”text/css”>

@page {

padding: 0pt; 

margin:0pt

}

body {

text-align: center; 

padding:0pt; 

margin: 0pt; 

}

</style>

It is important that the “type” is defined as text/css because this way we are telling the device to interpret the code as a normal stylesheet.

In this case I took the code from the cover page. Since we previously set the page with a 5pt margin, now we are overriding that property and saying that instead the cover page will have a 0 margin so that if the image has the right dimensions it will cover the whole screen in height and/or width.

Images in the CSS file

We can also modify some properties of the images present in the text and marked with the <img /> tag.

Keep in mind that if you use “img” you will apply the style to every image in the document, including the cover, so choose wisely which attributes to apply.

Usually you can find this code by default:

img {

max-width:100%;

}

Which refers to the maximum width of screen space an image can occupy. If it is 100% it means that the image can occupy at most the whole width of the screen (this way it will not be cropped). 

You can align images so that they are positioned to the left or to the right of the text, and you should do this if your images are big enough to be readable on small screens.

You use the property “float” left or right.

For this kind of alignment it is better to create a special class and not to influence the img selector directly, because it would end up applying it also to the book cover. Let’s create for instance the “floatleft” class:

.floatleft {

float: left;

padding: 1em;

}

In this case we have also introduced the property “padding”. Padding is the white space inside a certain block (text, image, etc.) and in this case it makes sure that the image and the text are not too close together.

The difference between padding and margin is that padding is inside the border, while margin is outside the border. For padding too, there are top, bottom, left, and right, like for the margin. The difference between the two is evident when a visible border is applied around the object. The padding will be the white space inside the border, the margin will be the space outside the border. And in some cases it will be necessary to define both.

The border is inserted with a string of this type:

border: 1px solid #0000;

where 1px indicates that the border has a thickness of 1 pixel, solid indicates that it is a continuous line (it can also be dotted – or dashed – or double), and #000000 indicates the color (black in this case).

As with padding and margin, border can also be applied to all four sides or just one. For example, if you want your chapter titles to have a visible bottom border you would apply the style like this:

border-bottom: 1px solid #0000;

 and the result will look something like this:

What if the image is too big and we want it not to occupy the whole screen but only half or a quarter?

We can define its height and/or width in percentage:

width: 50%;

which means the image will be adjusted to cover only half of the screen – in width (the percentage can be changed according to your needs).

The size of the image can also be expressed with fixed values in pixels, but this would mean that if the reader enlarges or shrinks the text, the image would always remain the same size and the aesthetic effect would not be the best.

If the image to be inserted is particularly large and it is important that it covers the whole page, then it is better to avoid the float and simply write:

margin: auto;

which will automatically position the image in the center of the page.

Once you have created the classes (or IDs if it is a single image) don’t forget to add them in the xhtml.

I have personally found that for the alignment to work properly it is preferable to apply the class to a <div> that contains the image rather than to the image itself, like this:

<div class=”floatleft”>

<img alt=”Image” src=”../images/Image.jpg”/>

</div>

Non-indented paragraphs

There are some paragraphs – particularly the first of each chapter – that should not be indented. But you’ve defined the style to have indentation. How do you deal with exceptions? 

There are two methods: one is to define a special .noindent class, like this: 

.noindent {

text-indent:0em;

}

But it would involve manually inserting class=”noindent” at the beginning of each chapter. Instead, there is another, more effective method – but it only works if you’ve followed the instructions so far, and if you haven’t put empty paragraphs between <h1> and the first paragraph of text.

And it consists of using two selectors: and p+p.

If you set p as not indented and p+p as indented, you’ll have a situation where the first paragraph won’t be indented but only the paragraphs following the first one will be indented (p+p). In this way:

p {

text-indent: 0em;

text-align: justify;

}

p+p {

text-indent: 1.5em;

}

And of course, if you have a date at the start of your chapter or if you have to apply the no-indent to other parts of the text, you will still go back to defining the class for the specific paragraph.

Okay. That’s it. I think we covered most of the things you need to format your text. Still one last part to go and then we are done!

See you soon! 😀

Leave a Reply

Your email address will not be published.