15. Creating and Exporting an ebook
Lesson Overview
In this lesson, you will learn to do the following:
• Add anchored graphics, map paragraph and character styles to export tags, and create a table of contents for an EPUB file.
• Choose the content to include in an EPUB file and specify the order of the content.
• Add metadata information to an InDesign document and an EPUB file.
• Export and preview an EPUB file.
This lesson will take approximately 45 minutes.
Download the project files for this lesson from the Lesson & Update Files tab on your Account page at www.peachpit.com and store them on your computer in a convenient location, as described in the Getting Started section of this book.
Your Accounts page is also where you’ll find any updates to the chapters or to the lesson files. Look on the Lesson & Update Files tab to access the most current content.
Adobe InDesign Creative Cloud includes new and enhanced EPUB file export features that improve production and provide greater control for creating compelling ebooks that can be read on a wide range of electronic reading devices, tablets, and smartphones.
Getting started
In this lesson, you’ll put the finishing touches on a booklet of recipes, export the document as an EPUB, and then preview the exported document.
Note
If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.
Because electronic publications are fundamentally different from print publications in several key ways, some basic information about EPUBs may help as you work through this lesson.
The EPUB standard was designed to allow publishers to create reflowable content that could be displayed on any electronic reading device and software—such as the Barnes & Noble Nook, Kobo eReader, Apple’s iBooks for iPad, iPhone, Sony Reader, and Adobe Digital Editions software—that supports the EPUB format. Because the size of ereader screens varies from device to device, and content flows in a single, continuous thread, the page size of the InDesign document does not have to correspond to any particular screen size, which is why this lesson uses a standard, 8.5″ × 11″ page size.
Note
At the time of publication, Amazon Kindle does not support the EPUB standard, but converts submitted EPUB files to its own proprietary Kindle format.
1. To ensure that the preference and default settings of your Adobe InDesign program match those used in this lesson, move the InDesign Defaults file to a different folder following the procedure in “Saving and restoring the InDesign Defaults file” on page 3.
2. Start Adobe InDesign. To ensure that the panels and menu commands match those used in this lesson, choose Window > Workspace > [Advanced], and then choose Window > Workspace > Reset Advanced. To begin working, you’ll open an InDesign document that is already partially completed.
3. Choose File > Open, and open the 15_Start.indd file, in the Lesson15 folder, located inside the Lessons folder within the InDesignCIB folder on your hard drive.
4. To see what the finished document looks like, open the 15_End.indd file, in the Lesson15 folder.
5. Navigate through the pages of the finished document to view the title page and the four recipes that follow.
Tip
At the end of this lesson, you will export an EPUB file. You can use Adobe Digital Editions software for Windows or Mac OS to view and manage EPUBs and other digital publications. Adobe Digital Editions is available as a free download from the Adobe website (www.adobe.com).
6. Close the 15_End.indd file after you have finished examining it, or you can leave this document open for reference.
7. Return to the 15_Start.indd document, choose File > Save As, rename the document 15_RecipesBooklet.indd, and save it in the Lesson15 folder.
Completing the booklet
Before the document is ready to be exported as an EPUB, a few finishing touches are required. You’ll begin by adding some graphics, anchoring the graphics in text, and then formatting the paragraphs that contain the anchored graphics with a paragraph style that will automatically create page breaks in the exported EPUB. To complete the booklet, you’ll create a simple table of contents and add some metadata.
Adding anchored graphics
The recipe booklet includes four recipes: an appetizer, main course, vegetable dish, and dessert. The recipes are contained in a single text thread. You will anchor a picture of each dish in front of its title, and then apply a paragraph style that will be used to create page breaks in the exported EPUB. To simplify this task, the graphic files are stored in a library.
Note
Anchoring graphics in text allows you to control their position relative to the text in the exported EPUB.
1. Choose File > Open, and open the 15.Library.indl file, in the Lesson15 folder.
2. Navigate to page 3 by using the Pages panel, or by pressing Ctrl+J (Windows) or Cmd+J (Mac OS), entering 3 in the Page box, and then clicking OK.
Tip
If you want, you can display hidden characters, such as paragraph returns and word spaces, for this lesson by choosing Type > Show Hidden Characters.
3. Using the Type tool (
), place the insertion point before the headline “Guacamole,” and then press Enter or Return.
4. Using the Selection tool (), drag the library item named “Avocados.tif” onto the pasteboard on either side of the page.
5. While pressing the Shift key, drag the blue square near the upper-right corner of the graphics frame to the empty line of text you created in step 3. Release the mouse button when a short vertical line is displayed above the headline. The graphics frame is now an inline anchored graphic and will flow with its surrounding text.
Tip
When inserting Library items as inline graphics, you can also establish the insertion point in the text, select the item in the Library, and then choose Place Item(s) from the Library panel menu. The item is automatically inserted as an inline graphic.
6. Using the Type tool, click to the left or right of the anchored graphic to establish the insertion point.
7. Choose Type > Paragraph Styles, or click Paragraph Styles in the list of docked panels to open the Paragraph Styles panel.
8. Click Graphics in the list of paragraph style names to assign this paragraph style to the one-line paragraph that contains the anchored graphic.
When you export an EPUB file later in this lesson, you’ll use the Graphics paragraph style to split the four recipes into four separate (HTML) files. Splitting a long document into smaller pieces makes display of the EPUB more efficient and causes each recipe to begin on a new page.
9. Repeat steps 3–8 to anchor the three remaining library items (Salmon.tif, Asparagus.tif, and Strawberries.tif) before the headlines of the three remaining recipes. Use the Pages panel to navigate from page to page as needed. Make sure that each graphics frame is anchored inline, and that the Graphics paragraph style is applied to the one-line paragraph that contains the frame.
10. Choose File > Save.
Customizing export options for anchored graphics
In addition to specifying global export options for objects, such as images, during EPUB export, you can specify export settings for individual objects before you export an EPUB. Next, you’ll specify custom export settings for the four anchored graphics.
1. Navigate to page 3 and choose View > Fit Page In Window.
2. Use the Selection tool to select the graphics frame that contains the Avocados.tif image. (Make sure you don’t click within the content grabber in the center of the frame or you’ll select the graphic rather than the frame.)
3. Choose Object > Object Export Options.
4. In the Object Export Options dialog box, click the EPUB And HTML tab.
Tip
Choosing Relative To Page Size from the Size menu ensures that the image is sized proportionately to the width of the ereader device rather than having a fixed size.
5. Select Custom Rasterization, choose Relative To Page Width from the Size menu, and choose 150 from the Resolution (ppi) menu.
6. Leave the Object Export Options dialog box open and navigate to each of the three remaining inline graphics. Select each graphics frame and repeat step 5.
7. Click Done to close the dialog box.
8. Choose File > Save.
Mapping paragraph and character styles to export tags
EPUB is an HTML-based format. To help control the way the text in your EPUB file is formatted during export, you can map paragraph styles and character styles to HTML tags and classes. Next, you’ll map several of the document’s paragraph styles and character styles to HTML tags.
1. If the Paragraph Styles panel is not open, choose Type > Paragraph Styles, or click the Paragraph Styles tab in the stack of docked panels.
2. Choose Edit All Export Tags from the Paragraph Styles panel menu.
3. Make sure that Show EPUB And HTML is selected in the Edit All Export Tags dialog box, and then click [Automatic] to the right of the Main Headlines style. From the accompanying menu, choose menu, choose h1. In the Class field for Main Headlines enter main-head. When you export as EPUB, this assigns the h1 HTML tag (used for the largest headlines) and the “main-head” class to paragraphs to which the Main Headlines paragraph style is applied.
4. Apply tags and class names to the remaining paragraph styles, as shown below. If you want, enlarge the dialog box by dragging its lower-right corner.
• Recipe Tagline: h4; Class: tagline
• Graphics: Automatic
• Subheads: h3 Class: subheads
• Ingredients: p
• Instructions: p
• Instructions Contd: Automatic
• Related Recipes: Automatic
Tip
The Emit CSS option is new in this version of InDesign and controls which paragraph style is used to define the CSS class when you export an EPUB. The ability to enable or disable this option is especially helpful when you map several styles to the same class. To avoid CSS class definition conflicts, you can choose to emit only the CSS information for one of the styles. The CSS class will then be defined based on the style for which Emit CSS has been checked.
5. Because Instructions and Instructions Contd paragraph styles are mapped to the same tag and class name, you’ll export the CSS only for the Instructions paragraph style when you export an EPUB later in this lesson. Uncheck Emit CSS for Instructions Continued paragraph style.
The document also includes two character styles, listed below the paragraph styles, to which you need to assign tags.
6. Apply the strong tag to the Bold character style and the em tag to the Italic style. The strong tag will maintain the bold text in the recipes, and the em (emphasis) tag will maintain the italics in the taglines below the recipe titles.
Before you close the Edit All Export Tags dialog box, you’ll take care of one more task: You’ll specify that the Graphics paragraph style break the EPUB into smaller HTML documents. Each recipe will produce a new HTML file in the EPUB, and as a result, each recipe will start on a new page with a picture of the dish.
7. Select the Graphics paragraph style, and then select its Split EPUB check box.
Note
The Edit All Export Tags dialog box displays a list of all paragraph, character, and object styles used in a document and lets you set the Tag and Class for all styles. You can also set export tagging when you create and edit individual paragraph, character, and object styles.
8. Click OK to close the dialog box.
Adding a table of contents
When you export an InDesign document as an EPUB, you have the option to generate a navigational table of contents that enables a viewer to navigate easily to certain locations in the EPUB. This table of contents is based on a table of contents you will now create in InDesign Creative Cloud.
1. Choose Layout > Table Of Contents Styles.
2. In the Table Of Contents Styles dialog box, click New to display the New Table Of Contents Style dialog box.
3. In the New Table Of Contents Style dialog box, enter Recipe Booklet in the TOC Style box. Use the scroll bar to display and select the Main Headlines paragraph style in the Other Styles list, and then click the Add button to move this paragraph style to the Include Paragraph Styles list. Leave all other settings unchanged, and click OK to close this dialog box; then click OK again to close the Table Of Contents Styles dialog box.
4. Choose File > Save.
Choosing the content of an ebook
The Articles panel provides an easy way to choose the content (text frames, graphics frames, unassigned frames, and so on) that you want to include in an EPUB and specify the order in which objects are exported. Next, you’ll add three articles to the Articles panel, name them, and rearrange the order of two of the elements.
Adding the cover page
You will use the first page of the document as an inline cover image in the exported EPUB. Because the first page contains several objects, and you want to maintain the appearance of the page, you need to export the content for the cover page as a single graphic rather than as a succession of individual objects. To accomplish this, you’ll group all of the objects on page 1, and then specify export options that will convert the group into a single graphic when exported.
Tip
To prevent any cover-page objects that are within the bleed area from being included in the rasterized cover image, remove the bleed from any objects extending past the page edge.
1. Navigate to page 1 of the document and choose View > Fit Page In Window.
2. Choose Window > Articles to open the Articles panel.
3. If necessary, select the Selection tool (
), choose Edit > Select All, and then choose Object > Group.
4. Choose Object > Object Export Options to open the Object Export Options dialog box.
5. In the EPUB And HTML section, select Custom Rasterization, choose Relative To Page Width from the Size menu, and choose 150 from the Resolution (ppi) menu. Click Done to close the dialog box.
6. Drag the group of objects on page 1 into the Articles panel. In the New Article dialog box, enter Cover Page in the Name box, make sure Include When Exporting is selected, and then click OK.
Notice that the Cover Page article has been added to the Articles panel.
7. Choose File > Save.
Adding the title page and reordering its content
Page 2 of the document is a simple title page with only a few objects. Because this page is not design-intensive, there’s no need to convert it into a graphic as you did with the first page. So instead of grouping the objects before you create a new article and then specifying custom export settings, you’ll simply drag them all into the Articles panel. Then, you’ll modify the article by reordering two of its elements.
Tip
You can also add a new article by choosing New Article from the Article panel menu or by clicking the Create New Article button (
) at the bottom of the panel.
1. Navigate to page 2 of the document.
2. Use the Selection tool () or choose Edit > Select All to select all objects on the page, drag the objects into the Articles panel below the Cover Page article, and name the article Title Page. (Click OK to close the New Article dialog box.)
Tip
When you Shift-click to select multiple objects on a page and then create an article, the content order in the Articles panel reflects the order in which you selected the objects.
The order of the objects in the Title Page article is based on the order in which the objects were created. If you were to export the document at this point, the two horizontal lines would be the last two objects on the page because they were created last. Because this page will not be converted into a graphic when exported, you need to change the order of the elements in this article to ensure that they’re in the correct order when exported.
3. In the Articles panel, drag the topmost of the two <line> elements in the list upward. When a white horizontal line is displayed above “Everything you need ...,” release the mouse button. This results in a horizontal line above and below the text frame that contains “Everything you need ...” (to match the InDesign page).
4. Drag the Strawberries.tif element to the bottom of the list to place it below all of the other elements in the article. This will move the graphic to the bottom of the title page in the EPUB, which means that the layout of this page in the EPUB will be slightly different from the layout in the InDesign document.
5. Choose File > Save.
Adding the remaining content
The remainder of the booklet—the four recipes—is contained in a single text thread. Next, you’ll create one more article, which contains the recipes, but first, it’s worth taking a quick look at the text.
If you click within the text of the recipes, you’ll notice that all of the text has been formatted with paragraph styles. This helps ensure that the text retains its styling when the document is exported. The bulleted and numbered lists have been styled using paragraph styles that include automatic bullets and numbers.
1. Navigate to page 3. Use the Selection tool (
) to drag the text frame containing the recipes into the Articles panel below the Title Page article, and name it Recipes. (If necessary, lengthen the panel by dragging its lower-right corner).
2. Click OK to close the New Article dialog box.
Notice that the Recipes article contains only one element: a text frame. The graphics that you anchored earlier are not listed separately, because they’re part of the recipe text.
3. Choose File > Save.
Adding metadata
Metadata is a set of standardized information about a file, such as the title, the name of the author, a description, and keywords. When exporting an EPUB file, you can automatically include such metadata in the EPUB file. This data is used, for example, to display a document’s title and author in the EPUB library on ereaders. Next, you’ll add this metadata information to the InDesign document. This information is included in the exported EPUB and is displayed when the EPUB is opened.
2. In the File Information dialog box, click the Description tab if necessary, and then enter One Truly Amazing Meal in the Document Title box and your name in the Author box, and then click OK to close the dialog box.
3. Choose File > Save.
Exporting an EPUB file
Now that you’ve completed the preparatory work, the document is ready to be exported as an EPUB file. To complete this lesson, you’ll specify several custom export options to take advantage of the work you did earlier in this lesson to optimize the document for EPUB export.
Specifying export settings
Much as the settings in the Print dialog box control the appearance of printed pages, the settings you make when you export an InDesign document as an EPUB control the appearance of the EPUB. You’ll specify several general settings and then a few advanced settings.
1. Choose File > Export.
2. In the Export dialog box, choose EPUB from the Save File As Type menu (Windows) or the Format menu (Mac OS).
3. In the File Name box (Windows) or the Save As box (Mac OS), name the file 15_Recipes.epub and save the file in the Lesson15 folder, located inside the Lessons folder within the InDesignCIB folder on your hard drive.
4. Click Save to close the Export dialog box.
5. In the General section of the EPUB Export Options dialog box, make sure that EPUB 2.0.1 is selected from the Version menu, and then specify the following Setup options:
• Cover: Rasterize First Page
• Navigation: TOC Style; Recipe Booklet
• Margins: 24
• Content Order: Same As Articles Panel
6. In the Text Options section, make sure Map To Unordered Lists is selected from the Bullets menu and Map To Ordered Lists is selected from the Numbers menu. This ensures that the numbered and bulleted lists in the recipe text are converted to HTML lists in the EPUB.
7. Select View EPUB After Exporting, and leave all other General settings unchanged.
8. Click Image in the list in the upper-left corner of the EPUB Export Options dialog box. Make sure Preserve Appearance From Layout is selected to ensure that image cropping is retained for graphics that are not inline and also to preserve attributes such as rotation and transparency effects.
9. Choose Relative To Page from the Image Size menu and leave all other Image settings unchanged.
Tip
The Ignore Object Export Settings check box in the Image section of the EPUB Export Options dialog box lets you override any export settings you’ve applied to individual objects and groups.
Note
Using the Based On Paragraph Style Export Tags setting lets you divide a long document into smaller documents when you enable the Split EPUB feature for a particular paragraph style. You can also select a paragraph style in the EPUB Export Options dialog box that triggers these breaks.
10. Click Advanced in the list in the upper-left corner of the EPUB Export Options dialog box, and then choose Based On Paragraph Style Export Tags from the Split Document menu.
Because you specified that the Graphics paragraph style create smaller HTML sections in the EPUB when you assigned tags to paragraph styles earlier in this lesson, choosing Based On Paragraph Style Export Tags will create a page break before each of the four graphics you anchored within the recipes.
Note
If you’ve applied numerous manual overrides to paragraphs and characters formatted with styles, selecting Preserve Local Overrides can add significant overhead to the HTML and CSS that InDesign generates when you export an EPUB. If you don’t select this option, you’ll likely need to edit the CSS to further control the appearance of your EPUB. Editing CSS falls outside the scope of this book.
11. Make sure Include Document Metadata is selected so that the metadata you added earlier is included in the EPUB.
12. In the CSS Options section, make sure that Generate CSS, Preserve Local Overrides, and Include Embeddable Fonts are selected, and then click Add Style Sheet.
13. Select the Recipes.css file, in the Lesson15 folder, and then click Open.
This CSS style sheet contains a small piece of HTML code that changes the color of the recipe names and the subheads.
Note
InDesign automatically generates a Unique ID for an EPUB; however, for commercial EPUBs you would enter the ISBN.
Note
Not all ereaders support font embedding. If possible, test your EPUB on various devices to ensure that you’re satisfied with the output. To further control how the HTML tags and classes are displayed on ereaders, you can edit the CSS file.
Tip
An alternate technique for splitting a long document into smaller HTML documents is to create individual InDesign documents for each section of an EPUB, combine these into an InDesign book, and then choose Export Book To EPUB from the Book panel menu to generate the EPUB.
14. Click OK to export an EPUB.
If Adobe Digital Editions is installed on your computer, the EPUB file will open automatically and you can scroll through it to view the content. You can also open the EPUB file on any device that supports the EPUB format.
15. Return to InDesign.
16. Choose File > Save.
Congratulations! You’ve created an electronic publication that can be viewed on a wide variety of electronic reading devices.
Exploring on your own
Now that you’ve created an EPUB, choose File > Save As, and save the completed InDesign document as 15_Practice.indd. You can use this practice document to perform any of the tasks from the lesson using different settings.
1. Revisit the Edit All Export Tags dialog box and try mapping some of the paragraph styles to different HTML tags. Export your new version and compare the changes to the text in the original EPUB you exported.
Note
Several editors that can open .epub files for further editing are available. Examples of such editors are <oXygen/> XML Editor and Bare Bones Software’s TextWrangler.
2. Export another EPUB, but instead of using the Articles panel to specify the content and order of an EPUB, this time choose Based On Page Layout from the Content Order menu in the General section of the EPUB Export Options dialog box. Compare this version with the original.
3. If you’re the adventurous type, you can “open” an EPUB file and then view its component files. An EPUB file is essentially a compressed file that contains several folders and files. If you replace the .epub extension of an EPUB file with .zip, you can then decompress the file using a file-decompression utility. You’ll find folders that contain the images in the InDesign document, as well as the fonts used and the CSS style sheet. You’ll also find seven XHTML files—one for each of the seven pages in the EPUB. You can open these pages in Adobe Dreamweaver to view the source code, preview the web page, and optionally, add more information and functionality.
4. Open the Recipes.css file (in the Lesson15 folder). Examine the HTML codes that control the appearance of three paragraph styles (h1: Main Headlines; h4: Recipe Tagline, and h3: Subheads). Change the color of paragraphs to which the Main Headlines paragraph style is applied by changing its color number from 669933 to DF0101. Save your changes to the Recipes.css file or choose Save As and create a new file with a different name. Export another EPUB. (If you changed the filename, make sure to choose the new file in the Advanced section of the EPUB Export Options dialog box.) Notice the different color applied to the main headlines.
If you’re the adventurous type, try changing some of the other attributes. For example, change the alignment from “center” to “left.” Or find some hexidecimal color codes and change the color of the main headlines and subheads.
Review questions
1. When you create a document that you intend to export as an EPUB, how do you ensure that a graphic maintains its position relative to surrounding text?
2. What is metadata?
3. What panel lets you specify the content to be included in an EPUB and arrange the order in which the elements are exported?
4. When you export an EPUB, what option must you choose if you want the content order to be determined by the Articles panel rather than by the page layout?
5. You’ve specified custom export settings for several graphics frames. How can you override the export settings for these objects during EPUB export?
Review answers
1. To ensure that a graphic maintains its position relative to text in an EPUB file, anchor it within the text as an inline graphic.
2. Metadata is information about a file, such as its title, its author, its title, the author’s title, a description, and keywords. It’s a good practice to include metadata in an EPUB because this information can be accessed by search engines and ereaders.
3. The Articles panel (Window > Articles) lets you choose the content you want to include in an EPUB and arrange the order of export.
4. To ensure that the order of the content is determined by the Articles panel rather than by the page layout, you must choose Same As Articles Panel from the Content Order menu in the General section of the EPUB Export Options dialog box.
5. If you select Ignore Object Export Settings in the Image section of the EPUB Export Options dialog box, any custom export settings you’ve specified are ignored and the settings specified in the Image section are applied to all images in the EPUB.