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;
  }
}


Things that distract me while working


  1. The internet. Social media, news, Wikipedia, socnets. Especially when they're also on your phone, so you don't get a break.
  2. "Do this unrelated thing"-disruptions. Whether initiated by annoyware ("OS X Updates Available"), broken workflow (most of programming) or by other people. Creates a disruption, which usually leads to wasting time on the internet.
  3. Lack of confidence in the implementation of what you're working on. Those gnawing concerns about unit tests measuring the right thing, the architecture not causing problems later on, whether the layout works, whether your tags/parens/brackets/semicolons are correct and balanced. Lack of visual feedback of the state of the end result (when doing HTML/CSS/LaTeX/art by coding).
  4. Working in a window with a bunch of unrelated windows scattered around it. See: Mac OS X. Total distractionville.
  5. Waiting for response. SSDs and GPUs help where they can.
  6. Distractions not getting disrupted. If you get stuck reading through the entire Wikipedia, you're going to need a disruption to get you back on the productive track.
  7. Weird moods of futility.
  8. The urge to share things on the socnets. Doesn't really help that my previous jobs were about building one and using several.
  9. Lack of exercise. Leads to a lack of energy and makes it easier to get distracted.
  10. Caffeine. Sugar. For some reason, a glass of wine may actually help when writing.
  11. Watching the beautiful streaming mist from a Muji diffuser

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.