Jedisaber.com

.epub eBooks Tutorial - Part 1:

Formatting Your Source Content

Other information on ePub:

Reviews of software programs that read ePub files

Where to get books in ePub format

Introduction: What is ePub? | Part 1: Formatting your Source Content | Part 2: Prepare the XML Files | Part 3: Creating the Container and Adding Your Files

Formatting Your Source Content

Overview and Required Tools

Why am I talking about source documents? Because the end result--your book-- is only going to look as good as the code that goes into it. When I first created the ePub tutorial, I skimmed over creating the source document and just talked about the ePub format. After making and editing several ePubs for my own use, I have seen more and more that the HTML you start with determine how nice the final book looks.

Tools Needed:

A text or HTML editor. Anything that can edit text files, HTML, and XML. (Example: Notepad, Komposer)

Tools for cleaning up source documents:

Below are some tools for cleaning up the HTML/XHTML files often used for sources for ePub books. Cleaner source code will produce a better looking book. Most of the ePub readers right now only support basic tags and do strange and wonderful things when they see a tag they don't recognize. Whether you make an eBook by hand, or use a program to convert a text or HTML document to an ePub file, the cleaner the HTML looks, the nicer the final book will look. The fewer the tags in the source document, the better.

Tag Soup - cleans up HTML tags
Convert Files - converts various files from one format to another. Can be used to get your source document into HTML. (Can also convert straight to ePub, but the formatting of most automated tools is.... "interesting".)
Atlantis Word Processor - Atlantis is a word processor much like MS Word. Like Word, it can export to HTML. Unlike Word, it outputs clean HTML, and can also export straight to ePub, but can't edit existing ePub books.

I had a nice Windows program specifically to clean MS Word crap out of HTML pages... but I can't seem to find what I did with it. I'll keep looking and post a link here if I can find it again...

Creating a Document

Where to get content?

Well, that's really up to you. You can type it yourself, you can download text files from Project Gutenberg (Yes, they now have ePub as a download option. If you think the layout is ugly, keep reading. The beauty of ePub is that you can fiddle with it yourself to get the book to look how you want it to look.) Sometimes content will be in a Word Document.

See This Page for more places to get books in the ePub format, both for free, and to buy.

Important note: If you are creating these files in a text editor, be sure to save in UTF-8 format, not ANSI. (In notepad, this is an option under the "save as" box. Most readers will still open the book if you forget to do this, but you'll get errors when you check for them.)

What file extension to use?

For best validation results, source documents should have a .XHTML extension. HTM, HTML, and XML file extensions on your documents will work, but the official specs call for XHTML (Note, this is likely to change back to just HTML when ePub version 3 is implemented. I'll update the guide when that happens.) Some nit-picky reading programs might possibly have a fit if you don't have everything just right.

What HTML tags to use?

The ePub specification supports most (but not all) of the valid XHTML tags. For best results though, keep it simple. Not all readers will support all the tags and CSS that the official ePub spec supports. That, and the simpler the HTML, the nicer the book will look (not to mention it will be easier to edit.) The tags I recommend are:

<p> - for paragraphs. This seems simple, but some of the automatic conversion tools (or if you've saved as HTML from Word) put a bunch of <span> and other stuff in there. Sigil is really fond of trying to use <div> tags instead of <p> tags as well.
<h1> - or any of the heading tags, but I recommend to use the <h1> tag for the title and all chapter headings. We'll get into why later.
<li> or <ol> - for any lists.

That's really about all you need for most books. Yes, you can use <b> and <i> for bold and italics, but it's preferred to to that with CSS.
If you don't know anything about HTML, a good place to start is the W3C Tutorial

Follow this link if you want to know the full list of allowed tags.

Notes for specific reader programs

All reader programs SHOULD show everything perfectly if you use the styling recommendations here. Sadly, just because they should, doesn't mean they do. Like Microsoft making up it's own non-standard tags for IE, many companies that make ePub reading programs do things just a bit differently than what the specification calls for. Why? I don't know, probably has to do with the fact that they don't really want you to be able to read your books anywhere but on their program/device.

Nevertheless, if you keep styling to the minimum, your book will be readable in all readers. It might not look the way you want it, it might not be pretty, but people will be able to read it.

If you want to make different ePub files for different readers, check out the forums at Mobileread for tons of information on the quirks for your reader of choice.

Formatting your book with CSS

Speaking of CSS, that's where you want to do all your styling. It's the preferred way to stylize things in both XHTML and the ePub standard. (There are a very few reader programs out there that won't recognize CSS. Mot of them do by now though, and if you keep the HTML to the basics, the book will still be readable if the reader program doesn't recognize CSS.

Note: Although CSS is the preferred way to style books, there are quite a few reader programs out there that either don't support it, or only support some CSS. In particular, I've seen a lot of them that don't center the headings like the CSS tells them to.

Here's a CSS stylesheet you can use. You can either copy and paste it, or just steal the file from the sample ePub book I provide (more on the sample in Part 2)

/* Style Sheet for ePub Books */

/* Set margins at 2% (This gives a white border around the book) */

body {margin-left:2%;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:2%;}

/* Text indent will make a paragraph indent, like putting a tab at the beginning of each new paragraph
The margin settings get rid of the white space between paragraphs, again so it looks more like a book
The text-align line justifies the margins. If you don't want them justified, change it to left, or remove that line
You don't have to specify a font, but you can */

p {text-indent: .3in;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    text-align: justify;
    font-family:"Times New Roman";}

/* Here we make our headings centered
We've also made the headings the same font as the body text */

h1 { text-align: center;
    font-family:"Times New Roman"; }
h2 { text-align: center;
    font-family:"Times New Roman"; }
h3 { text-align: center;
    font-family:"Times New Roman"; }

That's it for the basics of styling ePub books. You can do more with CSS and different HTML tags. For that, I would encourage you to look up other resources on the net about HTML and CSS.

>> Continue to Part 2: Prepare the XML Files

Was this guide useful to you?

You can also follow my blog for updates on books I write, and also some ePub content: http://aarondemott.blogspot.com

Please consider donating a small amount to help pay the server costs. You don't have to, but if you would like to, I'd be very thankful!

Download this Guide

Download this guide as an ePub file

Comments? Questions?

If you have any comments, notice any bugs, or have any questions on any of the steps here, please e-mail me at: yoda47 (at) jedisaber (dot) com