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;
}
}
Related
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*/
}
}
I have set a responsive style sheet for my website and here is part of the CSS file responsible to empty some space for the navigation-menu on the left :
#media (min-width: 48em) {
#layout { padding-left: 150px }
}
I've also set a print.css file as dedicated print style sheet as follow where I set the menu to hide and it's space to be omitted :
#media print {
#layout { padding-left:0 }
#menu { display : none }
}
The problem is that, while in print preview, the menu will hide but there's still the 150px white space on the left side of the content, no matter what, I've even tried :
#layout { padding-left:0 !important }
But no luck,
When I manually change the padding-left value to 0 using the Chrome's built-in feature (Inspect element), the page shows up alright in print preview, but the code in print.css does not seem to be applied no matter what.
All right after a lot of testing. I got it figured out. It seems the padding-left problem is only happening in Google Chrome's print preview, since all the other browsers print-preview respect print CSS. So everything is fine with my CSS, and this is browser related bug.
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
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;
}
}
Example website
So when you mouseover the projects you should see an rgba background fade in with some text over the existing image. I cannot duplicate the error in Safari or in Firefox. In fact, I cannot duplicate this for the same ones every time, and I can also say that refreshing the page will not necessarily fix the problem either.
Is this a problem in my code or have we come upon a problem with Webkit and/or Chrome specifically?
UPDATE 1
Originally I thought this was a problem with the RGBA background so I tried using a background: black; to see if it changed anything. This didn't work seeing as the line was still present on mouseover.
UPDATE 2
I have considered this to be a problem due to the display I've been using. I'm on the new Macbook Pro with retina display. This could still be the source of the issue, but I'm not convinced it is. I'm yet to do testing myself on another device that isn't a retina display, but I've been told that the lines are still prevalent.
This image will help:
There's something about your box-model that I don't like for this technique. I've used similar hover/fade scripts, but never utilized a negative margin (because it will jack up the box-model), or made the top layer larger than the bottom.
I found a few things that helped it render better for me (I'm wasn't seeing lines, but I was seeing either rounded white corners peaking out or black chisel points in the parent corners). At any rate, here's the few things:
Nix the -1% 0 0 -1% margin (making something 102% wide, then using a -1% margin seems like 100% to me, but relies on all browsers rendering that math the same).
Set the parent and child to be the same W x H (200px x 410px)
Decreasing the radius of the child by one px hid the oddities of the corners for me (again, I think it's a rendering engine thing FWIW); though not having it set should do the job.
I also add .projectItem a:hover to the .projectItem a's CSS declaration, to allow just the transitions to occur on .projectItem a:hover.
This fiddle does the roll-over effect with all the features above added/removed respectively: http://jsfiddle.net/hd4QM/
HTH.
I can't reproduce le problem in Chrome, but from your screenshot it looks like you are zoomed in. Sometimes browsers round off percentages and you might be ending up with a missing pixel, it's best to make it stick to each edge instead of specifying height and width:
.projectItem {
overflow: hidden;
}
.projectItem a {
display: block;
position: absolute;
opacity: 0;
width: 102%;
height: 102%;
background: black;
color: #F6F8EE;
background: rgba(0, 0, 0, 0.85);
border-radius: 5px;
margin: -1% 0 0 -1%;
}
Also, I'm not sure why you're displaying as table, but this might be compounding the problem. Change it to block.