CSS Print Styling

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='#fffad‌​a', 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:

  1. On the Tools menu, click Internet Options, and then click the Advanced tab.

  2. 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.

boostrap with and without print media styles
(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



Leave a reply



Submit