Resources | CSS | Page Breaks

Page Breaks and Printing:


*** This will not work in any version of Netscape ***

There are going to be times when a user visiting your site is going to want to print out a copy of one of your pages, to save as a hardcopy. Normally, browsers will just send all of that information over to the printer with little regard for how you want it to be displayed on paper. If your page is text-heavy (for example, I ran into this problem when I needed to display a sales contract for a client), this can be unacceptable.

There are work-arounds to this problem. One way to solve this would be to convert your page into a .PDF file (eventually, that tutorial will be put up onto this site). This gives you the ability to control all aspects of how the page is printed. However, often times just being able to force a page break is enough to get the job done.

First, you need to create a file with the extension .css (this will be your cascading style sheet -- we'll call it "printer.css"). The class must be defined in a seperate .css file, as older versions of IE will not handle it properly if it is an in-line STYLE attribute. In this .css file, create a class like this:



Then, in your web page, make a reference to the .css file. Your page breaks will occur every time you have a TAG with the CLASS attribute set to "pagebreak" (in this example, we'll use a DIV tag). Finally, you need to include some javascript code to get the page to print. In this example, we placed the code in the "onLoad" event of the BODY tag. The window.print function accepts one of two values for ORIENTATION, either "portrait" or "landscape." The page should look like this:

This is the text that will appear on the first page. This is the text that will appear on the second page.


Want to discuss this article, or other development issues? Visit our message boards!

Or contact us directly with a comment or question on this article: click here !
armbrustconsulting.com