Print CSS: Fit in One Page

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



Leave a reply



Submit