Page Breaks

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Prefatory notes

The text and HTML versions of our e-books are continuous media, i.e., they consist of a single, very long, scrollable “page”. The various e-reader devices and apps, however, as well as print-outs of the HTML version, are paged media—just like “real” books.

One way to improve those formats is to influence the position of page breaks. Since the page size will vary depending on the device and format, it is impossible to set each and every page break, like a typesetter can do for a physical book; but it is possible to use page breaks to structure the e-book, like we do with blank lines in the text version. Another reason to influence the position of page breaks is to avoid breaks in undesirable locations.

CSS properties for influencing page breaks

CSS provides several properties for influencing the position of page breaks, the most useful of which are “page-break-before” and “page-break-after”. They let you adjust page breaks before or after block elements. The most important values, as listed by W3Schools, are:

  • “always” - forces a page break.
  • “left” and “right” - force page breaks until the next left/right page is reached. These two properties are ignored by most browsers—which means that there will be no page break, and “always” would have been the better choice.
  • “avoid” - asks the browser to avoid a page break in the specified place. This property is generally ignored as well, but adding it does no harm, so it can still be used—in the hope that future browsers will eventually support it.
  • “auto” - is the same as not using the property at all, but can be used to override other values.

Other CSS properties meant to influence page breaks are “page-break-inside” (which is similar to “page-break-before” and “page-break-after”), “widows” and “orphans”. These properties are supported in even fewer browsers; adding them should do no harm, however, and future browsers will probably eventually support them.

Due to the uncertain support for these properties, we are mostly limited to forcing page breaks. This, however, can go a long way toward improving the appearance of your e-book. Additionally, it can in some cases be used to prevent page breaks where they are not wanted: Starting a chapter on a new page, for example, should prevent a page break right after the chapter heading; a title page that starts on a new page has a smaller chance of getting split in the middle.

N.B.: Currently, information about the support for the above-mentioned properties is only available for browsers. Most e-readers seem to support “page-break-before” and “page-break-after” with the value “always”, but support for the other properties and values is unknown.

Examples

Forcing a page break can be as simple as setting a class on a heading and specifying a single CSS property for it. Here’s the HTML:

<h2 class="break-before">Chapter I</h2>

And here’s the CSS to go with it:

.break-before
{
  page-break-before: always;
}

This will result in a page break right before Chapter I. If you want page breaks before all chapters, you can just set the property on <h2>:

h2
{
  page-break-before: always;
}

The next example shows a (simplified) title page and the CSS to add page breaks before and after it:

<div class="title-page">
  <p>THE WINDERMERE SERIES</p>

  <h1>GULLIVER’S<br/>
  TRAVELS</h1>

  <p>By JONATHAN SWIFT</p>

  <p>with illustrations by<br/>
  MILO WINTER</p>
</div>
.title-page
{
  text-align: center;
  page-break-before: always;
  page-break-after: always;
}

It is not required to use a <div> around the title page; it is equally valid to use “page-break-before” on the first element and “page-break-after” on the last element. Or, instead of using “page-break-after”, you can use “page-break-before” on the first element after the title page for the same result.

Further information

If you define page breaks within the normal CSS, they will apply to print-outs and the display on e-readers alike, but will not influence the display in a normal browser—since the browser display is continuous and not paged. It is equally possible, however, to define different page breaks for print-outs and e-readers by using @media blocks, which allows you greater control over where they appear.

If you want to set appropriate margins and paddings after page breaks, you should use @media blocks, so that they apply only where you want them. Margins are not a reliable way to move the content on the new page down, as most browsers and e-readers ignore “margin-top” on the first element after a forced page break. They do honour “padding-top”, however, so you can use that instead. Remember to reduce the “margin-top” accordingly if you do—otherwise you might end up with a lot of vertical space in case both properties are honoured. The Case Study on Title Pages contains an example of a half-title page that follows this approach.

Page breaks are not cumulative. If, for some reason, several forced page breaks occur in the same place (e.g., when an element with “page-break-before” follows an element with “page-break-after”), there will only be one page break, and not a blank page. Additionally, a forced page break will win over an avoided page break on such occasions.

To comment or request edits to this page, please contact lhamilton or hdmtrad.

Return to DP Official Documentation Menu