Defining your print stylesheet
Ben Logan - Published: 26th Feb 2009 09:15 GMT
Despite the internet being an online medium, there are still occasions when people want to print off information to read in a more convenient location, perhaps the train, or for reading away from their desk.
In this article we explore some simple code changes you can make in order to make sure your end users have a better experience with printed pages.
What makes a good print stylesheet?
A good print stylesheet, first and foremost, hides all the unnecessary elements, such as navigation, search, sidebars and other elements that aren't directly important for the page being printed.
You can take any (x)HTML document and simply style it for print, without having to touch the markup.
There is an exception amongst some users to see everything on the screen when they print a page, but this is not really a reality due to things like background images, which are used extensively in web page design, not printing off from most modern browsers.
How to implement a print stylesheet
We like to use the method of linking to a separate stylesheet and this line of code is added within the <head></head> tags of the (x)HTML document:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
What can we remove?
In the screenshot below we are removing most of the none core elements of the page, so they will be hidden in the print stylesheet.
The following elements will be removed:
- Header, including search and top navigation bar
- Left hand navigation bar
- Main graphic image for the section
- Right hand column containing news, Twitter feeds and testimonials
- Footer information
The following elements will remain for printing:
- Main content area
Screenshot
Setting up the body
One of the first things we usually do is to apply some settings to the <body></body> tags of the (x)HTML document:
/* ----------- Set body properties ----------- */
body{ width: 100%; margin: 0; float: none; background: #fff url(none);color:#000;}
{display:none;}
Code for the stylesheet
The next thing we usually do is to group up all the container elements we don't want to print using display: none; property within the stylesheet.
/* ----------- Remove from print stylesheet ----------- */
#header, #topnav, #pagenav, #rcolwrapfix, .ClientListImage, #breadcrumbs
{display:none;}
Maximising print width
In order to reduce the end user's printer ink and maximise the printing space available its a good idea to make the content container span the full width of the page and remove any margins, or floated properties.
/*----------- Make main container 100% ----------- */
#maincontent{width: 100%; margin: 0; float: none;}
Increase text readibility
In order to increase text contrast it is a good idea to ensure that text in the site is in black so it prints out better than a lighter shade or colour.
/*----------- Change text colour ----------- */
body, h1, h2, h2.dots, h3, h4, p, .date, .month, .day, .monthtxt, .daytxt, #col2 p, .col1c h2, ul.newslists li, .article dt, ul.clist li strong, form fieldset legend, {color:#000;}
Increase Link text readability
One of the last things we usually do is to make sure the link styles we have assigned to the main content window are dark enough to print out and contain an underline to indicate they are a hyperlink.
This will give you a basic print stylesheet and you should apply the same methods to your own classnames and IDs in order to get the best results on your site.
/*----------- Change Link text colour ----------- */
a:link, a:visited { color: #00c; font-weight: bold; text-decoration: underline; }
Need some more information?
If you would like to learn more about how we can help you with Web design & development then please call us or email us below and we would be happy to help out where we can.
We are ready to answer your questions right now, so please contact us by telephone on +44 (0)207 168 7526 or drop us a quick email info@spotlessinteractive.com and we will do our best to help you with any questions you might have.
