Web Page Print Formatting Layout

I worked on a new application over the weekend that will be web based and provide very nicely formatted printed pages of content. I wanted to do some really cool things with the layout on the screen, and I really hate the pop-up "print formatted" pages that a lot of sites do. In fact, in today's browser world, a separate print page isn't necessary anymore.

With a little bit of CSS styling and AJAX I was able to generate an invoice data entry web page that would never look right when printed. However, when you click print in your browser, you get a very nicely formatted invoice that spits out of the printer. There's no apparent relationship to the printed layout and the screen layout - in fact everything that is displayed on the screen is completely hidden when printed, and replaced with a completely separate layout embedded within the same page.

It's really quite easy. First, provide two separate CSS files for your layout - one for screen and one for print:

<link rel="stylesheet" type="text/css" media="screen" href="/css/main.css">
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css">

Create two specific formatting classes and use them on everything based on whether or not that block or div should print. For instance:

<div class='screen'>This will only show on the screen</div>
<div class='print'>This will only show when printed</div>

Inside the main.css file, add the following:

/* Tag anything as print, and it wont show on the screen */
.print {
display: none;
}

Inside the print.css file, place:

/* Tag anything as screen, and it won't print to the printer */
.screen {
display:none;
}

And, there you have it! For better layout control you can also add page breaks. Now, be careful here and do a little cross-browser testing because I've found that Firefox would ignore my first page break entirely and required two page breaks in a row in order to actually split the pages. This happened in both Windows and Linux. IE, on the other hand would actually break properly the first time.

Define the following class in print.css:

.pagebreak {
page-break-before: always;
}

Then, anytime you want to force a page break, add that class to a div or paragraph tag!

When formatting for print, you might want to designate all of your sizes in inches or millimeters rather than pixels. The size of a pixel will change based on the resolution of the printer. For instance, I define my page layouts using three sections: a header, a footer and a content section.

.pageheader {
  height: 2.75in;
  width: 99%;
  text-align:center;
}
.pagecontent {
  height: 5in;
  border: 1px solid black;
  width: 99%; /* IE wouldn't draw borders on the right edge if I went 100% */
}
.pagefooter {
  text-align: center;
  font-size: 10px;
  font-style: italic;
}

Then it's just a matter of using the blocks and inserting page breaks as needed. Printed page layout can still adhere to the tried and true old media standards that work excellent in that media format, while allowing your web page to still be cutting edge and use all the advantages of new media. This process can also be used to replace Macromedia Flash animations with static images and other tricks to make your printed documents look much better.