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;
}
}
Related
The #media at-rule can specify a media query, such as print, to apply css rules to the document.
Let's say I have the following code:
#media print {
#page {
size: 3in;
margin: 0.2in;
}
}
body {
border: 1px solid;
}
<body>
<h1>Title for the page</h1>
<p>Some text goes into here.</p>
</body>
When I open this html webpage in Chrome, with its "Print to pdf" tool, I get a satisfactory result - the user can't change the exported pdf size, it is determined by the css rule, 3inch×3inch in this case. However, you can change the margins in this GUI, although I explicitly set it in the second rule.
EDIT:
When choosing "Default" margins in the printing tool, the margins indeed follow the rule set up in the css file.
On the other hand, on Firefox, the user can simply change the pdf page size, change the orientation and how to scale the content into the page. If so, then what effect does the css rule have?
So my question is mainly towards Firefox behavior: Is that a bug or rather is it ok?
Any thoughts would be very helpful.
According to MDN, #page/size CSS rule is simply not supported in Gecko and WebKit based browsers (Firefox and Safari) as of 2021-10.
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size#browser_compatibility
Bugzilla entry: [css3-page] implement #page rule size attribute
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;
}
}
I've read the different questions here about the css issues in background color when printing. I tried to follow the steps and the solutions presented especially here CSS #media print issues with background-color; but I still can't print the background color.
Do I have other choices to print the page with the background color?
Here is my code in style for the body
body {
-webkit-print-color-adjust: exact !important;
font-size:11px;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
Browsers generally ask whether or not the user wishes to print background graphics, here's Chrome's print interface:
Unfortunately, there is no way to force this option to be enabled.
li.disabled a {color : #808080;}
I've added the above in .css file and my expectation is to find any <li> tag with class as disabled and make the corresponding content given in ??? this tag to be displayed as gray in colour.
Example of my html would be http://pastebin.com/cnA4gqb3
This does not seem to work on browser like chrome. Can you suggest me a generic css which will work in common across all browsers?
This is probably a "importancy" issue. Some other CSS is likely to be more important to Chrome. Try adding !important or change the order of your rules.
You can use something like this :
This is used for safari and chrome basically,
`#media screen and (-webkit-min-device-pixel-ratio:0) { #u { color:green; /* Safari only */ } }
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.