Can Everton Jones find out how his father stole Emperor Bokassa’s diamonds and, more importantly, where he hid them; before the world and his brother get there first?
Click on the picture link in the sidebar to read an extract of my first novel, which was published by Paradise Press in August 2012.

Building an e-book: reference

How to build an e book using Sigil.

This page is VERY out of date, in particular it was written with an old version of Sigil in mind. I have written a series of interlinked blogposts on how to make an e-book using the latest version of Sigil and greatly expanded to include how to use markup to make your task easier, how to create an index, and a whole lot more. I also cover how to convert your e-pub to kindle, which is, arguably, more important. Please find the index to these posts in the sidebar. I will add a link to an introduction when this post sequence is finished.

(still working on getting this to display properly in Blogger/Firefox. If the screenshots are unclear, please be patient with me. There are rather a lot of them and I think I need to make the point size bigger in the Sigil window and then re-do them all. In the meantime, you could try zooming the window. Also the html codes for special characters doesn't seem to work consistently. Grrrrrr.)

Getting Started:

I’m assuming you have a word document which is properly formatted according to your house style rules. Here’s a copy of the paradise press house rules (link needed), which are pretty much normal for the UK publishing trade. You don’t need to strip out headers and footers.

Then I’d advise printing out a copy of the whole book as you will need to restore your formatting as you create the e-book and it’s useful to have hard-copy as a reference.

Next, download a copy of Sigil from here: http://code.google.com/p/sigil/downloads/list and install it. There is online documentation here: http://web.sigil.googlecode.com/hg/contents.html and it’s a good idea to read it. If it sound too technical, don’t despair, I’ll guide you through it.

Then open the application. You will get a new blank document. Save it as “.epub” (the only option!).

Notice on the toolbar the icon for “cleaning with HTML tidy”:

It should be turned on (highlited). I STRONGLY recommend NOT turning it off. It does some rudimentary checking and tidies up your code as you go along. If you make a mistake, it’s best to close the document and re-open it, rather than trying to sort it out as this tool then becomes a nuisance.

Also note these icons:

These switch between “book” view and “code” view. You are by default in “book” view (highlighted).

Now go to your first chapter in Word and copy and paste the text into the window from “book” view in Sigil. You will probably notice that all your formatting has been lost. It is all going to have to be put back in manually. (sorry!) My book looked like this:



Now switch to “code” view by clicking on this icon:

My first chapter looks like this in “code” view when first pasted in:

The “code” is “html” or “hyper text mark-up language”, which is used by web browsers and e-book readers. It tells them how to display the text (or “render” it) on the computer or e-book reading device screen. (actually, .epub uses a stricter form of html, called .xhtml, but that needn’t worry us too much.

Here’s a de-mystified account of the code view of my first chapter:
The very top part tells the browser or e-book reader which standard of .xhtml to use when rendering the page. DO NOT ALTER ANY OF THIS. If it is missing, copy and paste it. Be warned, the SLIGHTEST typing error will be fatal!
Next comes the “header” enclosed between <head> and </head> “tags”. The header is everything enclosed between these tags. I’ve highlighted it in blue. At the moment, it only contains a blank <title> </title> element. By default, every xhtml document needs one of these. Don’t worry about it, just don’t erase it!
After that, you will find a <body> tag by itself. There is a matching </body> tag at the end. Whatever lies in between the two constitutes the "body" of the document: the content of your chapter. Here I've highlighted the first paragraph:

In an exactly similar way, whatever lies between the two <p> and </p> tags is the first paragraph of the document.

And then the second:
And so on. (The blank lines do not matter, they won't be part of the final document, the e-book reader will only display what is enclosed between tags.

Hopefully, your file, like mine, will have a "body" which contains only a sequence of text, enclosed within <p> and </p> tags. (The “/” denotes a “closing tag”). If for some reason you have <div> and </div> tags instead, you must edit these using “find next” and then “replace” “div” with “p”on a case-by-case basis to match my example. ("edit/replace..." menu item) “replace all” seems not to work, and it could replace something which should not be replaced, so better to make sure and do them one-by-one.
Make sure there’s nothing extraneous at the end of the file. The whole of the “body” should consist only of one <p> tag after the other. Mine had a non-breaking space at the very end, which somehow got in there. I erased it.

The document should end like this. After the final paragraph there should be  just the closing </body> and </html> tags:



Now save as… .xhtml.

Formatting your File:

You are now ready to begin preparing your file to format it.

Firstly, you need to import the fonts you are using. I am using “Franklin Gothic Book” and “Corbel”. “control click” (in windows, right-click) on the fonts folder and select “Add Existing Items...” from the pop-up menu (the only option!).
Select the font file from the finder (or my computer in windows) and click the “open” button in the dialog which opened when you selected “Add Existing Items….”.
Do this for all the fonts. On my Mac, I had to use Font Book to make the fonts discoverable to the finder and then I copied and pasted them to the desktop. You will need to work out what to do in Windows for yourself. (if anyone reads this and can offer an explanation of what to do on a windows machine, I’d be grateful and will update this when I have the info.)

Now you need to create a “.css style sheet”. You could always ask me for mine, and I can email it to you. Then you can just add it to the “styles” folder, in the same way as you added the fonts to the “fonts” folder. Otherwise, you will need to type in the following EXACTLY as it appears. To do so, control-click (right-click) on the “Styles” folder and select “Add New Item” from the pop-up menu.
Enter the text and save. Here’s a copy of the entire style-sheet:
And here's a line-by line account of what is in there and what it does:










This part links the font "Corbel" to the style-sheet and makes it “discoverable”. If using a different font, just substitute its name for mine. To be honest, I copied this from a forum: http://www.mobileread.com/forums/showthread.php?t=61587 and substituted my own font names. I’m not sure about the syntax, but it seems to work fine. You will need to do this for all your fonts, as I've done here. Notice the path to the font folder:



The “../Fonts/” bit is important, it specifies the path to the font.

Now look at the next line:



This bit tells the program how to render the paragraph elements (enclosed between <p> and </p> tags.
The “p” tells the program that everything which follows between the curly brackets refers to the paragraphs. Then “text-indent” is an “attribute” which has a “value” of 15 points. This indents all the paragraphs of your chapter by 15 pixels. The “font-family” attribute forces the paragraphs to be displayed using “Franklin Gothic Book”. If that isn’t installed, then the next font in the list, “verdana”, is used instead. As a last resort, if “verdana” isn’t available, then “arial” is substituted. All computers will have arial, so some vestige of my lovely design is retained. Setting the “margin” attribute to zero removes the default space around the paragraphs and closes them up. Note that each entry in between the curly brackets has to end with a semicolon and that the attribute is assigned a value with a colon.

Next comes the “heading one” style:


In the chapter text, headings are enclosed by <h1> and </h1> tags. All that is important to note here is that the “visibility” attribute is set to “hidden” i.e. the heading is invisible, and that the point size is set to one pixel, so it doesn’t take up room on the page. This might seem an odd choice, but go back to my post “How to Build an e-book part 2” to see the rationale. <h1> headings are used by Sigil to build the table of contents.

The next line is a “class”:



Note the name, “.noindent” . All class names begin with a period. This class is used to force the first paragraph of a new scene or changed point of view to be unindented. I will show you how to apply this class to paragraphs later. The “text indent” attribute is set to zero, and the “margin-top” attribute is set to 15 pixels, to make a space before the paragraph, to emphasise the change of POV.

The next line is the .chapterNumber class:


This is used to format the chapter numbers. It has a “font-size” attribute set to 120%. This makes it 1.2 times bigger than the paragraphs. I’ve gone with a proportional size, so that when the user resizes the text in their e-book reader, the headings and chapter text retain their relative sizes. The “text-align” attribute does pretty much what it says on the lid, it centres the paragraph. NB note the spelling is American, “center” NOT “centre”.The program will ignore “centre”.

Then there is a class for the chapter headings:



I am applying this class to paragraphs. Again, refer to my blog for the rationale for this. Note that the name: “.chapterHeading” is case sensitive. You now know all the attributes used, except “font-style”. I think the value of “italic” doesn’t really need any further explanation.

The next class is called “.signs”:



All it does is make the text 80% as big as the paragraph text. This is to format text which represents a sign, such as “EXIT”, according to paradise press’ house style rules. The way it’s done is a bit messy, but it works. See my post how to build an e-book part 2, and also below.

I am applying this class to paragraphs. Again, refer to my blog for the rationale for this. Note that the name: “.chapterHeading” is case sensitive. You now know all the attributes used, except “font-style”. I think the value of “italic” doesn’t really need any further explanation.

Then I have a class called ".prelims":


This is used to format the text in the front matter of the book (the pages before the main txt which have the copyright notices, dedications, etc. The only new attribute is “margin-bottom” which, again is self-explanatory. NB “margin” as an attribute by itself is applied to the top, bottom, left and right margins as a whole, and is a shorthand.

And then the final class:



“.blockQuote” is used to make a space around quotations and set it in from the rest of the text.

Applying the formatting to your chapter

Once the style-sheet in in place, it has to be linked to the individual chapters. And the chapters need to have the various formatting manually added to the tags. The following example is taken from various parts of my book, but goes from the top to the bottom of a sucessfully marked-up chapter:
Again, the top of the page should be left alone. Then you need a link to the style-sheet, so enter this as the next line:
The next bit should be left alone, it closes the header and opens the body.
Then the next thing in the file is a paragraph containing the chapter number. The formatting is applied by adding “class=”chapterNumber” to the opening “p” tag like this:
Note that I’ve entered capitals, but the class forces them to display at 80% normal size. This is my dirty fix to get small caps. (using "small-caps" in css seems not to be consistently implemented, see my blogpost). Also note the double quotes. Be careful to use double and single quotes in the right places. Use my examples as a guide. Be equally careful to get commas, semicolons, equals signs and colons in the right places too. You have to get everything just right!

The next paragraph is the chapter heading. It is a paragraph, enclosed within <p> and </p> tags with the class “.chapterHeading” applied. See above for the syntax.

The class is applied to a paragraph. This ensures it formats as I intended on all browsers and e-book readers. Then the next item is within "heading one" tags. I have set up the style for heading one to make this invisible or "hidden". This item is only there so that the table of contents can be built. Note that the text within the tag, "1: The View from the Bushes" is not the same as the heading which is displayed on the page, "The View from the Bushes". This is another advantage of this approach, although there is another way to do this. See my blogpost: "How to build an e-book part 2". ALso, for some reason, Sigil adds the 'id="heading_id_2"' bit. I am assuming this is something to do with how it indexes the table of contents and am leaving it alone.
Next there is the first line of the book. It is set as unindented by applying the “.noindent” class.
Here, the text between the <i> and </i> tags is formatted in italic because it is in French. (house style).
This is an example of how small caps for a sign is implemented. It’s a bit messy. Firstly notice the <span> and </span> tags. They do nothing, other than to identify the text in between them, so that a class can be applied.
Everything in the paragraph up the the first <span> tag is formatted according to the paragraph style. The first “S” of the sign is in upper case. The “span” tags, then enclose the text which follows in small caps. I’ve capitalised the text, and the “.signs” class reduces the size by 80%.
Then there is the “W” in upper case for the first letter of Roger Williams’ name. It is outside the “span”, and so goes back to the paragraph formatting. Notice the leading space.
Next there is the capital " S" (with a leading space, although you could just as well have used a trailing space at the end of the preceding span); followed by the next bit of the sign, inside a span and with the “.signs” class to make the capitals smaller again. And so-on.

Finally, this is how I handle quotations:
 The “.blockQuote” class is applied to the paragraph and then I nest an <i> and </i> tag within the paragraph because the share certificate is in French.

NB, you can use a <b> and </b> tag to have bold text, but I think there should be a very good reason for using bold text in a novel.


The last bit of the file is just the closing tags for the body and the html code:
 And that’s it. If you have special characters, such as < in your text, you will need to use special html codes, which you can find here: http://webdesign.about.com/od/localization/l/blhtmlcodes-ascii.htm and here: http://webdesign.about.com/library/bl_htmlcodes.htm . Sigil might have put them in for you.

Now save the chapter. You can give the file a meaningful name by control/right clicking on the chapter name and selecting “Rename” from the pop-up menu.
Now you can create a new chapter by clicking on the “Text” folder and this time selecting “Add New Item”:

Hopefully, you will get the header information automatically filled-in for you. This is what I got when I looked at my new chapter in code view:

As you can see, the header is all correct, but there is a nonbreaking space at the end, which needs to be edited out. If you don't get this, don't despair, just go back and folow the steps above. Then, when the header is right, go back to book view and paste in your next chapter and then apply the formats, etc. etc.

If the chapters are in the wrong order, just click and drag them into the right place. (It may take a bit of practice to get this working smoothly, but it does work well.)

Now the front-matter (prelims) need adding. Folow exactly the same procedure, but make each a separate chapter. That way they won’t “run on” but each will have a separate page. I’ve used a class called “.prelims” to format the front matter. It is applied as follows:
Don’t put in a header, and that page won’t be included in the table of contents. If you DO want it in the table of contents, add a "heading 1" tag as above. It will not be displayed, because the h1 style hides it. If you want the heading to be displayed, use a paragraph tag and apply a “.chapterHeading” style or, if by now sufficiently confident, define your own class following my example.

A reference to html, xhtml and css can be found here: http://www.w3schools.com/ But beware that not all html can be applied to an epub document. The specification is available online: http://idpf.org/epub/30 but is rather technical, to say the least.

Finally, the cover image. All you need to do is load a picture into the “Images” folder following the same procedure as for fonts. Then type the following into your cover page:

Things to note here: Firstly, my file is called "cover art.png". It is referred to in the "img" tag as "cover%20art.png". I only typed "cover art.png" and Sigil added the "%20" to stand for the space in the file name. Maybe a single word file name would have been safer! Also not the path: "../Images/". This is required to let the program know which folder to look in. The “width” attribute is set to 100% so that it will expand to fill the whole width of the e-book reader’s screen. Unfortunately, this might mean it is too long to fit. Some readers cut off the bottom and don’t let you scroll down the image. I guess that will be fixed in time. The “src” attribute tells the program where to find the image. Note the syntax carefully. "alt" is an attribute which holds text to display if for some reason the program cannot display the image.

Now, you need to check the table of contents is correct by selecting “TOC editor…” from the “tools” menu. It is intuitively easy to understand.

Each entry corresponds to a "heading one" tag in your chapter. All are by default checked, and will be included in the table of contents. Unchecking a box omits the chapter from the table of contents. The check box at the bottom: "TOC items only" is be default checked. Unchecking it has the effect of removing unchecked items from the list. They haven't been erased, re-check the "TOC items only" box and the unchecked items will re-appear. "section0001.xhtml" is the new blank chapter I just added. It has no heading one tag and so doesn't appear in the list. Nor do the prelims files: "Cover.xhtml", "copyright notices.xhtml" and "Dedication.xhtml". To include an entry in the TOC for any of these, just ass an h1 tag to the TOP of the file. Putting it anywhere else will mean the user will not be directed to the start of the chapter when using the built-in index on the ebook reader they are using.

Now finally you need to enter the “metadata”. This just means the title, author etc. If this isn’t entered, you will not have a valid .epub file and it won’t load. To do this, just choose “Meta Editor…” from the “tools” menu and fill-in the first three fields:

That’s all you need for a valid e-book. To add others, just click “add basic” and choose from the list. I've added "publisher" for example.

ANd that's it, you've built a valid e-book. Click on the green "tick" icon to make sure.

Hopefully there won't be any error messages if you've followed the instructions carefully.




 
Twitter Bird Gadget