Search code examples
javascriptprintingcolorsinternet-explorer-8print-preview

font colors change when printing


I have a really perplexing issue here. I have a table that is built dynamically (probably an unimportant fact here, but just so you know). On the webpage, I have text being set as particular colors based on logic criteria. On the page, it looks great. When going to print preview (and actually printing), the colors are very different.

In my code, the colors are: Red - FF0000 Orange - FF8300 Yellow - FFFF00

The image below shows the page and then the printing colors on the left and right, respectively. Note that I don't care about the background color. You can clearly tell that the colors are far more distinct on the page then they are in print preview.. and the yellow isnt even yellow at all.

enter image description here

Any thoughts about why this is happening??


Solution

  • You need to enable "Print Background Colors and Images".

    This, for some reason, also fixes the foreground colors. When unchecked the print is in economics mode.


    IE8 Print Preview       


    Before and after shots:

    Web Render: Print Before: Print After:


    Sample page used:

    <table border=1>
       ...
    

    With CSS:

    th {
        font-family: Arial;
        color:#244169;
        background:#d8ebf9;
    }
    td {
        font: bold 10pt Courier;
        background: #f1f5f8;    
    }
    
    .red {
        color: #ff0000;
    }
    .orange {
        color: #ff8300;
    }
    .yellow {
        color: #ffff00;
    }
    

    Internet options:

    Note that under Tools -> Internet Options -> Advanced scroll down to Printing, there is an option for Print background colors and images. This does not affect "Print Preview" or print. At lest not here. (Only tested on Windows XP as that is the only place where I have IE8.)

    However setting it in Print Preview, sets it permanently. Again; at least here. It affects both direct print and print preview.

    Advanced Internet Options IE8, Print