User Experience Engineering

Hey, is there any rule of thumb/pixels/other
about sizing a webpage to fit conveniently on a printed page?
10Q
posted by  Anonymous : May 18, 2006 3:04 PM permalink  

The deal with Web pages is that CSS allows you to define different
rules for print, screen, and projection media. Since many Web devs pay no attention to print, many CSS-styled pages "fly apart" when printed.

I recently needed to make some pages more printable. About 90% of
the task was to set attributes display:none and visibility:collapse for all the navigational wrapper elements, fixed width elements, and ads, which serve
no purpose in print. Beyond that, I used the page rule to take care of the margins. Here's a snippet:

/* print.css */
@page{
position:relative;
display:block;
size 8.5in 11in portrait;
margin: .5in .75in .5in .75;
width:7in;
orphans:3;
widows:2;
page-break-after:avoid;
}

body {
font:normal 11pt Arial,Verdana, Helvetica, sans-serif;
color:#333;
line-height:13pt;
}
img{border:none;}


td.secondInnerCell,#userHeader,
td.secondInnerCell,#leftColumn, #innerColumn,#pageTabs, #pageControls, #siteNav,
#catTags,#activePages,
#search,#footer,#commentForm,
#siteComments{
visibility:collapse !important;
display:none;
}


#siteContent{
display:block;
width:7in;
page-break-inside:auto;
orphans:3;
widows:2;
border:none;
}
#siteHeader{
position:inline;
text-align:right;
width:7in;
padding: 0 0 9pt 0;
border-bottom:1px SOLID #CCC;
}
posted by  Monte Hayward : May 18, 2006 11:31 PM permalink