CSS break-after: recto: Force Right-Hand Page Starts

The CSS break-after: recto property is a specialized rule in paged media used to ensure that the content following a specific element always begins on a right-hand page. Primarily used when preparing digital documents for physical print or bound book formatting, this property automatically inserts one or two page breaks—including a blank page if necessary—so that subsequent sections or chapters reliably start on an odd-numbered, recto page.

Understanding Recto and Verso in Print Design

In traditional book design and typography, double-sided documents consist of two types of pages:

• Recto: The right-hand page of an open spread, traditionally assigned odd page numbers (1, 3, 5, etc.) in left-to-right scripts.
• Verso: The left-hand page of an open spread, traditionally assigned even page numbers (2, 4, 6, etc.).

Major publications, academic texts, and novels standardly begin new chapters or major divisions on a recto page to maintain structural rhythm and visual consistency.

How break-after: recto Works

When break-after: recto is declared on an element (such as an article wrapper, section container, or the final element of a chapter), the rendering engine evaluates where the next content block falls:

1. If the current content ends on a verso (left) page: The user agent inserts a single page break, moving the subsequent content directly to the following recto (right) page.
2. If the current content ends on a recto (right) page: The user agent cannot place the next content immediately on the next sequential page, as that would be a verso page. Instead, it generates a blank verso page and advances the following content to the next available recto page.

.chapter {
  break-after: recto;
}

Alternatively, the same layout behavior can be applied to the start of a chapter using the related property:

.chapter {
  break-before: recto;
}

Browser and Tool Support

The break-after: recto property is defined in the CSS Fragmentation Module Level 3 specification. While standard web browsers have limited support for recto and verso layout distinctions during routine web browsing, the property is fully recognized by print-focused CSS rendering engines used to generate books and PDFs, such as Prince XML, Antenna House Formatter, and WeasyPrint.

In environments supporting the legacy CSS Paged Media Module Level 3, the equivalent historic syntax is:

.chapter {
  page-break-after: right;
}

Modern rendering pipelines prefer break-after: recto because it adapts logically according to the reading direction of the document, ensuring appropriate binding orientation regardless of language conventions.