One of the best things about having a website is actually being able to create an income from creating articles, sharing information, and giving your opinion about things. While ads, in the form of banners, text ads and pop ups, can create a good income, they can also be annoying if someone is actually trying to print out the information on your website.

This is where “printer friendly” pages are important. A printer friendly page strips away all the ads, headers, footers, and other page elements and leaves the body of the article to be printed out. I’ve used CGI, PHP, Javascript and other methods in the past to create printer friendly pages for my visitors. Now, however, there are better and easier ways to create these pages through use of plugins for WordPress and CSS style sheets for other sites.

If you have a WordPress site, check out the Printer Friendly plugin, which not only creates great printed output for pages, but also will create PDF output. There are other plugins for WordPress that do basically the same thing, but this one is my favorite because of the PDF feature.

For Non-Wordpress sites, I’ve used CGI, Perl, PHP, and Javascript to create printer friendly pages. When I changed one of the sites to a tableless CSS design, it was easy to create two CSS style sheets one for the screen and one for print. Then I used Javascript along with a printer image to force the page to print when a visitor clicked on the printer icon. The output included just the basics of the article along with the title. Clean and easy to read when it was printed. Exactly how was this accomplished though?

First, create a separate CSS style sheet for printing, give it a different name and save it. For each element you do not want to print add the following line

display: none;

For example, I have a top adsense ad on the page, the CSS for this element looks like this:

#topadsense {
 float:left;
 padding: 10px 10px 10px 10px;
 display: none;
}

Next, I add both stylesheets in the page header like so:

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

You’ll notice the media option for screen or print. This is the key to creating these printer friendly pages. When the page is printed, it uses the “print” stylesheet, when it is displayed on the screen it uses the “screen” stylesheet.

Finally, I added a printer image to the page that would automatically trigger the printer dialog box when clicked.

<div id="printerfriendly"><a href="javascript:window.print()"><b>Printer FriendlyVersion </b><img src="/images/printicon.gif" border="0"></a></div>

Now, when the printer icon on the page is clicked, the correct CSS stylesheet loaded and the page is printed without all the ads and other page elements.

No related posts.

Tagged with: • • • •

Filed under: Web Site Tasks

Like this post? Subscribe to my RSS feed and get loads more!