How to design a webpage to be print friendly?

Question

What are the right sizes for a webpage to be printed on A4 size paper? What other stuff should be considered?

*inline CSS is preferred in this case

Clarification: This web-page's only propose is to be printed, since it is a receipt.

Clarification # 2: This web-page is for the internal use of the company I'm working for. They would like it to look professionally designed receipt.

Clarification # 3: This web-page must be printed on one page -of A4 size- only.

Answer 1

Make your printable version as simple and free from page furniture as possible.

You should create a print-specific stylesheet that as a minimum removes any width restrictions on the page so the print page can flow the text to fit the output paper.

You should also be aware that most browser don't print CSS background images by default so don't rely on them being present on the printed page.

---

EDIT: In answer to your comment, I would make the receipt as simple as possible. The main issue is you don't have control over the end-user's printer so you can't know for sure exactly how wide the printable area is.

Design the page using a liquid/flowable layout and try and keep it simple. Amazon's receipt style that you get in the delivery box is probably worth using for inspiration.

Answer 2

Like the other guys said you need to use a print CSS, but remember one thing:

display:none; //is your friend!

You can use this to make sure elements such as your navigation etc are not printed out.

By the way A List Apart has this great article on print stylesheets, check it out.

Answer 3

Answer

I'd recommend using two different style sheets.

For viewing in the browser you could set the table width to the width of an A4 paper: 21cm. (Minus margins 18cm.)

For printing the size of the table should be "100%", which means the printer fills the whole width of the page, using the margins given by the browser's settings. (Those page margins are what makes it impossible for you to make a printout look exactly the same.)

Possibly working

Make the table narrow enough to be safe it's in the page margins. Then center that table vertically.

Solution for perfect layout

There's no way you're going to achieve that with HTML & CSS, it's just not designed to allow exact layouts!

Create PDFs online and let the users download them. Most browsers are able to render PDFs anyway.

Answer 4

the best way is use from @Media command in stylesheet

for example

@media print{}

use for print layout of all control and

@media screen{}

used for screen layout of control, just think you have a

<div class="wrapper">content</div>

and then in your media you should have

@media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}

and

@media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}

with this @media you can style your layout totaly different for print and screen. you can also use

.SomeDivOrContent{visibility:hidden;display:none;}

to hide ites in print.

let me know was it helpfull or not