Printer-friendly CSS Pages
By using CSS, a web developer can give users a useful and professional way to print-out pages from their website.
By using CSS media selectors, modern browsers can pick-up a different stylesheet for handheld devices, screen readers and print-layouts.
Now we will look at producing a Print CSS file (the CSS could be placed in the head of the page, however, it is good practice to use external CSS files, therefore we will look at external CSS for this article).
In the head of the HTML page, insert the following line to call the print.css file when called for by the browser. For more information on using @import rather than “link rel=” click here:
<style type="text/css" media="print">@import url("http://www.yourdomain.com/print.css");></style>
Analyze your website pages, if you are using images and background images you will likely want these to be hidden when printing a page. Make a list of all the elements that are unnecessary for printing purposes. This can include navigation links, logos, advertisement blocks etc.
Using notepad or another text editor we can produce a print.css file designed to make our site print-friendly. Firstly, we can work out some of the universal CSS, such as making the page background white, the text black and give underline links across the site to make them stand-out on paper.
/*** Wild card allows us to define style attributes for any elements on the page, in this case we are making the page background white, and hiding any background images. ***/
* {
background-color:#fff !important;
background-image:none !important
}
/*** We can define the font to be used by all the text on the page, this allows us to choose fonts that render well for print. ***/
body {
font-family: arial, sans-serif;
font-size:12pt;
color:#000
}
Now we need to define our style attributes for our headings and links. If like myself you use a variety of link styling, you will want to remove this styling and stick with a universal style that looks good for print.
/*** When styling for print define font sizes in points rather than pixels or em's as with the headings below. It is good practice to include a default size within body as shown in the above code. ***/
h1 {
font-size:20pt
}
h2 {
font-size:18pt
}
h3 {
font-size:16pt
}
/*** By including a different colour for visited links, print-outs will show the user which pages they have already visited. This can be changed according to personal preference, however this adheres to common practice.***/
a:link, a:active, a:visited,
a:hover, a.main:link, a.main:active,
a.main:visited, a.main:hover {
text-decoration:underline
}
a:link, a:active, a:hover,
a.main:link, a.main:active,
a.main:hover {
color:#00f
}
a:visited, a.main:visited {
color:purple
}
Now we need to decide which elements to hide from the page when the print.css file is loaded. We have already hidden background images, and defined the page background as white. Now we need to hide any unnecessary navigational div’s, ul’s etc.
/*** Hide the top navigation and footer navigation. Change the names of the classes/IDs to the names you have chosen for your navigational div's. Include other navigational elements that should not be shown. By removing them with display:none rather than display:hidden, they space around the objects is removed making printed pages fill the space correctly.***/
.top-navigation {
display:none
}
.footer-navigation {
display:none
}
Hide unnecessary images as this is simply a waste of ink for users, and they will appreciate not wasting it on colourful logos and images.
.img {
display:none
}
An additional CSS attribute that can be added to the file for better link display follows. Internet Explorer 6 doesn’t support this, however newer versions of FF, Opera and Safari will display the extended URL:
a:link:after, a:visited:after {
content:"("attr(href)")"
}
Using the above CSS, links will look like the following on the printed page:
more info (http://www.anotherdomain.com/details/) rather than simply more info. This will be useful for some purposes, but unfortunately it can look bloated when there are a lot of links in a paragraph. Test before implementing.
UPDATE: The above CSS coding doesn’t make use of CSS shorthand, to keep CSS file sizes to a minimum see a previous post on the site called Squeeze Your CSS Files Into Shape.
