16. Creating a Reflowable EPUB
Lesson Overview
In this lesson, you will learn to do the following:
• Add anchored graphics to an InDesign layout that you will export as an EPUB file.
• Map paragraph and character styles to export tags.
• 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 to complete.
To download the project files for this lesson, log in or set up an account at peachpit.com. Enter the book’s ISBN (9780134664095) or go directly to the book’s product page to register. Once on the book’s page, click the Register Your Product link. The book will show up in your list of registered products along with a link to the book’s bonus content. Click the link to access the lesson files for the book. Store the files on your computer in a convenient location, as described in the “Getting Started” section of this book. Your Account page is also where you’ll find any updates to the chapters or to the lesson files.
Adobe InDesign CC provides powerful EPUB capabilities that let you control the inclusion, order, and appearance of exported content and create compelling ebooks. Exported EPUBS 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 a reflowable EPUB, and then preview the exported document.
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.
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.
Note
InDesign CC (2017 Release) offers two choices for EPUB export: EPUB (Reflowable) and EPUB (Fixed Layout). This lesson covers creation of a reflowable EPUB. For information about EPUB (Fixed Layout) export, see Lesson 15, “Creating a Fixed-Layout EPUB” in the Adobe InDesign CC Classroom in a Book.
• Formats. The EPUB standard is designed to allow publishers to create content that can be displayed on any electronic reading device and software—such as the Barnes & Noble Nook, Kobo eReader, Apple’s iBooks for iOS (iPad, iPhone), Google Play Books app for Android (smartphones, tablets), and Adobe Digital Editions software—that support the EPUB format.
• Reflowable EPUB. For reflowable EPUBs, the size of e-reader screens varies from device to device, and content adapts and reflows to match the screen reader size and preferred font size selection by the reader, which means that reflowable EPUBs will have a variable page count across devices. The reflowable EPUB format is preferred for text-intensive documents targeted at e-ink device users, such as novels, nonfiction, and other book-type publications.
• Fixed-layout EPUB. The fixed-layout EPUB format, in contrast to reflowable EPUBs, is a paginated format that provides more design control and is used for graphic-intensive documents as well as documents that include rich media, such as audio or video, and interactivity. Examples include textbooks, comic books, and children’s books.
In this lesson, you will create a reflowable EPUB. Its content will be adjusted to fit the e-reader screen size; therefore, the page size of the InDesign document does not have to correspond to any particular device screen size and is set to a standard 8.5″ x 11″ page size.
1 To ensure that the preferences 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 pages 4–5.
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 16_Start.indd file, in the Lesson16 folder, located inside the Lessons folder within the InDesignCIB folder on your hard drive. (If the Missing Fonts dialog box displays, click Sync Fonts, and then click Close after the fonts have successfully synced from Typekit.) If an alert informs you that the document contains links to sources that have been modified, click Update Links.
4 To see what the finished document looks like, open the 16_End.indd file, in the Lesson16 folder.
5 Navigate through the pages of the finished document to view the title page and the four recipes that follow.
6 Close the 16_End.indd file after you have finished examining it, or you can leave this document open for reference.
7 Return to the 16_Start.indd document, choose File > Save As, rename the document 16_RecipesBooklet.indd, and save it in the Lesson16 folder.
Tip
At the end of this lesson, you will export a reflowable 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).
Tip
Apple iBooks is automatically installed on Mac OS computers and is the default application for displaying EPUB files.
Completing the booklet before export
Before the document is ready to be exported as a reflowable 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 split the exported EPUB into multiple.XHTML files. 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: appetizer, main course, vegetable dish, and dessert. The recipes are contained in a single text thread (or story). 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 reflowable EPUB. To simplify this task, the graphic files are stored in a library.
Note
Anchoring graphics in text allows you to maintain their position relative to the text in the exported reflowable EPUB.
1 Choose File > Open, and open the 16_Library.indl file in the Lesson16 folder.
2 Navigate to page 3 by using the Pages panel or by pressing Ctrl+J (Windows) or Command+J (Mac OS), typing 3 in the Page box, and then clicking OK.
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.
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.
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
To insert a library item as an inline graphic, 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 .XHTML) files. Splitting a long document into smaller pieces makes the 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.
Mapping paragraph and character styles to export tags
EPUB is an.XHTML-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.XHTML tags and classes. Next, you’ll map several of the document’s paragraph styles and character styles to.XHTML tags.
1 Choose Edit All Export Tags from the Paragraph Styles panel menu.
2 Make sure that Show EPUB And.XHTML 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 h1.
Tip
Click and drag any edge or corner of the Edit All Export Tags dialog box to make it larger or smaller.
3 In the Class field for Main Headlines, enter main-head. When you export as EPUB, this assigns the h1.XHTML 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 here. If you want, enlarge the dialog box by dragging its lower-left corner, bottom edge, or lower-right corner.
• Recipe Tagline: h3, Class: tagline
• Graphics: Automatic
• Subheads: h2, Class: subheads
• Ingredients: p
• Instructions: Automatic, Class: instructions
• Instructions Contd.: Automatic, Class: instructions
• Related Recipes: Automatic
5 Because the 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. Deselect Emit CSS for the Instructions Contd. paragraph style.
The document also includes the Bold character style, listed below the paragraph styles, to which you need to assign a tag.
6 Apply the strong tag to the Bold character style, which will maintain the bold text in the recipes.
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.XHTML documents. Each recipe will produce a new.XHTML 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 Split EPUB.
8 Click OK to close the dialog box.
9 Choose File > Save.
Adding a table of contents
When you export an InDesign document as an EPUB, you have the option to generate a 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.
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, type 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.
4 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.
5 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 a reflowable EPUB and to 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.
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 Select the Selection tool (), choose Edit > Select All, and then choose Object > Group.
Tip
To prevent any cover-page objects that are in the bleed area from being included in the rasterized cover image, remove the bleed from any objects extending past the page edge.
4 Choose Object > Object Export Options to open the Object Export Options dialog box.
5 In the EPUB And.XHTML tab, select Rasterize Container from the Preserve Appearance From Layout menu, choose PNG from the Format 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, type 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.
Tip
You can also add a new article by choosing New Article from the Articles panel menu or by clicking the Create New Article button (
) at the bottom of the panel.
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
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.
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. Make sure that Include When Exporting is selected, and then click OK to close the New Article dialog box.
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 <rectangle> elements in the list upward. When a horizontal line is displayed above “Everything you need ...,” release the mouse button. This results in a horizontal line above 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 that 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 (lengthen the panel if necessary), and name it Recipes.
2 Click OK to close the New Article dialog box.
Notice that the Recipes article contains only one element: a thread of text frames. 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 e-readers and to find your EPUB within a large collection of EPUBs. Next, you’ll add this metadata information to the InDesign document. This information is included in the exported EPUB and is displayed when the exported EPUB is opened.
1 Choose File > File Info.
2 In the File Information dialog box, make sure Basic is selected in the list on the left, and then type One Truly Amazing Meal in the Document Title box and type your name in the Author box. 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 a reflowable 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 when you optimized the document for EPUB export.
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 (Reflowable) from the Save As Type menu (Windows) or the Format menu (Mac OS).
Tip
In a reflowable EPUB, content adapts and reflows to match the screen reader size and the reader’s font preference.
3 In the File Name box (Windows) or the Save As box (Mac OS), name the file 16_Recipes.epub and save the file in the Lesson16 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 – Reflowable Layout Export Options dialog box, choose EPUB 3.0 from the Version menu, and then specify the following Setup options:
• Cover: Rasterize First Page
• Navigation TOC: Multi Level (TOC Style)
• TOC Style: Recipe Booklet
• Content Order: Same As Articles Panel
Make sure that Split Document and Based On Paragraph Style Export Tags are selected. Because you specified that the Graphics paragraph style create smaller.XHTML sections in the EPUB when you assigned tags to paragraph styles earlier in this lesson, choosing Based On Paragraph Style Export Tags will start a new.XHTML section in the EPUB at each of the four graphics you anchored within the recipes.
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 – Reflowable Layout Export Options dialog box that triggers these breaks.
Tip
The Ignore Object Export Settings check box in the Object section of the EPUB – Reflowable Layout Export Options dialog box lets you override any export settings you’ve applied to individual objects and groups.
6 Click Text in the list in the upper-left corner of the EPUB – Reflowable Layout Export Options dialog box. For Lists, 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 correctly converted to.XHTML lists in the exported EPUB.
7 Click Object in the list in the upper-left corner of the EPUB – Reflowable Layout Export Options dialog box. Make sure Preserve Appearance From Layout (For Graphic/Media Objects) is selected to ensure that image cropping is retained for unanchored graphics and also to preserve attributes such as rotation and transparency effects.
Choose Relative To Text Flow from the CSS Size menu to prevent objects from being larger than desired.
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.XHTML 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.
8 In the Conversion Settings section, choose JPEG from the Format menu, and make sure 150 is selected for Resolution PPI.
9 In the CSS section, specify 24 for Page Margin (all sides) and make sure that Generate CSS, Preserve Local Overrides, and Include Embeddable Fonts are selected. Click Add Style Sheet.
10 Select the Recipes.css file, in the Lesson16 folder, and then click Open.
This CSS style sheet contains a small piece of formatting 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.
11 In the Metadata section, notice that the metadata information you entered earlier in this lesson is displayed. If you want, add additional information in the other fields.
12 Click Viewing Apps in the list in the upper-left corner of the EPUB – Reflowable Layout Export Options dialog box.
• If Adobe Digital Editions is installed on your computer, System Default is automatically selected in the Viewing Apps section, and Digital Editions is the listed application.
• If you’ve installed Adobe Digital Editions and it’s not listed as an application, click Add Application and select it from the Program folder (Windows) or Applications folder (Mac OS) on your computer, and then select it as the preferred viewing application.
• Alternatively, select another program that reads EPUBs. When the EPUB is exported, it is automatically opened in the selected program. The Adobe Digital Editions software is available as a free download from the Adobe website: www.adobe.com.
13 Click OK to export a reflowable EPUB. If an alert is displayed warning that certain objects might not appear as expected after export, click OK to continue and view the 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.
14 Return to InDesign.
15 Choose File > Save.
Congratulations! You’ve created an electronic publication that can be viewed on a wide variety of electronic reading devices.
Note
On Mac OS computers, iBooks is the System Default viewing app.
Exploring on your own
Now that you’ve created an EPUB, choose File > Save As, and save the completed InDesign document as 16_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 (Paragraph Styles panel menu > Edit All Export Tags) and try mapping some of the paragraph styles to different.XHTML tags. Export your new version and compare the changes to the text in the original EPUB you exported.
2 Export another reflowable 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 – Reflowable Layout Export Options dialog box. Compare this version with the original.
Note
Editors that can open EPUB files for further editing include <oXygen/> XML Editor and Bare Bones Software’s TextWrangler.
Note
Not all e-readers 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.XHTML tags and classes are displayed on e-readers, you can edit the CSS file.
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 exported images, as well as the fonts used and the CSS style sheet. You’ll also find seven .XHTML files. 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 Lesson16 folder). Examine the.XHTML codes that control the appearance of three paragraph styles (h1: Main Headlines; h2: Subheads; and h3: Recipe Tagline). 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 – Reflowable Layout Export Options dialog box.) Notice the different color applied to the main headlines.
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.
Tip
An alternate technique for splitting a long document into smaller.XHTML 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.
5 Open the InDesign file named iPadEPUB.indd from the Lesson16 folder. This document contains the same content as the one you worked on during the lesson, but the page size has been changed to 1024 x 768 pixels, the dimensions of an iPad screen, and the layout has been modified slightly to accommodate the different page dimensions.
Export this document and name it Recipes2.epub, but instead of choosing EPUB (Reflowable) in the Export dialog box, choose EPUB (Fixed Layout).
Tip
Different EPUB readers can display the same EPUB file differently. You should always test exported EPUBs in the readers you want to support.
To view the exported fixed-layout EPUB using Apple iBooks (an app included with Mac OS X Mavericks [10.9] and later), select Viewing Apps from the scroll list on the left of the EPUB – Fixed Layout Export Options dialog box, and then choose iBooks. You can also sideload the EPUB file to an iPad using iTunes and open it with iBooks. Leave all other settings in the EPUB – Fixed Layout Export Options dialog box unchanged and click OK.
Note
iBooks is available only for MacOS. You can use Adobe Digital Editions to view a fixed-layout EPUB on both Windows and Mac OS computers.
Review questions
1 When you create a document that you intend to export as a reflowable 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 a reflowable EPUB and arrange the order in which the elements are exported?
4 When you export a reflowable 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 export of a reflowable EPUB?
Review answers
1 To ensure that a graphic maintains its position relative to text in a reflowable EPUB file, anchor it within the text as an inline graphic.
2 Metadata is information about a file, such as its title, its author, 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 e-readers.
3 The Articles panel (Window > Articles) lets you choose the content you want to include in a reflowable 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 – Reflowable Layout Export Options dialog box.
5 If you select Ignore Object Export Settings in the Object section of the EPUB – Reflowable Layout Export Options dialog box, any custom export settings you’ve specified are ignored, and the settings specified in the Object section are applied to all images in the EPUB.