Keep inline CSS when printing

Question

I'm using a print.css file to format my page for printing. I've got the layout down great, but have an issue with some colors.

I have a table that has the cells formatted with a certain color background based on the value of the number in the cell. This is done via javascript that executes when the table is finished loading the values (using datatables.js).

Like this:

function colorIndex(data) {
$(".index_num").each(function() {
    var x = $(this).text();
    if (x <= 25) {
        $(this).css("color", "white")
        $(this).css("background-color", "#1d5792")
    } else if ((x > 25) && (x <= 50)) {
        $(this).css("color", "white")
        $(this).css("background-color", "#2e7fb5")
    } else if ((x > 50) && (x <= 80)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#6db5d8")
    } else if ((x > 80) && (x <= 115)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#cacaca")
    } else if ((x > 115) && (x <= 140)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#fd9245")
    } else if ((x > 140) && (x <= 165)) {
        $(this).css("color", "white")
        $(this).css("background-color", "#e5560a")
    } else if (x > 165) {
        $(this).css("color", "white")
        $(this).css("background-color", "#7b3014")
    } else if (x == null) {
        $(this).css("color", "white")
        $(this).css("background-color", "#7b3014")
    }
});
}  

This works great, the styles are all added inline and everyone is happy. However, when I go to print, the styles are ignored and the boxes all print without a background color. How can I change my code to ensure these do print with the right background color?

Thanks.

Answer 1

Printing background colors has to be turned on in the print settings of the browser. Otherwise, no amount of background styling is going to make any difference.

Using the non-standard -webkit-print-color-adjust: exact; property might work in WebKit browsers like Chrome and Safari, but won't elsewhere. (There's a proposal for standardization, but it isn't there yet.)

If printing the background color is really important, and you can't control the settings of the user's browser, you might be able to hack something together with absolutely positioned colored images stretched to fill out the cells.

Answer 2

One thought... instead of assigning inline style properties to the elements with JS, you may need to go about it in another way. You could try applying the background color in the form of a class (that's defined in your print stylesheet), or even appending new style elements to the head.