Forum Moderators: phranque

Message Too Old, No Replies

Printer friendly page

Curious how to make a page printer friendly

         

ecommworker

6:47 pm on Dec 26, 2003 (gmt 0)

10+ Year Member



When designing an html page, how do I make a printable version?

humpo

7:00 pm on Dec 26, 2003 (gmt 0)

10+ Year Member



what i use

with css you set a class not to dispaly when someone tries to print

/*printer styles*/
@media print{
/*hide menuSection when printing*/
#menuSection{display:none;}
}

or have a print css file which sets someClass display property to none - you include it like this
<link rel="stylesheet" type="text/css" href="/css/print.css" title="print" media="print" >

Robino

7:09 pm on Dec 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member





That should work.

Tips:
*Always use black font on a white background.

* Underline all links.

*Remove non-essential images.

*Remove navigation.

* Remove most of the advertising.

* Remove all JS, Flash, etc.

ecommworker

7:30 pm on Dec 26, 2003 (gmt 0)

10+ Year Member



I will give those suggestions a try. Thanks!

pageoneresults

7:37 pm on Dec 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Further information on Print Style Sheets can be found here...

CSS Print Profile [w3.org]

<added>An easy way to test your print style sheet before sending the page to the printer is to use the Print Preview option in IE. This will give you a good idea of what the page will look like when it is printed before wasting all that paper. I've been there and done that before I realized the Print Preview would have saved me hours of testing and research.

TheDoctor

4:40 pm on Jan 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Beware! IE5 and IE5.5 seem not to recognise @media print {} and apply the rules to the screen as well. Creates chaos if you hide the navgation menu on your printed page.

txbakers

4:43 pm on Jan 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I used media print{} with 5.5 and never saw a problem.

It's a nice feature, because you can hide buttons, images, etc from the printer.

TheDoctor

5:26 pm on Jan 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I used media print{} with 5.5 and never saw a problem.

Interesting. Well, there was something that I did that caused a problem, and the problem went away when I hid the CSS file that dealt with printing from IE5 and IE5.5. Now you have to use IE6 (or Mozilla or Opera or whatever) to get the formatted print from my site.

You can also use alternate style sheets - which don't work under any version of IE - to print large font versions of pages.

txbakers

5:46 pm on Jan 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I also did create printer versions of the page to print, which removed all background images, and put everything black text on white background.

If there were buttons I hid them with the media print{} routine.