Tech

I’m working on setting up a print stylesheet for the site. I’ve got it about, oh, 98% done — done enough that I could leave it as-is, except that there’s one little thing that’s bothering me that so far, I’m not able to fix. Any and all help would be greatly appreciated.

Because hyperlinks are essentially useless on the printed page, in the print stylesheet, I’m using CSS2 selectors as outlined in this A List Apart article to insert URLs after links in the text. This way, instead of links simply printing as colored and underlined text, the destination address of the link is printed out after the link text.

Here’s the code I’m using to accomplish this:

a:link, a:visited {
    text-decoration: none;
    }

.entry-body a[href]:before,
.entry-more a[href]:before,
.trackback-content a[href]:before,
.comment-content a[href]:before {
    content: " [";
    color: #000;
    text-decoration: none;
    }

.entry-body a[href]:after,
.entry-more a[href]:after,
.trackback-content a[href]:after,
.comment-content a[href]:after {
    content: " " attr(href) "] ";
    color: #000;
    text-decoration: none;
    }

So far, so good, it’s doing exactly what it should. Here’s a sample of what it looks like when printed from a browser that understands CSS2 declarations (that is, pretty much everything except IE):

However, I often insert images into my posts that are linked, either to larger versions as in the above screenshot, or to the Flickr pages for the original images. In that instance, I’d prefer that the target URLs not be inserted, as they are less relevant, and tend to muck up the final printed page in odd ways.

Example number one: the panoramic image that appears at the beginning of the Cal Anderson Park post from earlier today:

Example number two: the Flickr imagebar from the bottom of the same post. The web version shows five thumbnails side-by-side, but once the URLs are appended for the print version…

…only two of the thumbnails can even appear on the page.

Okay, sure, so these things aren’t exactly major disasters, but I’m just anal enough that I’d like to fix them. What I’d like to do, then, is figure out just what CSS code I’d need to use to exclude images from the code shown above.

Of course, I haven’t got a clue how to do this (obviously, or this post wouldn’t even exist). I’ve been poking at it all morning, and I’m stuck. Any ideas?

Anyone?

Bueller?

---

NOTE: Possible Safari Bug? In the original A List Apart article, the example code used a combination of a:link:after and a:visited:after to ensure that the links were inserted after all the links — if the code was only attached to a:link:after, then any links that the user had visited would not get the link appended when the page was printed.

While I was working on this, I started with that code. However, I was noticing an odd bug that was only appearing in Safari (at least, it wasn’t appearing in Firefox or Opera, the other browsers I have available to test with) — Safari would pick one URL of the URLs on that page and insert it after every link. In other words, if one link on the page pointed to www.example.com, then no matter how many other links were on the page, they would all display as www.example.com.

I wrote that off as something to worry about later, and kept fiddling around trying to get my images to do what I wanted. In the process, I skimmed over a more recent ALA article on print stylesheets and noticed that Eric Meyer had presented slightly different code: instead of combining a:link:after and a:visited:after, he simply wrote a[href]:after, and that took care of both instances. I swapped out my old code for the new, more concise version, and not only did it work as it should…but the repeating URL bug disappeared. Now, when printing from Safari, all the correct links print out just as they should.

Weird…but good to know.