Safe width in pixels for printing web pages?

by

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…

More Related Contents:

  1. How to use HTML to print header and footer on every printed page of a document?
  2. How do I hide an element when printing a web page?
  3. CSS to set A4 paper size
  4. Remove header and footer from window.print()
  5. Google Chrome Printing Page Breaks
  6. How can I force browsers to print background images in CSS?
  7. Browser Support for CSS Page Numbers
  8. CSS Printing: Avoiding cut-in-half DIVs between pages?
  9. how to avoid extra blank page at end while printing?
  10. How to only show certain parts with CSS for Print?
  11. Suggestions for debugging print stylesheets?
  12. Good rules for setting up print css? [closed]
  13. How do I Make Firefox Print a Background-Color Style?
  14. Need to remove href values when printing in Chrome
  15. Print Background colours in Chrome
  16. Print styles: How to ensure image doesn’t span a page break
  17. Canvas is stretched when using CSS but normal with “width” / “height” properties
  18. Override body style for content in an iframe
  19. Vertically align text within a div [duplicate]
  20. How can I align one item right with flexbox?
  21. CSS “and” and “or”
  22. CSS 3d transform doesn’t work if perspective is set in the end of property
  23. How can I make generated content selectable?
  24. Flexible box model – display : flex, box, flexbox? [duplicate]
  25. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  26. Styling the new twitter widget (embedded timeline)
  27. Vertically align Bootstrap badge inside heading
  28. CSS Floating Divs with different height are aligned with space between them
  29. Media Queries – Mobile vs Desktop Browser
  30. Dynamically updating css in Angular 2

Leave a Comment