The world of print stylesheets is not exactly bubbling over with #HotDrama or innovation like mobile or responsive design. One thing has always bothered me about print stylesheets, though. URLs.
[This article is for people who appreciate the print stylesheet and is not a guide on how to create one]
URLs and print are in different worlds and there are few instances where they fit together usefully (usually some grotesque abomination of a branding piece). We have all seen the business cards, letterheads, and other pieces of corporate paper with URLs slapped all over them, but today I am talking about the printed web page.
Print stylesheets in general
A quick search reveals little data about printed pages and how many users are interacting with print stylesheets. One issue is that nobody is tracking print events. Print stylesheets are commonly seen as a low priority or not important at all, so tracking them is also of little to no importance.
Web standards sherpa has a great article on print engagement and how to track prints yourself. The article does some testing and, as expected, the number of users who print pages is very small. Even with the low numbers, the article explains how they are just as significant as other major elements of the website, which took much longer, and costed more money to do. The conclusion being that items that seem completely unimportant may have just as much value as other elements, and be easier to do. Basically, you need to prioritize your efforts.
The number of users who are printing a webpage really depends on the type of content on that page. This is partly why there are no numbers out there to compare because a page with a recipe will most likely be printed more frequently than a newsletter subscription form. One type of content that could potentially be printed often is a blog or article.
Blogs and Articles
Articles are amazing. They can be informative and eye-opening. Because of the nature of the web, many articles include links in the content. Links are a great way of citing sources or providing further reading, and HTML makes it incredibly easy to add this element to our writing. When someone prints an article, however, a link can go missing. There is some nifty CSS you can add to your print stylesheet.
a:link:after, a:visited:after {
content:" [" attr(href) "] ";
}
This little piece of CSS will display the URL of the link beside the linked text. It’s nice, but It is a little messy and can really impact the reading experience, especially if there are any super long links.
I was reading a cool little CSS post about counters when I realized this could help me create a better print stylesheet. I used the CSS counter to add a reference number beside each link in the print styles and then used javascript to print out an ordered list of links that appear at the bottom of the article. This will clean up the reading experience but preserve the links for users who have printed the page. This CSS would go in your print stylesheet.
/* reset counter on body */
body {
counter-reset: links;
}
/* add ref numbers to links */
article p a {
counter-increment: links;
}
article p a:after {
content: " [" counter(links) "]";
}
A little javascript will help us find all the links in the article body and print them out as an ordered list, which should match our reference numbers. I am using jQuery as my library for this example. Make sure to hide this list of links on the screen stylesheet but show it in your print stylesheet.
/* List the links */
$("article p a").each(function() {
var $this = $(this);
$("ol.article-links").append("Place an emply <ol class=”article-links”></ol> tag wherever you would like it to sit on the page. Now, this may not affect a large percentage of users, but if your site publishes a lot of articles or other reading material, it could be an easy win.
Update: it seems Smashing Magazine is already doing this on their print stylesheets, and they have a really beautiful print output. Good on you, smashing mag!
