56 Left or Right Chapter Openings (for Print/PDF)

One of the decisions to make about your print layout is:

Do I want my chapters to always open on the right hand side (with a blank page inserted if necessary)?
or
Do I want my chapters to open on either left or right hand side?

This chapter will show you have to achieve either.

In print/PDF output, the settings for whether or not chapters open right or open either right or left (as well as front matter, and back matter) is set in the CSS, and changes depending on the theme.

NOTE: Pressbooks will always force certain pages to open on the right, including: half-title page, title page, table of contents, introduction, first chapter, all part pages, first back matter page.

If you would like to modify how your chosen theme treats chapter openings, then you will need to:
a) chose a Custom Theme
b) Edit the Custom CSS …
IMPORTANT: in the make sure you select a base theme for Ebook AND PDF (and web if you want)

(For more info on custom CSS settings, see here.)

The CSS we use to make this modification is the {page-break-before} attribute. For our purposes here, there are three options for page-break-before:

  • page-break-before: auto; … which means the page break before happens automatically.
  • page-break-before: right; … Inserts a page break before the element so that the next page is formatted as a right page
  • page-break-before: left; … Inserts a page break before the element so that the next page is formatted as a right page

And here is the CSS code that you will need to add/modify in your Custom CSS:

/* PAGE SETTINGS: RECTO / VERSO CHAPTER OPENINGS */

div.front-matter {
page-break-before: right;
}
div.front-matter + div.front-matter {
page-break-before: auto;
}
div.chapter {
page-break-before: right;
}
div.chapter + div.chapter {
page-break-before: auto;
}
div.part {
page-break-before: right;
}
div.back-matter {
page-break-before: right;
}
div.back-matter + div.back-matter {
page-break-before: auto;
}

If you always want your chapters to open on the right, then you would change this:

div.chapter + div.chapter {
page-break-before: auto;
}

To:

div.chapter + div.chapter {
page-break-before: right;
}

NOTE1: div.chapter + div.chapter … means “a chapter that follows another chapter,” which enables us to style the first chapter differently than all subsequent chapters.

NOTE2: If you’d like to modify how front matter or back matter behave, then you would modify the corresponding code in the CSS.

License

Icon for the Creative Commons Attribution 4.0 International License

Pressbooks User Guide Copyright © 2012 by Book Oven Inc. (Pressbooks.com) is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book