When you export to EPUB your InDesign content and formatting is represented in HTML and CSS code. In order to effectively translate the look of text in your layout to the proper code, you need to apply styles consistently throughout your document. Then you need to map those styles to HTML tags and classes, as shown in this movie.
- [Narrator] When you export to EPUB, your InDesign content and formatting is represented in HTML and CSS code. In order to effectively translate the look of your text and your layout to the proper code, you need to apply styles consistently throughout your document. And then you need to map those styles to HTML text and classes. Let's see how it's done. In our Exercise File, we have a print layout with several spreads for a bank brochure. And you can see the layout is relatively complex and professionally designed.
And if I look in the paragraph styles panel, I can see that there are plenty of styles that are being used to format the text. But remember, all these styles only exist in InDesign. They're going to have to be converted to some kind of HTML and CSS to format the text in the EPUB. And the way that you can control that is with Export Tagging settings. For example, if I go to page three and put my cursor in the big text here, I can see that it's formatted with a style called Intro Headline.
I'll right click to edit that style. And way down at the bottom of the style options is Export Tagging. What we're interested in here are these settings: EPUB and HTML. Tag determines which HTML tag will be wrapped around the text content. The default is Automatic, where InDesign is just going to wrap everything in paragraph tags and then use CSS classes to apply different formatting. So in other words, this may look like a heading in the EPUB, but under the hood it's just another paragraph with some corresponding CSS to set the size, color, and alignment of the text, and so on.
There's no proper structure to the code. And that's really the best that InDesign can do. It's just not a structured authoring tool in the way that something like FrameMaker is. InDesign has no idea what you consider a heading one, heading two and so on to be, until you tell it. So if you want to have cleaner code and a well-structured EPUB that's easier to reformat, then you should map your styles to the appropriate tags. So, in this example, it would make sense to map the Intro Headline to h1, since that's the top level heading in HTML.
Notice you can also choose from any of the other heading levels here, all the way down to heading six. But I can choose h1, and I can even type in this field. So, if this was a quote instead, I could type blockquote, and that would be the tag wrapped around the text in the code. But h1 is actually what I want, so I'll choose that. Also note that you can enter a name for the Class, which I'll do since I expect to have other level one headings in my EPUB, and I want to distinguish the intro heading from the others.
So I'll give it a class of, intro. And if I want this heading to start a new page in the EPUB, I can select Split Document down here. This is a very handy option that allows you to use paragraph styles to tell InDesign where you want a new page to start in the EPUB. That way you can make chapters always start at the top of a new page, and you won't get something like a heading appearing in the middle of a page. Notice I also have this option, Emit CSS. This lets you tell InDesign to use the formatting that you see here in the EPUB.
Otherwise, you're going to need to add your own CSS, or you'll just get default formatting in the EPUB. Now it's good to have the ability to set the Tag and Class here in the Paragraph Style dialogue box, but it's much better to deal with all your styles at once in one place. And for that, I'll just click Ok to close this dialogue box, and go to the Paragraph Styles panel menu and choose Edit All Export Tags. Here I can see all the paragraph, character, and object styles in my document.
And I can choose a tag, add a class, I can make that style split the EPUB, and I can emit CSS or not. And the dialogue box is resizable, even though it doesn't appear to be at first. So you can just grab a corner and stretch it to see more styles. So now you can go through and improve the code of your EPUB. Main Article Headline can be h1, and each main article heading will split the EPUB, and appear at the start of a new page. And maybe I'd want to add a class of main_head.
Main Article Subhead can be h2, with a class of main_subhead. And this will not split the EPUB. Now, click Ok and Export to check out the code of the EPUB. In the Export dialogue box, I'll go to the Viewing Apps option and de-select the System Default, because I don't actually need to see the EPUB right now, I just want to see the code. And for that I'll select an application that can show me the EPUB code, which is TextWrangler on this machine.
So I'll click Add Application, go to my Applications folder, and choose TextWrangler. I'll click Ok. I'll ignore the warning. And here's my EPUB. I can tip open the OEBPS folder. Here's my HTML file that contains the content, and here on line 10, I can see my h1 with the intro class. Notice how the others that I left at the default all have the p tag applied to them, and classes that are named for the paragraph style that was applied in InDesign.
Down a little further at line 18, is our other h1 with a class of main_head, and a little bit lower, there's our h2 with main_subhead. So those are some examples of nice clean code thanks to the Export Tags feature.
- Overview of interactive document types, including PDF and EPUB
- Creating interactive objects
- Setting up hyperlinks, cross-references, and a table of contents
- Working with media
- Publishing documents with Publish Online
- Creating EPUBs
- Following workflows for interactivity: interactive PDF, reflowable EPUB, and fixed-layout EPUB