Sometimes it is very important to provide users with access to “print friendly” (printer friendly, print file, etc) version of the web content. When publishing content focused pages, the added images / diagrams, side bars and other items that help creates a smooth surfing structures can also work against “printability” of a website. Newspapers, University and other text-content based websites are catered towards individuals who may want to have a physical copy of the materials published. But when a user try to print without a properly formatted print friendly option, it could print with; lots of black space in between, off centered, advertisements and occasionally not printing anything at all. This article is written based on WordPress CMS, but can be used as a guideline for any website with CSS driven print friendly files.

Skip Tech Jargon

What is a print friendly version?

A print friendly version is exactly what it describes. It is a version of the web page formatted specifically for printing as opposed to “looks and feels”. A good printer friendly version would reduce the ink usage and maximize the area of printing for content. Most developers like me, also reduce the unwanted texts and formatting such as in page buttons such as “Also check out these articles” list and the “Skip Teach Jargon” button.

This version can also be used for saving web pages. I use Adobe Acrobat Professional to save web pages with just the text. If you convert a web page into a PDF (Portable Document Format) file, it will also include those junk materials. By using the print friendly version, not only the PDF file would be easy to read, but also it will reduce the file size significantly. This is an advantage for web developers as well. Since the file size has been reduced, the server load for downloading text content from your site for printing and PDF formatting will be significantly reduced.

Print friendly files

There are several ways of creating print friendly version of a web page. But with ten years of experience I can safely say there are only two categories of doing things in computing; the dumb way and the smart way.

The “dumb” method of doing it is actually was not always dumb. In the old days (back in 1995 and such) we used pure HTML with graphics for web development. We did not have access to web based programming languages like PHP (Hypertext Preprocessor) or CSS (Cascading Style Sheets). Most developers decided to create two separate files of the same material; one with margins, side bars, menus, etc and another with just the context. Then the Adobe came up with their PDF platform. By utilizing PDF now people created separate files, but this time as PDF files instead of HTML files. Still this is redundant and consumes a lot of time and energy.

Then several server operating system developers like Microsoft (.NET/ASP) came up with automated solutions to get rid of the unwanted clutter from printing. As long a web developer uses their framework, one can build a site with no redundant files. It was still expensive and not an effective method for small scale websites that still may be on pure HTML.

In 1980s a web based styling language was created called CSS. However, it didn’t get popular until recently when PHP was introduced in 1994. Not only major web sites like IBM.com extensively began to use CSS and PHP, but the CMS (Content Management Systems) have picked up their phase with it. Long story short, thanks to CMS programs and open source nature of CSS and PHP has revolutionized how we create print friendly versions.

In CSS, div and /div tags are like boxes that holds your code. You can label every div box using arbitrary identification (id) values which can be letter or numbers of both (no white space). Using these ids you can make changes to specific set of content (as long as you do not have two divs with same id).

CSS class vs id

Either class or id attribute can be used with elements such as p and div. Their functions are actually the same/similar. There is a confusion even among professional web developers on which one to use. If you go by the book, then id is used when the behavior occurs only once per page. The class is used when the behavior is applied multiple times on a single page. For our discussion, I am going to use ids to keep it simple.

Creating a print friendly file

ERRORS
If you make an error during modifications and could not log back into your WP Dashboard, use the backend access of your server to delete the newly added code and fix the problem.

Please use CSS because this is the best way to reduce server load on your computer. It is a very flexible language. CMS programs like Drupal and WordPress use div elements to indicate where different types of information begins and where they ends. They are like anchors or identification hooks. By manipulating the behaviours of these, we can produce very well developed print friendly files. In fact, they are dynamic and never create the file in advance (except if you have cache enabled). Every time you make a change to your page, it will also affect the printer friendly version since it also uses the exact same database as the one you just edited.

Another important thing with CSS is that you can edit a CSS file without changing anything in the original file. Here is an example of print friendly setup on the HTTP end. In the CSS code below, I use an external CSS file to give the instructions for print friendly version. The actual print friendly version is not directly modified.

<div id=”header”>
<img scr=”boo.jpg” width=”900” height=”60”>
</div>
<div id=”content”>
Hay Sanuja, <br> I think you are cool!<br> Do you think SiO<sub>2</sub> is <u>super-hot</u>?
<p id=”like”>But I remember you said you like <i>kyanite</i>. That is not cool and I hate you.</p> 
</div>
<div id=”myads”>
Google Ads are awesome. Do you like the following ads?
<p>Go crazy with minerals! Buy our microscope today. It comes with Germans for your convenient.</p>
</div>

Optimizing printed materials

By controlling what gets printed, we can optimize the print friendly format. Do you want your users to print with advanced styles such as large text headings? Do you want your users to print unwanted texts such as related posts? How about the title image of your site?

On this website, I have disabled title image, Google Ads, unwanted texts and clumsy formatting. If you decided to add scripts from different sources, you can still manage them as long as the scripts you used are well written. I use FireBug plugin for FireFox browser (it is also available for Chrome) to determine what div container is used for each section of the script. By using this knowledge, you can say {display: none;} for any and all elements you do not want your users to get print.

For example, by using .tag-cloud {display: none;} in the CSS file for printing, will remove the tag-cloud (if it uses “tag-cloud” as it’s div id) from printing.

Remove title image

Now by writing into the external CSS file with the id for the title image (it is header in my particular site), I can produce a file for printing without the large image.

/*
REMOVE TITLE IMAGE FROM PRINT
*/
@media print
{
  .header {display: none;}
}

REMINDER
The identification values for div containers may varies from site to site since they are arbitrary values.

Remove advertisements

I have the ads div container with identification “myads”. To prevent it from printing, I added the following to my external CSS.

/*
REMOVE ADS IMAGE FROM PRINT
*/
@media print
{
  .myads {display: none;}
}

In the above example, we keep all the styling elements such as breaks, underlines and so on. But we get rid of the unwanted containers such as ads and header.

Remove Print icon from a specific page

On my Welcome page, you do not find an option for Print. The icon has “disappeared” because I specifically removed (hide) the print friendly version from the front page. To do this you have to specify the page id and the div container id, In this particular example, the page/post id is 888 and the div id is print.

REMINDER
Regardless of what we edit, these codes are added to the main CSS file (NOT to the print CSS file). However, the @print will inject the CSS modification into the print.css file.

/*
REMOVE PRINT ICON FORM SPECIFIC POSTS
*/
body.page-id-888 .print {
    display: none !important;
}

The tag, !important is a used to promote the condition to priority. We do this because by default servers read CSS files one line at a time going from top to bottom. During this read, whatever the first condition given to an element will be applied or some cases what ever the last one. By adding !important at the end we force that particular styling condition regardless of where it appears in the style sheet.

If you want to do this to several specific pages, you can add each area with the same display: none condition using a comma between them.

/*
REMOVE PRINT ICON FORM WELCOME, CONTACT AND DONATE PAGES
*/
body.page-id-888 .print, body.page-id-80 .print, body.page-id-5694 .print {
    display: none !important;
}

This reduces the CSS file size (and remove clutter) hence improving the load on your server.

For sites on CMS programs

If you are on a CMS program like Drupal or WordPress, please create a Child Theme (“sub-Theme). Edit the CSS file(s) in this Child Theme because it optimize the load time (since it will only be loaded once) and it will prevent your custom edits from deletion during theme updates.

Advanced Modifications

Please be advised that if you are going to perform the following edits on a live website, you take the risk of bringing down the entire site if you make an error during the following edits. This segment is specifically for those of you who are advanced PHP and CSS users.

Overriding the default print.css style page with another in WordPress CMS. You can use the following code (copy and paste) to create your custom print CSS file.

add_action ('wp_head', 'printstyle' );
function printstyle() {
echo "<link rel='stylesheet'  href='LOCATION_OF_CSS/YOUR_NEW_print.css' type='text/css' media='print' />";
 }

I would like to thank Kenneth John Odle for teaching me CSS codes over the last few months. The above code also from his great work. Please visit his blog for more fun stuff.

Replace the LOCATION_OF_CSS/YOUR_NEW_print.css with the location of the new CSS file and the file name.

Summery

Click on any print icon on the top right hand side of my posts or pages for a live preview on some of these conditions. I recommend using Google Chrome for this because it will generate a preview before printing. If you do this on FireFox or IE, it may directly send the file to your printer. If you have a PDF program, try it out by printing my Print Friendly versions to PDFs.

Following is a set of all the code with general inputs. Replace tags and ids appropriately.

/*
REMOVE XXXX FROM PRINT
*/
@media print
{
  .XXXX_ID {display: none;}
}
/*
REMOVE XXXX FORM SPECIFIC POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUMBER_HERE .XXXX {
    display: none !important;
}
/*
REMOVE XXXX FORM SPECIFIC MULTIPLE PAGES/POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUM_01 .print, LOCATION_HERE.page-id-ID_NUM_02 .print {
    display: none !important;
}

• Sanuja recommended using FireFox browser with FireBug plugin for identification.
• He also recommended using Notepad++ for editing and/or FTP live editors (when the site is not on a CMS).
• Create a separate CSS file for print friendly version. Most CMS programs comes with independent print friendly CSS file(s).
• Use div and other element ids to denote specific segments of your data.
• Main content should have it’s own div/element id.
• While you can just print out the content only, it is recommended to have ids on all major elements such as ads, extra texts, etc.
• Always perform edits in increments and create backups in between.
• Reduce CSS file size by reducing clutter when same modifications is applied to several different pages/areas.