Can I force text to print as white?

Question

Suppose I have some text which is displayed over an image or some other printable colours. Is it possible to force this text to white when printing? The default behaviour is to force white to black or grey in most browsers. This clearly makes sense when you are printing text in containers with background colours/images which are removed, but doesn't make sense to force the text in the case where you are overlaying text on images.

I should probably mention that I am quite aware of the print stylesheet, it just so happens that regardless of setting the font colour, in IE/chrome/firefox, the font does not appear white regardless. It ends up black or grey depending on the browser. Please show an example of white text over an image if you think it's actually possible.

To illustrate see:

http://jsfiddle.net/NSwYE/

I personally don't think it's possible due to the way printing works. It's pretty annoying none-the-less.

Answer 1

This is not entirely in control of the web page author.

For example, this fiddle will print (at least it did for me on a Dell 1720 Laser Printer) white text on any of the three black backgrounds in

IE9

if the user has checked the box found next to:

Tools -> Print -> Page Setup -> "Print Background Colors and Images"

If that box is unchecked, then it will not print the black at all on the first two, but will on the last (since it is an img tag), but it prints the text as a grey, even over the img tag. Thus, it seems that the setting for "Print Background Colors and Images" affects how the browser interprets the text, and will allow a true white (knock-out effect) if checked, but not if unchecked.

Firefox

Checkbox found here (which seems to work):

File -> Page Setup -> "Print Background (colors & images)"

For Chrome? Web Page Author Controlled?

I have not yet verified whether the information from this post will do it or not (it does not work for me on my next fiddle, but it may be because it is in an iframe). For elements that should print in Chrome, try setting:

-webkit-print-color-adjust: exact;

Answer 2

Marked answer is wrong. You can control text color in every browser! You just need to output text in svg. Browsers don't change color in svg. Here's an example:

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

Answer 3

print.css will help you, Eric meyer have a post about it.

For example html5boilerplate using this style on his css:

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

Update:

With your example html:

<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>

and my css:

#sometext {
    position: absolute;
    top: 125px;
    left: 220px;
    color: #FFF; 
}

@media only print {

#sometext {
    color: #FFF !important;
    /* actually trick with white text-shadow not work ( */
    text-shadow: 0 0 3px #FFF !important;
}

}

​ I get this demo. Is this an acceptable solution?

​