Formatting Web Pages to be Printer Friendly using CSS and Javascript

Hello fellow web developers, another web design topic to tell you all about. Today’s blog topic is going to be a collage of setting up your website to print in a well formatted way using CSS of course! I will also discus how you can print individual sections of your site through another Java Script/ CSS gem I found on the internet (How to Print Selective Sections of a Website), a great solution for a hand coded FAQs sheet. Sorry the blog does not have any cool pics or neat YouTube videos, but I will get there. I am working on this thing while working my three jobs, so time permitting I will be expanding on this as much as I can.

When it comes to CSS, I think the most overlooked item when setting up your styles is a printing format. By now you should be utilizing CSS for your web design along with external stylesheets. However many developers are just setting up one or two external sheets to define how their site shall be laid out. You need to go beyond this and set up a separate sheet for printing also. Why? One important reason why, user friendliness. Using a website should be a user friendly-process. I hate when I go to print a web page and the page prints out the entire page including it’s header, navigation, and the content when I just need the content! No need to waste any ink or paper (not that I am a liberal or anything, just like to save a buck or two - lol).

The Basic Setup

I set up my print format pretty much the same way with every site. First I create a print stylesheet and load it to the server. I then link to that stylesheet from each page with a media type of “print” of course. So your link should look like this in your head:


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


I then add a header text block to the top of each web page’s content div by setting up a div within it. I add a class to the text block div and set that class to hidden in the main formatting CSS stylesheet. This is so that it will not be visible when you visit the web page normally. The header can consist of the websites name, contact information, and so on. More about why I do this later on. Here is an example:


<div class="main_Section">
<div class="hidden"><p align="center">My Company<br />425 Street St<br />Anywhere, XX 11111<br />999.999.9999 </p></div>
Your main Content Here
</div>


So now you have each page formatted to your print stylesheet. Now its time to edit it so that it will fulfill it’s purpose of making your site printer friendly. The first step in this process is figuring out the names of your divs from your main formatting stylesheet. From this point you want to set up two styles in your print stylesheet, one to display items at print and one to hide items at print. You will place the appropriate divs in each style in the following way:

your_print_stylesheet.css

/* Your Print Area Style */
body, #outline, #content { < - the content will print since it is not hidden and formatted
format the print here
}
/* Your Non-Print Area Style */
.noprint, #footer, #header {
display: none !important; < - the footer and header will not print since it is hidden
}


Once you have done this, you are pretty much done. All you have to do now is format the print in your CSS print sheet. The following is how I do that, with some important tips!


body, #outline, #content, .hidden {
background-image: none !important; < - Make sure you set the background to white and none so that there is no colored background to print.
background-color: #FFFFFF !important;
border: none !important;
float: none !important; < - In regards to Firefox’s printing errors, MAKE SURE you set the float to none so that the print will print multiple pages.
margin: 8px !important; < - I usually set a 8% margin to allow for proper layout of a print. This usually works well with most printers.
padding: 0% !important;
width: auto !important;
visibility: visible !important; < - Make sure that your header text block that is defined in each page is now visible in the print.
overflow: visible !important; < - Just as important as the float, it is also VERY IMPORTANT to set the overflow to none so that there are no Firefox print issues.
}
.noprint, #footer, #header {
display: none !important;
}


Make sure you set the overflow and float to none. Firefox has an issue with only printing the first page of a print it these two values are not set. For more information on this issue you can view the ( Official Mozilla bug Report ). In addition make sure you set the background to white and none so that a colored background does not print, common in Opera.

So that is pretty much it. By following these steps you will just print the main content of the page instead of the entire page, allowing your site to be more user friendly.

Printing Individual Sections of Your Page

Now that you got the basics of how to print a page in a well-formatted manner, lets kick it up a notch and discuss printing multiple individual sections of a page. Pretty much like setting up a FAQs section for print so that you can print individual topics. I got this idea from Lloydi’s Blog and is great since it only uses minimum Java Script and mostly CSS, a big plus.

Here is how this one works. First you need to download the print.js Java Script and upload to your server. Then you need to link to it in your pages that will be using it by adding the following code to the head of your page:


<script type="text/javascript" src="print.js"></script>


Once you have the Java Script loaded to your server and linked to your pages, you need to edit your print CSS stylesheet with the following add-ins:


body, #outline, #content, .hidden, print_faqs, .print_section { < - Add in print_faqs and print_section to format the print of each section.
background-image: none !important;
background-color: #FFFFFF !important;
border: none !important;
float: none !important;
margin: 8px !important;
padding: 0% !important;
width: auto !important;
overflow: visible !important;
}
.noprint, .printbutton, #footer, #header { < - Add in printbutton to disable the print buttons from printing.
display: none !important;
}
.print { < - Add in print to place the faqs section into a block.
display:block;
}


Lastly you have to edit your primary CSS stylesheet with the follow:


.print_section { < - Format each section of your page that will be able to print individually.
width: 100%;
float: left;
border: 1px solid #FFFFFF;
margin-bottom: 15px;
text-align: left;
padding: 5px;
}
.print_section p.printbutton { < - Format the buttons that will be displayed below each section and allow for an individual section or the entire page to be printed.
float:left;
}
.print_section p.printbutton a {
text-decoration:none;
background:white;
display:block;
float:left;
margin:3px;
padding:10px;
border:1px solid red;
}


Now you have your print stylesheet and the Java Script all set. Now all you have to do is apply the class to each section you want to be able to individually print. So for each faq topic, you will set it up as a div. Each div will be classed with print_section that will apply the print section to that area. When the page is normally viewed, you will see the buttons inserted on the bottom of each topic that will allow for the section or the entire page to be printed. THATS IT!!!

Check out an example of this at work: Example of this at work

References

1. Lloydi’s Blog - Printing Selective Sections
2. Firefox Bug 104040 - Float / Overflow Print Issue
3. A List Aparts - Going to Print Article (Bible to web design, a great guide to formatting websites to print!)

This entry was posted on Monday, January 22nd, 2007 at 11:08 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.