September 23rd 2008

Use CSS and jQuery to let User Choose to Print in Black and White or Color

I have some reports on our intranet that look great in color on the screen, but if someone lucky enough to have a color inkjet sitting on their desk prints them it’s pretty likely they have no idea how to change the print settings to black and white to save their color ink if they want to. Today I wondered if I could help them out.

Live Demo | Download (HTML, CSS, JavaScript)

With a little searching I found the CSS necessary to change my color layout to black and white. If you add the following to a stylesheet and then link it to your page, this will be the default if the user chooses print from the file menu or presses ctrl-p.

It would be pretty presumptuous of me to assume that someone would never want color though so I thought about switching stylesheets with jQuery if the user wanted to print the document in color (of course depending upon them actually having a color printer). So here is what I came up with starting with the code from the blog post linked to above as a guide:

jQuery:

HTML:

Anyway, I thought this was pretty cool. Let me know what you think. Should I default to color and let the user choose to print in black and white?