When printing my web page (even as PDF), I experience numerous issues:
- Image sizes shrink
- "clear: both" does not work so floating continues when it should not
- background colors disappear
- In some cases floating just doesn't work
I think the first step is determining the proper width to make a web page so it is printable. Does anyone know the answer to this question and have general insight on how to solve the above issues?
This question was answered on SO: http://stackoverflow.com/questions/320357/safe-width-in-pixel-for-printing-web-pages
Additionally, I would avoid background colours in most cases for pages to be print friendly - you shouldn't force people to use up their color ink if they just want to print off a confirmation or something, and it would probably obscure the content if printed to b&w
in my print stylesheets i usually set the site's width to 7 inches.
the appearance of backgrounds (images and colors) are usually an option left to the user. so it's best to add all necessary styling to make sure your site is still readable when printed with AND without backgrounds.
floating and clearing issues are code-specific and cannot be addressed in a general manner. except to say that if you are using a lot of clearing divs, you might be floating wrong.