CSS Page-Break-Before Control Printed Page Breaks

Introduction

The page-break-before property in CSS helps control where page breaks occur before an element, making it handy for print layouts. It’s been replaced by the break-before property in newer CSS versions for better compatibility.

Understanding this property can help you create well-formatted print documents. Let’s dive into its syntax, values, and examples.

Specification

The page-break-before property is defined in the CSS Paged Media Module Level 3 specification, which outlines the formatting rules for printed pages. It’s also mentioned in the CSS Logical Properties and Values Level 1 specification for consistent behavior across different writing modes.

Description

The page-break-before property controls where page breaks happen before an element, particularly useful for print media. It applies to block-level elements like <div>, <p>, and <header>, but not to empty <div> elements or absolutely positioned elements.

Syntax

The syntax for the page-break-before property is simple:

/* Keyword values */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;

Explanation of Keyword Values

• auto: Default value. Page breaks occur naturally.
• always: Forces a page break before the element.
• avoid: Avoids a page break before the element if possible.
• left: Forces a page break before the element to start on a left page.
• right: Forces a page break before the element to start on a right page.
• recto: Acts like right if pages progress left-to-right, and like left if pages progress right-to-left.
• verso: Acts like left if pages progress left-to-right, and like right if pages progress right-to-left.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value.
• revert: Resets the property to its inherited value if it inherits, or to its initial value if not.
• revert-layer: Resets the property to the value established by the next outer CSS cascade layer.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Values

auto

This is the initial value and the default behavior. It allows automatic page breaks.

page-break-before: auto;

always

This value forces a page break before the element.

page-break-before: always;

avoid

This value suggests that a page break before the element should be avoided whenever possible.

page-break-before: avoid;

left

This value forces a page break before the element so that the next page is formatted as a left page.

page-break-before: left;

right

This value forces a page break before the element so that the next page is formatted as a right page.

page-break-before: right;

recto

This value acts like right if the pages progress from left to right, and like left if the pages progress from right to left.

page-break-before: recto;

verso

This value acts like left if the pages progress from left to right, and like right if the pages progress from right to left.

page-break-before: verso;

Global Values

• inherit: Inherits the value from the parent element.

page-break-before: inherit;

• initial: Sets the property to its default value.

page-break-before: initial;

• revert: Resets the property to its inherited value if it inherits, or to its initial value if not.

page-break-before: revert;

• revert-layer: Resets the property to the value established by the next outer CSS cascade layer.

page-break-before: revert-layer;

• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

page-break-before: unset;

Page Break Aliases

The page-break-before property is now considered a legacy property and has been replaced by the more modern break-before property. Browsers treat page-break-before as an alias of break-before for compatibility.

Alias Mapping

Example

/* Using page-break-before */
div.example {
  page-break-before: always;
}

/* Using break-before */
div.example {
  break-before: page;
}

In both cases, a page break will be forced before the div.example element.

Formal Definition

The page-break-before property controls page breaks before a specified element, particularly useful for print media.

Initial Value

The initial value for the page-break-before property is auto.

Applies To

The page-break-before property applies to block-level elements in the normal flow of the root element.

Inherited

This property is not inherited by default.

Computed Value

The computed value of the page-break-before property is the same as the specified value.

Animation Type

The page-break-before property is of a discrete animation type.

Summary Table

Formal Syntax

The formal syntax of the page-break-before property is defined as follows:

page-break-before =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  initial  |
  inherit  |
  revert   |
  revert-layer  |
  unset;

Usage Example

/* Force a page break before the element */
.section {
  page-break-before: always;
}

/* Avoid a page break before the element */
.subsection {
  page-break-before: avoid;
}

/* Force a page break before the element so that the next page is formatted as a left page */
.chapter {
  page-break-before: left;
}

/* Force a page break before the element so that the next page is formatted as a right page */
.chapter-right {
  page-break-before: right;
}

/* Inherit the value from the parent element */
.inherited-section {
  page-break-before: inherit;
}

Examples

Example 1: Forcing a Page Break

/* Force a page break before the element */
.section {
  page-break-before: always;
}

Example 2: Avoiding a Page Break

/* Avoid a page break before the element */
.subsection {
  page-break-before: avoid;
}

Example 3: Starting on a Left Page

/* Force a page break before the element so that the next page is formatted as a left page */
.chapter {
  page-break-before: left;
}

Example 4: Starting on a Right Page

/* Force a page break before the element so that the next page is formatted as a right page */
.chapter-right {
  page-break-before: right;
}

Example 5: Inheriting the Value

/* Inherit the value from the parent element */
.inherited-section {
  page-break-before: inherit;
}

These examples illustrate how to use the page-break-before property to control the print layout of your web pages effectively. By using the correct syntax and values, you can ensure that your documents are well-formatted and professional when printed.

Understanding the page-break-before Property

The page-break-before property in CSS helps control where page breaks occur before specific elements when printing. Here are some practical examples to help you understand how to use it effectively.

Avoid a Page Break Before an Element

Sometimes you want to prevent a page break before a specific element to keep related content together. Use page-break-before: avoid for this.

/* Prevent page break before elements with the class 'no-break' */
.no-break {
  page-break-before: avoid;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Avoid Page Break Before an Element</title>
    <style>
        .no-break {
            page-break-before: avoid;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content that should stay on the same page as the following section.
    </p>
    <div class="no-break">
        This section should not start on a new page. It should stay on the same page as the introductory content.
    </div>
</body>
</html>

Force a Page Break Before an Element

If you want to ensure an element starts on a new page, use page-break-before: always.

/* Force page break before elements with the class 'new-page' */
.new-page {
  page-break-before: always;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Force Page Break Before an Element</title>
    <style>
        .new-page {
            page-break-before: always;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <div class="new-page">
        This content will start on a new page.
    </div>
</body>
</html>

Format the Next Page as a Left or Right Page

For documents with a book-like layout, you can control whether the next page is formatted as left or right using page-break-before: left or page-break-before: right.

Left Page Example

/* Force the next page to be formatted as a left page */
.left-page {
  page-break-before: left;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Format Next Page as Left Page</title>
    <style>
        .left-page {
            page-break-before: left;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <div class="left-page">
        This content will start on a left page.
    </div>
</body>
</html>

Right Page Example

/* Force the next page to be formatted as a right page */
.right-page {
  page-break-before: right;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Format Next Page as Right Page</title>
    <style>
        .right-page {
            page-break-before: right;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <div class="right-page">
        This content will start on a right page.
    </div>
</body>
</html>

Use Global Values

You can inherit the page-break-before value from a parent element or reset it using global values like inherit, initial, revert, and unset.

Inherit Example

/* Inherit page-break-before value from parent element */
.inherited {
  page-break-before: inherit;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Inherit Page Break Before</title>
    <style>
        .parent {
            page-break-before: always;
        }
        .child {
            page-break-before: inherit;
        }
    </style>
</head>
<body>
    <div class="parent">
        This content will start on a new page.
        <div class="child">
            This content will inherit the page-break-before value from the parent.
        </div>
    </div>
</body>
</html>

Practical Tips

• Testing: Use the print preview feature in your browser to see how page breaks will appear.
• Compatibility: While page-break-before is widely supported, test your layout in different browsers to ensure consistent behavior.

By using these examples and tips, you can effectively control the print layout of your web pages, ensuring a clean and professional appearance.

Specifications

The page-break-before property is defined in several CSS specifications:

CSS Paged Media Module Level 3

This specification defines how web pages should be formatted when printed, including the page-break-before property.

CSS Logical Properties and Values Level 1

This specification provides guidelines on how to use the page-break-before property to control the layout of printed documents across different writing modes and directions.

Practical Implications

• Consistency: Following these specifications ensures that your printed documents are consistent across different browsers and platforms.
• Readability: Proper use of the page-break-before property enhances the readability of your printed documents by keeping related content together.
• Professionalism: Adhering to the specifications helps create professional-looking printed documents that meet industry standards.

Example Usage

/* Force a page break before the header element */
header {
  page-break-before: always;
}

Example HTML

<!DOCTYPE html>
<html>
<head>
    <title>Force Page Break Before Header</title>
    <style>
        header {
            page-break-before: always;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <header>
        This header will start on a new page.
    </header>
</body>
</html>

Browser Compatibility

The page-break-before property is widely supported across major web browsers:

• Google Chrome: Full support since version 1.0.
• Microsoft Edge: Full support since version 12.0.
• Mozilla Firefox: Full support since version 1.0.
• Opera: Full support since version 7.0.
• Safari: Full support since version 1.2.

Practical Tips

1. Print Preview: Always use the print preview feature to see how page breaks will appear.
2. Cross-Browser Testing: Test your layout in multiple browsers to ensure consistent behavior.
3. Fallbacks: Consider using fallback methods or alternative CSS properties if you encounter browser compatibility issues.

By understanding and adhering to the specifications related to the page-break-before property, you can create well-formatted print documents that are consistent, readable, and professional.

Browser Compatibility for page-break-before

Understanding how the page-break-before property works in different browsers is important for web developers who want to create well-formatted print documents. By testing your layout in various browsers and using the print preview feature, you can ensure that your printed documents look as intended across different platforms.

Supported Browsers

See Also

If you found the page-break-before property useful, you might also be interested in these related CSS properties that can help you control the layout and behavior of your printed documents.

Related Properties

1. break-before: This is the modern replacement for the page-break-before property. It provides more consistent behavior and better compatibility across different browsers.
   • [MDN Web Docs - break-before]WebsiteUrl
2. break-after: Similar to break-before, this property controls page breaks after an element.
   • [MDN Web Docs - break-after]WebsiteUrl
3. break-inside: This property controls page breaks inside a block-level element, allowing you to prevent page breaks within specific sections of your content.
   • [MDN Web Docs - break-inside]WebsiteUrl
4. page-break-after: This property controls page breaks after an element, similar to page-break-before but for the opposite position.
   • [MDN Web Docs - page-break-after]WebsiteUrl
5. page-break-inside: This property controls page breaks inside a block-level element, similar to break-inside.
   • [MDN Web Docs - page-break-inside]WebsiteUrl
6. orphans: This property specifies the minimum number of lines in a block container that must be left at the bottom of a page. This helps prevent widows and orphans in your printed documents.
   • [MDN Web Docs - orphans]WebsiteUrl
7. widows: This property specifies the minimum number of lines in a block container that must be left at the top of a page. Similar to orphans, it helps in maintaining a clean layout.
   • [MDN Web Docs - widows]WebsiteUrl

Additional Resources

1. CSS Paged Media Module Level 3: This specification defines how web pages should be formatted when printed, including the use of page-break properties.
   • [CSS Paged Media Module Level 3]WebsiteUrl
2. CSS Logical Properties and Values Level 1: This specification focuses on ensuring consistent behavior across different writing modes and directions, including the use of page-break properties.
   • [CSS Logical Properties and Values Level 1]WebsiteUrl
3. MDN Web Docs CSS Reference: A comprehensive guide to CSS, including detailed explanations and examples of various properties.
   • [MDN Web Docs CSS Reference]WebsiteUrl
4. W3C CSS Specifications: The official specifications for CSS, providing detailed information on all CSS properties and their usage.
   • [W3C CSS Specifications]WebsiteUrl

By exploring these related properties and resources, you can gain a deeper understanding of how to control the layout and behavior of your printed documents using CSS. This will help you create well-formatted, professional-looking documents that meet industry standards and provide a great user experience.

Help Improve MDN

Contributing to the MDN Web Docs (Mozilla Developer Network) is a great way to help improve the web development community. Your contributions can make a significant difference by providing clear, accurate, and up-to-date information for developers around the world.

How to Contribute

1. Identify Areas for Improvement:
   • Look for outdated content, inaccuracies, or areas that could be explained more clearly.
   • Check the “Needs Technical Review” and “Needs Content Review” tags for articles that require attention.
2. Learn About Contributing:
   • Visit the [MDN Contributing Guide]WebsiteUrl to understand the process and guidelines for contributing.
   • Familiarize yourself with the [MDN Style Guide]WebsiteUrl to ensure your contributions align with the existing content.
3. Create a GitHub Account:
   • If you don’t already have one, create a GitHub account.
   • Sign in to GitHub and navigate to the [MDN Web Docs repository]WebsiteUrl.
4. Fork the Repository:
   • Fork the MDN Web Docs repository to your own GitHub account. This allows you to make changes and submit them for review.
5. Make Your Changes:
   • Clone your forked repository to your local machine.
   • Make the necessary changes to the content. This could include updating information, fixing typos, or adding new sections.
   • Ensure your changes are well-documented and follow the MDN style guidelines.
6. Submit a Pull Request:
   • Once you’ve made your changes, push them to your forked repository on GitHub.
   • Create a pull request (PR) to submit your changes for review. Include a clear and concise description of the changes you made.
   • The MDN team will review your PR and provide feedback. Be prepared to make any necessary revisions based on their comments.

Why Contribute?

• Improve the Web Development Community: Your contributions help ensure that developers have access to accurate and up-to-date information, which is crucial for creating high-quality web applications.
• Enhance Your Knowledge: By contributing to MDN, you’ll deepen your understanding of web development concepts and best practices.
• Build Your Reputation: Contributing to a well-known and respected resource like MDN can enhance your professional reputation and demonstrate your commitment to the web development community.

Additional Resources

• MDN Web Docs Contributor Guide: A comprehensive guide to contributing to MDN, including detailed instructions and guidelines.
  • [MDN Contributor Guide]WebsiteUrl
• MDN Writing Style Guide: Provides guidelines for writing clear, concise, and consistent content for MDN.
  • [MDN Writing Style Guide]WebsiteUrl
• MDN GitHub Repository: The official GitHub repository for MDN Web Docs, where you can submit your contributions.
  • [MDN GitHub Repository]WebsiteUrl

By contributing to MDN, you can make a meaningful impact on the web development community and help ensure that developers have access to high-quality, accurate information. Your contributions are greatly appreciated and valued.

Notes

While the page-break-before property is useful for controlling page breaks in printed documents, it’s important to keep a few things in mind:

1. Modern Replacement: The page-break-before property has been replaced by the break-before property in more recent CSS specifications. It is recommended to use the break-before property for better compatibility and more consistent behavior across different browsers.
2. Print Media: The page-break-before property only affects printed documents. It does not have any effect on the on-screen display of web pages.
3. Block-Level Elements: This property applies to block-level elements that generate a box. It will not work on empty <div> elements or absolutely positioned elements because these do not generate a box.
4. Test Print Preview: To see the effect of the page-break-before property, use the print preview feature in your browser. This will give you a clear idea of how the page breaks will appear when the document is printed.
5. Browser Compatibility: While the page-break-before property is widely supported, slight differences in how browsers handle page breaks can affect the final output. Always test your layout in multiple browsers to ensure consistent behavior.

By understanding these notes, you can effectively use the page-break-before property to enhance the print layout of your web pages while being aware of its limitations and best practices.

Supported Browsers

The page-break-before property is widely supported across major web browsers, ensuring that web developers can effectively control the layout of printed documents. Below is a list of browsers that support the page-break-before property:

Supported Browsers

• Google Chrome: Full support since version 1.0 (released in December 2008).
• Microsoft Edge: Full support since version 12.0 (released in July 2015).
• Mozilla Firefox: Full support since version 1.0 (released in November 2004).
• Opera: Full support since version 7.0 (released in January 2003).
• Safari: Full support since version 1.2 (released in June 2003).

Practical Tips

1. Print Preview: Always use the print preview feature in your browser to see how the page breaks will appear when the document is printed. This will give you a clear idea of the final layout.
2. Cross-Browser Testing: Test your layout in multiple browsers to ensure consistent behavior. Even though the page-break-before property is widely supported, slight differences in how browsers handle page breaks can affect the final output.
3. Fallbacks: If you encounter issues with browser compatibility, consider using fallback methods or alternative CSS properties to achieve the desired layout.

Example Usage

Here is an example of how the page-break-before property can be used in a CSS stylesheet:

/* Force a page break before the header element */
header {
  page-break-before: always;
}

Corresponding HTML

<!DOCTYPE html>
<html>
<head>
    <title>Force Page Break Before Header</title>
    <style>
        header {
            page-break-before: always;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <header>
        This header will start on a new page.
    </header>
</body>
</html>

Explanation

• CSS: The page-break-before: always property is applied to the header element. This forces a page break before the header, ensuring that it starts on a new page.
• HTML: The HTML structure includes a paragraph and a header element. The browser will insert a page break before the header, ensuring that it starts on a new page when printed.

Viewing the Effect

To see the effect of the page-break-before property, use the print preview feature in your browser. This will give you a clear idea of how the page breaks will appear when the document is printed.

Browser Compatibility Table

Understanding the browser compatibility of the page-break-before property is crucial for web developers who want to create well-formatted print documents. By testing your layout in different browsers and using the print preview feature, you can ensure that your printed documents look as intended across various platforms.

CSS page-break-before Property – FAQs

What is the purpose of the page-break-before property in CSS?

The page-break-before property in CSS is used to control the behavior of page breaks before an element when printing a document. It specifies whether a page break should occur before the specified element, allowing developers to define how the document should be formatted when printed.

How can I prevent a page break before an element?

To prevent a page break before an element, use: page-break-before: avoid;. This suggests avoiding a page break before the element, but it is not guaranteed in all situations.

What values can I use with the page-break-before property?

The values for page-break-before include:

• auto: Refers to automatic page breaks.
• always: Forces a page break before the element.
• avoid: Suggests avoiding a page break before the element.
• left: Forces a page break before the element so that the next page is formatted as a left page.
• right: Forces a page break before the element so that the next page is formatted as a right page.
• recto: Acts like right if pages progress left-to-right, and like left if pages progress right-to-left.
• verso: Acts like left if pages progress left-to-right, and like right if pages progress right-to-left.
• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value.
• revert: Resets the property to its inherited value if it inherits, or to its initial value if not.
• revert-layer: Resets the property to the value established by the next outer CSS cascade layer.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Does page-break-before affect the display on screen?

The page-break-before property only affects printed documents. It does not have any effect on the on-screen display of web pages.

How can I create a right-side page break before a section?

To create a right-side page break before a section, use:

.right-page {
  page-break-before: right;
}

This will force the element to start on the next right-hand page when printed.

How can I prevent a page break before an element?

To prevent a page break before an element, use:

.no-break {
  page-break-before: avoid;
}

This suggests to the browser that a page break before the specified element should be avoided whenever possible.

Example

Here’s how you can use these properties in your CSS and HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Page Break Example</title>
    <style>
        .right-page {
            page-break-before: right;
        }
        .no-break {
            page-break-before: avoid;
        }
    </style>
</head>
<body>
    <p>
        This is some introductory content.
    </p>
    <div class="right-page">
        This section will start on a right page when printed.
    </div>
    <p class="no-break">
        This paragraph should not start on a new page.
    </p>
</body>
</html>

Explanation

• CSS: The page-break-before: right property forces a page break before elements with the class right-page, ensuring they start on the next right-hand page when printed. The page-break-before: avoid property suggests that a page break before elements with the class no-break should be avoided.
• HTML: The HTML structure includes a paragraph and a div with the class right-page, and another paragraph with the class no-break. The browser will insert a page break before the div and try to avoid a page break before the no-break paragraph.

Practical Use Cases

1. Book-Like Layouts: Use page-break-before: right to ensure sections start on the right page.
2. Keeping Related Content Together: Use page-break-before: avoid to keep headings and paragraphs together.
3. Special Sections: Ensure important sections start on the right page with page-break-before: right.

Values for page-break-before

• auto: Allows automatic page breaks.
• always: Forces a page break before the element.
• avoid: Avoids a page break before the element.
• left: Forces a page break before the element to start on a left page.
• right: Forces a page break before the element to start on a right page.
• recto: Acts like right for left-to-right progression and left for right-to-left.
• verso: Acts like left for left-to-right progression and right for right-to-left.

Does page-break-before affect the display on screen?

No, the page-break-before property only affects printed documents and does not change the on-screen display.

Viewing the Effect

To see the effect of the page-break-before property, use the print preview feature in your browser. This will show you how the page breaks will appear when the document is printed.

Browser Compatibility

While the page-break-before property is widely supported, it is good practice to test your layout in different browsers to ensure consistent behavior.

By using these properties effectively, you can enhance the readability and professionalism of your printed documents.