When creating documents for print, managing how content flows from one page to the next is crucial for readability and presentation. The page-break-before property in CSS provides control over where a new page should start, enabling designers to avoid awkward breaks within sections or elements. This property is particularly useful for ensuring that certain elements always appear at the top of a new page, maintaining a professional and organized layout.
The page-break-before property allows developers to specify whether a page break should occur before a particular element, ensuring logical and aesthetic division of content. In this article, we will explore the page-break-before property in detail, starting with basic setups and moving on to practical examples.
Basic Setup
Before diving into the details of the page-break-before property, let’s set up a basic example to demonstrate its functionality. We’ll create a simple HTML structure with some CSS to define our elements and apply page break styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Page-Break-Before Example</title>
<style>
.section {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.break-before {
page-break-before: always;
}
</style>
</head>
<body>
<div class="section">
<h1>Section 1</h1>
<p>This is the first section. It should be followed by a new page.</p>
</div>
<div class="section break-before">
<h1>Section 2</h1>
<p>This is the second section. It will start on a new page.</p>
</div>
<div class="section">
<h1>Section 3</h1>
<p>This is the third section. It will continue on the same page if space permits.</p>
</div>
</body>
</html>In this example, we define a .section class with basic styling for the sections of our content. We then add a .break-before class that applies the page-break-before: always; property to ensure a new page starts before the element it is applied to.
Understanding the page-break-before Property
The page-break-before property in CSS is used to control the placement of page breaks before an element when printing. The property can take the following values:
auto: Default value. Neither force nor forbid a page break before the element.always: Always force a page break before the element.avoid: Avoid a page break before the element.left: Force one or two page breaks before the element, so that the next page is formatted as a left page.right: Force one or two page breaks before the element, so that the next page is formatted as a right page.
By using these values, developers can manage how content is organized across printed pages, ensuring a logical and visually appealing division of content.
Practical Examples of page-break-before
Let’s explore practical examples of using the page-break-before property with different values.
Example: Forcing a Page Break Before an Element
In this example, we will apply the page-break-before property to force a page break before a specific element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Page-Break-Before Always Example</title>
<style>
.section {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.break-before {
page-break-before: always;
}
</style>
</head>
<body>
<div class="section">
<h1>Introduction</h1>
<p>This is the introduction section. It should be followed by a new page for the main content.</p>
</div>
<div class="section break-before">
<h1>Main Content</h1>
<p>This is the main content section. It will start on a new page.</p>
</div>
<div class="section">
<h1>Conclusion</h1>
<p>This is the conclusion section. It will appear after the main content without a forced page break.</p>
</div>
</body>
</html>In this example, the .break-before class applies the page-break-before: always; property to the second section. As a result, a new page starts before the “Main Content” section, ensuring it appears at the top of a new page.
Using the page-break-before: always; property is useful for ensuring that significant sections of content begin on a new page, maintaining the readability and flow of printed documents.
Example: Avoiding a Page Break Before an Element
Let’s modify the example to use the page-break-before property to avoid a page break before a specific element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Page-Break-Before Avoid Example</title>
<style>
.section {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.break-avoid {
page-break-before: avoid;
}
</style>
</head>
<body>
<div class="section">
<h1>Part 1</h1>
<p>This is part one of the content. It should not cause a page break before the next section.</p>
</div>
<div class="section break-avoid">
<h1>Part 2</h1>
<p>This is part two of the content. It will avoid causing a page break before this section.</p>
</div>
<div class="section">
<h1>Part 3</h1>
<p>This is part three of the content. It will continue on the same page if space permits.</p>
</div>
</body>
</html>In this example, the .break-avoid class applies the page-break-before: avoid; property to the second section. As a result, a page break is avoided before the “Part 2” section, ensuring that the “Part 3” section continues on the same page if space permits.
Using the page-break-before: avoid; property is beneficial for keeping related content together on the same page, enhancing the readability and coherence of printed documents.
Example: Forcing Page Breaks for Left and Right Pages
Let’s explore how to use the page-break-before property to force page breaks for left and right pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Page-Break-Before Left and Right Example</title>
<style>
.section {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.break-left {
page-break-before: left;
}
.break-right {
page-break-before: right;
}
</style>
</head>
<body>
<div class="section">
<h1>Section A</h1>
<p>This section is followed by a left page break.</p>
</div>
<div class="section break-left">
<h1>Section B</h1>
<p>This section will be followed by a left page break.</p>
</div>
<div class="section break-right">
<h1>Section C</h1>
<p>This section will be followed by a right page break.</p>
</div>
<div class="section">
<h1>Section D</h1>
<p>This section continues after the forced page breaks.</p>
</div>
</body>
</html>In this example, the .break-left class applies the page-break-before: left; property to the second section, ensuring that the next page is formatted as a left page. Similarly, the .break-right class applies the page-break-before: right; property to the third section, ensuring that the next page is formatted as a right page.
Using the page-break-before: left; and page-break-before: right; properties allows for precise control over the formatting of printed documents, ensuring that content is appropriately divided across left and right pages.
Conclusion
The page-break-before property in CSS is an essential tool for managing page breaks in printed content. By using this property, developers can control how content is divided across multiple pages, ensuring a logical and visually appealing layout for printed documents.
By experimenting with different values for the page-break-before property and combining it with other CSS properties, designers can create sophisticated and professional print layouts. The examples provided in this article serve as a foundation, encouraging further exploration and creativity in using CSS and the page-break-before property to design visually appealing printed content.
