New Blog Series

Starting today, a new series of blogs focusing on HTML and EPUB3 export.

We all know that the EPUB export format is just HTML bundled in an EPUB wrapper so it can be viewed by EPUB readers. In some ways this is true. The misconception is that EPUB3 supports CSS3. Technically EPUB3 uses XHTML5 and CS2.1 plus selected CSS3 properties. It is the selected CSS3 properties we are interested in. This, and the next few blogs, will walk you through the ins and outs of some of these features.

If you are creating documents for EPUB 3.0 you may be surprised at how many CSS3 properties are supported by the EPUB3 delivery format. If you compare the properties for InDesign’s HTML export to those for EPUB export you will see the added properties have to do with topics related to books, such as cover, margins, footnotes, and so on. In working with the two export formats what I found interesting was the difference in how some CSS styles were handled. A case in point is rounded corners.

Rounded Corners

To see the difference between the two export formats, here is a little test for you:

  • Create a simple document with a rectangle having a border with a rounded corner. Create an object style “RoundedCorner” and apply it to the rectangle.
  • Create another rectangle similar to the one above but place an image inside the box. Create an object style “RoundedImage” and apply it to the rectangle.
  • Lastly, create a text frame with a rounded corner border and add some text. For this, create an object style “RoundedText” and apply it to the text frame.
  • Add each of the three page items individually to the Articles panel in order. Notice that the Articles panel reflects the names of the applied object styles for the rectangles, but not for the text frame.
  • Save and export to HTML using Content Order: Based on Articles Panel. The result will be similar to that shown in Figure 1 below.
  • Next, save and export to EPUB using the same settings as used for HTML export. Additionally, choose EPUB 3.0 for Version, None for Cover, and add whatever margin settings you want. In the Advanced panel, select Do Not Split for Split Document and check Include Document Metadata. You can use your name or business name for the Publisher.

Interestingly, both exports treated the text frame the same, but the HTML export ignored the border around the image. (See Figure 1 and 2 below.)

If you really want to see what is happening, open the HTML and CSS files created. The HTML file will open in any plain text or HTML editor. The EPUB file is a collection of documents that must be opened in order to see its contents. For this there are several scripts and applications available. On the Macintosh, a handy application to use is Springy or the script ePub UnZip.

Excluding differences in file path references, the HTML file for the EPUB is almost the same as the HTML export file. For the HTML export, the three page items are given a generic class “idGenObjectLayout-1” inside which there is a class for the object style and another generic class defined. Finally each of the page items is given an image tag with a generic class assigned by InDesign.

The style definitions for each of the classes is defined in the css file created by the export. The css file created for both exports is exactly the same with an empty class definition defined for the RoundedCorner and RoundedImage but with no properties defined inside the declaration block. The other styles generated by InDesign define the height, width, and inline-block display for the rectangles.

If you designated EPUB and HTML Export Options when you created the Object Styles, the properties are defined in a generic class _idGenObjectLayout-1.

Export Modifications

In an effort to force the rectangle with the image to display the colored border, an HTML export was made using an added custom css style sheet. This style sheet had the following style defined:

div.RoundedImage {
border:4px solid #FF33CC;
border-radius:24px;
}

The result is seen in Figure 3 below. You may need to look closely to notice the white space between the border and the image. As you can see, the round cornered border does not display well when exported to HTML. (Perhaps this is a reason InDesign ignores the border when exporting to HTML.) So, for now, when exporting to HTML you may prefer to remove borders around rectangles with placed images. 

To get the text to display inside a bordered frame (Figures 3 and 4), a rectangle was created with the RoundedCorner object style applied. The object style was removed from the text frame which was then copied and pasted inside the rectangle using Edit > Paste Into.

Rule 1: To have an empty page item display with either the HTML or EPUB format, you must add the item to the Articles panel and use Content Order: Based on Articles Panel when exporting.

Rule 2: A border around a page item with an image inside does not display when exported to HTML. You can force a border to display using a custom css file, but the result is not satisfactory.

Rule 3: To display text inside a bordered page item, paste the text frame inside a bordered page item.

Rule 4: To have the author name display as part of the EPUB book (Figure 4), Use File > File Info… in InDesign to add metadata information to the document. Make sure Include Document Metadata is checked in the Advanced panel for the export.