Today my topic is regarding the Printer Friendly Web Page in which I will share the best practice how to build the Printer Friendly page.
The reason we need to have printer friendly pages because our normal pages are more complex with images, background, image text in different colors, menu and links all over the place.
Before you start the Printer Friendly Page you need to remember few rules that are:
• Set the default page size like A4 etc and mention the page size at the footer of the page.
• The page should be very neat and clean meaning no background and no foreground color, make is Simple Black & While.
• Use True type fonts like Times new roman, Arial, Courier New etc.
• Use Header and Footer.
• Use appropriate Image (Company Logo) in the header area and in the body use if required.
• Preferred to use image in the gif format.
• Do not use link if you need mention with location like File Option Save or specify the URL path.
• Add the Link Tag under the HEAD tag.
Now if you go through the above points it’s time to build the logic.
1st Logic:
Use the div tag to separate the data, menu and page banner, if you have simple pages. and you can hide through CSS. Suppose you put the page menu in the div tag id=menu so on printer friendly page you can hide the menu using div#menu{display:none}.
2nd Logic:
Handle it through the small piece of code. Place your all printable data in the div tag and print friendly page click you can call the function which will read the div tag area and open in other window.
Here is the sample:
JavaScript code:
function pagePrint()
{
var divMyArea = document.getElementById( ‘divArea’ );
if( divMyArea.innerHTML != ” )
window.open( ”,” ).document.write( divMyArea.innerHTML + ‘<input type=button onclick="window.print();" value=Print>‘ );
}
Note: If you want to print the page with using the printer friendly page, Browser will print the background by default you have to manually set the browser property from Tools->Option->Advanced->under Printer category check the “Print background colors and images” option.
