css print styling
You can set the print margin (and landscape orientation) with CSS like:
@media print {
@page {
size: letter landscape;
margin: 4.0cm;
}
}
And the good news is, it works! (On Chrome. Not supported on other browsers though I did not test IE9.)
The margin must be in a unit that makes sense in print -- pixels are not allowed.
Chrome will not shrink the margin below a fixed minimum, which may be determined by the printer driver.
CSS styling lost when printing
There isn't any foolproof method to print backgrounds in Internet Explorer and Microsoft Edge yet. However, there's a few methods I've tried before and may work under some circumstances:
Method 1 (using sprite):
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')";
Method 2:
CSS
.background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee;
}
HTML
<body class="background">
But if you want to print it yourself, you can enable 'Print Background Color':
To resolve this behavior, turn on the Print background colors and images option in Internet Explorer. To do this, follow these steps:
On the Tools menu, click Internet Options, and then click the Advanced tab.
In the Settings box, under Printing, click to select the Print background colors and images check box, and then click OK.
Also, a few similar StackOverFlow Posts
CSS @media print issues with background-color;
How can I force browsers to print background images in CSS?
Titles are pushing content to the next page in css print styles
I found out what the problem was, it was mainly that I was too tired to see what I wrote in my css print stylesheet. I had the following style that forced the ul to start on the next page : ul { page-break-inside: avoid; }
That's all it was.
Why are my styles getting removed when I try to print a webpage in Chrome or Firefox?
It has to do with bootstrap. If your bootstrap includes print media styles, because it might be not customized in a way it excludes them, some styles will get changed.
(Hintergrundgrafiken = background graphics)
Also this is important, as you already did correctly in your screenshot:
To print the page with colors and stuff, e.g. in Firefox you have to tell the browser by clicking on File > Page Setup... > Print background
or Print (icon in the top right menu) > Page Setup... > Print background
.
How to use print styles in css with Rails 4?
If you do not specify the media type, rails will default to "screen" and hence, you're trying to use a print query on a screen type stylesheet, which doesn't work. To go avoid this problem, one thing you can do is specifying the media type when calling the stylesheet from your view. Eg :
= stylesheet_link_tag "application", media: "all"
= stylesheet_link_tag "application", media: "screen, projection"
= stylesheet_link_tag "application", media: "print"
I usually keep a simple call to the css application (including the manifest that requires the tree) and add a stylesheet link tag calling for a css I usually name 'print.scss' specifying the media type, but I also have to remember to add on the application manifest :
*= stub print
so this file is not called twice under two different media types.
Related Topics
Bootstrap Collapsed Menu Not Pushing Content Down When Expanded
Nth-Child with Mod (Or Modulo) Operator
Css: Height- Fill Out Rest of Div
What Is Device Pixel Ratio For
Why Can't I Seem to Use Background-Clip
How to Build a String in a Loop for a Dynamic Gradient
Differencebetween ".Class Element" and "Element.Class"
How to Get a Responsive Button in Bootstrap 3
How to Create a "Tooltip Tail" Using Pure Css
How to Make Text Run Top-To-Bottom in CSS
Asset Pipeline Undefined Variable SASS