Print Stylesheet
Print stylesheets are often overlooked by designers, while only a small minority will print out a web page, some will argue that that is enough reason not to create one. My opinion is simply they usually take a few minutes to set up and will add an extra layer of usability to a site as well as continuing on the sites brand and identity, so if you have a text heavy site or blog then why not just add one and show you care about a small minority of your users just as much as the majority
How to set up a print stylesheet
A print stylesheet works pretty much the same way as a normal screen stylesheet. The major difference being that it will only be used when the page is being printed.
To include a print stylesheet onto a page use something like this in the head of your html:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can call the css file anything that you want, the important part is that you tell it that the media the stylesheet is for is print (media=”print”)
An important point to make about a print stylesheet is that you don’t need to style all of your elements, just a few its mainly about removing all the unwanted and useless elements of your site that don’t actually need to be printed.
Styling a Print Stylesheet
There are no standards or rules when it comes to creating a stylesheet for print, but there are some common-sense things to take into account.
Default styling
Browsers have their own default styling and normally it is pretty good when it comes to displaying things like spacing and indentations, so a good rule to follow is to test how the page prints before doing a lot of custom styling.
Keep the sites identity
Keeping a sense of the sites identity when it is printed is a nice touch and helps those reading the document remember where it came from.
Having the logo on the document is a great way to keep the identity, sometimes it is worth creating a print version of the logo, especially if it is a light coloured logo that might not print well.
Resets backgrounds
While most browsers will remove background colours and images that are applied through css some don’t. So to play it safe reset the background colour to white and remove any background images.
Example of use:
body {
background-image:none;
background: white;
}
Display:none is your friend
Remove items that aren’t needed or are quite useless when printed. Things like navigational menus, side bars, comment boxes, search boxes, and adverts they are all useful on screen but just a waste of ink when printed.
Example of use:
#nav, #sidebar, #search, .printnone {
display:none;
}
Text colour
Because a lot of browsers remove any background colours and images that are applied through css a big problem can be that text that is a light colour won’t be easy to read on a white background. So to play it safe set all your text colours to something that will easily be read on white paper.
Styling text
Some will say that when creating a print stylesheet to use a serif font as research has shown that they are a bit easier to read, however if you have a site that uses only san-serif fonts it might be better to use an easy to read san-serif to keep consistency and also not confuse those who expect the site to print out in the same font that is used on site.
pt not px or em or %
If you feel the need to resize the default text sizes then remember to set them using pt instead or px, em, % ect.
Example of use:
p {
font-size:10pt
}
Content area
While most browsers will do this automatically it is always best to be on the safe side and expand the content areas so that they span across the majority of paper.
Example of use:
#content {
width: 100%;
}
Remove columns
While columns can look great on a website they don’t really work that well printed, especially if a narrow column has a lot of text in it, as it will mean that when printed something that should only take up half a page takes up 3 or 4.
Reset floats, positioning and overflows
Some browsers have issues with floats, position:absolute and overflow:hidden and will end up chopping off content. So to avoid this it is worth setting floats to none, positioning to static and overflows to visible
Example of use:
#content {
overflow:visible;
float:none;
position:static;
}
Display URLs
On screen when a link is displayed a user clicks on it and goes to the referring page, in print a reader could press where the link is but nothing will happen, as the paper isn’t magically going to display the referenced site. A useful bit of css that can be added into the print stylesheet will include the links url as well, although it should be noted that this doesn’t work in IE 7 or below:
a:after { content: " (" attr(href) ") "; }
which will print like this
This is a link (http://webdesignpond.co.uk/a_link_here)
Footnotes
While the above way or displaying urls is useful, if the printed document has a lot of urls it can look messy, and also if the majority of users to the site use IE it is a bit useless anyway. So another option is to create footnotes at the bottom of the printed document that displays all the referenced urls, a very good way of doing this is shown on A List Apart – Improving Link Display for Print. As well as it placing reference links as footnotes it also adds the reference number next to the link within the document.
Page breaks
It is also possible within a print stylesheet to tell it to print something on another page, this could be useful for large article where creating manageable sections will help the user, or for separating things that some might want to print while others won’t. For example this blog uses a page break to separate the content from the comments so that the user can decide if they want to print the comments or not.
Example of use
#comments {page-break-before: always;}
!important
While the !important declaration gets some bad publicity it can still useful within a print document. While it shouldn’t be used for changing font colours, sizes or their styles as it could interfere with the users own print settings, it could be used to make sure that other stylesheets don’t take priority with things such as displaying elements you want hidden or stopping making them float when you have told them not to.
Other Resources:
Five Simple Steps to Typesetting on the web: Printing the web
css-discuss Print Stylesheets
CSS Design: Going to Print
twitter
forrst
google+
Rss
3
Comments
I have to do a print style for a clients site and this tutorial really helped me in understanding the basics. Thanks for writing easy to understand tutorials.
nice article this blog is been really helpful for me in learning webdesign
nice article, keep the posts coming
One Trackback
[...] Print Stylesheet | Web Design Pond [...]