Printing with Page Breaks

Jake Howlett, 13 May 2001

Category: Forms; Keywords: CSS style print

Following my article a week or so ago about controlling printing using CSS I received quite a few mails asking me about whether we can use page-breaks when printing on the web. Not quite sure what the link between the two is but all the same it appears this is a topic that needs discussing.

You can indeed control page-breaks on the web, assuming, that is, you are using IE4+ or OP5+. Level 2 of the CSS Specification defines two attributes: page-break-before and page-break-after. We could use either to do the job but I shall look at using the latter. Before we start take a look at this page in Print Preview mode (you could also print the page but i wouldn't want to advocate such a waste of paper). Notice that everything after this paragraph starts on a separate page.

How did I do that:

The above paragraph starts with the following HTML:

<div style="page-break-after:always;">You can indeed....

This "styling" tells the browser that as soon as that paragraph finishes everything after it should start printing on a new page. We could just as well apply the same rule to, say, all the paragraphs on a page by adding the following to its header:

p {
page-break-after : always;
}

However, it's is more likely that you will want to apply breaks only after certain elements rather than after every paragraph. That's why it is probably better to apply the style individually or to a set of elements that you can use selectively like the DIV.

What about a useful example:

Let's take an example of a Notes form where using this method might be more than just for the sake of it. Consider a form that contains lots of information which can be divided in to separate sections. Your user probably wants to have each part start printing on a separate page. I'm going to use the example of a financial report for a fiscal year (I'm working at a bank at the moment) where each quarter's report should start on a new page. Probably the easiest way to do this is to place each quarter report in to a separate DIV element. We can then define the style for the DIVs so that each one has a page-break after it. First thing to do is add this CSS to the "HTML Header" ($$HTMLHead) on the form:

div {
page-break-after : always;
}

Let's assume that each quarter's report is in a separate Rich-Text field and that the form consists of a general information header and then the four fields. We need to split these fields apart using some Pass-Thru HTML that wraps them each inside a separate DIV element. When done the form would look something like the one shown below:

When a document using this form is viewed on the web it will display each section in a new DIV and when these get printed they are on separate pages. All of this will, of course, be invisible to the user.

Now let's get really clever:

What if some of your users want to print pages with the page-break and some want to print them without? You know what they are like! Well, we can always give them the option. Using the pageBreakAfter property of an element we can use JavaScript to toggle between breaking and non-breaking. The following function loops through all the elements and turns page-breaks on or off depending on an argument passed to the function. It then takes another argument passed in and decides whether or not to print the document.

function togglePageBreakAfter( ){

 divs = document.getElementsByTagName(arguments[0]); 

 for (var i=0; i < divs.length; i++ ) { 

  div = divs[i];

  div.style.pageBreakAfter = (arguments[1]) ? "always":"";

 }

 if ( arguments[2] ) window.print();

}

Try it out using the links below to turn breaks on and off and/or print the page:

Turn On: JavaScript:togglePageBreakAfter('DIV', true);
Turn Off: JavaScript:togglePageBreakAfter('DIV', false);
Turn On + Print: JavaScript:togglePageBreakAfter('DIV', true, true);
Turn Off + Print: JavaScript:togglePageBreakAfter('DIV', false, true);

So there you go. Now you can really impress your boss/colleagues....

Further Reading:

Have a look at Microsoft's Documentation on this attribute.

Scott Andrew's page about scripting browsers that comply with the DOM standards.