Real World HTML: The Printable Page

In our last "Real World HTML" entry, we handled a rounded corner box sitting on a gradient - finishing up the implementation of the design. The only thing that remains now is making the printed page look good. Styling for print should be easy - especially if the HTML is structured well.

With that in mind, let's take a quick look at what we have so far.

[More]

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
You can add the print-only CSS to your regular CSS file by using the following notation. (It results in one less server trip.)

@media print {
   .nav, #col-news, #col-login {display:none;}
}

I have actually created 2 classes (noprint & noshow) that I add to different elements so that I can assign what to hide on the screen versus what shouldn't be printed. Both screen & print styles are in the default stylesheet for the website:

@media screen {
   .noprint {display:block !important;}
   .noshow {display:none !important;}
}
@media print {
   .noprint {display:none !important;}
   .noshow {display:block !important;}
}
# Posted By James Moberg | 1/20/11 5:48 PM
James,

That is a great tip!

Do you happen to know what the browser support is for that?
# Posted By Steve Bryant | 1/21/11 12:50 PM
It appears to be part of the CSS2 specification (Initially published in '98):
http://www.w3.org/TR/CSS2/media.html
http://www.codestyle.org/css/media/print-BrowserSu...

It should be safe to use this unless you are still developing for IE4/5 or Netscape 4.
# Posted By James Moberg | 1/24/11 6:32 PM
Wow! How did I miss that one?

Very good tip. I will definitely be using this in the near future.

Thanks, James.
# Posted By Steve Bryant | 1/25/11 1:20 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.