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:
