by Robert Desprez
Help Authoring Tools such as Madcap Flare and Adobe RoboHelp will quickly create an ePub file that includes a title page, table of contents, and the content that you authored. However, you can control the format of an ePub after it has been created by the Help Authoring Tool by performing some simple edits within a Cascading Style Sheet (CSS).
In this article, I'll briefly explain how to unzip the ePub file and edit the CSS so that you gain more control over page breaks.
A Few Basics
An ePub document is a zip file with the .epub extension. ePub files can be read using e-reader software on myriad devices including the iPad, iPhone, PCs, and smartphones running on Android.
For technical writers, I believe ePub files are one of the technologies to watch. The iBooks bookstore sells its ebooks in an ePub file format. With tablets and smartphones forecast to outsell PCs in the near future, users will increasingly be reading content--including technical communications--on these devices.
One of the key advantages of an ePub file is its ability to reflow on different devices. The following image shows how an ePub file appears on an iPad:
The next screen shot shows how the same file appears on an iPhone:
In contrast, a PDF file may look beautiful on your 24-inch monitor at home but is difficult to read on your smartphone. It does not resize-making it difficult and tedious to read on a small screen.
Controlling Page Breaks Inside Adobe RoboHelp
If you work as a technical communicator, you probably use a Help Authoring Tool, such as RoboHelp or Madcap Flare. These tools provide a lot of the "heavy lifting" for you: they create the title page, a table of contents, and the topics themselves. You can also use them to control some basic page breaks.
The following image shows how RoboHelp 10 allows you to set page breaks for certain heading levels. In this case, I've specified that every time I use Heading 2 ("h2" in the left list), RoboHelp creates a new page break or topic.
Help Authoring Tools, in short, provide you with rudimentary control over page breaks. But if more control is needed, edit your CSS.
Unzipping an ePub
- 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 eBook Publication Structure).
- Locate the default.css folder. This is your CSS folder.
Controlling Page Breaks
Inside the CSS file add the following code using a text editor:
h2 {
page-break-before: always;
}
In the CSS, it might appear like the following image:
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, a heading3) from beginning 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-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.
- H3 {page-break-after: avoid;} This entry discourages a page break after an item. For example, this could prevent the heading3 that appears at the bottom of the following left page.
Next Steps
After you make changes to the CSS, re-zip the ePub project, rename so it uses an .epub extension, and test it on all the different e-readers that your users may be using. I've installed Adobe Digital Editions on my computer and iBooks for the iPhone and iPad. Different e-readers may render your ePub file differently so testing is vital.
In future articles, I'll explain how to control text alignment, widows and orphans, and fonts.
Additional Resources
ePub Straight to the Point by Elizabeth Castro.
Castro's web site on formatting ePub files: http://www.pigsgourdsandwikis.com
Recent Comments