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?
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.
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.
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-- } }
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With