Printer Friendly Page

[mendhak]

If my printer friendly version of a page has a black background, will the printed page also have a black background (therefore wasting all that ink)?

I don't know how it would show since I have no printer.

Also, I'd like to see a few good examples of printer-friendly versions of pages.

Thanks.

[JoshT]

Most web browsers don't print background colors by default, AFAIK.

[riis]

You can add different stylesheets for screen and print:
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

In screen.css you can define the style whichever you like. In print.css you can define the style you wish to see for printed pages. It is also possible to hide buttons, etc, this way on printed page. Give the button an id (or whatever you want), and set the display-attribute of the button in print.css to none.

Other examples are coloring all elements black, eventually width and height of tables, images, etc.

[mendhak]

Originally posted by riis
You can add different stylesheets for screen and print:
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

In screen.css you can define the style whichever you like. In print.css you can define the style you wish to see for printed pages. It is also possible to hide buttons, etc, this way on printed page. Give the button an id (or whatever you want), and set the display-attribute of the button in print.css to none.

Other examples are coloring all elements black, eventually width and height of tables, images, etc.

That's just what I've done, thanks though. I was only wondering if the background colors get printed. Thanks Josh.

Uhm... any examples for good printer friendly pages, by any chance?

[riis]

If you make all text black and all background colors white in the printer friendly stylesheet, then it doesn't really matter if background colors are printed.
As far as I know you can't control if the browser prints background colors.

You can test how a page will look like printed (except for background colors), when you use the printer stylesheet as your screen stylesheet.

[Rick Bull]

Also I tend to hide navigations bars and the like with display: none. I also stop links from being coloured differently, something like a { color: inherit; text-decoration: none; } Depends how plain you want the page to be