Wednesday, August 25, 2010

Make it Pretty

In the three quick lessons that you've tried so far, you've created a valid ePUB eBook and have tested it with your on-screen reader or reading device. It worked. But you've probably also noticed that it didn't look that great. Now we are going to add a file with six lines of type in it and add a line each to the .HTML and .OPF files. These eight simple edits will dramatically change the look of your eBook.

I've provided another test file for you at the eBook download site. This one is titled "StnGeorge.zip". Just click on the link and download the zip file. Once the file is on your computer, make a copy of it and change the extension from .ZIP to .ePUB. Then open the eBook in your on-screen reader (like Adobe Digital Editions). This simple parable, unlike the Aesop example, is a few pages long and has several paragraphs.

Here are the problems: The headline is at the left, the paragraphs are not indented, the paragraphs have space between them, and the type looks too crowded. Those are the things we are going to change.

Here's how:
  1. In your text editor create a new document. Copy into the document the following lines:
    body {}
    h1 { text-align:center; }
    p { margin:0;
    line-height:1.5;
    text-align:justify;
    text-indent:2em; }

    Save the new file with the name "styles.css".

  2. Open the file bridge.opf and edit the section called <manifest>. Currently the section looks like this:
    <manifest>
    <item id="content" href="content.html" media-type="application/xhtml+xml"/>
    <item id="toc" href="bridge.ncx" media-type="application/x-dtbncx+xml"/>
    </manifest>

    We will add one line before the close tag for the manifest as follows:
    <item id="css" href="styles.css" media-type="text/css"/>

  3. Open the content.html file. We need to tell this content file where to look for its styles. This information goes in the <head> element. When we add the single line the element will look like this:
    <head>
    <title>The Obstructive Bridge</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>

Save all the files and add them to the OEBPS folder in the .ZIP file. Change the file extension to .ePUB and open the new book in your reader. You've made a much prettier eBook with the addition of eight simple lines. In the future, you'll learn greater control over styles and eBook appearance. For now, though, you've create a great looking eBook with a minimum of effort!
Posted by at No comments:

Monday, August 16, 2010

Organize and Package

We have all the necessary files created to make an ePUB eBook. There are just two steps to making it readable on your eReader or in an on-screen eBook reader: Organize the files in folders according to the OeB 2.1 spec, and package them into a readable format.

Organization

The ePUB spec has very specific instructions on how your book needs to be organized in order to be a valid ePUB. This includes
  1. a folder to hold all the files
  2. the mimetype document
  3. a folder to hold the metadata (container.xml)
  4. a folder to hold the book files
Your file structure should look like this.

Does it have to look just like this? The practical application of the spec allows some variation to the way things are set up, but this is the preferred organization. If you are just getting started with eBooks or are planning to distribute your books through a company that validates the code (like iPad store) stick with the recommended format and don't vary. You might as well do it right from the beginning.

Packaging the file

This is a section that sounds convoluted, but a following these instructions will produce a valid ePUB book. The first thing you need to do is create an empty .ZIP file. .ZIP is a file packaging and compression format that puts all the pieces together in a single package.
  1. Create an empty .ZIP file. On the PC, right click in the directory you are working in. From the list of options, choose NEW:Compressed ZIP file. Name the file with your book's name.
  2. Drag and drop the META-INF folder, the OEBPS folder, and the mimetype file onto the new .ZIP folder.
  3. Right-click on the .ZIP folder and choose rename. Change the extension to .ePUB. A message will pop up on your screen saying that changing the extension might make the file unreadable. That's okay. Do it anyway.
Yes, you have an .ePUB eBook now. Really. Open the new file with Adobe Digital Editions or another eBook reader on your computer, or put it in your eReader library and synchronize with your device. That really is how an ePUB is created. You can use the sample files from the previous lesson to test this by simply changing the .ZIP extension to .ePUB.

Is this really all there is to it? Of course not. In the next lesson, we'll talk about making it look pretty!
Posted by at No comments:

Tuesday, August 10, 2010

Four Fiendish Files and a Header

Alas, nothing is as easy as it seems, and when it comes to ePUB, nothing even seems easy. Even though the HTML file that you created in the last lesson is a valid Web page, the Open eBook specification requires a header for the file that tells devices how to interpret it, and it requires four separate files that need to be created in order to package the book for reading. In this lesson we'll look at those small adjustments.

The XHTML header


This header information should be the same for all the content files in your document. It defines the document as a XHTML document and describes the character set and language that will be used. The code is very simple and should just be copy and pasted in place of the <HTML> tag in your content file.
<?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" xml:lang="en">

Anytime you create a new content file for your book, paste this code at the top, then continue with the same HTML as previously discussed. That's the easy part. Now on to the four fiendish files.

File 1: mimetype


When an eReader encounters a book with the .ePUB extension, the first thing it checks for is whether it is actually an eBook. Many things could be packaged into an eBook format, but they won't read without a mimetype file. This is one short line of text in a text document with no extension. Simply open your text editor and in a new file type:
application/epub+zip

Nothing else goes in this file. Save the file as "mimetype" and after you have closed it, edit the file name in your file explorer to remove the extension. You will get a warning message that changing the file extension might make the file unreadable, but that is okay. Just delete the four letters of the extension (including the period) and save the changes.

File 2: container.xml


This is also a very short text document with the .XML file extension. Only one part of this file will change for each eBook you create: the name of the third fiendish file. Copy and paste the following into a text document.
<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
<rootfiles>
<rootfile media-type="application/oebps-package+xml"
full-path="oebps/BookName.opf" />
</rootfiles>
</container>

The only part of this file that ever changes is the "BookName" which is the name of the .OPF file that defines your book. The container file tells the reader where the packaged eBook files are located. Save this text file and change the extension to .XML. Copy and paste the file into every eBook you create and just change the BookName to the current project.

File 3: The .OPF package file


The .OPF file is the one that defines what your book is, where all the pieces of it are located, and any information about the book (metadata) that you would like people to know. Metadata could include the ISBN, price, category, and a host of other information. For our purposes, we are going to create a .OPF with the absolute minimum information that must be included in order for the book to be considered a valid .ePUB file. This is a text file that contains XML elements that are defined by the Open eBook specification. The elements included here are the minumum set that are required. Once again, the term BookName is a placeholder used to define the specific files in your eBook.
<?xml version="1.0" encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="BookName001">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>BookName</dc:title>
<dc:creator opf:role="aut">Author</dc:creator>
<dc:language>en</dc:language>
<dc:identifier id="bookid">BookName001</dc:identifier>
<metadata>
<manifest>
<item id="content" href="content.html" media-type="application/xhtml+xml"/>
<item id="toc" href="BookName.ncx" media-type="application/x-dtbncx+xml"/>
</manifest>
<spine toc="toc">
<itemref idref="content"/>
</spine>
</package>

There is a minimum of three sections in the package file: The metadata, the manifest, and the spine.
  1. In the metadata you must include at least a title, creator, language, and unique identifier. Title is pretty obvious. Creator usually starts with the role of author. Other roles may also be defined, but we will not deal with those until a much later lesson. For our purposes, we are doing these lessons in English, therefore the language code is "en". We will look at other languages in the future. Finally, every book needs a unique identifier. This is referenced in two locations: in the metadata and in the <package> element opening tag. This is supposed to be a combination of letters and numbers that uniquely identify this eBook from every other eBook that could ever be created. In some instances, the ISBN number may be used. In other cases, commercial software will generate a random code for the book. For now, we will use the BookName and three digits. You can change the numbers for each version of the file you create.
  2. In the manifest, you will list every file that is to be included in reading your eBook. At minimum, the manifest will include the content file(s) for your eBook and the fourth fiendish file which will be discussed next. If your eBook contains multiple content files, graphics, fonts, or any other content, it will all need to be listed in this section.
  3. The spine lists the files that will appear in the Contents of your eBook. If you create a file for each chapter in the book, for example, each of those files will be listed in the spine.

The .OPF is both the most complicated file in the eBook package and in many ways the most important. Save the text file and change the extension to .OPF.

File 4: The .NCX Table of Contents


The .NCX file provides the reading system with navigation points in your eBook and is required to be a conforming eBook. It has a few header items and then a listed table of contents with the names of the files (or locations within files) and the display name for each. It is a text file with the extension changed to .NCX.
<?xml version="1.0" encoding="UTF-8"?>
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
<head>
<meta content="toc-example" name="dtb:uid"/>
</head>
<docTitle><text>Table of Contents</text></docTitle>
<navMap>
<navPoint id="1" playOrder="1">
<navLabel>
<text>BookName</text>
</navLabel>
<content src="content.html"/>
</navPoint>
</navMap>
</ncx>

This information provides navigation points for sidebar navigation in various eBook readers and for assistive technologies. It is a required file for your conforming ePUB eBook. Save the file as a text file and then change the extension to .NCX.

Those are the four fiendish files that are required in every properly formed ePUB eBook. If you are not sure you've followed everything, I've created a small ZIP file of Aesop's Fables that includes all the pieces you see in this post. You can download it at NWE Signatures eBook Samples where I'll continue to post samples from these exercises.

In the next exercise, we'll work on properly organizing and packaging the eBook.
Posted by at No comments:

Friday, August 6, 2010

Six tags you need to create an ePUB

I've been talking for some time about actually giving instruction on how to create your eBook and now it's time to get busy and do it. Most instruction sets I've found tell you everything you never wanted to know about xhtml before you ever get around to creating a book, but there are really only six xhtml tags that you need to know in order to set up your content. We're going to start right off by creating one.

First use a text editor. The simplest text editor you can get is best to start with. I use Windows Notepad for mine. You use a text editor instead of a word processor (Microsoft Word) because it does not automatically reformat text as you type. The first tag you will need is the <html> tag. That starts your document and at the very end of the document you will finish with the </html> closing tag. All tags come in pairs. The open tag is just the brackets and tagname. The closing tag includes a slash (/).

Second, the <head> tag encloses information about your book, not the book itself. Nested inside the head is the <title> tag. This is where you put the title of your book. We'll get to more sophisticated ways of using the header information in the future, but right now your file should look like this:

<html>
<head>
<title>My Book</title>
</head>
</html>

Even when you are creating complex books with hundreds of sections and sub-chapters, you will have these tags at the beginning of each xhtml or html document.

Now you are ready to put in your content. There are only three tags needed for the content. The beginning tag is <body>. It doesn't close until just before the closing tag. Everything else in your book is inside the body tag.

<h1> is the next tag and is used for your chapter heads. There are six different levels of heading available, but by-and-large it is safest and easiest to use the h1 tag for the top level of your chapter. Put the chapter name, number, or title after the opening h1 tag and then close the heading with the </h1> tag. Remember, tags (almost) always come in pairs.

Finally, each paragraph of your story must be enclosed in a <p></p> tag set. Here is a quick tip: In your word processor, before you put the text for your story in the text editor, do a search and replace for all paragraph breaks and replace them with the p tag. If you use a double-return to create space between paragraphs in your manuscript, replace the two together. For example: Replace ^p^p with </p>^p<p>. Then copy and paste your manuscript after the headline. It should come out looking like this.

<html>
<head>
<title>My Book</title>
</head>
<body>
<h1>Chapter 1</h1>
<p>First paragraph goes here.</p>
<p>Second paragraph goes here.</p>
</body>
</html>

Save the file as an html file (with the .html extension) When you look at the file in your directory, if it says .txt at the end of the name, rename the file with the extension .html. Ignore all warnings about whether it will be readable. Finally, double-click on the icon for your new book and take a look at it. It will open in your default Web browser. It won't look pretty, but it will be accurate, and you created this little Web page with just six tags. Easy, wasn't it?

Chapter 1

First paragraph goes here.

Second paragraph goes here.


In the next lesson, we'll create the two files that need to be included in your eBook and package it up so you can view it in your reader.
Posted by at 1 comment:
Subscribe to: Posts (Atom)