Safe width in pixels for printing web pages?

Question

What is the safe width in pixels to print a web page?

My page includes large images and I want to make sure they will not be cut of when printed.

I know about different browser margins and US Letter / DIN A4 paper sizes. So we got standard letter sized and some default DPI values. But can I convert these into pixel values to specify in the image's width attribute?

Answer 1

As for a true “universal answer”, I can’t provide one. I can, however, provide a simple and definitive answer for some particulars...

670 PIXELS

At least this seems to be a safe answer for Microsoft products. I read many suggestions, including 675, but after testing this myself 670 is what I came up with up.

All the DPI, margin issues, hardware differences aside, this answer is based on the fact that if I use print preview in IE9 (with standard margins) – and SET THE PRINT SIZE TO 100% rather than the default of “shrink to fit”, everything fits on the page without getting cut off at this width.

If I send an HTML email to myself and receive it with Windows Live Mail 2011 (what Outlook Express became) and I print the page at 670 width – again everything fits. This holds true if I send it to an actual hard copy or a an MS XPS file (virtual printout).

Before I experimented, I was using a arbitrary width of 700. In all the scenarios mentioned above part of the page was getting cut off. When I reduced to 670, everything fit perfectly.

As for how I set the width – I just used a primitive “wrapper” html table and defined it’s width to be 670.

If you can dictate the end user’s software, such matters can be straight forward. If you cannot (as is usually the case of course) you can test for particulars like which browsers they are using, etc. and hardcode the solutions for the important ones. Between IE and FF, you will cover literally about 90% of web users. Put in some other code for “everyone else” which generally seems to work and call it a day...

Answer 2

It's not as straightforward as looks. I just run into a similar question, and here is what I got: First, a little background on wikipedia.

Next, in CSS, for paper, they have pt, which is point, or 1/72 inch. So if you want to have the same size of image as on the monitor, first you have to know the DPI/PPI of your monitor (usually 96, as mentioned on the wikipedia article), then convert it to inches, then convert it to points (divide by 72).

But then again, the browsers have all sorts of problems with printable content, for example, if you try to use float css tags, the Gecko-based browsers will cut your images mid page, even if you use page-break-inside: avoid; on your images (see here, in the Mozilla bug tracking system).

There is (much) more about printing from a browser in this article on A List Apart.

Furthermore, you have to deal width "Shrink to Fit" in the print preview, and the various paper sizes and orientations.

So either you just figure out a good image size in inches, I mean points, (7.1" * 72 = 511.2 so width: 511pt; would work for the letter sized paper) regardless of the pixel sizes, or go width percentage widths, and base your image widths on the paper size.

Good luck...