Book Design
Ebook Formatting – Part 8 – Design with Style

Ebook Formatting – Part 8 – Design with Style

The Style Sheet (CSS)

Here we are finally talking about these infamous styles.

If you remember what we said a while ago, in the <head> of each of the xhtml files you should have the following code:

<link href=”../styles/style001.css” rel=”stylesheet” type=”text/css”/>

which links to the style sheet called style001.css (or however it is named in your ePub). 

Now we can finally go to the Styles folder, double click on the .css file and see what’s inside.

CSS stands for Cascading Style Sheet and it’s a file that contains – written in a special language – all the information about the appearance of your book, from font type to size, spacing, alignment, and everything.

Let’s start with an example to see what the syntax looks like:

p { text-align: justify; }

The first letter, p (called selector) refers to the <p> tag that defines the paragraphs in our xhtml. All the features of p are then placed between two curly brackets { }.

The various declarations inside should be written with this syntax:

property: value; 

Always remember to put the semicolon at the end of each property or the code will not work.

In our example we have the declaration that text-align, which is the alignment of the text of each paragraph, must be justified. 

Properties and values are not made up: you have to use specific words that are defined by W3C standards (you can find the complete list at this link: https://www.w3.org/Style/CSS/).

Here we will see only the ones that are most used in ePub files.

Obviously, there is room for more than one property for each selector (tag), so for example our p could look like this:

p {

     text-align: justify;

     text-indent: 1.5em;

Here we already took a step forward, as you can see, this time the statements are indented and not all on the same line, this is because, as for html, it’s not important how the lines of code are arranged and indented, since it doesn’t affect how the code is interpreted, so for the sake of order and ease of reading we lay them down this way. It’s much more understandable than having a continuous string all on the same line.

Now let’s see what other paragraph properties we’ve defined here:

text-indent indicates the indentation of the text. The value is 1.5 em. Ok, you say, but one and a half what? What the heck is an “em”?

em is a unit of measure related to the size of the font used. 1 em means one character; 2 em means twice the size of a character; 1.5 em means one and a half character. It would’ve worked the same if we wrote px (pixels) instead, but using this type of measurement is better because in ePub readers, text can be sized up and down, and this relative measurement allows all other elements to enlarge and shrink accordingly as well.

Try to think about the fonts used in your word processor – “points” are usually used here. Let’s say the base size of your text is 10 points. If in the style sheet you set the chapter headings to be 2 em (2 times your base font) that means the headings will be 20 points. The same thing applies to spaces, indents, and margins. 

text-indent: 1.5em;

means that the first line of each paragraph will be indented by one and a half characters, in proportion to the displayed text size.

And on that note, let’s see how to make chapter titles larger than normal text and centered. Remember we said that titles should be marked by the <h1> <h2> etc. tags. 

Let’s start with h1:

h1 {

     font-size: 2em;  

     text-align: center;

     text-indent: 0em;

}

So to define the font size we use font-size and assign a value of 2 em. But if it seems too big you can also reduce it to 1.5 or 1.8 or whatever you prefer, the important thing is that it’s always 1 point something if you want to make the font bigger, and 0 point something if you want to make it smaller.

Then we use text-align (which we’ve already seen before) to align the text and tell it to put it in the center by typing “center”.

To complete the work, we also specify that the text must not be indented, otherwise it would all be moved 1 and a half characters to the right and would not be perfectly centered. So let’s write text-indent again and give it a value of 0 em.

Here we’ve already done the bare minimum to have a nice formatting. And without having to modify anything in our xhtml code. 

But let’s go one step further. We have our xhtml file which should contain some code like this:

<h1>Chapter 1</h1>.

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

<p>I couldn’t sleep. The alarm clock read 2:30 and wolves were howling in the distance.</p> 

Which, after the changes we made to the CSS will display like this:

Chapter 1

It was a dark and stormy night.

I couldn’t sleep. The alarm clock read 2:30 and wolves were howling in the distance.

There are a couple of things that immediately stand out.

First of all, the size of the title is too big. 

And here we’ll just have to change the font-size: 2em value to, say, 1.5em.

Another problem is that everything is stuck together. It could use some space in between.

The first instinct would be to go edit the html and insert a couple of white spaces manually with:

<p>&nbsp;</p>

but there is a better and neater way (and then you’ll also see why it’s preferable). 

If you have 32 chapters, it would be a pain to copy-paste <p>&nbsp;</p> 128 times just to put spaces between titles and text.

Why waste time when we have our own style sheet?

We can take advantage of a property called margin. Be careful, though, because there are four margins for everything: top, bottom, right, and left. So we must also specify which margin we want to change, because if we just write margin, all the margins will have the same size, while we want to put different sizes, because it looks better. 

First of all, let’s learn what the four directions are called: top – right – bottom – left. They are always indicated in this order.

Now, if we want our title to have white space underneath, we can add this statement:

margin-bottom: 3em;

This way there will be a white space about as high as 3 characters between the title and the first paragraph. In the preview we’ll see it like this:

Chapter 1

.

It was a dark and stormy night.

I couldn’t sleep. The alarm clock read 2:30 and wolves were howling in the distance.

Definitely better, don’t you think? Then if 3 em seems like too little/too much you can always size it up or down, it’s your choice.

Here are some other things you can do with CSS:

Set text to bold:  font-weight: bold;

Set text to italic:  font-style: italic;

Define the style of links:

We said that in html links are indicated with the <a> tag. By default, links on the web are underlined and colored in blue. But we know that electronic ink devices at the moment are still in black and white, and blue on black and white comes out a not so readable gray. So we can tell our ePub to display the links in black like the rest of the text, by defining the property “color” and assigning the corresponding hexadecimal value (note: in html and css the color values can be expressed both in RGB and in hexadecimal, which is a series of 6 characters preceded by a hashtag); the one for black is #000000 – It’s not hard to remember.

So we write:

a {

     color: #0000;

     text-decoration: underline;

}

This way, all the links in the ebook will appear in black and underlined. If instead we want to remove the underlining, we will have to specify:

text-decoration: none;

– Add a property to the entire document:

Let’s say we want to establish that the whole document is displayed in a serif font and we don’t want to repeat it every time for every single selector. There is an easier way, which is to use the “body” selector (remember the structure of html? <body> is the tag in which the whole text is included). We can do it like this:

body { 

     font-family: serif;

}

We are not specifying a particular font because usually ebook reading devices already have default serif and sans serif fonts that they automatically apply to the text. Some also allow the user to choose between different fonts.

The font-family property will come in handy later when we talk about how to embed custom fonts.

Define page margins

Another important thing you might need when formatting an ePub is a way to add a bit of a blank margin around the page so that, when reading, the text is not all sticking to the sides of the screen. You do this by using the @page selector like this:

@page {

margin: 5pt;

This is one of the default values used by the conversion software and should normally be more than enough, since it tells the device to leave a margin of 5 points between the content and the edge of the screen (as we’ve seen before, 1 point corresponds to 1/72 of an inch and is the unit of measurement normally used for fonts in word processors). But feel free to change it to whatever you like best.

 I think it’s enough for today and next time we will see how IDs and Classes work for more customized styles.

Leave a Reply

Your email address will not be published.