Question

I have a HTML “report” page that contains amongst other things a HTML view that looks like this:

When you print preview this though, it looks a lot less nice 🙂

I know about CSS for printing, but what I don’t understand is how my HTML is being interpreted like that – for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don’t show up at all in the print preview. Also, why would the white text on black on the left not print like that?

Are there some rules for print-friendly css? Any suggestions here?

BTW – I tried previewing in both IE 10 and chrome – both pretty much did the same

Answer 1

I guess the problem is related to “background-color” and “background-image” properties that are ignored by default on many browsers (when printing).

For chrome you can add the following code to your print css, in firefox and IE you must select “print background” in the print dialog.

:root {
  -webkit-print-color-adjust: exact;
}

EDIT: AN ALTERNATIVE APPROACH

Since you’re looking for a way to provide readable information also on the printer you may provide specific content just for that:

in your HTML:

<td class="green_background blue_border">
    <img src="img/green_bk.png" class="show_on_print">
</td>

<td class="orange_background blue_border with_star">
    <img src="img/orange_with_star_bk.png" class="show_on_print">
    <span class="hide_on_print">*</span>
</td>

in your stylesheet:

@media screen,print 
{
    .blue_border {border: 1px solid #00F;}
}

@media screen
{
   .green_background {background-color: #0F0;}
   /* hide something when displayed on screen */
   .show_on_print {display: none;}
}

@media print
{
    img.show_on_print {/* add size, etc. */}
    .hide_on_print {display: none;}
}

you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser