How do I control page margin, with CSS, when printing a page?
I need to set custom boundaries for a document intended for printing. Currently, FF does not respond to @media print { @page { margin: 0.75in } }. Also, I need to vary margins based on media size, typically letter or A4, with margin settings appropriate to each, and I cannot find HTML/CSS that FF will respond to as desired.
To be fair, I haven't found HTML/CSS that works in any browser - but that is another story!
All Replies (9)
Users may have different margins set in Page Setup, and therefore I don't think it's really possible to control the width of margins on the ultimate output.
I think if I had this requirement, I'd generate a PDF. That would give me the best shot at having some control over the ultimate result. Of course, I know some people set Adobe Acrobat/Reader to print at actual size while others allow resizing, which adds even more margins...
This site often offers interesting ideas:
https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
Thanks, jscher2000.
Here is an example URL that illustrates the problem when trying to print in Letter or A4 on different browsers: http://www.384thbombgroup.com/_content/_pages/PersonalWarRecord-Beta-2.php?xID7uGt4=4746
I have tried to configure the html and css so that the page prints consistently across different browsers, but the biggest difference seems to be in the way each browser manages page margins (or padding?). Also, Chrome seems to display the output a bit smaller than FF or MS Edge - these are the only browsers I have tested, so far.
I do recommend that users select Print to PDF, but the browsers still set margins any way they like. I am hoping to find a way to override the browser margin settings, and will definitely try to figure out how to apply the guidance at the link that jscher2000 provided. If not, I'll be back...
Cheers, f3
It doesn't help that Firefox 55 has a bug which can disappear the table borders on tables that continue onto a second page. That's scheduled to be fixed in Firefox 57 and hopefully the fix will get into Firefox 56.
Yeah. I had reported it and look forward to seeing it fixed.
Thanks for the link.
Since your content is centered and presumably you are carefully controlling its width, why not set the side margins to zero or even a negative value?
@page { margin-left: 0in; margin-right: 0in; margin-top: 1in; }
That should keep the content the size you want, at least in theory, for typical paper sizes.
Vertical positioning is much harder. When I print to my preferred PDF capturing program from Firefox, the print job has extra space around the outside of the page compared with Chrome, so the print header and content is a bit lower. But the space between the print header and the content is consistent so that's better than nothing....
(Note: I don't have Edge on this Windows 7 machine.)
Athraithe ag jscher2000 - Support Volunteer ar
Hi f3red, I looked at the page linked your missing borders bug and in Firefox 56-57, the entire tbody of the table on page 4 does not print for me. If you remove the inline page-break-inside:auto style on the table, then it works. I have no idea what is going on there, but if that creates problems in other browsers, you may want to file another bug.
I'm making "progress". Using the following CSS - with NO @media queries - I can get the browsers to do what I want* - see below for details.
<style> @page { width: 8.5in; height: 11in; margin-left: 0; margin-right: 1.75in; margin-top: .75in; margin-bottom: .75in; padding: 0; } </style>
- Need these settings:
Firefox: set margins to zero in Page Setup MS Edge: Margins - "Normal" Chrome: Margins - "Default"
This CSS is TOTALLY IGNORED when enclosed in the @media query: @media print and (width: 8.5in) and (height: 11in) { ... }
I am using a Brother MFC-J870DW printer with current Brother driver, if that is an issue.
It remains a mystery. My work-in-progress test page is http://www.384thbombgroup.com/_content/_pages/PrintLayoutTest.php
I have documented the behaviors of the FF, Edge, and Chrome browsers with various combinations of styles and @media queries in the Test file: http://www.384thbombgroup.com/_content/_pages/PrintLayoutTest.php
It appears that media queries are not fully - or universally - implemented in these browsers. Full source code, including the CSS, is in the one file in case you want to fiddle with it.
Unless someone can tell me what brand of "fairy dust" I need to sprinkle on my code, I will revisit this next year, and see what improvements have been made.