Hypertext & Print.css

by Jin, 10-30-08 // 16 comments

I finally got a chance to do some long overdue tweaking on my site tonight, mostly under the hood type of things. I found myself stuck on a usability issue and I need your input. As the title implies, it has to do with printing.

I’ve been meaning to add URL printing in my print.css and I finally did it tonight. Before, my blog printed like this:

no URL printing

Here’s the URL printing code I added tonight:

#content a:link:after, #content a:after, #content a:visited:after {
    content: " » " attr(href) ;
    font-size: 80%;
    color:#EEEEEE;
}

I only limited URL printing within the DIV #content. (btw, I noticed “color” attribute only affects Safari, not Firefox. URL printing is not supported by IE, shocker). Here’s the after screen-shot with URL printing on.

At first I thought it looked good. Then I realized the post I took the screen-shots of is one of my Friday recap posts, which is consisted of mostly of links. In other words, it’s not a true article. So I print previewed a normal article, and here’s how it looks:

URL printing on, but looks bad

As you can see, it doesn’t look pretty when the URLs are long. (no, I’m not going to tinyurl every link in my blog!)

My dilemma is if I should keep URL printing or not. My philosophy on print.css is: when on paper, make it look and read like a magazine or book. This means eliminating the elements that are interactive when on screen, or those that are not relevant to printed content. For example: navigation menus, breadcrumbs, footers, background images etc. I use this rule for my site only since it’s a blog site where it’s heavily content driven. However, there are times when we do need to print out navigation or bread crumbs, so users can revisit the website and find the source of the printout easier. (yes, browsers print the URL of the page source, but sometimes it’s too long for people to re-type it).

When it comes to hypertext, URL printing in CSS is beneficial because the reader can use it for reference. The downside is, as shown in the screen-shot above, makes the reading experience less desirable.

In my opinion, the application of URL printing is situational. For a page that primary resource based, AKA link lists, I think it’s good to print out web addresses. But when contained in paragraphs of an article, it should be turned off. If the user is interested in finding out the source of the links, chances are he/she will go back to the site and click on them.

As of now, I turned URL print off again. I’d like to hear your thoughts on this.

16 comments

also feel free to contact me on twitter or via email
Dmitry 10-30-08

I’d look at it like this: How many times will the reader need to actually check the full URL so they can visit it? Not a lot. How many times will the reader see long URLs attached to link text? 100% of the time. Sure, the value of getting 1 URL when you need it outweighs the problem of seeing an ugly long URL attached to 1 link — but if you look on balance, I think the value of cleaner, more readable text outweighs the comfort of having the link handy for the rare occasions you’ll need it. Plus, you won;’t be cutting off all their options — they can still visit the article page on their computer and grab the link URL (Besides, they’ll need to be on their computer anyway to get to the second link, so I don’t think it’s a big issue). That’s my take on it anyway :)

Teck Hua 10-30-08

Just a suggestion: How about list the full URLs in a footnote for your printed pages, especially those in your main body copy? In this way you can sort of balance aesthetics & readability with (offline) accessibility.

Janko 10-30-08

I doubt that anyone would re-type such a long URL form the paper. Original post URL would be enough – they can visit the page and click on desired URL instead of retyping it.

Teck Hua 10-30-08

I agree it’s cumbersome to type long URLs. Personally I don’t bother about printing URLs in full. Besides, the only thing that’s constant on the web is change. What’s available today may disappear tomorrow. So it depends on the contexts & what’s the purpose of providing full URLs in print.

Actually I think this brings out another issue: ideally URLs should be human-readable and short. It’s out of our control if we don’t own the URLs, other than tinyurl these.

Jin 10-30-08

Thanks for your comments. That’s my sentiment as well.

I think there are cases where URL printing is required. For example, government sites and research based sites where they cite a lot of external resources. From personal experience, where I work attorneys(a lots of them) put everything on paper as a hard-copy. They do this for legal reasons. I can see in this case, it’d be helpful.

But this still doesn’t resolve the readability issue. That’s why I really like Teck’s suggestion. Listing URLs as footnotes is a better choice. But this requires extra custom job for each page that goes beyond CSS.

Bryan Chain 10-30-08

Seems like one of those “omg a feature I should use” moments, but just like some of the other commenters said, no one is going to type the url.

No sense putting on the printout.

As soon as I read this I also thought of adding footnotes, but I guess it comes down to how good you are at programming (though I’d bet there is a plugin that does this already).
This means that you’ll need a link to a printer friendly version and comes with all sorts of other issues. I.e. the fact that the links will appear on the final printed page and not at the bottom of each and changing this is near impossible.

Victor 10-30-08

I personally ignore most URLs in any print media unless it’s a simple URL such as http://www.microsoft.com or http://www.TaskPilot.com.

Printing a long URL takes away from the readability to me of anything I’m trying to understand or enjoy.

[...] Hypertext & Print.css [...]

Mark Aplet 11-02-08

When I read about this technique on ALA I started to include this in my print style sheet. I thought it would be useful to people. Soon after I started launching sites with this method I actually started to get complaints that the page was messed up when printing. Turns out the lack of familiarity with this approach left many people confused or upset. My approach now is to only print url’s for clients that request this feature, or when it is absolutely necessary (rarely) to understand the context of the article.

Jin 11-02-08

@Bryan, Joshua, Victor, Mark

Thank you for the comments. I agree in most cases, this feature isn’t needed.

Right now I’m trying to think of a solution for sites that do need it. Namely the government sites I work on, targeted for attorneys and local agencies. Currently the links are spelled out fully in HTML. It not only they clutter the screen, but also not as friendly to read when printed out. I want to create a footnote type of solution for pages that do need this.

There are couple of ways of doing it. First would be doing it on the server side to generate a block of footnotes that are hidden to the screen(some pages’ content are static and some are dynamic), and have the inline links with names and labeled with a numeric citation. This method would eliminate browser compatibility issue, however it’s quite labor intensive and not as maintenable.

The other method is to do it on the front-end, using Javascript. In the defined DIV that contains the article links, loop through all the A tags with href attributes, and manually construct a HTML string as a print only block. This method is re-usable on every page and very easy to implement and maintain. However, it runs into accessibility issues when people use IE or have JS turned off.

Quatl 11-03-08

” Listing URLs as footnotes is a better choice. But this requires extra custom job for each page that goes beyond CSS.”

That’s what PHP (or what ever boat flotation device you prefer) is for.
Just parse the links in the article out into an array, and generate the footnotes from that.

Quatl 11-03-08

Actually this is an interesting problem, and I need PHP and AJAX practice. If I produce something usable (with either or both methods) before being distracted by the next shiny object I’ll send you the code.

Jin 11-03-08

@Quatl, thanks! Meanwhile I’ll work on a client side version or an asp.net version of time permits.

Mark Aplet 11-03-08

I was actually trying to figure this out using jQuery but never came to a conclusion though. It should be pretty easy (for someone more experienced than I) to pull the links from a divor the entire page and stick them into a content footer. I am sure if you put this idea before the jquery folks they could probably figure it out in no time.