Safe width in pixels for printing web pages?

aemkei_28150 0
Viewed 168421

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?

printing css
7 Answers

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...

user_1868500

One solution to the problem that I found was to just set the width in inches. So far I've only tested/confirmed this working in Chrome. It worked well for what I was using it for (to print out an 8.5 x 11 sheet) 

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}
user_29750850

For printing I don't set any width and remove any obstacles which keep your print layout from having a dynamic width. Meaning if you make your browser window smaller and smaller, no content is cut/hidden but the document just gets longer. Like this, you can be sure that the rest will be handled by the printer/pdf-creator.

What about elements with a fixed width such as images or tables?

Images

Options I can think of:

  • scale images down in your print CSS to a width which you can assume will fit in any case, use pt not px (but print will need more points/unit anyways, so this should hardly be a problem)
  • exclude from being printed

Tables

  • remove the fixed width
  • use landscape if you really have tables with loads of information
  • don't use tables for layout purposes
  • exclude from being printed
  • extract content, print it as paragraphs

http://www.intensivstation.ch/en/css/print/

or any other google result for combinations of: CSS, print, media, layout

user_119950

A printer doesn't understand pixels, it understand dots (pt in CSS). The best solution is to write an extra CSS for printing, with all of its measures in dots.

Then, in your HTML code, in head section, put:

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
ARemesal_365990

I doubt there is one... It depends on browser, on printer (physical max dpi) and its driver, on paper size as you point out (and I might want to print on B5 paper too...), on settings (landscape or portrait?), plus you often can change the scale (percentage), etc.
Let the users tweak their settings...

PhiLho_154590
Related