Your prescription for increased productivity and profitability
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.
To see the difference between the two export formats, here is a little test for you:
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.
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.