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

Clari

Answer 1

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.