.epub eBooks Tutorial
- Part 1:Formatting Your Source Content
Original Content: Home | Books | eBooks | Other | Links | Fan Content: Andromeda | Avatars | Anime | Dark Angel | Matrix | Pern | Stargate | Star Trek | Star Wars
.epub eBooks Tutorial
- Part 1:Reviews of software programs that read ePub files
Where to get books in ePub format
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.
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.
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...
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.)
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.
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:
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.
You can make hyperlinks in your ePub documents to enable one-click (or tap) navigation to a specific spot. You can do this by using normal HTML hyperlinks. Using hyperlinks in ePub books is complicated by the fact that the ePub specification does not give any usage guidelines on how to handle links.
iBooks, Stanza, and Adobe Digital Editions all handle it this way:
If you have an eBook with two files in it, say, "chap01.xhtml" and "chap02.xhtml", and they are in the same sub-folder in the zip file, adding a link is easy:
<a href="chap02.xhtml">Link title here</a>
Put that code somewhere in the chap01.xhtml file, and it'll jump you right to Chapter Two when you click (or tap) it. This is handy if you want to include a Table of Contents, or link to annotations or something similar. (Yes, if you use the TOC.ncx file, the ePub book will have a Table of Contents, but only through the menu. If you want one to show up as part of the book when you're paging through it, you have to make a separate page with links.)
Also, note that all links in ePub files are relative links. If your folder structure looks like this:
Mimetype
OEBPS
- title.xhtml
- chap01.xhtml
- chap02.xhtml
Extras
- annotations.xhtml
You can link between title and chap01 by just using the filename, not the full path. If you want to link from chap01.xhtml to annotations.xhtml, your link would have to look like this:
<a href="../extras/annotations.xhtml">link text</a>
(Please note that while you can put files in different folders like this, it's NOT recommended. And in case you're wondering, the ".../" part of that link means "go up a folder".)
Linking outside of the book can be interesting. The standard link:
<a href="http://www.jedisaber.com/">Link Text</a>
works in iBooks, Stanza, and Digital Editions. I'm not sure if it works in others, due to limited testing ability. (I don't have a Sony Reader or Nook.)
What if you want to want to link to a specific part of a file? Taking our example above, let's say chap01.xhtml has a reference to apple trees. Let's say chap02.xhtml has details on different kinds of fruit trees, each in it's own section, but all in the same XHTML file. Let's also say we want to provide a link in Chapter 1 that will jump straight to the section on apple trees in Chapter Two. If we just put a link in using the information in the above section, it will just take us to the beginning of Chapter 2, not to the specific section we want. How do we do that?
We have to do two things:
Adding a bookmark:
A bookmark in HTML is just what it sounds like. A small hunk of code that we can use to make a hyperlink jump to the exact part of an HTML file that we want it to. In our example, we would add the following code to chap02.xhtml just above where we want the link to go to:
<a name="AppleTrees"></a>
You'll note that a HTML bookmark uses the same markup tag as the hyperlink, but with a different identifier and missing all the linky bits. Note that the link text ("AppleTrees", in this case, can be anything you want.)
To make our link jump right to the section on Apple Trees, make the link in chap01.xhtml look like this:
<a href="chap02.xhtml#AppleTrees">Link Text</a>
Basically, you add #LinkName to the the URL in your hyperlink. The part after the # sign has to match the text you have in the Name attribute of your bookmark. Now when you click (or tap) the link in Chapter 1, it will not only link you to Chapter 2, but to the right spot in Chapter 2.
Note: If you want to link to a bookmark in the same file (for example, if you want a link in Chapter 1 to go to another section in Chapter 1) put a bookmark where you want the link to go to, and make the link look like this:
<a href="#BookmarkName">Link Text</a>
We leave out the filename because we're just going to a different place in the same file, so all that's required is the bookmark name.
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.
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.) If you don't just steal the file from the sample, make sure you save this file as a plain-text file with UTF-8 encoding, and make sure it has the ".css" file extension (You may have to tell Windows to quite hiding file extensions for this to work correctly).
Put the below code in a file called "Style.css" (Part 2 of the tutorial tells you where to put Style.css in the ePub file):
/* Style Sheet for ePub Books */
/* Set a border around the whole page */
body {
margin-left:2%;
margin-right:2%;
margin-top:2%;
margin-bottom:2%;
}
/* Center and space chapter headings */
h1 {
text-align: center;
padding-top: 1em;
padding-bottom: 2em;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
/* For paragraphs, indent, don't put space abobe or below, and justify the text */
p {
text-indent: 2em;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:0;
text-align: justify;
}
/* Create a class for centered text */
.centext {
text-align: center;
text-indent: initial;
}
/* Create a class for section dividers, and center it. */
.secdi {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
/* Create a class we can use for quotes, and indent it. */
.pexcer {
text-align: justify;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 3em;
margin-right: 2em;
font-size: 0.9em;
}
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.
The above code will make your book look a lot nicer, but we also have to tell each page where to find it. To do that, but the following code somewhere between the <head> and </head> tags in every .xhtml file that makes up your books content:
<link rel="stylesheet" type="text/css" href="../Styles/Style.css" />
The CSS file takes care of the general look of the book, like how paragraphs look, and chapter headings and such, but books have a lot of elements. I'll go over a few common design elements here, but it's a big topic, and more than we can really cover. Google book design and layout for more information.
Section break spacing:
This is what's used to separate sections within the same chapter. In novels, you
often see them when the point of view changes mid-chapter. In printed books,
these are either little doodles, or asterisks. As the article states, keep these
simple.
For a small image, use the <img> tag.
I recommend just using asterisks for a few reasons. They'll re-size along with
the text, and they take up a lot less space than an image, thus making the book
open faster. To make them look fancy, include a blank line above and below, and
center them. The HTML looks like this:
<p> </p>
<p align="center">***</p>
<p> </p>
You could center this by using CSS code, but this is the easiest way to do it,
and not all ePub readers support CSS. :( (In case you're wondering, the " "
is the HTML code for a blank space. The reason that's in there is because some
browsers ignore empty paragraphs, and we want them to show up to set off our
section break.)
<img src="picture.jpg"
alt="Chapter Title" align="middle">
Chapter heading space:
Same code here we used to space out our section breaks.
<p> </p>
Styling:
You can do this in CSS, but in the interest of simplicity, and the fact that the
average novel doesn't have too much of this use the below code:
Bold: <b>Sample text</b>
Italics <i>Sample text</i>
You can use a few other tags to bold and italic text as well. For a more
complete discussion on that, just Google "Bold in HTML" and enjoy reading pages
of discussion on why one should or shouldn't use a certain tag.
Cover Images:
Your code should look like this: (for more on where to put this code, and a few more notes about cover pages, see the next page in this tutorial.)
<h1 align="center" title="Cover">
<img alt="Cover" height="100%" src="../Images/Cover.jpg"/> <br/>
</h1>
Why all that for a cover image? Let's take it one part at a time.
<h1></h1>
This is a heading tag. You'll note that above I've said to use this for Chapter titles. Why use it for the cover image?
Well, you don't have to. But, if you're using Sigil to make your ePub file, this will put an entry for the cover page in table of contents.
<img>
The img tag is what displays an image in the book. In this case, the cover. (More on images, and where to place them in the ePub file on the next page.)
The alt attribute is what the browser (or eReader) will display if it can't display the image for whatever reason.
SRC is the path to where the picture file is.
Setting a height to 100% will make the cover image scale up or down to fit the screen size of different eReaders.
What about that <br /> nonsense? That's there to pacify cranky HTML interpreters. Some browsers and eReaders don't like to have just an image inside that heading tag. They want text in between those tags. But, we don't want text, we want our picture. That's what the is for. That's the HTML code for a "Non-breaking space". It's just a regular space, something's there now, but we don't see it. Everybody's happy. (The <br /> is there so the space is below the cover, instead of next to it so it doesn't get thrown off-center.)
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 as an ePub file
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