Web Design in a Nutshell, 3rd Edition

Handle your hypertext

An obvious difference between the web and print versions of your document is that hypertext links lose their usefulness in print. Whether you make linked text stand out more in the print version (for example, by making it bold and/or a different color than the surrounding text) or remove all styles so links blend in completely depends on your preferences and the requirements of the content. Whatever you do, make sure that it is a thoughtful and conscious decision.

You may also want to take advantage of the generated text capabilities of CSS 2 to write out the URL for each link. That way, if visitors want to follow up on links from a printout later, they’ll know where to go.

URLs can be included by using the :after or :before selectors and the content property that grabs the value of the href attribute in each a element. In this example, the URLs for links and visited links in a section labeled maincontent will be written out in parentheses after the linked text.

#maincontent a:link:after, #maincontent a:visited:after {
   content: " (" attr(href) ") ";
   }

Generated content is discussed in more detail in Chapter 23, including examples and screenshots of URLs written out after links in this manner.

Unfortunately, generated text is not supported by Internet Explorer, so this won’t work for everyone. The good news is, it will be ignored by browsers that don’t support it, so it won’t do any harm to better serve a portion of your audience.

Tip

If you have a document with lots ...