SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,124
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)

    White Text in Footer turns Gray when Printing

    I have a weird issue and no matter what I did to the CSS, it wasn't fixing it. So I am reaching out to the CSS gurus here (because I am not one).
    http://cpradio.no-ip.info:12710/clie...sitepoint.html

    If you visit the above (in chrome at a minimum) everything should look pretty good. You will see a footer on each page that is white text. Now Print the page and that footer text turns gray (happens in Safari too). The question is why! Why on earth does it turn gray? I am stumped.

    If you are able to resolve this, please please let me know how. As I've tried everything (I can think of) without any success.

    Thanks

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,124
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    So it seems this is a common issue and can be resolved using --webkit-print-color-adjust: exact;

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hm, that will only work in webkit browsers (like Chrome and Safari). It's plack in Firefox, for example. It's strange that setting the color in the print style sheet isn't working. I'll look further.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    In Firefox you would need to go into "Page Setup" and turn on print background colours and images. Otherwise backgrounds won't get printed and white text on a white background would be invisible so the browser changes it to a colour that will show when printed. the browsers doesn;t really know that you have shimmed a coloured image under the text and indeed would not know what colour that image was.

    That means it will be up to the user to do this as it is their paper and ink that you will be using. Any colour from black to white will be treated as black in Firefox (other browsers will probably have their own defaults) but will adhere to other colours such as yellow, green blue etc.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    That's interesting, Paul. Often I test this by choosing Save as PDF and getting a print preview. In FF, this kept the blue background but turned the text black.

  6. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,124
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I read about FF and IE you have to change a page setting (not a problem for my client, they use Safari and Chrome), but I should have mentioned those browsers too. I am a bit disturbed by a browser trying to dictate what font color my text should be when I state it should be white, but then again, it is what it is.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    To be honest, browser support for print stylesheets is so flaky that anything that requires exact rendering or background images is usually better done as a PDF to ensure that it comes out right for everyone.

    In Opera, I don't get the blue bar across the bottom, and I get black text.

    You might be able to fool browsers by setting the text color to #fefefe, which is so near to white as makes no odds, but might just be enough that they don't switch it to black. Of course, that doesn't help when browsers aren't printing the blue bar

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's interesting, Paul. Often I test this by choosing Save as PDF and getting a print preview. In FF, this kept the blue background but turned the text black.
    Ralph the blue background is a foreground image which is why it gets printed because most browsers print foreground images by default (apart from opera I believe which you may have to set up). The text turns black because there is no background colour for the text and the fact that an image has been shimmed underneath is neither here nor there to the brower so the text gets changed to black.

    If this didn't happen automatically then all print outs would have masses of missing text because background colours and background images are not printed by default in most cases.

    I am a bit disturbed by a browser trying to dictate what font color my text should be when I state it should be white, but then again, it is what it is
    Yes it can be a problem when you have to second guess something but I guess for most people the automatic behaviour is more desirable. Its better to have text in the wrong colour that is readable but not desirable to have white text on white backgrounds when printed.

    I think we just have to accept that printing has its own rules and do the best we can.

  9. #9
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,124
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B, yes, I do agree with your statement that the most desirable is how it works, just wish it were better documented I'm going to try setting the background-color of the text to see if that helps webkit browsers without using the --webkit-print-color-adjust property


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •