\nSkip Tech Jargon<\/a><\/p>\n
What is a print friendly version?<\/h2>\n
A print friendly version is exactly what it describes. It is a version of the web page formatted specifically for printing as opposed to \u201clooks and feels\u201d. 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 \u201cAlso check out these articles\u201d list and the \u201cSkip Teach Jargon\u201d button.<\/p>\n
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.<\/p>\n
Print friendly files<\/h2>\n
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.<\/p>\n
The \u201cdumb\u201d 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.<\/p>\n
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.<\/p>\n
In 1980s a web based styling language was created called CSS. However, it didn\u2019t 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.<\/p>\n
In CSS, Either 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 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.<\/p>\n 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?<\/p>\n 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.<\/p>\n For example, by using .tag-cloud {display: none;} in the CSS file for printing, will remove the tag-cloud (if it uses \u201ctag-cloud\u201d as it\u2019s div id) from printing.<\/p>\n 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.<\/p>\n I have the ads div container with identification “myads”. To prevent it from printing, I added the following to my external CSS.<\/p>\n 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.<\/p>\n 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.<\/p>\n The tag, !important<\/em> 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<\/em> at the end we force that particular styling condition regardless of where it appears in the style sheet.<\/p>\n 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.<\/p>\n This reduces the CSS file size (and remove clutter) hence improving the load on your server.<\/p>\n 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.<\/p>\n 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.<\/p>\n Overriding the default print.css<\/u> style page with another in WordPress CMS. You can use the following code (copy and paste) to create your custom print CSS file.<\/p>\n I would like to thank Kenneth John Odle<\/a> for teaching me CSS codes over the last few months. The above code also from his great work. Please visit his blog<\/a> for more fun stuff.<\/p>\n Replace the LOCATION_OF_CSS\/YOUR_NEW_print.css<\/em> with the location of the new CSS file and the file name.<\/p>\n 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<\/u>. If you have a PDF program, try it out by printing my Print Friendly versions to PDFs.<\/p>\n Following is a set of all the code with general inputs. Replace tags and ids appropriately.<\/p>\n Sometimes it is very important to provide users with access to \u201cprint friendly\u201d (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 \u201cprintability\u201d of a website. Newspapers, University … Continue reading Optimizing print friendly version<\/span> div<\/code> and \/div<\/code> 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).<\/p>\nCSS class vs id<\/h2>\n
class<\/code> or id<\/code> attribute can be used with elements such as p<\/code> and div<\/code>. 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<\/code> is used when the behavior occurs only once per page. The class<\/code> 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.<\/p>\nCreating a print friendly file<\/h2>\n
![](\"http:\/\/sanuja.com\/blog\/wp-content\/themes\/graphene\/js\/buttons\/error.png\")
ERRORS<\/strong>
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.<\/p>\ndiv<\/code> 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.<\/p>\n\r\n<div id=\u201dheader\u201d>\r\n<img scr=\u201dboo.jpg\u201d width=\u201d900\u201d height=\u201d60\u201d>\r\n<\/div>\r\n<div id=\u201dcontent\u201d>\r\nHay Sanuja, <br> I think you are cool!<br> Do you think SiO<sub>2<\/sub> is <u>super-hot<\/u>?\r\n<p id=\u201dlike\u201d>But I remember you said you like <i>kyanite<\/i>. That is not cool and I hate you.<\/p> \r\n<\/div>\r\n<div id=\u201dmyads\u201d>\r\nGoogle Ads are awesome. Do you like the following ads?\r\n<p>Go crazy with minerals! Buy our microscope today. It comes with Germans for your convenient.<\/p>\r\n<\/div>\r\n<\/pre>\n
Optimizing printed materials<\/h2>\n
Remove title image<\/h2>\n
\r\n\/*\r\nREMOVE TITLE IMAGE FROM PRINT\r\n*\/\r\n@media print\r\n{\r\n .header {display: none;}\r\n}\r\n<\/pre>\n![](\"http:\/\/sanuja.com\/blog\/wp-content\/themes\/graphene\/js\/buttons\/notice.png\")
REMINDER<\/strong>
\nThe identification values for div containers may varies from site to site since they are arbitrary values.<\/p>\nRemove advertisements<\/h2>\n
\r\n\/*\r\nREMOVE ADS IMAGE FROM PRINT\r\n*\/\r\n@media print\r\n{\r\n .myads {display: none;}\r\n}\r\n<\/pre>\nRemove Print icon from a specific page<\/h2>\n
REMINDER<\/strong>
\nRegardless of what we edit, these codes are added to the main CSS file (NOT to the print CSS file). However, the @print<\/code> will inject the CSS modification into the print.css file.<\/p>\n\r\n\/*\r\nREMOVE PRINT ICON FORM SPECIFIC POSTS\r\n*\/\r\nbody.page-id-888 .print {\r\n display: none !important;\r\n}\r\n<\/pre>\n\r\n\/*\r\nREMOVE PRINT ICON FORM WELCOME, CONTACT AND DONATE PAGES\r\n*\/\r\nbody.page-id-888 .print, body.page-id-80 .print, body.page-id-5694 .print {\r\n display: none !important;\r\n}\r\n<\/pre>\n<\/p>\nFor sites on CMS programs<\/h2>\n
Advanced Modifications<\/h2>\n
\r\nadd_action ('wp_head', 'printstyle' );\r\nfunction printstyle() {\r\necho "<link rel='stylesheet' href='LOCATION_OF_CSS\/YOUR_NEW_print.css' type='text\/css' media='print' \/>";\r\n }\r\n<\/pre>\nSummery<\/h2>\n
\r\n\/*\r\nREMOVE XXXX FROM PRINT\r\n*\/\r\n@media print\r\n{\r\n .XXXX_ID {display: none;}\r\n}\r\n\/*\r\nREMOVE XXXX FORM SPECIFIC POSTS\r\n(not specific to print friendly)\r\n*\/\r\nLOCATION_HERE.page-id-ID_NUMBER_HERE .XXXX {\r\n display: none !important;\r\n}\r\n\/*\r\nREMOVE XXXX FORM SPECIFIC MULTIPLE PAGES\/POSTS\r\n(not specific to print friendly)\r\n*\/\r\nLOCATION_HERE.page-id-ID_NUM_01 .print, LOCATION_HERE.page-id-ID_NUM_02 .print {\r\n display: none !important;\r\n}\r\n<\/pre>\n<\/p>\n\n