Sigil tutorial – How to make epubs

When I first started doing epubs, I have been somewhat disappointed on the tutorial to make them, making a simple task in a hard road to understand what I had to do.
I will now try to make up on that by trying to correct this flaw !

What is an epub ?

First is to understand on what we are working. The epub is a file format made to be read on mobile device containing mainly a text document. Illustrations can be added, and since epub3 other medias like audio and video.

Now let’s take a look on its core. Go fetch a epub at random on the web (or in my library). For this example, I’ll take Iris on Rainy Days.
Now click on it, and unzip it. Yes, I said to unzip it ! That’s the first thing to know. An epub is actually a zip-file renamed, so at any moment you can unzip it or zip it again.

You’ll be faced with this structure :

META-INF/
     container.xml
OEBPS/
     Audio/
     Fonts/
     Images/
     Misc/
     Styles/
     Text/
     Video/
     content.opf
     toc.ncx
mimetype

All folders in OEPBS/ aren’t necessary present, but this how it looks.
You will never bother with container.xml and mimetype files, and probably never with content.opf and toc.ncx. The first two are here so the epub reader can know that this zip is effectively an epub. The last two give explanation to the reader : toc.ncx is also the Table of Content, and content.opf will list all files, the book title, author, language, cover, etc… Every informations which is not actually part of the reading experience.

Now, the other folder in OEBPS contain the actual content of the ebooks. Text/ will contain the chapters, Images will be the illustrations and so on.

Now, the text chapters aren’t actually text chapters, but HTML files. How, so I hope you know what is HTML

What is HTML ?

If you’re experienced with it, you can skip the whole section of course.

HTML is what your internet browser receive to display an internet webpage. It’s a text which me actual text, and other bit of information on how the text should be displayed.
Here an example :
Hello all ! I'm <i>Armaell</i> and I <b>rock</b>

Will be understood by the browser as : Hello all ! I’m Armaell and I rock
What does it mean ? <b>, and <i> are tags with a meaning. They a removed by the browser at the display, and everything between is transformed accordingly. what is between <b> and </b> will be display as Bold and what is between <i> and </i> will be in Italic.
Also, <b> is the start of the bold section, and </b> is the end of the bold section.

Know, for doing an epub, the minimum you need is :

• <p> and </p> : Paragraph ( it will add space before and after the paragraph)
• <br/> : Alone, it BReak the line, since int HTML just hitting the ENTER key won’t change anything. This is robot for you, then don’t understand what is a break line without telling them it is.
• <b> and </b> : Bold section
• <i> and </i> : Italic section
• <center> and </center> : Center the text
• <h1> and </h1> : A chapter title
• <h2> and </h2> : A section title

Of course there is a lot more of them, some shouldn’t be needed for a basic book, or the other are more complex and you should follow a true tutorial on HTML.
Example of complex but useful : tables, list

Starting our first book from scratch and also opening Sigil

This tutorial has been made with Sigil 0.9.4

This is classic interface, so I won’t explain what the toolbar and so on, only what’s specific to Sigil. Also if you don’t all the panels that I have, go in the View top-menu, and check “Book Browser”, “Preview” and “Table of Content”

On the left, in the Book Browser you should recognize that this is the content of the OEBPS folder. You’ll get used to this structure quickly. You already have a text file created, named Section0001.xhtml and this is the one opened in the center.

On the center, it’s the content of the file actually opened. The question is : Why do i have content and not you ? Actually, you have ! By default, Sigil will open the file in Preview mode, which is what will be displayed to the end user. What I have, is the HTML that is contained in the file. To see hit, either hit the [F2] key, or go in the View menu and click on “Code View”. I will explain a little after what is all those things.

On the top right, you have the Table of Content which is for now empty. Later, in big book it can become useful for us.
On the bottom right, you have a preview. Pretty useless when you’re in the Book view in the center since it’s the same thing, but useful when you’re in Code view. Of course, you’ll be much of the time in code view.

HTML content explanation

Now, what is all this mess ?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>&nbsp;</p>
</body>
</html>

It’s actually the minimum making a HTML file, you’ll have to bear with it and not touch most of it.
The only two part important is <title></title> and <body></body>
The fist one can contain the title of the file. Often the title of the chapter and is displayed somewhere on the user device while he read the file. A little like in a book where the title is repeated on each page. It can remind of the reader where he is whenever he need.
Between the body tags, is the place of all the text the user will read. We will see later of the fill it.

Metatags

Metatags is all those informations that aren’t IN the books, but that will be displayed when added in a library or reader before opening it, or clicking an “information” button about the book.

We will first fill informations about the books, since doing it at the end is often risking to forget it.
Go in the Tools menu and click on Metatags editor.
It open a popup with two fields : dc:language and dc:title.
You can fill them, which will indicate what is the book title and language.

You can add new metatags with the button on the left. I advise to at least adding an author, but put as much you can.

Adding content

Now we will add content !
Go in the Book View (hit [F2] key), copy all the text below, and paste it in Sigil ! Then go back in code view.

Copy that :

Hello world !
THIS is a little content to show you how works the content of an HTML file
isn't it cool ?

You get that in Code view after pasting in Book view :

<p>Hello world !</p>
<p>THIS is a little content to show you how works the content of an HTML file</p>
<p>isn't it cool ?</p>

You added three line of text, each line considered as a parapgraph since they are each in there own and You can now try to add some <b> and </b> , or <i> and </i> and see in the Preview how it affect the result.

Also add a title between his tags <h1> and </h1>. Warning : it should’t be between a <p> and </p>.

Adding new files

To add new files/chapters, right click on the Text/ folder and click “Add blank HTML file”. It will create a new file with the minimal HTML in it.
To add an illustration, go in the position you want to add it. Go in Insert menu and click the File button.

Files semantic

Files can be attributed tags to help the reader understand what is each files. Your first most important one is the cover : Right-click on a image you added to Sigil, and click “Cover image” . Now when the book will be loaded into a reader or library, this image will be displayed directly as the Cover, neat !

The same can be done with text files, but there is a lot more choices. I let you open the menu “Add semantics” and discover what are your choices. The one that should be in every book is the tag “Text” which indicate where your main content start.

Generating the Table of Content

When you did all your files, you can create the Table of Content. This will be useful for reader to quickly from one point to another in your book.

Go in Tools menu and click Table of Contents. This dialog open :

Every thing you added between <h1> or <h2> tags will be useable to navigate in your TOC. You can easily see on the right part of the list if it’s an h1 or h2. Also it take the form of a tree. Each h2 is considered as a sub-item of the last h1. Don’t forget it when adding your h1 and h2.
If the dialog is emtpy. Then it means you didn’t added any h1 or h2 and you should do it !

Click OK and the panel on the right : Table of Content will be filled and is now useable by yourself too. Just double-click to go to an element.

Finishing the book

Alright, everything is reader ! What’s left ? Checking you messed nothing ! Hit the [F7] key or go into the Tools menu and clickon “Well-formed Check EPUB”.
On the bottom, a panel appear. If you get a “No problem found” then all is clear ! You can close it and be happy.

But not every time ! If you go errors, click on it to see where is the problem and try to fix it.

Going further

When you’ve aced everything I talked before, there is always path to improvement. The first one is of course to learn more about HTML.
The second one is to learn about CSS. And the last one is about Regexes

CSS

CSS make your bland book in something cool ! Let’s quickly try. On the Book Browser : the left panel, right-click on the Styles/ folder and click “Add blank Stylesheet”. It create you a new CSS file and open it. In it, add this text :

 p { color: green; }

A CSS file is here to decorate our HTML. So choose the HTML file that the CSS will decorate, and right-click on it and click on “Link Stylesheets”. Check the one we created just before and click OK.
Now you can check in the Preview panel and see how I have terrible taste ! All the text became green !
Well, of course you don’t just write that, but it was just so you can see how you add a CSS in Sigil, now it’s up to you to learn CSS.

Regex

Sigil support Regexes in his search and search and replace. It’s really useful to make a smart replacement and work quicker. I dont have more to say, up to you to learn about Regex.