Controlling page breaks in an EPUB file

New­er Help Author­ing Tools such as Mad­cap Flare or Adobe Robo­Help will quick­ly cre­ate an EPUB file that includes a title page, table of con­tents, and the top­ics that you authored. If you don’t mind open­ing the EPUB file after author­ing it in a Help Author­ing Tool, edit­ing the Cas­cad­ing Style Sheet (CSS), you can gain a lot more con­trol over the for­mat­ting of the file.

In this blog entry, I’ll briefly explain how to unzip the EPUB file and edit the CSS so that you gain more con­trol over page breaks. In March, I spoke about for­mat­ting EPUB files using a CSS at the Writ­er­sUA conference.

A few basics

An EPUB doc­u­ment is a zip file with the .epub exten­sion. EPUB files can be read using e‑reader soft­ware on a myr­i­ad of devices includ­ing the iPad, iPhone, PCs, and smart­phones run­ning on Android.

For tech­ni­cal writ­ers, I believe EPUB files are one of the tech­nolo­gies to watch. The iBooks book­store sells its ebooks in an EPUB file for­mat. With tablets and smart­phones fore­cast to out­sell PCs in the future, users will increas­ing­ly be read­ing content—including tech­ni­cal communications—on these devices.

One of the key advan­tages of an EPUB file is its abil­i­ty to reflow on dif­fer­ent devices.  The fol­low­ing image shows how an EPUB file appears on an iPad:

The next screen shot shows how the same file appears on an iPhone:

In con­trast, a PDF file may look beau­ti­ful on your 24-inch mon­i­tor at home but is dif­fi­cult to read on your smartphone.

Controlling page breaks inside RoboHelp

If you work as a tech­ni­cal com­mu­ni­ca­tor, you prob­a­bly use a Help Author­ing Tool, such as Robo­Help or Mad­cap Flare. These tools pro­vide a lot of the “heavy lift­ing” for you: they cre­ate the title page, a table of con­tents, and the top­ics them­selves. You can use them to con­trol some basic page breaks. But if more con­trol is need­ed, edit your CSS.

Unzipping an EPUB

Com­plete the fol­low­ing steps to unzip your EPUB file: 

1. Locate your EPUB file.
2. Change the .epub exten­sion to .zip.
3. Unzip the con­tents of the folder.
4. Dou­ble-click the OEBPS fold­er (“OEBPS” stands for Open eBook Pub­li­ca­tion Structure).

5. Locate the default.css file. This is your CSS file.

Using page breaks

Inside the CSS file add the fol­low­ing code using a text editor:

h2 {

page-break-before: always;           

}

In the CSS, it might appear like the fol­low­ing image:

This first entry adds a page break before every instance of a head­ing 2. This might be use­ful if you want to insert a page break before a chap­ter title.

Here are some oth­er options to consider:

• H3 {page-break-before: avoid;} This entry pre­vents an ele­ment (in this case, a heading3) to begin on a new page, unless absolute­ly nec­es­sary. You might want to use this code to try and ensure that con­tent is grouped together.
• H3 {page-break-after: avoid;} This entry dis­cour­ages a page break after an item.
• H3 {page-break-inside: avoid} This pre­vents an ele­ment such as a table or long list from being divid­ed by a page-break. Keep in mind that if your table or list spans mul­ti­ple pages, the e‑reader needs to cre­ate a break some­where.

Next steps

After you make changes to the CSS, re-zip the EPUB project, rename so it uses an .epub exten­sion, and test it on all the dif­fer­ent e‑readers that your users may be using. I’ve installed Adobe Dig­i­tal Edi­tions on my com­put­er and iBooks for the iPhone and iPad. Dif­fer­ent e‑readers may ren­der your EPUB file dif­fer­ent­ly so test­ing is vital.

In future blog entries, I’ll explain how to con­trol text align­ment, wid­ows and orphans, and fonts.

Additional resources

EPUB Straight to the Point
by Eliz­a­beth Castro

Cas­tro’s web site on for­mat­ting EPUB files:
http://www.pigsgourdsandwikis.com