print css: fit in one page
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far
CSS Print Layout - Printing on a Single Page
I think the frustration with this detail of CSS is that the answer has to be tailored to my own project. Thanks to @blahdiblah and other for suggestions. A mix of solutions led to near-perfect results, though of course IE still gives me problems...
It had to do with a hard reset of all padding/margin styles and then lots of !important
markers for padding, width, height, etc. Basically I filled up the page with height and then dropped in 100% wide objects. The result is maximum coverage on an 8.5x11 page with zero spillover to a second page.
@media print {
* { margin: 0 !important; padding: 0 !important; }
#controls, .footer, .footerarea{ display: none; }
html, body {
/*changing width to 100% causes huge overflow and wrap*/
height:100%;
overflow: hidden;
background: #FFF;
font-size: 9.5pt;
}
.template { width: auto; left:0; top:0; }
img { width:100%; }
li { margin: 0 0 10px 20px !important;}
}
Scale HTML to fit one page when printing
This is, unfortunately, a very common problem. In my experience, there is no reliable way to control print layout across browsers except to create a PDF. There are a number of "HTML to PDF" packages available, but while those generally work, they have similar variations depending on the browser they are run in. There are a number of hardware issues (e.g., screen size), browser settings (inherent differences between browsers plus locally set default font size and other configuration settings) and user settings (e.g., page zoom) that basically make this, IMHO, pretty much impossible except by generating a server side document.
I am sure this isn't what you want to hear, but the only reliable solution to make sure that the user is able to print a web page the way you (the developer) want it to be printed, is to generate a complete PDF on the server. That can be done with a number of different packages depending on the source language (PHP, Python, etc.) It is definitely more work for the developer, but you get to control image size, text size, font, etc. - all the things you should be able to control with CSS, and know that the page will print as expected. Instead of the print button on your page triggering the browser print function, have it download a file of the page from the server, all formatted and ready to print. You can target either letter (USA) or A4 (most other places in the world) and the two sizes are close enough that most people can adapt in Adobe Reader or other software to make it fit without losing data or having too much white space. Google Docs and many other systems do exactly the same thing in order to produce consistent output.
If your document is really "just one image" then it is even easier. Create the image server-side and embed it in a single-page downloadable PDF. If you can't easily create the image server-side, you can use a service such as URLBOX (which I have used as a paid subscriber but I have no other connection to it) to generate the images and download them to your server to embed in PDFs.
Resize page contents to fit on one print page
Printing devices usually measure their content in physical dimmensions (in, cm, ft, etc). Pixel width is dependent on monitor resolution, and thus can't be relied upon for every output device.
If it's crucial your page prints the way you'd like it, you'll most likely need a CSS file designed for printing -- one that uses inches, centimeters, or whatever you'd like.
Check out this previous post -- I think it will help.
How to print 1 image per (paper) sheet with maximum dimensions
html
<img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
<img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
If you want to stretch image to full page area
@media print {
.printThisFull {
width:100%;
height:100%;
page-break-after:always
}
}
If you want to image to full page width keeping aspect ratio
@media print {
.printThisFull {
width:100%;
height:auto;
page-break-after:always
}
}
If you want to image to full page height keeping aspect ratio
@media print {
.printThisFull {
width:auto;
height:100%;
page-break-after:always
}
}
You can try this
make new html file of below code and launch it in your browser, press crt + p, and you will see it working.
<!doctype html>
<body>
<img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
<img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
<style>
@media print {
.printThisFull {
width:100%;
height:auto;
page-break-after:always
}
}
</style>
</body>
</html>
Related Topics
Line Height Default Value If Font Size Is 100%
How to Vertically Align Objects in CSS When Working with CSS Grids
CSS Grid Vertical Columns with Infinite Rows
Ie Doesn't Support Height=Auto for Images, What Should I Use
Changing the Background for Bootstrap Dropdown a on Hover
Draw a Line That Doesn't Get Thicker When Image Stretches
Select Element Based on Child Class
Less Importing CSS and Relative Paths
Angular Mat-Select Text Color Doesn't Change
Make Flex Items Stretch Full Height and Vertically Center Their Content
How to Use Nth-Of-Type to Select Nested Children
What Does 14Px/26Px Font Size in CSS Do
Convert New Line /N to a Line Break in Angular
How to Make Iframe Respect Z-Index in Ie