Book Design
Ebook Formatting – Part 4 – Let’s get to know Sigil

Ebook Formatting – Part 4 – Let’s get to know Sigil

For this part of the tutorial, you’ll just need two things:

– Your ePub file (see the previous part for how to generate this type of files)

Sigil, free software you can download from: https://github.com/Sigil-Ebook/Sigil/releases

Once you have installed the version compatible with your OS, you can start familiarizing with the interface.

First we need to check a couple of settings regarding the type of ePubs we are dealing with. In these posts I’m covering the ePub 2 format.

So you want to go to the menu Edit > Preferences… and click General Settings. Choose Create New or empty ePubs as: Version 2. Click OK, you can leave the rest to the default values.

Now you can open your ePub file and look around.

On top we have a horizontal menu (with File, Edit etc.) and below a lot of funny colored icons with all the different functions. We are not using the formatting ones because we’re going to do everything manually (it’s easier this way, trust me).

All you need for now are:

– Open (the folder icon used to open existing files)

– Save (the floppy disk icon to save your work)

Nothing else.

The interesting stuff we need is on the left side column, called “Book Browser”.

Here you’ll find the list of all files and folders inside your ePub file, the ones you see in the OEBPS folder we talked about in the first post.

The Text folder contains all your book chapters and other parts, and they have a .xhtml extension. On a newly converted book the names should be something like cover-page.xhtml, content0001.xhtml, content0002.xhtml, and so on.

If you double click on any of these files, you’ll see the content show up in the middle column (we’ll get to this later).

After the Text folder we have Styles. You can expand the contents by clicking the little arrow. Here you’ll find the style sheets that define the visual appearance of your text, including type of font, size, layout, etc. All files have the .css extension.

Below Styles we have Images, which contains the book cover and any other image included in your ebook.

Then we have Fonts, Audio, Video, and Misc, which are initially empty but where you can put everything you need to customize your book such as custom fonts and multimedia files (but keep in mind that not all reading devices support them).

Then we have the two files we already saw in the previous posts: toc.ncx and content.opf (we’ll get there at some point).

On the right column we have the Table of Contents, which is usually auto-generated when you convert your file, if you followed my tutorial and set all the proper headings. But if it’s not there or some titles are missing, don’t worry, we are here to fix things after all. 

If you click on the tag below that says “Preview”, you’ll get a preview of how your text will be shown on a reading device. It usually applies the style based on your installed browser, so it won’t be exactly what everyone will see, but at least it gives you an idea of the final layout.

I usually prefer not to apply a specific font since the different e-readers have their own fonts and some have different options, so that the users can choose what they like best. But we’ll eventually see how to embed a particular font for titles and other text parts.

Now back to the center column. When you open a chapter you see that the text is shown in code view, so you’ll see the actual HTML of the document. If you are familiar with HTML everything will be extremely easy for you, but even if you’re not, it’s not that difficult to understand and I’ll try to explain as best as I can.

HTML is a markup language based on “tags” which are sort of “labels” telling your device how to interpret a certain portion of text. (That’s the most down to Earth definition I could come up with lol).

Tags are written inside those hooked brackets, like this: <html> when you open a tag and </html> when you close it. Not all tags must be closed (we’ll see some of them).

Each part of the document has its own specific tag.

<html> contains everything that’s written in the HTML language, and it’s very important for it to be on top and at the end of the file </html>.

Tags can be nested one inside another, just remember to close them every time.

Inside the <html> </html> tags we place the other parts of the page.

<head> </head> contains the metadata, that part of code that’s not visible to the reader but it’s needed to provide important information about the file. For example the page title (<title>insert title here</title>) and the link to the stylesheet. 

We’ll talk about the stylesheet later, but for now just know that in order to get the same layout on every page, each xhtml file should have a link to the same stylesheet. So you’ll have this code inside your <head> tag:

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

“href” is the attribute to show the file path – or where the file is located inside the ePub.

../styles/style001.css means something like, go out of this folder (the text folder where the xhtml file is located) and enter the styles folder, then look for the file called style001.css (this name is automatically given by the Writer2ePub plug-in, but depending on how you make your conversion it can have different names, or you can change it yourself).

Also pay attention to lower and upper case of file names and folders or you’ll might have errors and things not working.

After closing the </head> we need to open the <body> </body> which is where the actual text of your book goes and everything you’ll write here will show up on the page.

So in the end, this will be the structure of your html page:

<html>

  <head>

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

     <title>Chapter 1</title>

  </head>

  <body>

     The content of your chapter goes here

  </body>

</html>

If you need more info on how HTML works, there are plenty of tutorials online that will explain better than I could 😀

And I already talked too much for today. 

In the next part we’ll see how to start working on your content, and how to customize everything!

Leave a Reply

Your email address will not be published.