CSS and Print Margins

twister

twister

Howdy
Is it possible to control the margins on the actual print out with CSS? The page I'm creating prints out great in safari but not in IE on a PC. This is because the print margins are set up on a PC to be twice as wide as in safari. Can this be controlled by CSS or is that only controllable by the users settings on their machine?

This has nothing to do with page display, but rather page print out. :)
 
im not too sure about css but i use a cool PHP script that essentially cuts all tags and makes all copy on the page plaintext. It works amazing. You can see it at http://www.mtauburncapital.com and hit the 'print this page' button at the bottom. If youre interested in it let me know...ill send it to you.
 
Thanks for the reply but that's not it. I've got the print out looking good, just margins on some browsers are wider than others.
 
Yep, you just use a print-specific style sheet in addition to your regular screen style sheet. Here's your tags:

<link href="/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="/style-Print.css" rel="stylesheet" type="text/css" media="print">

In the "print" style sheet you can change margins, borders, padding, etc. You can set graphics or left-side navigation to "display:none" You can change any of the styles you have in your screen style sheet, and even additional ones that you don't even reference in your screen style sheet. (The class or id tags still need to be in the page, of course.)

I think alistapart had a good article on print style sheets recently.
 
In short, no...at least not with 100% accuracy. The margins are set by the browsers (and even user intervention or print drivers/printers sometimes). There's no real safe way to ensure the margins will be the same across any one browser or platform.

Print style sheets aren't there to ensure perfect DTP style results, they're just there to make it easy to remove certain things (navigation, images, colors which won't print well, etc.) and create something that prints relatively ok.

If you don't care about having gaping margins (1.5"+), then just use a simple stylesheet and set the body or main container div to have a margin of that size.

Code: 
body {
     width: 100%;
     margin: 1.5in;
     }

ALA (www.alistapart.com) has an article about CSS and print styles in their archives. Click on CSS in the nav, then scroll down for a bit. It was done quite a few months ago so it might be a ways down the list.
 
Yep, mdnky is right -- you can't change or override the user's printer-specific settings with print style sheets. All you can do there is take consolation in the knowledge that for any user who has wide gaping margins set as the default for their printer, then that's how everything they print looks, and your page won't strike them as odd or unusual; they're used to it.

Creating a pdf of your file for printing is the only way to truly control how something will print out.
 
sonjay said:
you can't change or override the user's printer-specific settings with print style sheets.
Click to expand...

That's what i was afraid of. Oh well. Thanks anways everyone. I have made an instructions page to tell people to change their margins on a PC or change their scale on a mac. Then it all prints off fine. Not what I wanted but it works! :)
 
You could try a PHP script to convert it to a PDF, but in the long run I think it would be more hassle than it's worth.
 
You must log in or register to reply here.
Back
Top