May 04

Print this Post

HTML and CSS for E-book Self-Publishers, Part 1: Introduction

CoverWhen I first discovered how e-book formats work, it came easily because I have been writing web pages since the days of Netscape Navigator 3.0, which Google and Wikipedia conspire to tell me was 1996 (I don’t see any point in mentioning how bad some of them were). It makes sense, when you think about it. Why develop a new technology for e-books when a suitable one already exists?

What I’m trying to get around to saying is that most of the more prevalent e-book formats — Mobipocket, EPUB, Amazon AZW and KF8 — are simply a collection of web pages, and your e-book reader is a specialized browser. A rather dumb browser in many ways because it can’t play Flash or run Java applets … yet. Several other formats, and I’m going to pick on Microsoft’s LIT here, are different, but still have the same underpinnings. Incidentally, I think the first thing a person should do with a LIT file is convert it to something else.

Why do you care?  I don’t know.  But I know why I care: First, knowledge of the inner workings of e-book documents can arm a self-publisher with vast power over the appearance of the final product, and, second, even though my word processor (I use Word Pro) exports to HTML, which can be directly converted into various e-book formats, a book never converts 100% correctly and I have to do some hacking to make it right.  If you don’t care about either of these, perhaps you care about something else.  If you don’t care about anything related to this post, now might be a good time to stop reading.

It is important to understand that even if an e-book format is based upon the web page paradigm, different formats support different capabilities, different tools support different functions, and different readers support different formats. For example, Mobipocket has a provision for Javascript, which allows a document to actually do something. Sigil, an EPUB editor that we’ll look at in Part 4, supports some of the features of the latest EPUB standard (version 3), but not all. However, even if a tool such as Sigil doesn’t directly support a feature, it may be possible to implement it yourself with direct editing of the e-book code, as I did in the example below. The most glaring case of omission is the sad one of the Amazon Kindles, which do not recognize EPUB, probably the most widely supported format in the world. Fortunately, the most critical features for e-book publishing are fairly common across formats and platforms.

Because EPUB is so common and widely implemented, it will be the format I use in this series of blog entries. There are enough examples on the Internet already of how to create an EPUB e-book using tools like Sigil, so I won’t do that myself. What I will do is expose some of the inner workings of the format for people who need to do a little more. The outline will be as follows:

Part 1: Introduction

What you are reading now.  There is no need to elaborate.

Part 2: HTML, XML, and Both

HTML (Hypertext Markup Language) is the basic language of web pages, and describes the content to be presented.  This part will introduce the essential tags for an e-book document and how to properly specify attributes.

Part 3: CSS

Where HTML describes the content, CSS (Cascading Style Sheets) describes the presentation. This is where I introduce the example I mentioned above:

CSS Example

First, a caveat: this is not from a real story.  I just conjured up the image and tapped out some words on the keys.  So don’t complain about my writing (it’s a first draft, after all), and don’t ask what happens.  I don’t know who Bekka and Laurie are, and I have no idea what just took place.  But that aside, you’ll probably notice chapter title formatting and the drop cap.  Neither the image for the divider in the chapter heading nor for the drop cap appears in the HTML at all; it’s described by CSS.  I’ll show you in Part 5 how I did both of these effects.

Part 4: EPUB and Sigil

Here I’ll explain the basics of the EPUB format, especially how it is organized.  Did you know that an EPUB file is just a renamed ZIP file?  The important part is what is zipped up in it.  I’ll also describe how to use Sigil to make manual changes to your document.

Part 5: Some Examples

Besides the chapter heading and drop cap shown above, I’ll try to think of some other cool effects.  Between now and then, if you have any suggestions, let me know.

It is important to understand that after this series is finished, you won’t be an expert in any of the above topics.  In fact, I wonder if it is possible to be an expert in HTML and CSS.  I’ve been doing it for almost 20 years and still pull my hair out from time to time.  If you require anything sophisticated, hire a professional, but if you’re looking for basics to enhance your e-book appearance, I hope to have you covered.

Permanent link to this article: http://www.duanevore.com/html-and-css-for-e-book-self-publishers-part-1-introduction/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>