📄 CSS page-break-before — Forcing New Pages, Just Before You Need Them

Perfect control over printed page flow, starting exactly where you want.

When printing HTML content, controlling where pages break is crucial for professional-looking documents. The CSS property page-break-before gives you the power to force a page break right before an element — perfect for chapters, sections, headers, or any important content that should start on a new page.

---

🔹 What is page-break-before?

The page-break-before property tells the browser to insert a page break before the selected element during printing or print preview.

This means the element will always start at the top of a new printed page if the rule applies.

---

📘 Syntax

selector {
  page-break-before: value;
}

Common values:

Value	Meaning
auto (default)	Insert page break automatically if needed
always	Always insert a page break before element
avoid	Avoid page break before element if possible
left	Start the element on a left page (booklets)
right	Start the element on a right page (booklets)

---

✍️ Example

<h2 class="chapter">Chapter 2</h2>
<p>Text for chapter 2 starts here...</p>

.chapter {
  page-break-before: always;
}

📄 In print preview, “Chapter 2” always begins on a new page, regardless of where it falls in the previous page.

---

🖼️ Image 1: Visual Example of page-break-before

Description:

• Two printed pages shown side by side.
• Page 1 ends with “Chapter 1”.
• Page 2 starts with “Chapter 2” preceded by a visible page break line.
• The page break occurs just before the <h2> element labeled “Chapter 2”.

🎯 Purpose: Illustrate how page-break-before: always moves content to the next page before it starts.

---

🆚 Related Page Break Properties

Property	Function
page-break-before	Insert page break before element
page-break-after	Insert page break after element
page-break-inside	Avoid or allow breaks within element

---

🧠 Best Practices

• Always include your page-break rules inside a print media query:

@media print {
  h2.chapter {
    page-break-before: always;
  }
}

• Use page-break-before: avoid on elements you don’t want broken across pages (e.g., images, tables).
• Test your print styles in multiple browsers to ensure consistent page breaks.

---

🖼️ Image 2: Multi-section Document with Page Breaks

Description:
A multi-page print preview of a report or book with several sections:

• Each section heading has page-break-before: always.
• Each new section starts neatly at the top of a new page.
• No awkward splits between heading and content.

🎯 Purpose: Show professional print layout with controlled page breaks.

---

🔄 Modern Alternative: break-before

CSS3 introduces the break-before property, which is more versatile and supported in newer browsers:

@media print {
  h2.chapter {
    break-before: page;
  }
}

Use break-before for future-proofing your styles while maintaining compatibility with page-break-before.

---

✅ Summary

• Purpose: Force a page break before a specific element when printing.
• Best use cases: Section or chapter headings, major divisions in printed content.
• Values: auto, always, avoid, left, right.
• Use with: @media print for print-specific styling.
• Test across browsers for consistent printing.

---

🔚 Final Thought

Control over printed page breaks elevates your documents from a simple web page to a polished, print-ready publication. With page-break-before, you can make sure every new section starts fresh — exactly where it should.

---