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

User · Answer

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 · Answer

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 · Answer

A solution to ensure that images don t get cut when printed in a Web page is to have the following CSS rule    media print      img        max-width 100   important

User · Answer

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

User · Answer

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 · Answer

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 · Answer

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

User · Answer

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

User · Answer

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 · Answer

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    lt link href  style css  rel  stylesheet  type  text css  media  screen  gt   lt link href  style print css  rel  stylesheet  type  text css  media  print  gt

User · Answer

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

User · Answer

A solution to ensure that images don t get cut when printed in a Web page is to have the following CSS rule    media print      img        max-width 100   important

User · Answer

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

User · Answer

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

User · Answer

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 · Answer

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    lt link href  style css  rel  stylesheet  type  text css  media  screen  gt   lt link href  style print css  rel  stylesheet  type  text css  media  print  gt

User · Answer

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 · Answer

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    lt link href  style css  rel  stylesheet  type  text css  media  screen  gt   lt link href  style print css  rel  stylesheet  type  text css  media  print  gt

User · Answer

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 · Answer

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    lt link href  style css  rel  stylesheet  type  text css  media  screen  gt   lt link href  style print css  rel  stylesheet  type  text css  media  print  gt

[css] Safe width in pixels for printing web pages?

Examples related to css

Examples related to printing