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.

Pre-Login State:

Post-Login State:

Subsection State:

The following code sample shows the outline of our code (for all of the elements from every design state), with much of the content removed for brevity.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html>
<head>
   <title>Real World HTML: Example 1 (Zinc)</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link rel="stylesheet" type="text/css" href="/all.css">
   <link rel="stylesheet" type="text/css" href="/print.css" media="print">
   <!--[if lte IE 6]><script type="text/javascript" src="/supersleight-min.js"></script><![endif]-->
</head>
<body>
<div id="container">
   <div id="header">
      <div id="logo"><img src="/i/logo.gif" width="134" height="58" alt="Zinc"></div>
      <div id="header-pics">
         <div id="header-path"></div>
         <div id="header-plains"></div>
         <div id="header-fire"></div>
         <div id="header-mist"></div>
      </div>
      <div id="nav-primary" class="nav">
      </div>
      <div id="nav-secondary" class="nav">
      </div>
      <div id="nav-tertiary" class="nav">
      </div>
      <div id="header-zink"></div>
      <div id="header-image"></div>
      <div id="header-curve"></div>
   </div>
   <div id="hbborder"></div>
   <div id="body">
      <table border="0" cellpadding="0" cellspacing="0" id="body-table" width="100%">
      <tr>
         <td rowspan="2" id="col-news" class="content-cell">
            <div id="news" class="cell-div">
               <p><img src="i/news.gif" width="83" height="13" alt="News"></p>
            </div>
         </td>
         <td id="body-content" class="content-cell">
            <div class="cell-div">
            </div>
         </td>
         <td rowspan="2" id="col-login" class="content-cell">
            <div class="cell-div">
               <div id="login">
                  <div id="login-space">
                     <h2>LOGIN</h2>
                     <form>
                     </form>
                     <p class="login-forgot"><a href="">Retrieve password</a></p>
                  </div>
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <td id="footer">
         </td>
      </tr>
      </table>
   </div>
</div>
</body>
</html>

So, what does our print style sheet in print.css look like?

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

That is literally all of the code in the print style sheet. It just hides any navigation as well as the news and login columns of the table. Since no width was defined on the center column, it will automatically take up the entire page. The footer (which we want on the printed page) will naturally go below the content.

The header is made up of a few background images (which won't show up in print) and the logo (which we want on top of the printed page).

Here is what the printed page looks like.

We should be done now, right? Right. Next time I will cover what happened when I showed it to my client.

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.