ePub Formatting – Hot Tips for Using Adobe InDesign To Create an ePub

This article will provide a number of great tips on using Adobe inDesign to create a polished and professional ePub document. This article is actually a continuation of the previous article, which contains a video showing from start-to-finish how to create an ePub from Adobe InDesign. I think you’ll find the video quite helpful if you are a little confused about Adobe InDesign.

 Don’t feel bad if you do not find Adobe InDesign to be intuitive. I don’t think any of Adobe’s products are easy to figure out for the first time. If you have familiarity with any other of Adobe’s products, you’ll recognize the familiar interface and user panels.

 Adobe InDesign is the best all-around publishing tool on the market. It has been adapted to publish in the ePub format and is a good tool for that, but could be better. The advantage of Adobe InDesign to create an ePub is that InDesign completely shields you from the underlying XHTML and CSS code which are the building blocks of an ePub file. If you are a strong web designer with solid HTML and CSS coding skills, you may want to use an HTML editor instead of InDesign to create your ePub. I personally like working with the code because it gives me more ability to customize the ePub file than I have within InDesign.

 Here are some InDesign tips for building ePubs that I have for you:

 –  First of all, upgrade to the latest version of InDesign. At the time of this writing, the latest version is CS5.5. Adobe has forced this upgrade on professional ePub designers like myself by configuring CS5.5 to create InDesign files that cannot be opened with earlier versions of InDesign, such as CS5. There is a work-around, but it’s a PITA. I hope Adobe doesn’t do something like this every 12 – 18 months or with other Adobe products that I use.

–  When bringing images into InDesign, it is best to do the image processing work yourself prior to. Incoming images are nearly always converted by InDesign to .jpeg. You should do that prior to importing the image. You may also want to sharpen, scale, and downsample (to 72 ppi) your images in Photoshop prior to importing into InDesign. This guarantees the image’s appearance instead of leaving the image processing work to InDesign.

–  InDesign’s initial settings should be set so that the InDesign environment most closely resembles an e-reader. Here are the correct settings:

Intent: Web (sets color mode to RGB and units of measure to pixels)

Page size: 600px wise by 800px tall and portrait orientation (most e-readers are about 600 X 800 px)

Uncheck: Facing pages and Master text frames. These options are appropriate for publishing in print but not in ePub. ePub “pages” for the same ePub document vary widely in size depending on the e-reader’s settings and size. In fact, it is probably incorrect to say that an ePub document even has “pages.”

 –  Create your cover image (the image on the first page of the ePub document is the cover image being referred to here) with Photoshop. You can do it right inside InDesign, but Photoshop allows you to do a whole lot more with that image.

–  Keep a good ePub editor handy for touch-up work to the ePub file when you are finished. Once InDesign has exported a file to ePub, it cannot be brought back into InDesign. You can, however, open the ePub file up in an ePub editor, such as Sigil, and do additional touch-up work to the ePub.

–  Another reason to keep an ePub editor handy (I really like Sigil) is that there are a few very basic and essential HTML/CSS styling techniques that have not yet been incorporated into InDesign’s capabilities. One noteworthy example is InDesign CS5’s inability to perform word-wrap around images or float images left or right. This has to be done writing the HTML/CSS yourself and using an ePub editor to add the code to the ePub file. There are quite a few other HTML/CSS limitations within InDesign that can be overcome by simply opening the ePub file in an ePub editor. If anyone reading this article came across any InDesign ePub creations HTML/CSS shortcomings which drove you nuts, feel free to comment on them here. Your feedback  is welcome and very informative.

–  You can control the layout order of items in an EPUB document by using XML tags available within InDesign. This topic is a little too involved to discuss here. I’ll go into this during another blog article. Stay tuned.

– Don’t worry too much about fonts. The font seen by the viewer will depend entirely upon what fonts are available in the viewer’s e-reader. Stick with the basic fonts and your ePub document will appear to viewers as it appears to you.

–  Use a URL shortener such as bit.ly for links to the Internet. Long URLs in an ePub eBook can easily “break” in an e-reader. Also, bit.ly allows you to track the number of viewers who clicked your link.

 There is a short list of tips for creating an ePub document within InDesign. Hope they were helpful to you. I have many more tips on using InDesign to publish an ePub and will post them in upcoming blog articles.

 Cheers.

Advertisements

ePub Formatting – How To Create an ePub with Adobe InDesign

Adobe InDesign is a great tool to create an ePub document. The user interface of InDesign shields the user from any contact with the actual XHTML and CSS code that make up the ePub file. This is perfect for anyone who is not a skilled HTML or CSS designer.

Adobe InDesign does an excellent job when the manuscript has straight-forward formatting and therefore does not require skilled CSS code. A manuscript that is primary paragraph-formatted text with just a few images is a prime candidate for InDesign.

When I have to create an ePub document that has complicated or difficult formatting, I find an HTML editor such as DreamWeaver or Microsoft Expression Web to be a better choice than InDesign. An HTML editor allows direct access to the HTML and CSS code, which expedites implementing the difficult formatting. It is always important to keep in mind that an ePub document is actually a mini web site complete with pages of XHTML, a CSS style sheet, and a folder of images or links to images.

Having said that, InDesign provides a convenient WYSIWYG (What You See Is What You Get) interface that allows the user to make changes and view the results without ever writing code. InDesign’s ease of use and WSYWYG interface has made InDesign the most widely used ePub creation tool.

Here is a detailed, 10-minute video that provide step-by-step details about how to create an ePub document in InDesign from start to finish. This video covers a lot of material quickly. You make have to pause the video a few time to catch everything:

(Is your sound turned on?)

The next blog article will provide a number of tips to follow when using InDesign to create your ePub.

ePub Formatting – How To Create an ePub Table of Contents Page With Bookmarks

An epub document should have two separate tables of contents. The first table of contents is built-in to the epub file. Creating this table of contents is described in the blog article right before this one. The second table of contents that should be included in an epub document is simply a page of bookmarks that link to each TOC entry. This is just a page of content within the epub document that lists all table of content entries as clickable links (bookmarks).

This table of contents is something that you will have to create. This TOC can be created automatically (almost automatically, anyway) with InDesign. This blog article will show how to create the bookmarks by writing the underlying XHTML code. You always have to keep in mind that an epub document is actually a mini web site, complete with pages of XHTML code, a CSS stylesheet, and a folder containing all images or links to the images.

There are a couple of good reasons to create this TOC page of bookmarks in your epub document. Probably the main reason is that Amazon Kindle requests this TOC to be included in the epub or mobi that you upload. Maybe just as important is that many readers will enjoy having this TOC option available so they can create more room on their viewing screen by closing the navigation pane containing the built-in table of contents.

Let’s get right to it. Your table of contents page will simply be a collection of bookmarks. Each bookmark is a hyperlink which is linked to the correct place within the epub document.

To edit XHTML code in an epub file directly, you will need to open the epub document up in an epub editor. Probably the most popular epub editor is Sigil, which is available as a free download. Just Google “sigil” to get the download link.

When you have opened up your epub file in an epub editor, you can write the code for this TOC, which is just a collection of bookmarks. To create a working bookmark in an epub document, there are two pieces of XHTML code that you will need to write. They are:

1)      The Hyperlink appearing on the table of contents page.

2)      The Bookmark at the location in the epub document that the Hyperlink references and links to.

Suppose that you wish to create an entry in your TOC that will to link to the beginning of Chapter 1. You will have to open up the page within the epub document that will hold the table of contents. Open this page within the XHTML editing window so you can directly type in the XHTML code for this bookmark hyperlink.

Generically, the XHTML code for the hyperlink is as follows:

<p><a href=”../Text/page_name.xhtml#bookmark_name“>Chapter 1</a></p>

page_name.xhtml is the name of the page that your bookmark links to.

bookmark_name is the name that you have assigned to that bookmark.

Chapter 1 is the clickable anchor text on the tabel of contents page that will be seen by the reader.

All pages of content in an epub file will be in the Text folder. The Text folder exists in the root directory of the epub document.

Generically, the XHTML code for the for the bookmark is as follows:

<a id=”bookmark_name“></a>

bookmark_name is the name that you have assigned to that book mark.

Place this bookmark at the top of the page on which the bookmark appears. It is best to place this bookmark direct after the <body> tag. No matter where you place the bookmark on the page, the reader will be taken to the top of the bookmarked page after clicking the hyperlink in the table of contents. You might as well place all bookmarks right after the <body> tag on their respective pages. They will be easier to find if you need to go back in and edit them.

One other tip is to give the bookmark the same name as the page, so that page_name and  bookmark_name are the same. That little step will simplify everything just a little bit.

You can indent first, second, and third level TOC entries differently by placing hyperlink inside a paragraph tag and applying a CSS class to that paragraph that indents the bookmark by specifying a large left margin. An example of the hyperlink enclosed within paragraph tags is as follows:

<p><a href=”../Text/ page_name.xhtml # bookmark_name “>Chapter 1</a></p>

Now apply a CSS class to paragraph that adds additional left margin and therefore indents the paragraph.

You can style the hyperlink’s anchor text that the reader sees any way you want by placing them within span tags and applying a CSS styling class to the span tags that enclose the anchor text.

An example of the anchor text enclosed within a span container is as follows:

<p><a href=”../Text/ page_name.xhtml # bookmark_name “><span>Chapter 1</span></a></p>

Now apply a CSS class to that span which styles the enclosed anchor text.

Once you have created all of your hyperlink-bookmark pairs created, open your epub file in an e-reader, Adobe Digital Editions for example, and click on each TOC link to ensure that they all work.

One curious note is that these TOC bookmark hyperlinks will not appear to work when viewed in the Amazon Kindle preview window that is presented right after you have successfully uploaded your new .mobi file. If they work in your e-reader, then they are functional.

ePub Formatting – How To Create an Entry in an ePub’s Built-In Table of Contents That Does Not Appear Anywhere Else In The ePub Document

You’ll view an ePub’s built-In Table Of Contents whenever you open the ePub file up in an eReader. For example, if you open an ePub in the well-known eReader Adobe Digital Editions, you’ll see the built-in Table Of Contents in the the left pane in the eReader.

An ePub’s built-in Table Of Contents are always hierarchical. Typically chapter titles appear on the first level, subchapter titles appear on the second level, and so on.

The H1, H2, H3 header tags determine what level each TOC entry will assume. If you open up an ePub file in an ePub editor such as Sigil, you can view the XHTML code which creates the content of the ePub. Always keep in mind that an ePub document is really a mini web site, complete with pages of XHTML code, a folder containing images or links to images, and a folder containing a CSS style sheet.

Once you’ve opened your ePub file in an ePub editor such as Sigil, you will notice that chapter titles are usually enclosed within H1 header tags. Any text within an ePub file enclosed within H1 header tags will be assigned to a first-level position in the built-in ePub table of contents. Any text within an ePub file enclosed within H2 header tags will be assigned to a second-level position in the built-in ePub table of contents. The H3, H4, etc. headers follow the same pattern.

Once you have enclosed text inside of one of the header tags, you may apply a CSS style to that tag to achieve the styling and appearance that you want for that text.

In most eBooks, it is desirable to have entries in the ePub’s built-in TOC that do not appear within the text content of the ePub. For example, you may want a first-level TOC entry linked to the Title Page and called “Title Page” within the ePub’s table of contents. You probably do not want that same text – “Title Page” – to appear anywhere on the actual title page in the ePub document.

There is an easy and quick way to achieve this. You can make an object invisible on a page by simply setting the object’s CSS visibility characteristic to “hidden.” You can implement this by applying the following CSS class to any object.

.Hidden_Visibility {
visibility: hidden;
}

If you apply this CSS class to any H1-tagged text, you have created a first-level ePub TOC entry that will not show up on the page which holds that text.

ePub Formatting – How To Add Drop Caps To Your ePub Content

Here is a nice touch that adds a little dash of pizzazz to your epub ebook. With just a little bit of CSS, you can turn the first letter of the first paragraph into a “ Dropped Drop Cap.”

Drop Caps have been used for centuries to set off the first letter of a paragraph or chapter. The Dropped Drop Cap is simply the first letter of a paragraph greatly increased in size and lined up evenly on top with the text next to it.

A true Dropped Drop Cap fits inside the paragraph and does not extend past the left margin of the paragraph.  A Drop Cap that extends outside of the left edge of the paragraph is called an “In Margin Drop Cap.”

The Dropped Drop Cap in an epub document looks like this:

Dropped Drop Cap Inside an ePub Document

Dropped Drop Cap Inside an ePub Document

If we open up the style sheet for this ePub file in ePub editor Sigil, we can see that the two styles used above are written as follows:

This CSS styling class was applied to the entire paragraph.

.No_Indent_Paragraph_Left_Times1 {
 font-family: “Times New Roman”, Times, serif;
 font-size: 1em;
 color: #000000;
 margin: 0em 1.5em 1.2em 8em;
 text-align: left;
}

This CSS styling class below was applied to a span that contained only the first letter (D).

span.dropcap {
float: left;
font-size: 2.7em;
line-height: 0.8em;
margin-bottom: -0.1em;
}

That’ll do it. Pretty easy, huh?

It is very simple to do this with an HTML editor such as Dreamweaver or MS Expression Web (my choice). It is much more difficult to do this with Adobe InDesign. If you created your epub with InDesign, you can open the epub file up in epub editor Sigil and add the CSS styles shown above into the existing style sheet.

ePub Author Question – What Is EPUB?

EPUB (which stands for Electronic Publication) is today’s eBook standard format. EPUB was developed by the IDPF (International Digital Publishing Forum). EPUB files always have the ending (surprise!) .epub. e-Readers usually read .epub files.

An EPUB file is, for all practical purposes, a mini web site and EPUB e-Readers “view” EPUB files in nearly similar to the way that Internet Explorer “displays” a web site.

Just like a regular web site, the content pages of an EPUB file are written in XHTML code. And, like most web sites, an EPUB file also has a CSS style sheet along with and images folder full of .jpeg, .gif, or .png images. An EPUB creator should be skilled in writing HTML and CSS.

The EPUB format has the following major characteristics:

– EPUB is an open standard that is free. 

– Text is an EPUB document can reflow and resize to adapt to the size of the e-Reader’s display and also conform to the font-size settings that the viewer has set on his or her e-Reader. Reflow has nearly the same meaning as the term “word wrap,” which occurs whenever text size or screen size are changed.

– Images are usually shown “in line” with the text. Images can also be positioned using basic CSS, such as “float left or right.” Images appearing in EPUB filess can be raster (.jpeg, .gif, or .png) or vector-based.

– CSS controls all styling in an EPUB document. Each EPUB document contains a cascading style sheet with all of the styles and formats that are used used in the document. An EPUB creator needs to be highly skilled at writing CSS.

– EPUB documents can containing “metadata.”  Metadata is embedded, useful information about the EPUB file such as the author’s name, the eBook’s ISBN, and date of publication.

– EPUB documents should to be “validated” before they are uploaded online book stores. Validation is the process of verifying that the EPUB file conforms to the current EPUB standard set by the IDPF. Most online book stores will reject an unvalidated EPUB file.

– EPUB supports Digital Rights Management (DRM). DRM refers to technology that allows copyright holders, publishers, and hardware manufacturers to control access to digital content. DRM is one way to authors receive compensation for the promulgation of their material.