Learn about its use cases, available options like auto, always, avoid, left, and right, and how to optimize your printed layout.
Introduction
The page-break-after
property in CSS helps control where pages break when printing a web page. It’s essential for web design, ensuring content is well-organized and easy to read. While page-break-after
is older, understanding it helps maintain compatibility with older sites and browsers.
Specification
The page-break-after
property is part of the CSS Paged Media Module, which defines formatting for printed documents. It allows developers to control page breaks after specific elements, improving the appearance and readability of printed content.
The page-break-after
property is defined in the following specifications:
- CSS Logical Properties and Values Level 1: Describes logical properties that adapt to the writing mode and script of the document.
- CSS Paged Media Module Level 3: Specifically addresses the formatting of content in paged media, providing detailed control over page breaks.
Syntax
The page-break-after
property is used to control page breaks after elements when printing. The syntax is straightforward:
Keyword Values
auto
: Default value, allowing automatic page breaks.always
: Forces a page break after the element.avoid
: Prevents a page break after the element, if possible.left
: Forces a page break so the next page is a left page.right
: Forces a page break so the next page is a right page.recto
: Acts likeright
for left-to-right pages, and likeleft
for right-to-left pages.verso
: Acts likeleft
for left-to-right pages, and likeright
for right-to-left pages.
Global Values
inherit
: Inherits the value from its parent.initial
: Sets the property to its default value (auto
).revert
: Resets the property to the user agent’s default value.revert-layer
: Resets the property to the value established by the originating layer.unset
: Acts as eitherinitial
orinherit
.
Example Syntax
This property applies to block-level elements that generate a box.
Values
The page-break-after
property can take several values to define how page breaks should be handled after an element:
auto
always
avoid
left
right
recto
verso
Global Values
inherit
initial
revert
revert-layer
unset
Page Break Aliases
The page-break-after
property is considered a legacy property and has been largely replaced by the break-after
property in modern CSS. For compatibility reasons, page-break-after
is often treated as an alias of break-after
.
Alias Mapping
page-break-after Value | break-after Value |
---|---|
auto | auto |
left | left |
right | right |
avoid | avoid |
always | page |
Example of Aliasing
Best Practices
- Check Compatibility: Always check browser compatibility tables.
- Use Both Properties: For maximum compatibility, use both properties:
- Plan for Transition: If maintaining an older codebase, plan to transition to
break-after
gradually.
Formal Definition
The page-break-after
property controls page breaks after specific elements when printing.
Initial Value
auto
: Allows automatic page breaks.
Applies To
- Block-level elements: Applies to block-level elements in the normal flow.
Inherited
- No: This property is not inherited from parent elements.
Computed Value
- As specified: The computed value is the same as the specified value.
Animation Type
- Discrete: Changes abruptly from one value to another.
Formal Syntax
Examples
Setting a Page Break After Footnotes
Avoiding Page Breaks After Headings
Ensuring Left-Page Formatting After Sections
Ensuring Right-Page Formatting After Paragraphs
Using recto
and verso
for Directional Page Breaks
Example HTML and CSS
By using the page-break-after
property effectively, you can ensure that your printed documents are well-organized and easy to read.
Browser Compatibility
The page-break-after
property is widely supported across modern web browsers, ensuring that your printed documents maintain their intended layout and formatting. Here’s a breakdown of the browser compatibility for the page-break-after
property:
Browser Support
Browser | Version | Release Date |
---|---|---|
Google Chrome | 1.0 | Dec 2008 |
Firefox | 1.0 | Nov 2004 |
Internet Explorer/Edge | 4.0 | Sep 1997 |
Opera | 7 | Jan 2003 |
Safari | 1.0 | Jun 2003 |
Compatibility Notes
- Google Chrome: The
page-break-after
property has been supported since the first version of Google Chrome, released in December 2008. - Firefox: Firefox has supported this property since its initial release in November 2004.
- Internet Explorer/Edge: Support for
page-break-after
began with Internet Explorer 4.0, released in September 1997. The Edge browser, which succeeded Internet Explorer, continues to support this property. - Opera: Opera has supported
page-break-after
since version 7, released in January 2003. - Safari: Safari has supported this property since its first version, released in June 2003.
Best Practices for Compatibility
While the page-break-after
property is well-supported, it’s important to consider the following best practices to ensure compatibility across all browsers:
- Use Both Properties: For maximum compatibility, use both
page-break-after
andbreak-after
in your CSS. This ensures that your printed layout is maintained across both older and newer browsers. - Check Browser Compatibility Tables: Regularly refer to browser compatibility tables to stay updated on the latest support for CSS properties.
- Test Across Browsers: Always test your printed documents across different browsers to ensure that the layout is consistent and as intended.
- Fallback Values: Use CSS fallback values to ensure that your content remains readable even if the
page-break-after
property is not supported.
Example of Browser-Specific CSS
Here’s an example of how you might use browser-specific CSS to ensure compatibility:
By following these best practices and understanding the browser compatibility of the page-break-after
property, you can ensure that your printed documents are well-formatted and readable across all major browsers. This enhances the user experience and professionalism of your web content.
See Also
To further enhance your web development and design skills, you might want to explore related CSS properties and resources. Here are some useful links and references that can help you better understand and utilize page break properties:
Related CSS Properties
break-before
: This property controls page breaks before an element, providing similar functionality topage-break-before
.break-after
: This property controls page breaks after an element, effectively replacingpage-break-after
.break-inside
: This property controls page breaks inside an element, helping to prevent breaks within specific content.page-break-before
: This property controls page breaks before an element, similar tobreak-before
.page-break-inside
: This property controls page breaks inside an element, similar tobreak-inside
.
Additional Resources
orphans
: This property specifies the minimum number of lines that must be left at the bottom of a page.widows
: This property specifies the minimum number of lines that must be left at the top of a page.
Helpful Guides and References
- CSS Paged Media Module Level 3: This module provides detailed specifications for paged media, including page break properties.
- CSS Logical Properties and Values Level 1: This specification defines logical properties and values that adapt to the writing mode and script of the document.
Learning More
- MDN Web Docs: The Mozilla Developer Network offers comprehensive documentation and examples for the
page-break-after
property. - W3C CSS Paged Media: The World Wide Web Consortium (W3C) provides official specifications and guidelines for CSS properties related to paged media.
By exploring these related properties and resources, you can gain a deeper understanding of how to control page breaks and enhance the printed layout of your web pages. This knowledge will help you create polished and professional documents that are well-formatted and easy to read.
Whether you’re a seasoned developer or just starting out, these resources will provide valuable insights and practical examples to help you master the use of page break properties in CSS.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.