How to make cross size and cross browser compatible print CSS for World's most use paper sizes to get print?
A4, A3, Legal etc
How we can same almost similar formatting to our site page's like MS word ? What are best practices to get consistency in formatting of print page from any popular browsers?
body {width: 7in}
.What about this? any suggestion?
body {margin: 15px; }
#mainContainer {width: 842px; /* equivalent to A4 */ margin: 0; }
#header {display: none; }
form {display: none!important; }
#footer {display: none; }
#mainContent #leftCol {display: none; }
#mainContent #rightCol {display: none; }
#mainContent #contentSection {float: none; padding: 0; margin: 0; font-size: 13px; width: 100%; }
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.
Create a Separate Version for PrintingCreate a separate HTML page for printing. Duplicate the primary content of the full page, whittling it down to primarily text. Remove unnecessary headers and footers (these are often composed of links which would be meaningless on paper). Remove ads and menus from side columns.
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 specify print-only stylesheets using <link rel="stylsheet" type="text/css" media="print" href="print.css">
The user has to specify the page size in their print dialog. You were able to suggest the page's orientation in CSS2 using @page
but it was dropped in 2.1. See here and here for excellent introductions into print stylesheets.
The usual quirks apply, like differences in the box model. The only best practice that comes to mind is keep it simple, don't use position: absolute
, and test a lot. Install a PDF printing driver for testing.
You should be able to specify those in your print stylesheet.
Using pt
, being a physical unit, should produce consistent results on every machine.
No. You will have to have the user pick the right stylesheet beforehand.
If you don't want your printout to consist of five pages next to each other, probably yes. However, you would only do that in your print stylesheet.
Remember that in the default settings, all browsers will print a proprietary header and footer that only the user can remove in their print dialog.
If you want total control over every inch of your print product - including size and orientation - you will need to start generating PDFs.
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