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.
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
This works for me:
#media print {
body {
-webkit-print-color-adjust: exact; /*Chrome, Safari */
color-adjust: exact; /*Firefox*/
}
}
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
I've created a page that I would like to print using the chrome browser. Everything seems to work fine. However, the borders printed are not exactly the measurement I provided. Please refer to the images below.
What it looks like on my screen:
What chrome prints:
Notice the difference between the width of the lines, on the left side.
How do I force chrome to print exactly what is on my screen? Especially the border measurements.
Previously I had difficulty printing background-color: however, I used:
-webkit-print-color-adjust: exact !important;
Now the black background prints. Is there a similar solution for borders?
Hi I just encountered the same Error and found a solution!
In my code I set the print zoom to 50% and this lead to borders with 1px beeing twice as big, to resolve the issue i just deleted the 50% statment, if you have not changed your zoom anywhere maby it would work if you set the zoom to 200%.
That was my code(scss):
#media print {
body {
-webkit-print-color-adjust: exact;
color-adjust: exact;
//zoom: 50%;
}
.no-print {
display: none !important;
}
}
Long story short, I had an app written in HTML / CSS and a little JS. It had a lot of input fields that were displaying perfectly in Chrome, IE and Firefox - white background, black text.
Then I've decided to integrate it into WordPress Page. And it works perfectly - well, until You open it in Firefox. In Chrome and IE, when it is opened as a page, everything works. In Firefox, the text is white / transparent, so it is invisible with white background...
I've browsed through few pages of Google Search on this but cannot find any resolution. Adding color: black; !important to input selector does nothing, adding style="black;" to any input field also. Any other solutions I have found do not work.
Do You have any idea how to fix this? It would be a shame to be closed to Firefox users and honestly it looks like magic to me, nothing is working...
So, after seeing comments, an example:
<input type="text" name="rozstaw" id="rozstaw" maxlength="4">
CSS:
div.eyes-tests-choose-glasses-modal #eyes-tests-choose-glasses-container input {
font-family: Roboto, sans-serif
}
Although I don't really think this is the case - standalone it works great, on WordPress it does not. That's why I think maybe linking would be better way of describing things.
It's hard to guess, but here are two shots in the dark that might help you out
First, try adding your CSS like this:
input, textarea {
color:#000 !important;
}
Alternatively, you can do the same thing only specially targeting Firefox:
#-moz-document url-prefix() {
input, textarea {
color:#000 !important;
}
}
Im trying to learn how to enable print background-colors pages in chrome :
Take for example http://angularjs.org/
the main page is :
So If I click print ( ctrl+P) and mark the "background colors and images" - it does show the background colors which are future to be print :
All ok.
But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :
And when I try to print it - I see it in the preview pane without colors :
My question is : how did they do that ? ( or better , how can I make it print background colors ?)
I already read here that I should use -webkit-print-color-adjust:exact;
so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked ctrl+p again
What should I change in the css in order for it to print also background colors ?
related info , searching for #media , found it under :
But I didn't find any related info there.
Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like
<div class="blow"></div>
With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like
#media print {
/* Declarations go here */
}
OR
<link rel="stylesheet" href="style.css" media="print" />
Now, what you have to declare is
-webkit-print-color-adjust: exact; in the property block, like
#media print, screen { /* Using for the screen as well */
.blow {
height: 100px;
width: 100px;
background: tomato;
-webkit-print-color-adjust: exact;
}
}
Demo (Only for webkit browsers i.e Chrome/Safari)
In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.
As you have commented, it works for me..
OR
Support for the same is dirty, for more information on the property, you can refer MDN
From MDN :
Body element backgrounds are not printed Currently neither
Chrome nor Safari print backgrounds of the body element. If this
property is set to exact for the body element, it will apply only to
its descendants.
Chrome clipped image bug
When background images are clipped (for example, when using
background-image sprites), due to Chromium bug 131054, they will
appear distorted when printed from the Chrome browser with
-webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the
element to which they are applied) are printed correctly.
External links
WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this
property
Your background-color is probably overwritten. To achieve background-color for printing increase the specificity of your selector or add !important to the statement. Along with -webkit-print-color-adjust: exact; this should work for you:
#media print {
.mycontainer {
background-color: #000 !important;
-webkit-print-color-adjust: exact;
}
}
I had someone else help me make my site responsive, the site doesn't work below IE8 since it is using some HTML5 and CSS3 features that aren't supported. So with that said I have a CSS class that is only an asterisk. Which I thought was a hack for IE7. Now the thing is is that this is in a media query for media-print. Does this have a different meaning when it is for print media? Would it be okay for me to remove the asterisk and just add the classes names that need to be changed instead? Here is how it looks:
#media print {
* {
background: transparent !important;
color: black !important;
box-shadow:none !important;
text-shadow: none !important;
filter:none !important;
-ms-filter: none !important;
}
}
The code you're showing isn't the sole reason why your site doesn't work. That's just a media query - it says "for any print media (#media print {), for every element (*), use these styles" .But IE8 and lower can't read media queries, so they will ignore any styles inside a media query.
You could replace the * with specific selectors for all the elements that you want. But, since IE8- can't read media queries, it won't change how IE8- print your site.
You may want to consider something like Modernizr or the HTML5shiv to help older versions of work with newer code. But every site is different.