User Friendly Print Page

User Friendly Print Page

Introduction

There were always problem in printing a web page. The problem is what users expect. The user wants only a specific part but the print gives the whole page something like a screenshot.  To solve this, we can use the  media="print" attribute of the <link /> tag.

The CSS media type “print” allows authors to specify a stylesheet that is only used when printing. This can be very useful and allows for neatly styled printouts that hide non-essential parts of the page like adds, images, unwanted designs etc.

To achive this, create a separate stylesheet say, print.css, and put your styles in the file. Apply the styles to the fields, which you want to customise while printing and then add the following in your page's head section.

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

The idea of creating the new styles is to hide/customise the unwanted parts of the page which you don't want when you print the page.

Consider this, you have a image in your webpage and you don't want to print that image when you printing the webpage.

To do that, create a class in your print.css file as following:

.hideSection
{
   display : none;
}

and then apply this class to that image which you don't want to show .

<img src="<your image path>" class = "<some other classes> hideSection" />

So when the time of print the page will not show this <img /> tag.


Give it a try!!

Thanks
Suresh

Leave a Comment
  • Please add 3 and 1 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Richard Mueller edited Revision 3. Comment: Spelling in title, title casing, added language tag

  • Carsten Siemens edited Revision 2. Comment: typo fixed

Page 1 of 1 (2 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Carsten Siemens edited Revision 2. Comment: typo fixed

  • Richard Mueller edited Revision 3. Comment: Spelling in title, title casing, added language tag

  • Richard Mueller edited Revision 4. Comment: Changed rgb values to color names in HTML to restore colors

Page 1 of 1 (3 items)