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!

No comments:

Post a Comment