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.

Demo | Download

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.

@media print {
    * {
        background: white !important;
        color: black !important;
        border-color: Black !important;
      }

}

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:

<script type="text/javascript">

    $(document).ready(function() {
        $(".print").click(function() {
            if (this.getAttribute("title") != "Print in Color") {
                $("#bwStyleSheet").removeAttr("disabled");

            }
            else {
                $("#bwStyleSheet").attr("disabled", "disabled");
            }

            window.print();
                        
        });
    });
        
</script>

HTML:

    <div class="dontPrint" style="padding-bottom:10px;">        
        <img id="bw" src="_assets/img/printer.gif" class="print" title="Print in B&W" />
            &nbsp;<span class="print">Print in B & W</span>
            &nbsp;|&nbsp;
        <img id="color" src="_assets/img/printer.gif" class="print" title="Print in Color" />
            &nbsp;<span class="print" style="color:Red;" title="Print in Color">Print in Color if available</span>
    </div>

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?