Working with print CSS

I have a html page with css style, but when I try to print it all the text and icons get to black color, not sure how to make it to original color for printing. I tried to enable print background color and images as well. Images are shown with colors, problem is with text and icons.

Tried to do override at print css as well,

    @media print{
  #gic1-l-body .circle-header{
    border: none!important;
  }

  #gic1-l-body .section-title {
      color: #00B0D2;
      -webkit-print-color-adjust: exact;
  }

  #gic1-l-body .page-action i {
      color: #26C0DD !important;
      -webkit-print-color-adjust: exact;
  }

  #gic1-l-body{
    -webkit-print-color-adjust: exact;
  }
}

Update

Still not sure what is happening, the same browser and computer is able to preview other web sites with colors, but not just this one.

Just to make sure: can the printer actually print in color? And by that I mean, assuming it is a color printer, that the settings are set to color printing and not set to black and white.

If the HTML page is in color, a color printer should print it in color as well, unless the printer settings say it should print in black and white only. Those settings can't be overridden via CSS I'm afraid.

Oh, I just read your post again: I see the images are being printed in color, but it's just text and icons? That is weird... might still be settings though.

And @j450nhughes is right, the more code we can see, the easier it is to pinpoint the problem :)

Hmmm, tested it in Chrome and Firefox, but the previews show it all in color here. (Windows 10 btw). Don't have a printer here at the moment, so I can't check it on actual paper...

@balamax the print preview shows the text in color.. is it same at your end?

screenshot

couldn't test it as there was an authenticating request popup which blocked the bootstrap, fontawesome css loading..

wondering what is happening here.. I am in windows 8.1.. it is all black and white here.. plus i am looking at print preview only, not the actual print though. screen shot above..

Assume you can only print web pages in black and white with colour photos, make it look as nice as you can like that. - your best bet is to really let the style fall away (you know when you add stuff to your reading list and it presents itself more basically... that is ideally what you want to do for print)

So long as your markup is semantic items should render in an understandable way... remeber that print is a totally different media to screen, make your print CSS reflect that.

Yeh, I am fine with it but the client treats this as a bug :P :D

Then explain a web page is not a sheet of paper. (ok client does not like that :) ) If you absolutely must have an exact print of the page, run a headless broswer on the backend, render out the pages to jpg or whatever and link the print to that image.

Another way to sell what you lready have to your client..... run prints from ebay, amazon, any large retailer in your area, and share with the client how other vebdors are dealing with print CSS - seeing that larger companies also do not print the page exactly as per the screen.

I can help maybe if you can share the code

sure, will format a bit and share, its data privacy thing..

Might be some browser issue at your end.. did you try testing in other browsers? or maybe someone else's system?

i tried in 2 windows machines in chrome and IE, its the same.. will do it in more machines later then.. thanks

tried in a mac with safari and chrome, same no colors..

Thread

Working with print CSS

Responses(4)

Recent threads

Search Hashnode

Working with print CSS

Responses(4)

Recent threads