CSS tip: Use :after pseudo-element to append copyright notices to printed material

Here’s some simple CSS code that’s useful if people frequently print portions of your website. When added to your print stylesheet it will append your site’s copyright notice to the end of any printed page. #content should be replaced with whatever element wraps your content.

#content:after {
margin-top: 40px;
content: "Printed Material Notice: Any and all original material on this website may be freely distributed at will under the Creative Commons Attribution-NonCommercial License, unless otherwise noted."
}

I don’t recommend you append copyright notices unless your content is frequently printed and distributed. eff churns out tons of original, quotable material and I often have visitors email me asking what permission they have to cite and distribute our work.

Check out eff’s print stylesheet to see it in action. In the rest of the stylesheet we strip extraneous material (sidebars, navigation, etc.), change the formatting of blockquotes and anchors so they’re not color-dependent, and print the page’s url after the ‘permalink’ anchor using this snippet.

a.perm:after {
  font-size: 90%;
  content: ": http://www.eff.org" attr(href);
}

Over in print-notie.css we replace our header image with a printer-friendly version using a list-style hack.

#logo img {
  display: none !important
}
 
#logo {
  display: list-item;
  line-height: 70px;
  list-style-image: url(images/print_logo.jpg);
  list-style-position: inside;
  width: 99%
}

This keeps everything kosher for the most part. Here’s a screenshot of a blog post in a browser{.colorbox}, the same post after printing{.colorbox}, and the post after printing without a print stylesheet{.colorbox}. Without a print stylesheet it spans five pages and the only usable content is on page four.

While EFF’s print stylesheet is not perfect, it does a good job prepping web content for printing. The :after pseudo-element, while not fully supported in all browsers, fails gracefully and can add helpful features to alternative media.

It’s feels odd referring to paper as an alternative medium…