Force Background Color Printing on Firefox

Question

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.

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

RustyToms · Accepted Answer · 2022-12-26T17:43:42.873

23

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

color-adjust was created for this, but is now deprecated and replaced with print-color-adjust: https://w3c.github.io/csswg-drafts/css-color-adjust/#propdef-print-color-adjust

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

The forced-color-adjust property is new in 2022 and starting to be adopted and may be useful in some situations https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust

edited Dec 26 '22 at 17:43

answered Sep 26 '16 at 19:07

RustyToms

7,600
1
27
36

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
@Frédéric it looks like they fixed it https://bugzilla.mozilla.org/show_bug.cgi?id=1436758 (I haven't tested it myself) – RustyToms Dec 26 '22 at 17:30

score 6 · Answer 2 · answered Jun 01 '17 at 16:05

6

This works for me:

@media print {
    body {
        -webkit-print-color-adjust: exact; /*Chrome, Safari */
        color-adjust: exact; /*Firefox*/
    }
}

answered Jun 01 '17 at 16:05

Khanh Vo

316
3
5

Force Background Color Printing on Firefox

2 Answers2

Linked