I am using a separate style-sheet for printing. Is it possible to set right and left margin in the style-sheet which set the print margin (i.e. margin on paper).
Thanks.
This question is related to
html
css
printing
stylesheet
Updated, Simple Solution
@media print {
body {
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
}
}
Old Solution
Create section with each page, and use the below code to adjust margins, height and width.
If you are printing A4 size.
Then user
Size : 8.27in and 11.69 inches
@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.Section1 {
page: Section1;
}
then create a div with all your content in it.
<div class="Section1">
type your content here...
</div>
If you know the target paper size, you can place your content in a DIV with that specific size and add a margin to that DIV to simulate the print margin. Unfortunately, I don't believe you have extra control over the print functionality apart from just show the print dialog box.
I'd personally suggest using a different unit of measurement than px
. I don't think that pixels have much relevance in terms of print; ideally you'd use:
I'm sure there are others, and one excellent article about print-css can be found here: Going to Print, by Eric Meyer.
I also recommend pt versus cm or mm as it's more precise. Also, I cannot get @page to work in Chrome (version 30.0.1599.69 m) It ignores anything I put for the margins, large or small. But, you can get it to work with body margins on the document, weird.
Firstly said, I try to force all my users to use Chrome when printing because other browsers create different layouts.
An answer from this question recommends:
@page {
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
}
However, I ended up using this CSS for all my pages to be printed:
@media print
{
@page {
size: A4; /* DIN A4 standard, Europe */
margin:0;
}
html, body {
width: 210mm;
/* height: 297mm; */
height: 282mm;
font-size: 11px;
background: #FFF;
overflow:visible;
}
body {
padding-top:15mm;
}
}
Special case: Long Tables
When I needed to print a table over several pages, the margin:0
with the @page
was leading to bleeding edges:
I could solve this thanks to this answer with:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
Plus setting the top-bottom-margins for @page
:
@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}
Result:
I would rather prefer a solution that is concise and works with all browser. For now, I hope the information above can help some developers with similar issues.
Source: Stackoverflow.com