← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 19 of 25

CSS Pagination (Print)

Think of a book editor deciding exactly where each chapter should start on a fresh page, and making sure a table never gets sliced in half between two pages -- readers hate flipping back and forth to see the rest of a broken row. CSS pagination rules give the browser those same editorial instructions when it prints a webpage onto physical pages.

In this page:

  1. The @page Rule
  2. Named Pages and :first
  3. Controlling Breaks Before and After an Element
  4. Preventing an Element From Splitting: break-inside
  5. Widows and Orphans
Syntax
css 
@page {
  size: A4;
  margin: length;
}
selector {
  page-break-after: always;
  break-inside: avoid;
}

The @page Rule

@page defines styling that applies specifically to printed pages, most commonly setting page margins and page size, and is only meaningful inside a print stylesheet or print media query -- it has no effect on normal screen rendering.

Note:
  • Accepted values:
  • size: auto | A4 | letter | landscape | portrait | <length> <length> — page size
  • margin: <length> — page margins
  • @page :first — first page only
  • @page :left | :right — left and right pages

Example: The @page Rule

css 
<style>
body { font-family: sans-serif; padding: 1rem; }
@page {
  margin: 2cm;
  size: A4;
}
</style>
<h1>Printed page</h1>
<p>Open the print preview: the page gets a 2cm margin and A4 size.</p>

Named Pages and :first

The @page rule supports a :first pseudo-class for styling only the first printed page differently (e.g. a larger top margin for a cover page), and named page selectors let different sections of a document use different @page rules.

Note:
  • Accepted values:
  • @page :first — the first printed page
  • @page :left — left-hand pages
  • @page :right — right-hand pages
  • @page name { } — named page, applied to an element with page: name

Example: Named Pages and :first

css 
<style>
body { font-family: sans-serif; padding: 1rem; }
@page :first {
  margin-top: 5cm;
}
</style>
<h1>First page title</h1>
<p>In print, the first page gets a 5cm top margin.</p>

Controlling Breaks Before and After an Element

break-before and break-after (the modern replacements for the older page-break-before/page-break-after properties) force or avoid a page break immediately before or after a given element, commonly used to always start a new chapter or section on a fresh page.

Note:
  • Accepted values:
  • break-before: auto — default, no forced break
  • break-before | break-after: page — always break the page
  • break-before | break-after: left | right — break so the next page is a left or right page
  • break-before | break-after: column — break to the next column
  • break-before | break-after: avoid | avoid-page | avoid-column — avoid a break when possible
  • break-after takes the same values as break-before
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Controlling Breaks Before and After an Element

css 
<style>
body { font-family: sans-serif; padding: 1rem; }
h1 {
  break-before: page;
}
</style>
<p>Intro text</p>
<h1>Starts on a new printed page</h1>
<p>Chapter text.</p>

Preventing an Element From Splitting: break-inside

break-inside: avoid tells the printer not to split a given element's content across two pages at all -- essential for tables, figures, or code blocks where a mid-content split would make the printed page unreadable.

Note:
  • Accepted values:
  • break-inside: auto — default, may split
  • break-inside: avoid — keep the box together
  • break-inside: avoid-page — no page break inside
  • break-inside: avoid-column — no column break inside
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Preventing an Element From Splitting: break-inside

css 
<style>
table { border-collapse: collapse; }
td { padding: 8px; }
table {
  break-inside: avoid;
}
</style>
<table border="1"><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></table>

Widows and Orphans

widows and orphans control the minimum number of lines of a paragraph that must appear together at the top (widows) or bottom (orphans) of a page split, preventing the awkward typographic case of a single stray line left alone on a page.

Note:
  • Accepted values:
  • orphans: 2 — default minimum lines at the bottom of a page
  • widows: 2 — default minimum lines at the top of a page
  • widows: <integer> — any positive integer
  • orphans: <integer> — any positive integer
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Widows and Orphans

css 
<style>
p { background: #eef6ff; padding: 6px; }
.page { column-count: 2; width: 360px; height: 120px; border: 2px solid #1e6fd9; }
p {
  widows: 3;
  orphans: 3;
}
</style>
<div class="page"><p>Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one.</p><p>Long paragraph two. Long paragraph two. Long paragraph two. Long paragraph two.</p></div>
Live Example
Related Topics

CSS Print Styles · CSS Dark Mode · CSS User Interface · CSS Accessibility

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Expecting @page to affect the screen, when it applies only when printing.
  2. Setting break-inside: avoid on elements taller than a page, which the browser cannot honour.
  3. Setting margins in @page and expecting them to apply to the on-screen page.
Browser Support

Print and @page support varies between browsers; check MDN's compatibility table before relying on specific @page properties.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Print Styles Next Lesson → CSS Dark Mode

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.