Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
329 views
Welcome To Ask or Share your Answers For Others

1 Answer

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;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...