Printable HTML Pages

The secret number is: 660px

And you thought I was going to say it was 42.

660 pixels is the page width for printing html pages without clipping from most browsers (actually, I got 672px before I saw clipping). Of course, your millage may vary. It appears that IE defaults to 0.75 inch borders all the way around. Firefox has 0.5 inch borders, and Opera says it has 0.5 inch borders, but looks like it has 0.25 inch borders. Anyway, when your browser magically converts from the screen context to the printer context, it seems to map that 660 to fit inside of the 0.75 inch borders that IE defaults to. Which works nicely for the other browsers as well, so that is the number I am going to start using.

Now, if you provide one css style sheet for printing and one for screen, you can eliminate the menus, nav bars, ads, and other non-critical elements of the page so that only the main content div is printed. Then, you can make your content div be 660 pixels fixed width.

That means you can still use the artistically pleasing “rule of thirds” for your theme’s layout and still have 1000px pages with one third devoted to a nav bar that doesn’t show up in the printed page. in order to better display on a monitor.

I’m not sure what the effect looks like on a mobile phone. You could use CSS to re-arrange the page for mobile devices so that the 660px was the entire width, and the nav bar / side section was available somewhere else.

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.


No comments yet.

Leave a comment