When it comes to creating a fixed format ePub for iPad, using a template can take a lot of the guesswork out of the process. The iPad FixedFormat Template provided on the ePub page of our website www.yourscriptdoctor.com/ePub is set up for eight facing pages plus cover. (Of course, you can add more pages later, but stick with the eight pages to start.)

To work with the template you will need the following:

  1. A cover image (768px by 1024px) saved as JPEG named cover.jpg.
    2. Eight images for the book’s inside pages. These will include the images only (no text).
  2. A file of the text for the pages. This could be an HTML export from Adobe InDesign or other pagination application.

START WITH INDESIGN

In previous blogs we demonstrated how scripts could be used to export the pages of an InDesign document as JPEG images (ExportPages_JPEG script) and capture text frame positioning information (TextFrameInfo script). Assuming that your InDesign document pages are set up to display at a size compatible with the iPad, exporting pages as JPEG can be done as part of the process for exporting your document to HTML. The template assumes a page size of 768px by 1024px.

VIEW THE TEMPLATE

Before you get invested in the project you may wish to see what the template is all about.

Open the iPad FixedFormat Template folder. You will see two scripts at the top of the folder. These are open source scripts available on the web. They have been provided with the template for your convenience. Be aware that no warranty is implied for any scripts provided from our website, open source or otherwise. The first script, ePub Zip, converts a folder of files (such as provided by the template) into a compressed package compatible with the iPad (Zip format). The second script, epubcheck, checks the zip package for completeness and/or errors.

To test these out, drag the iPadFixedFormat folder onto the ePub Zip script. A file named the same as the folder with an .epub extension will be created. Drag the .epub file onto the epubcheck script. You should get a dialog saying that ePubcheck 1.1 reports no errors.

If this is the case, you can view the ePub on your iPad. (See Proof Your Book below, for instructions for viewing your ePub on an iPad.)

If this is the type of document you want on your iPad, follow the instructions below to substitute your graphics and information into the files provided.

CREATE YOUR EPUB

Step 1. Export from InDesign

If you are starting with an InDesign document, make sure that all text styling is done using paragraph and character styles (see last week’s blog). Use Edit All Export Tags (available from the Paragraph Styles panel menu) to assign HTML tags to your styles. Be aware that InDesign will not write styling information for a paragraph style into the CSS unless it has been assigned a class. Make sure to assign object styles to those text frames you want tagged in the HTML. Export the document as HTML.

Use the ExportPages_JPEG script if you want to export your pages as JPEG files. As part of this script, all text files are placed on a single non-printing layer. Capture the information about the text frames using the script TextFrameInfo.

Step 2. Substitute Your Images for Those in the Template

If you created your page images using the Export Pages_JPEG script, you will need to fix the name for the first image output (page0.jpg). Change it to read (page01.jpg). Substitute your files for the files in the template’s “images” folder. This might be a good time to add your file for the cover image (cover.jpg).

Step 3. Update the Template’s CSS File

If you have a CSS file created as part of exporting your original document as HTML, you can use the information there to update the template’s CSS file. Copy the styling information for the text (should start just below the body style selector and end just before img.frame-1). Replace the text styling information in the template’s CSS file.

Step 4. Update Text Positioning in CSS File

In the CSS file you will see a section with the heading “positioning for text”. Below this is a style selector for a text frame on each page of the document. Using the information from the FrameInfo.txt file created using the TextFrameInfo script, update the values for left (x-position), top (y-position), width (frameWid), and height (frameHgt). If you have pages with more than one text frame, add a style selector by copying an existing selector and updating its name (for example, from .pg01-txt to .pg0-txt2) and updating its positioning values.

Step 5. Update the HTML files

Open the HTML file created by your HTML export (source). Open one of the HTML files in the template (target). Rename the title for the target HTML file if desired. (HTML pages are currently titled using the name for the page.) Replace the paragraphs for the page’s text frame with the paragraph from your HTML export file (source flie).

For example the target HTML for the text on page one reads:

<div class="pg01-txt">
<p class="h1">Text for page one here</p>
</div>

Copy everything between the two div statements in the source HTML file, and paste between the two div statements in the target HTML file. The updated HTML would then read something similar to:

<div class="pg01-txt">
<p class="h1">Walking through the Countryside</p>
</div>

Step 6. Test Your HTML Files

Once you have updated the template’s HTML files, open them in your HTML browser (Safari or Chrome). Your browser may spot errors in your files that the HTML editor overlooked.

Step 7. Update the content.opf file

This file has been set up for the template’s eight pages plus cover. Change the information in the top section: title, creator, date, language (if other than english). You can also change the book identifier, but this is not critical at this point. Create Your Sample Book (Eight Pages plus Cover)

Rename the folder for the template (iPad FixedFormat) to correspond with the name of your book. Drag this folder onto the ePubZip script. This will package all the files into an .epub package.

Step 8. Verify Your EPub Package

Drag the .epub package created in step 7 above onto the epubcheck script. If you get a report that the script did not find an error, you can go on to test your ePub on your iPad.

Step 9. Proof your Book

Once you get your EPub to verify, you can either email the ePub to the address on your iPad, or use iTunes.

  1. If using email. The file will appear in your iPad’s email. Click on the entry and designate that you want to Open in iBooks.
  2. If using iTunes. Connect your iPad to your computer. On the iPad, open the iBooks application. On your computer, make sure you are in the Books tab for iTunes. Choose Add to Library from iTunes’ File Menu. Navigate to your ePub file and click Open. When the book appears in iTunes’ Books list, drag the book to the right of the window. As you do, a panel will open with your iPad listed. Continue to drag the book and drop over the listing for your iPad (will highlight with Blue Border). Within seconds your book will appear in iBooks.

Hopefully your book proofs as anticipated. Next you will most likely want to add more pages and update the table of contents. We will cover this in next week’s blog.