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:

enter image description here

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

enter image description here

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

you could convert it to a pdf? see [how here][1] [1]: http://stackoverflow.com/questions/1686280/convert-html-having-javascript-to-pdf-using-java-javascript — Rachel Gallen, Jan 24 '13 at 09:56
thanks, but in my case the report also contains some openlayers maps (js based) so that would not work I think — Matt Roberts, Jan 24 '13 at 10:01
see http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages — Rachel Gallen, Jan 24 '13 at 10:08

furins · Accepted Answer · 2013-01-25T06:09:52.180

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

score 2 · Answer 2 · edited May 23 '17 at 11:44

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.

Great explanation, I had no idea about the problems with background-color. I'll try some browser hacks, and look into printing to pdf some more too — Matt Roberts, Jan 24 '13 at 13:28

score 0 · Answer 3 · answered Jan 24 '13 at 10:05

0

Check if your browser suppresses background colours when printing.

answered Jan 24 '13 at 10:05

Mr Lister

45,515
15
108
150

Formatting a HTML report for printing

3 Answers3