October 10, 2009 at 11:36 am

Some more CSS printing rules

Some more css printing rules:

body {
font-size:12px;
color:#000;
background-color:#fff;
font-family:Arial,Helvetica,sans-serif;
padding:120px 10px 20px;
margin:0;
}
div.vcard {
font-size:11px;
position:absolute;
top:25px;
right:10px;
text-align:right;
width:400px;
}
div#print-logo {
position:absolute;
top:45px;
left:10px;
}

The hidden print logo is not hidden in the print version, and both it and the footer are set to absolute and moved to the top of the document to establish a letterhead-like quality. Notice how the body has a padding-top of 120px, which leaves room for the absolutely positioned letterhead style print logo and hCard data. The result is a well-formatted and easy-to-read printed page that emphasizes the content.

Using similar techniques can save time and effort on the server-side implementation of mixed-media and multiple-device publishing from a CMS or any other tool. CSS support for handhelds gets better ever day, and it will only allow for greater versatility as time goes by, lessening the burden and level of effort required to provide alternative forms of publishing of the same content.

Sorry, comments are closed at this time.

Back to top