Chapter Page Placement and Styling

How to Start Chapters on an Odd or Even Page

A common use case is to arrange the chapters of the publication to start on an odd page number so that in the printed output, the chapter starts on the right side of the book.

By default, pages that have the same name are merged together in a single page sequence. If you want each of the chapters to have its own sequence, you can use the -oxy-page-group:start CSS property to create separate page sequences. This allows you to control the start page of each of the chapters.

.chapter {
	page: chapter-page;
	-oxy-page-group: start;
}

To specify which page the chapter should start on, you can use another CSS property, the -oxy-initial-page-number property:

@page chapter-page {
	-oxy-initial-page-number: auto-odd;
}

Supported values for -oxy-initial-page-number are: auto, auto-even, auto-odd, <number>.

Moving the chapter on a specific page number may create blank padding pages at the end of the previous page sequence. If you want to style those blank pages, use the :blank page selector:

@page :blank{
	@top-center{content:"Intentionally left blank"};
}

How to End Chapters on an Odd or Even Page

Another use case is to specify how a page sequence should end. If the sequence should have a total number of odd or even pages (or if it should end on an even or odd page).

Suppose you have a table of contents that follows the cover page and you need to want to end up with an even number of pages.

<div class='toc'>Table of Contents..

.toc {
	page: toc-page;
}

Now you can use the -oxy-force-page-count property with an even value:

@page toc-page {
	-oxy-force-page-count: even;
}

Supported values for -oxy-force-page-count are: even, odd, end-on-even, end-on-odd, auto, no-force.

How to Style the First Page of a Chapter

You can use the :first page rule selector to control how the first page of a chapter will look. For example, suppose you do not want the header to appear on the chapter first page. Your CSS might look like this:

@page {
	@top-right-corner{content: counter(page);}
	@top-left{content: 'My Publication';}
}

.chapter {
	page: chapter-page;
	-oxy-page-group: start;
}

@page chapter-page:first {
	@top-right-corner{content: none;}
	@top-left{content: none;}
}