Features

Formatting EPUB files using Cascading Style Sheets

By Robert Desprez

Newer Help Authoring Tools such as MadCap Flare or Adobe RoboHelp can quickly create an EPUB file that includes a title page, table of contents, and the topics that you authored. After generating an EPUB file using a Help Authoring Tool (HAT), you can take your formatting to the next level by opening the EPUB file and editing the Cascading Style Sheet (CSS), which provides additional formatting control of the file.

In this article, I’ll briefly explain some of the advantages and disadvantages of EPUB files, and how to unzip and edit the CSS to gain more control over page breaks and widows and orphans.

A Few Basics

An EPUB document is an e-book standard created by the International Digital Publishing Forum (IDPF). EPUB files can be read on a myriad of devices including the iPad, iPhone, computers, and smartphones running on Android. To read an EPUB file, you need to install a piece of software called an e-reader. Free e-readers include iBooks for any of Apple’s devices and Adobe Digital Editions for PCs.

For technical writers, I believe EPUB files are one of the technologies to watch. With tablets and smartphones outselling PCs, users will increasingly be reading content—including technical communication—on these devices.

Advantages of EPUB files
  • Content reflow. One of the key advantages of an EPUB file is its ability to reflow on different devices. Figure 1 shows how an EPUB file appears on an iPad and how the same file appears on an iPhone.
Figure 1. An EPUB file on an iPad (left) and iPhone (right).
Figure 1. An EPUB file on an iPad (left) and iPhone (right).

It’s the same file but the e-reader optimizes the presentation of the content for the device you’re using. In contrast, a PDF file may look beautiful on your 24-inch monitor but may be difficult to read on your smartphone because of all the scrolling and zooming required.

  • Easy to produce. In the past, some of the Help Authoring Tools could generate an EPUB file but then required some extra steps to prepare the file for final usage. Luckily, new versions of Help Authoring Tools make it easy to generate EPUBs.
  • Can be viewed offline. Once an EPUB file is transferred to a smartphone or tablet, it can be read without an Internet connection. It’s the same idea as an e-book that you download from Amazon using an Internet connection. After you have downloaded the e-book, a network connection is no longer required.
  • Can be delivered using Apple’s iBookstore. iBookstore, Apple’s site that enables you to download EPUB files, does not support PDF files.
Disadvantages of an EPUB
  • Best suited to linear reading. The EPUB file format excels for traditional books, such as Moby Dick, which you read linearly. As we all know, users of technical documents do not read this way. They skip from topic to topic in an effort to find the answers they need. As e-readers don’t always display navigational aids like the table of contents all the time, it’s easier for users to get disoriented in large documents.
  • Extra app required. To view an EPUB file, your users need to download and install e-reader software. For PCs, readers may want to download and install Adobe Digital Editions, which is free. If your users are using an iPad or iPhone, they can also download and install iBooks, Apple’s free e-reader app. For users who are not very technically savvy, finding and installing e-reader software could be a stumbling block. Moreover, there’s the additional challenge of getting the EPUB file onto their device.
  • Formatting of an EPUB file. Presentation of content, such as fonts, may not display consistently across different e-readers. Later in this article, I’ll delve into the ways you can mitigate inconsistent formatting.
Controlling Page Breaks

If you work as a technical communicator, you probably use a Help Authoring Tool, which does enable some basic page breaks in an EPUB file. But if more control is needed, edit your CSS.

Unzipping an EPUB

Complete the following steps to unzip your EPUB file:

  • Use the Help Authoring Tool to generate the EPUB file.
  • Locate your EPUB file.
  • Change the .epub extension to .zip.
  • Unzip the contents of the folder.
  • Double-click the OEBPS folder (“OEBPS” stands for Open e-Book Publication Structure; see Figure 2).
Figure 2. Double-click the OEBPS folder.
Figure 2. Double-click the OEBPS folder.
  • Locate and open the default.css file using a text editor. This is your CSS file.
Using Page Breaks

Add the following code using a text editor:

h2 {

page-break-before: always;           

}

In the CSS, it might appear as in Figure 3.

Figure 3. Page breaks in CSS.
Figure 3. Page breaks in CSS.

This first entry adds a page break before every instance of a heading 2. This might be useful if you want to insert a page break before a chapter title.

Here are some other options to consider:

  • H3 {page-break-before: avoid;} This entry prevents an element (in this case, an H3 style) to begin on a new page, unless absolutely necessary. You might want to use this code to try and ensure that content is grouped together.
  • H3 {page-break-after: avoid;} This entry prevents a page break after an item. For example, Figure 4 shows a highlighted heading at the bottom of the left-hand page. Applying this code would prevent the page break after the heading (assuming the heading uses an H3 style).
Figure 4. A highlighted heading.
Figure 4. A highlighted heading.
  • H3 {page-break-inside: avoid} This prevents an element such as a table or long list from being divided by a page-break. Keep in mind that if your table or list spans multiple pages, the e-reader needs to create a break somewhere.
Controlling Alignment

In your Help Authoring Tool, you can specify your text alignment. Most of the time, technical writers left-align their content. But if you are viewing your EPUB file on an iPad, it overrides your alignment settings and presents the content as justified.

Fortunately, you can override the settings on the iPad.

The easiest way to do this is by asking users to make a straightforward configuration change.

To change the justification settings on an iPad:

  • Install iBooks on the iPad.
  • Go to Settings on your iPad.
  • Go under your Apps settings and click iBooks.
  • Turn off Full Justification to override the settings.
  • Open an EPUB file in iBooks.

Your content is then aligned the way you designed it.

Controlling Widows and Orphans

Using the CSS in your EPUB project, you can control widows and orphans in Adobe Digital Editions and Nook. As of May 2013, you cannot control widows and orphans in iBooks.

A widow is the last line of a paragraph, marooned on one side of a page break. Figure 5 shows an example of a widow.

Figure 5. A widow (right).
Figure 5. A widow (right).

An orphan is a word, part of a word, or very short line that appears by itself at the bottom of a page.

Fortunately, you can override widows and orphans by adding a bit of code in your CSS. Figure 6 shows how you can specify that if a widow appears, that at least two lines of a paragraph appear at the top of a page. Of course, the number can be any number you wish.

Figure 6. Setting rules for widows.
Figure 6. Setting rules for widows.

Similarly, you can control orphans by using the following code, which dictates that at least two lines of a paragraph appear together at the bottom of a page.

p {orphans:2; }

Next Steps

After you make changes to the CSS, re-zip the EPUB project, rename it so it uses an .epub extension, and test it on all the different e-readers that your users may be using. Different e-readers may render your EPUB file differently, so testing is vital.

Validating Your Content

When you create an EPUB file, it’s a good idea to validate it against the EPUB 3 specification. If you don’t validate, your content may not display properly.

Here are a couple of websites to use to validate your content:

https://code.google.com/p/epubcheck

http://validator.idpf.org

Robert Desprez has worked as a technical writer in Vancouver, British Columbia, for more than 10 years and has served in leadership positions for the Canada West Coast Chapter of STC. He loves learning about new technology.

Additional Resources

Castro, Elizabeth. 2011. EPUB Straight to the Point: Creating Ebooks for the Apple iPad and Other Ereaders. Peachpit Press.

Castro, Elizabeth. Website on formatting EPUB files, www.pigsgourdsandwikis.com.

Desprez, Robert. Generating iPad Content Using Robohelp 10, www.robertdesprez.com/2012/09/06/generating-ipad-content-using-robohelp-10/.