Formatting a HTML report for printing

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

Answer 2

The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).

In your case, this is problematic since there is no text.

Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.

Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.