11

I'm using the Barby ruby gem which adds a handy way to render barcodes as HTML.

Barby renders a table with td backgrounds on or off based on the code passed to it. This works pretty well because I don't want to generate and store an image file for every record I need a barcode for.

The major browsers don't print background colors by default and I need the barcode to print without making the user change a print option on their local system.

I'm not sure how to accomplish this with Firefox. With webkit (Chrome and Safari), it's pretty easy:

td { 
  background: #000 !important;
  -webkit-print-color-adjust: exact;
}

Feverish Googling hasn't really gotten me anywhere: This question is a few years old and I haven't found anything newer so I figure I'd pose the question again. Fat borders also won't really work because if the relationship between the bars change, it'll change the data contained in the code.

Community
  • 1
  • 1
Derek Povah
  • 353
  • 3
  • 15
  • I am so very sad there is no answer for this :( Browsers need to support printing better. – RustyToms Sep 26 '16 at 17:28
  • Surprisingly, it looks like some recent changes are making this work with the new color-adjust property. MDN doesn't even have documentation for it yet, so I think it might still be in development for now (September 2016) – RustyToms Sep 26 '16 at 19:09
  • Just to flag up that using `!important` does seem to make a difference. – fooquency Jun 04 '18 at 13:02

2 Answers2

23

This is beginning to work in Firefox (at least version 48.0.2) with the "color-adjust" property.

td { 
  background: #000 !important;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

I see a minor bug or two in my particular project, but the background colors are showing up!

RustyToms
  • 7,008
  • 1
  • 25
  • 35
  • 1
    Good answer. Solved my problem. – Braj Mar 28 '17 at 13:47
  • 4
    Works great for bg colors. Is there any way for color property? Mine is nor printing the color if I set the color to white else it's working. – Jnanaranjan May 17 '17 at 07:42
  • 1
    Still unofficial. Pretty good coverage though: https://caniuse.com/#search=color-adjust – naught101 Nov 09 '18 at 02:42
  • `color-adjust` is not properly supported by FireFox unfortunately. It seems to apply only to background, not to the `color` css property. It is reported as a [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1436758), without much activity or votes. Keeping the background is quite useless if the font color is not preserved, causing it to be unreadable. – Frédéric Jun 16 '19 at 14:54
5

This works for me:

@media print {
    body {
        -webkit-print-color-adjust: exact; /*Chrome, Safari */
        color-adjust: exact; /*Firefox*/
    }
}
Khanh Vo
  • 186
  • 1
  • 4