Controlling Page Breaks - HTML

Another way to control the flow of a printed page is to force page breaks before or after named elements. There’s good news here. Browser support is actually pretty decent.
You can set the page-break-before or page-break-after property in a p element, for example, to force a page break before or after all p elements. You probably wouldn’t want to actually do that unless you have awfully long paragraphs, but you can create a class selector rule and apply the rule to the first or last paragraph of a page, depending on your needs, like this:

In this case, then, you simply apply it to a head element of a page:

<h2 class=“pagebreak”>How the Panose System Works</h2>

Note that you can’t use page breaks within positioned elements. This means that if you have an absolutely positioned div element with a child p element and the p element has a page break assigned to it via a CSS rule, it won’t work.

Using the Page-Break Properties
When your users wish to print your pages, you may want to avoid starting pages with a few lines from a paragraph that started on a previous page. The way to accomplish this is with a CSS page-break property. There are three of them:

  • The page-break-before property specifies how a page should break after a specific element, and on what side of the page the flow should resume.
  • The page-break-after property specifies how a page should break before a specific element, and on what side of the page the flow should resume.
  • The page-break-inside property tells the browser how to break a page from within a box element. Actual support for this property is limited to Opera 3.5.

Neither Internet Explorer nor Netscape browsers support this property. If you don’t have a lot of headings, you can set up a style rule and call a page-break property using an element’s class attribute. Browser support is strongest in Opera 3.5 and above.

Using the page-break-before and page-break-after properties
The page-break-before and page-break-after properties specify how a page should break before or after a specific element, depending on which of the two properties you use, and on what side of the page the flow should resume. The CSS2 documentation provides these general guidelines:

  • Page breaking should be avoided inside table elements, floating elements, and block elements with borders.
  • Page breaking should occur as few times as possible. In other words, it’s not a good idea to break a page with every paragraph.
  • Pages that don’t have explicit breaks should be approximately the same height.

Once again, the best support for this property is in the Opera browser. Internet Explorer also supports page-break properties, particularly the always value. In fact, in Internet Explorer, the left and right values are treated as if they are always. In addition, Internet Explorer ignores this property when used with hr and br elements. Table lists the values that can be used with either the page-break-before or page-break-after property.

Even though Opera is designed to support the inherit property value, some bugs have been reported on this feature indicating that Opera will often crash on pages using this value.

In Table the browser support can be assumed to be true for versions following the one named for each specific browser, unless an inconsistency or bug is noted in the description.

Using the page-break-before and page-break-after properties

Listing shows how the page-break-before property is used in a head element (H2) to help ensure that a page starts with a head element instead of a few lines of dangling paragraph text. Figures show how the effect appears in a Print Preview screen in Internet Explorer. Note that the figures represent the rendered page as it would look with all the source code intact .

Using the Page-Break-Before CSS Property

Figures show how the Print Preview looks before applying the page break using the class attribute. Note the last heading on the first page, which is at the end of the page and has no text under. This is because the page broke at a bad spot. Figures show how the print previews look after the CSS has been fixed.

You can use your browser’s Print Preview to view how the page willlook in print (Page 1).

You can use your browser’s Print Preview to view how the page will look in print (Page 1).

Page two of the print preview using page-break-before shows the break occurring on the H2 element.

Page two of the print preview using page-break-before shows the break occurring on the H2 element.

This page improves upon the page breaking.

This page improves upon the page breaking.

The page break in Listing is handled through a class selector shown in bold, which is applied to an H1 element, also in bold.

Using the page-break-inside property
You can also use a page-break-inside property to handle page breaks within elements (for example, if you have a very long div element). However, in practice, the only current browser support is in Opera 3.5 and higher.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics