To get the most out of your ePub projects, you need to understand HTML and CSS. After all, an ePub is just a specialized web site with HTML files defining structure and content, and CSS (Cascading Style Sheets) defining styling.

With this blog I will be shifting gears from ePub to working with HTML and CSS.

When exporting an ePub from InDesign you define options for the export in the EPUB Export Options dialog. Three panels inside this dialog allow you to establish attributes for the document. With exception of the third, Advanced, the settings in these panels are fairly self explanatory.

The first option in the Advanced panel allows splitting a single document into multiple documents, or chapters. For the section dealing with EPUB Metadata, if you don’t have a publisher for your document, add the name of your client. And, if you don’t have an ISBN number for the publication, accept the ID generated by InDesign.

Here we will be focusing mainly on the section in the Advanced panel headed CSS Options. For the most part, you can leave the Generate CSS checkbox checked as defaulted with Preserve Local Overrides and Include Embeddable Fonts. Remember, though, that including embeddable fonts will increase the size of your final export substantially depending on the number of fonts. With the Generate CSS option checked, InDesign creates a CSS file, along with the HTML and other support files needed for the ePub. This is all bundled inside a package with the ePub extension. This is all well and good if you do not have to modify any of the files.

If you were to open the package and peek inside, you would find a folder named OEBPS. Inside this folder, is a folder named css. This folder holds the CSS style file created by InDesign, aptly named idGneratedStyles.css. (This file may be named differently depending on your version of InDesign.) It is responsible for styling your ePub which includes the styling information for your paragraph and character styles. With InDesign CC, this file can also contain some styling information for object styles used in your document.

It goes without saying that the information in this CSS file depends largely on how you set up your document and the export options chosen. The styling for text within your document need to be defined using paragraph and character styles. The names you give these styles identifies the text content for the HTML file and the style selectors for the CSS styles. For this reason do not use spaces or any special characters in naming your styles. Object styles can also be used to identify text containers that have special styling requirements.

As part of the properties you can set for text, later versions of InDesign also allow you to identify HTML tags and CSS classes for your styles. This option is found in the Export Tagging panel for the Paragraph and Character Style Options dialogs.

You may already be familiar with HTML tags H1 through H6 for defining headlines, p for defining a paragraph, and span for text set differently within a paragraph. If you don’t assign any tags or classes to your text styles, InDesign does so automatically. In this event all paragraphs are given the HTML tag p with a class named the same as its style name as in p.Body. Character styles are given the HTML tag span by default. But you can optionally assign it an em or strong tag.

Object styles are a little different. At the bottom of the window for creating an Object Style you will find a section with the Export Options head. Here you can determine if you want to assign tagging to your object style for the purpose of EPUB and HTML export. With this option checked, you can assign styling for Alignment and Spacing under the Custom Layout option. This includes alignment for the text contained and spacing above and below the container. You can also indicate if you want the frame to float (left or right) to allow surrounding text to wrap. The object will be identified in the HTML and the CSS using the name given to the style. Even if you leave this section as defaulted (unchecked), InDesign creates an entry in the CSS file for each object style used. This style will be identified as _idGenPageitem-1 (with the number changing as needed).

What makes export to EPUB and HTML exciting is that you can add your own CSS file to define styling that is not currently supported by InDesign. But be careful, everything you can do with CSS3 may not be supported by all browsers and electronic devices.

Try It

Just for demonstration, the following will walk you through the process of creating a simple document with paragraph styles and an object style. First we will export the file as HTML without any additional CSS. Next, we will create a custom CSS style and add it to an HTML export. (The same process could be done for EPub export but verifying how the HTML and CSS work together requires cracking open the EPub package.)

Create the Document

Create a one page, letter-sized document with intent set for Web. The document will have three paragraph styles. Use your own choices for font, size, justification, and so on. The names and export tagging will be set as follows:

  • Headline1 – Tag: h1, Class: (left blank)
  • Body – Tag: p, Class: Body
  • Notes – Tag: h3, Class: (left blank)

In the document create a headline styled with Headline1. Follow this with one or two paragraphs styled with the Body style.

Next create a text frame and give it a solid color stroke and fill color the same as the stroke, set for 20% tint. Create a headline inside the text frame styled using the Notes paragraph style. Follow this with a paragraph styled using Body. With this text frame selected, open the Object Styles panel and create a new object style. Name the style Notes. Click on the entry for EPUB and HTML under Export Options. Click on the checkbox for Custom Layout and make sure Alignment and Spacing are selected in the drop down. Set values for spacing above and below the frame. Click OK.

Finish off your document with another paragraph or two assigned the Body style.

Test 1

Save your document and select Export from InDesign’s File Menu. In the Export file chooser, select HTML in the Format drop down and save to the same folder as your document.

Next, you are presented with the HTML Export Options dialog. Notice that many of the settings required for an ePub are not included when exporting for HTML.

In the General tab, select Document for Export. Based on Page Layout for Content Order. Check View HTML after Exporting. In the Advanced panel, make sure Generate CSS is checked with Preserve Local Overrides. Click OK.

When the page displays in your default browser, notice that no margins have been set. Although the text for the Notes text frame is there, the styling for the frame itself has been ignored. We will correct these defects by creating our own style sheet to add to the one created by InDesign.

Create CSS file

To create the CSS file I suggest you use only the very simplest of tools: Notepad (for Windows), TextEdit (on the Mac). Do not use a word processor, such as Microsoft Word. For HTML and CSS, you want simple, plain text files that don’t include any styling. With whatever application is your favorite, start with an empty window and type the following:

div.Notes {
margin:12px auto 12px auto;
border: 2px solid #0CC;
background: rgba(0,204,255,.3);
padding: 6px 12px 6px 12px;
}
Body {
margin-top:30px;
margin-left:40px;
margin-right:40px;
margin-bottom:30px;
}

Note that the attributes for each style are enclosed within a pair of curly braces. Each attribute is defined by a keyword followed by a colon, its value, and is delineated at the end with a semi-colon. Do not put any space between the value number and its designation.

wrong:margin-top:30 px;     right:margin-top:30px;

Save the file in the same folder as your document using Plain Text Encoding and select Unicode (UTF-8) for the file format option. You can name the style file anything but make sure it has a .css file name extension.

Test 2

This time we will add the CSS file just created to our project as part of the HTML export.

Export your InDesign document the same as before and elect to replace the original. In the Advanced panel, click on the Add Style Sheet button and navigate to the CSS file created above. Choose the file and click Open. The path to the file will be added to the Additional CSS list. Click OK.

Your document will display in your computer’s default web browser. If the result is not as anticipated, double check the name for your styles in the document and make sure they match the name for your styles in the CSS file.

Next week we will dive a little deeper into HTML and CSS. Keep tuned.