ePub Formatting – How to Resize an ePub Image in Photoshop Before Inserting It Into an ePub

Images inserted into an ePub document should be sized correctly and have a resolution of 72 ppi. This blog article will show how to do that in Photoshop.

First, little background info about pixels and resolution. Resolution can be thought of as pixel density, that is, how many pixels are packed into a space. Resolution is measured in ppi (pixels per inch). Sometime you might hear resolution measured in dpi (dots per inch) but that is not technically correct. Dpi is a measurement used by your desktop laser printer, which print dots of color. Incidentally, if you using Photoshop to create an image that will be printed on your desktop laser printer, you’ll get the best-looking image by setting the ppi resolution in Photoshop to the dpi of the printer (which can be found in the owner’s manual)

Another resolution measurement that you should also be aware of is lpi (lines per inch). Professional printing presses print images that are composed of tiny shapes, usually circles. Lpi is the measurement that tells how many of these shapes getting printed per inch.

Your computer monitor and the viewing screen of an ePub e-reader cannot take advantage of resolution higher than 72 ppi. On-screen resolution is handled by a video driver, which results in a 72 ppi image looking exactly the same as a 300 ppi image. Any resolution above 72 ppi for an image simply increases file size, but does not improve the image’s appearance onscreen at all.

Printers, on the other hand, can take advantage of higher resolution. A 300 ppi printed image definitely looks sharper than the same printed image at 72 ppi. If I were to convert your book into the .pdf files for submission to a print-on-demand company, I would need to set the resolution of all images to 300 ppi. If you are a self-publisher, you would use a print-on-demand company to print and sell hardcopy versions of your book in the online bookstores such as Amazon. Most of my own self-published books are sold on Amazon as both ebooks and hardcopies printed by the print-on-demand company Lightning Source.

Now, here’s how you use Photoshop to resize your images for ePub and set the resolution at 72 ppi. All of this work can performed in the Image Size dialog box. Access the Image Size dialog box by Image / Image Size. Here is the resulting Image Size dialog box that will appear:

 

Photoshop Image Size Dialog Box For Sizing ePub Images

 

You are most concerned with Width and Height in the Pixel Dimensions box and the Resolution in the Document Size Box. The Width and Height measurements in the Document Size box tell how big the image would be if printed on a printer. You don’t have to worry about those measurements.

Set the resolution to 72 ppi (pixel/inch) and then set the Width and Height in the Pixel Dimensions box. An ePub image should not have its Width or Height Pixel Dimension set greater than 500 pixels. Images wider or taller than 500 pixels might not fit completely into the viewing screens of many e-readers.

Leave Scale Styles checked. If you have applied any styles in Photoshop to the image, you want those styling effects to be resized the same as your image.

Leave Constrained Proportion checked. This locks the width / height ratio when the image is resized.

Leave the Resample Image checkbox checked if you want to change image resolution without changing image quality. Resampling is the process of adding or subtracting pixel when an image is resized.

For the type of Resampling, select Bicubic Sharpener. Photoshop experts claim that this Resampling method produces the best results when images are enlarged or downsized.

Having set your image’s Width, Height, and Resolution correctly for insertion into an ePub document, you are now ready for the last step, which is to sharpen your image. The previous article in this blog explains how to use Photoshop sharpen in image for insertion into an ePub document.

After sharpening your image, save it by File / Save for Web & Devices. Here is the dialog box that appears:

 

Photoshop "Save for Web & Devices" Dialog Box For Saving ePub Images

Save the image as a JPEG and select Maximum Quality with a number setting of 100. Make sure the Image Size is set correct and Save it. “Save for Webb & Devices” automatically saves images at 72 ppi resolution. I prefer to do that in the Image Size dialog box and then sharpen the image. This way, I will avoid any surprises that might happen if you let “Set for Web & Devices” change the resolution.

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

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.