Printing Web Page

While browsing different websites, we usually find useful information that we need to print for later reference. It would be great if a web page provides this functionality instead of relying on the browser to do it. In addition it provides more customization to the output of the printing as we will see in this post.

JavaScript provides this functionality through the print function of the window object.

window.print();

The print function prints the contents of the current web page when executed. The function opens the Print Dialog , which lets the user to select preferred printing options.

Print Dialog

 

 

 

 

 

 

 

 

 

 

The print function can be called directly using the onclick event as shown in the following example.

<input type="button" value="Print" onclick="window.print()"/>;

Although the print function serves the purpose of getting a printout, it is not a recommended way alone.

Sometimes you need to customize the content that will be printed to be fitted exactly on the size of the paper by:

  • Use different styles to enhance the appearance of your content on paper.
  • Hide different parts of web page that are not related to its content such as navigation controls, menus, ads , … etc.
  • Use high resolution images to appear better on paper.
  • Display the URLs in the content instead of the reference link.

Some websites provides a printer-friendly version of the web page formatted for printing. This requires to make two pages rather than one. An alternative is to use a print style sheet that is used only when printing a page. To add a print style sheet, Add the following to your <head> tag in HTML page.

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

Where print.css is the CSS file that contains the styles used on your page when printing. Note that specificity and precedence rules still apply.

A modern way of using printing style sheet is using media queries. Media queries are CSS3 module allowing content rendering to adapt to different rules and used for responsive designs.

Media queries can also be used to create print styles using @media print which is added to the end of your style sheet:

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

Enjoy printing and have FUN 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s