art with code

2013-01-22

Using CSS to make printed links readable

The problem: When you print your fancy HTML resume, the links don't show their URLs.
The solution: CSS!

Here's a link with a special print stylesheet. If you try to print this page, you'll see something like this: a link.

This magic trick uses a couple of different features in CSS. First of all, it uses CSS media types to apply a different stylesheet to printed documents. Second, it uses the :after selector to inject some content after each link. Finally, it uses the new CSS attr()-function to fill the :after content with the href of the link.

Putting all of the above together, we get a stylesheet that adds the href of a link after it, but only in printed documents. Here's what my stylesheet looks like:

@media print {
  a:after {
    content: "[" attr(href) "]";
    font-size: smaller;
    position: relative;
    top: -0.1em;
    left: 0.25em;
    padding-right: 0.15em;
    display: inline-block;
    color: black;
  }
}


Post a Comment

About Me

My photo

Built art installations, web sites, graphics libraries, web browsers, mobile apps, desktop apps, media player themes, many nutty prototypes, much bad code, much bad art.

Have freelanced for Verizon, Google, Mozilla, Warner Bros, Sony Pictures, Yahoo!, Microsoft, Valve Software, TDK Electronics.

Ex-Chrome Developer Relations.