Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css print styling

I have a page which displays fine on the screen.

I have a css which then formats the screen for print and re-sizes the sections.

My problem is that the print layout has a margin of approximately an inch from the left of the page which makes 2 elements print off the page on the right hand side.

I could probably compress the contents from the right but I want to know if I can reduce the margin on the left (and basically center the contents)

I have set the body tag on print to margin:0; padding: 0; but this has no effect?

Is there another setting that controls print margins?

like image 324
php-b-grader Avatar asked Aug 16 '11 23:08

php-b-grader


People also ask

How do you print using CSS?

Developer Tools. The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.

How do I write CSS for print media?

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters. This rule allows you to specify different style for different media.

What is @media print in CSS?

You can you @media print and @media screen to define what will be printed and what will be shown on screen. @media print { .to-print { --css to show content-- } } @media screen { .to-print { --css to not show content-- } }

What is a print stylesheet?

A print stylesheet formats a web page so that, when printed, it automatically prints in a user-friendly format. Here's what you need to know. Print stylesheets have been around for a number of years and have been written about extensively.


2 Answers

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.

like image 148
Brock Adams Avatar answered Nov 14 '22 23:11

Brock Adams


You could also try to set

margin:0; and padding:0;

to the html, main content div and p tags

and see if that helps.

Otherwise, your best bet is to set a specific width on your elements.

like image 36
Jason Gennaro Avatar answered Nov 15 '22 00:11

Jason Gennaro