CSS Page Left and Right for Double-Sided Printing

CSS Paged Media module provides the @page :left and @page :right pseudo-class selectors to target alternating pages in a printed document. This setup facilitates professional double-sided (duplex) book printing by allowing developers and typesetters to define distinct margins, headers, footers, and page numbers for left-facing (verso) and right-facing (recto) pages, ensuring content remains readable and properly aligned once bound.

The Mechanics of Recto and Verso Pages

In physical book publishing, pages are viewed as two-page spreads. Right-hand pages (recto) are odd-numbered, while left-hand pages (verso) are even-numbered. Because the two pages mirror each other across the book's center spine, applying uniform styles to all pages leads to layout issues when bound.

The @page :left selector targets all even-numbered pages, and @page :right targets all odd-numbered pages. Using these selectors allows you to treat each side of a spread as an individual design canvas.

Accommodating the Binding Gutter

The most critical function of @page :left and @page :right is managing the binding margin, known as the gutter. When pages are bound together into a spine, a portion of the inner margin is hidden or curved inward.

To compensate, the inner margin must be wider than the outer margin:

• For @page :left (verso): The spine is on the right side of the page, meaning margin-right must be larger.
• For @page :right (recto): The spine is on the left side of the page, meaning margin-left must be larger.

@page :left {
  margin-top: 20mm;
  margin-bottom: 20mm;
  margin-left: 15mm;  /* Outer edge */
  margin-right: 25mm; /* Inside gutter edge */
}

@page :right {
  margin-top: 20mm;
  margin-bottom: 20mm;
  margin-left: 25mm;  /* Inside gutter edge */
  margin-right: 15mm; /* Outer edge */
}

Dynamic Running Headers and Page Numbers

Standard book design dictates that page numbers appear on the outer edges of a spread so readers can easily flip through the book. Similarly, running headers typically alternate—often displaying the book title on the left page and the current chapter title on the right page.

Using CSS margin boxes inside @page :left and @page :right, elements can be placed symmetrically:

@page :left {
  @top-left {
    content: counter(page);
  }
  @top-right {
    content: "Book Title";
    font-style: italic;
  }
}

@page :right {
  @top-left {
    content: string(chapter-title);
    font-style: italic;
  }
  @top-right {
    content: counter(page);
  }
}

Enforcing Chapter Start Alignment

In traditional publishing, major sections or chapters almost always begin on a right-hand page. Pairing the :left and :right configuration with page break controls ensures this layout rule is followed.

By applying break-before: right; (or page-break-before: right;) to a chapter heading, the printing engine automatically inserts a blank left page if the previous chapter finishes on a right page:

h1.chapter-title {
  break-before: right;
}

Through symmetrical margin handling, mirrored running headers, and coordinated page breaks, @page :left and @page :right transform standard web content into press-ready layouts suitable for professional book manufacturing.