CSS and Printing

Joe Burns

Use these to jump around or read it all...
[Page Break]
[The Format]
[Setting A Specific Page Break]

I get a lot of questions asking if there are ways to "force" people's browsers to do certain things. The events most often asked for are to force a browser to bookmark the page, to set user preferences, and this one: How can I force a person's browser to print my page?

The short and truthful answer is that you can't. There's no command or tag, to my knowledge, that produces a print when your page loads. There are just too many factors involved. Is the user's printer turned on? Can the Web page fit nicely in the print space set by the viewer? And most importantly: Does the viewer want to print your page? It would cheese me if I logged into your page and all of a sudden my printer was humming.

Update! As of 10/99 there is still no way to force a printer to print a page; however, you can initiate a print request. See the tutorial.

You can take some control when the user decides he or she does want to print your page. Through the magic of Style Sheets, you can now make a point of indicating where the pages will break during the print process.

As of 12/21/98, this CSS2 command is supported only by Internet Explorer browsers version 4 and above.

Page Break

There are two commands you're worried about here:

page-break-after

page-break-before

You can pretty much pick out what each does. The first sets the printing page break just before the element, the second sets the page break just after.

Each command has, in theory anyway, four attributes:

always | auto | left | right

always tells the browser to break the print page after this element always.
auto is the default. You're telling the browser to do what it would do anyway: Page break where the page ends.
left is not supported by any browser yet. It is used if your printer will print both sides of a page, like a manuscript. If the page is a left-facing page, use this attribute.
right is what you use if it's a right-facing page.

The Format

Here's what it looks like in your page's <HEAD> tags:

<STYLE TYPE="text/css">
H2 {page-break-before: always}
</STYLE>

That format will produce a print page break before each H2 on the page. Would you like to try it out? This page has four H2 headings. Go ahead and print the page. Each H2 will use a new page and will act as the Header for the printed page. Remember, though, that you have to be using Internet Explorer 4 or better.

Setting A Specific Page Break

Maybe it's better not to have every H2 break the page. Maybe you'd like a page break at a specific point to keep a particular look. You do that by setting up a class of page breaks.
You can set up the class on any HTML command, but I think the best method is to set up the class within a <BR> or <P> command. That way there's some white space where the page can break. Here's a look at the format (this will sit between your <HEAD> tags):

<STYLE TYPE="text/css">
P.breakhere {page-break-before: always}
</STYLE>

This then will be the activator for the page break:

<P CLASS="breakhere">

You can set up as many different classes as you'd like as long as you keep following the same format as above.

And That's That...

This is another one of those commands that I would use if there's a need for it, regardless of the type of browser the viewer is running. Those that understand the command get the effect, and those that don't just get a straight page print. Either way, the user gets a nice print of the page. It's just that in one of the prints, you're able to set a few parameters.

Enjoy!