1

I have a basic web page with a dark background and light text. Printing not only darkens the paragraph text, but the heading text too.

I would like to keep the heading text-colors. I have already tried:

  • An @media print rule
  • Adding media="all" to the stylesheet link.
  • Two seperate css stylesheet links. One with media="screen" and the other media="print"

Neither Firefox nor Chrome have any effect.

I am not trying to preserve any background-colors, only the text-colors of heading elements. Please see this jsfiddle. I am not using any bootstrap or Javascript on the page.

beanaroo
  • 506
  • 1
  • 5
  • 14
  • I think there is not enough contrast between the colors you chose and the black background, this will never look good in print – Aziz Feb 13 '16 at 14:17
  • I'm using the colorscheme on a number of documents, I actually have a slight text shadow too, so it is readable. – beanaroo Feb 13 '16 at 14:19
  • Have you seen the answer to this question? http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color – paul Feb 13 '16 at 14:20
  • I have indeed, thanks, but I do not want to print background colors. – beanaroo Feb 13 '16 at 14:21
  • its something about to config the printer for supporting the background graphics. It is in the print option or properties. – Murad Hasan Feb 13 '16 at 14:22
  • see the Browser [compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust) of `-webkit-print-color-adjust: exact;` – Murad Hasan Feb 13 '16 at 14:25
  • @FrayneKonok I have tried that setting but it prints the background. I merely want to preserve the foreground color of certain elements. I have linked the compatibility of that property in my question already. – beanaroo Feb 13 '16 at 14:25
  • set up a new style when you are fire for printing the page. the style applied to the foreground color only with `!important` – Murad Hasan Feb 13 '16 at 14:27
  • `!important` has no effect, thanks for trying. – beanaroo Feb 13 '16 at 14:30
  • Use frayns webkit-color-adjust with @media print to remove the background. – seahorsepip Feb 13 '16 at 16:18
  • @seahorsepip webkit-color-adjust is not an option due to browser incompatibility. – beanaroo Feb 14 '16 at 04:04
  • If I attempt to print the example you provided, it will retain the text color so I am not sure what is the problem? http://puu.sh/n7w4I/64071198ed.png now if you disable the background the colors will be darkened because a whitish text on white background is not readable, seems chrome tries to take care of that issue by itself – Aziz Feb 14 '16 at 12:23

0 Answers0