Based on a tip from the WebDesign-L mailing list, I have implemented a very cool feature for those of you who print my weblog, which is precisely none of you. But pay attention anyway, because this is cool, and you’ll probably learn something.
As you may or may not know, remember, or believe (”memory believes before knowing remembers, believes longer than recollects, longer than knowing even wonders, knows remembers believes” -William Faulker), each page of my weblog can be printed gracefully, without the need for a separate “print-friendly” page. This is done by specifying a print stylesheet, like this:
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" >
When printing a page, your browser will look for style definitions in /css/print.css that override the normal processing. This means that not only can I can hide a bunch of on-screen junk that doesn’t contribute to the printed version (navigation bar, search box, style switcher drop-down menu), but I can format the text any way I want (different font, smaller margins, even specify page breaks at particular places if I want). I can also make screen-specific visual elements disappear (underlines on links, dotted underlines on acronyms), which brings me to my newest cool feature.
When printing a page from this weblog, the address of each link will appear in parentheses after the link text. (diveintomark print screenshot, 76K) This works in Opera 6 and the most recent Mozilla release, but not Internet Explorer 5 (at least not on Mac OS X, where I can easily test it because you can print to PDF from any application in Mac OS X). So it’s a bit bleeding edge, but if your browser doesn’t support it, it’ll just ignore it and you’ll get the link text without the address or the parentheses, so no harm done.
Here’s how it works. In /css/print.css, I added this definition:
a:after { content: " (" attr(href) ")"; }
This is an example of CSS-generated content, and as I mentioned before, it is bleeding-edge (but harmlessly backward-compatible) CSS. The definition tells your browser that every time it sees an “A” tag (which is a link), put the following content after the end “A” tag:
- a space
- a left parenthesis
- the contents of the “A” tag’s HREF attribute (this is the address the link points to)
- a right parenthesis
Again, have a look at that diveintomark print screenshot and notice the link addresses, not only after the day headline, but within the text as well.
This technique is not limited to print stylesheets, nor is it limited to “A” tags. You could set up an on-screen stylesheet that displayed target links like this, and I extended my print stylesheet to show the full title of acronyms and abbreviations in much the same way. You could even toggle the option in real time with a piece of Javascript, if you wanted.
Well, I was impressed. Learn something new every day on WebDesign-L.
