CSS Style pageBreakBefore Property: CSS Page Break Before

Table of Contents

CSS `page-break-before` Property: Controlling Page Breaks

The page-break-before property in CSS allows you to specify whether a page break should occur before the element it’s applied to when printing a document. This property is particularly useful for ensuring that content is logically separated across pages when generating print layouts. It offers granular control over where a page break is forced, avoided, or allowed, enhancing the readability and organization of printed documents.

Purpose and Use Cases

The primary purpose of page-break-before is to manage how content flows across pages in print media. Common use cases include:

Ensuring that headings always start on a new page.
Preventing figures or tables from being split across pages.
Logically dividing chapters or sections in a printed book or report.

Syntax and Values

The page-break-before property accepts several values, each dictating different behaviors regarding page breaks before the element:

page-break-before: auto | always | avoid | left | right | page | column | initial | inherit;

Value	Description
`auto`	The browser determines if a page break is necessary before the element. This is the default behavior.
`always`	Always insert a page break before the element. The element will always start on a new page.
`avoid`	Avoid a page break before the element, if possible. The browser will try to keep the element on the same page as the content preceding it.
`left`	Insert one or two page breaks before the element so that the next page is formatted as a left page.
`right`	Insert one or two page breaks before the element so that the next page is formatted as a right page.
`page`	Behaves the same as `always`. (Deprecated; use `always` instead.)
`column`	Insert a column break before the element in a multi-column layout.
`initial`	Sets the property to its default value (`auto`).
`inherit`	Inherits this property from its parent element.

Examples

Let’s explore practical examples demonstrating the use of the page-break-before property.

Example 1: Forcing a Page Break Before a Heading

This example ensures that each <h1> heading starts on a new page when printed.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Break Before Example</title>
    <style>
      h1 {
        page-break-before: always;
      }
    </style>
  </head>
  <body>
    <h1>Chapter 1</h1>
    <p>This is the content of chapter 1.</p>
    <h1>Chapter 2</h1>
    <p>This is the content of chapter 2.</p>
  </body>
</html>

In this case, <h1>Chapter 1</h1> will start on a new page, and <h1>Chapter 2</h1> will also start on a new page.

Example 2: Avoiding a Page Break Before an Image

This example attempts to prevent an image from being separated from the preceding text by a page break.

<!DOCTYPE html>
<html>
  <head>
    <title>Avoid Page Break Before Image</title>
    <style>
      img {
        page-break-before: avoid;
      }
    </style>
  </head>
  <body>
    <p>This is some text before the image. We want to make sure the image stays with this text on the same page if possible.</p>
    <img src="https://dummyimage.com/300x200/000/fff" alt="Example Image">
  </body>
</html>

The browser will attempt to keep the image on the same page as the preceding paragraph.

Example 3: Using `left` and `right` Values

These values are particularly useful when printing double-sided documents.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Break Before Left/Right Example</title>
    <style>
      h1.right-page {
        page-break-before: right;
      }

      h1.left-page {
        page-break-before: left;
      }
    </style>
  </head>
  <body>
    <h1 class="right-page">Chapter 1 (Right Page)</h1>
    <p>This chapter starts on a right-hand page.</p>
    <h1 class="left-page">Chapter 2 (Left Page)</h1>
    <p>This chapter starts on a left-hand page.</p>
  </body>
</html>

In this example, “Chapter 1” will start on a right-hand page, and “Chapter 2” will start on a left-hand page. The browser will insert a page break (or two) as necessary to achieve this.

Example 4: Combining with Other CSS Properties

You can combine page-break-before with other CSS properties to fine-tune your print layouts. For example, you might want to avoid breaking inside an element as well.

<!DOCTYPE html>
<html>
  <head>
    <title>Combined Page Break Properties</title>
    <style>
      .avoid-break {
        page-break-inside: avoid;
        page-break-before: avoid;
      }
    </style>
  </head>
  <body>
    <div class="avoid-break">
      <h2>Section Title</h2>
      <p>This section should not be split across pages if possible. This is ensured by avoid page-break-inside and page-break-before</p>
    </div>
  </body>
</html>

In this scenario, the browser will try to keep the entire div element, including the heading and paragraph, on a single page.

Example 5: Using `initial` and `inherit`

These values are useful for resetting or propagating the page-break-before property.

<!DOCTYPE html>
<html>
  <head>
    <title>Initial and Inherit Example</title>
    <style>
      body {
        page-break-before: always;
      }

      p {
        page-break-before: initial; /* Reset to default: auto */
      }

      div {
        page-break-before: inherit; /* Inherit from body: always */
      }
    </style>
  </head>
  <body>
    <p>This paragraph will not necessarily start on a new page (initial resets to auto).</p>
    <div>This div will always start on a new page (inherits from body).</div>
  </body>
</html>

Here, the paragraph resets to the default auto behavior, while the div inherits the always value from the body.

Tips and Best Practices

Test Thoroughly: Always test your print styles in actual print previews or on physical paper, as browser rendering can vary. 📝
Use Judiciously: Overusing page-break-before can lead to inefficient page usage and poor readability.
Consider page-break-inside and page-break-after: These properties work together to provide comprehensive control over page breaks. Combine them as needed for optimal results.
Print-Specific Stylesheets: Use a separate CSS stylesheet for print media by using @media print { ... }. This keeps your screen and print styles separate and manageable. 🖨️
```
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
```

Browser Support

The page-break-before property is widely supported across modern browsers, including:

Chrome
Firefox
Safari
Edge
Opera

Conclusion

The page-break-before property is a powerful tool for controlling page breaks in print layouts, allowing you to create well-organized and readable printed documents. By understanding its syntax, values, and practical applications, you can ensure that your content is presented effectively in print media. Use it in conjunction with other page break properties for maximum control over your print output.