CSS

URLs in the print-out

June 4, 2003 2:09 AM

Links can be clicked and a new page appears. But information -such as the URL behind a link- is lost when printing a page. A little bit of CSS produces relief:

@media print {
  a[href]:after {
    content: \' [\' attr(href) \']\';
  }
}

The command caters for displaying the URL behind a link on the printed page, while nothing of this is shown on the screen.

With a little bit of CSS3, the future successor of CSS2, the print-out can be specialised a little bit in more detail:

@media print {
  a[href^=\"http://\"]:after, a[href^=\"ftp://\"]:after {
    content: \' [\' attr(href) \']\';
  }
}

The browser must be able to handle CSS2 to use this function. The most recent versions of Mozilla and Opera are capable of that.

Webmasters, write this code down. You do a favour to your visitors! Additionally, I would like to see browsers capable of printing out URLs behind links (or a referenced URL list at the end of a page) as an option in the printing dialogue.

URLs in the print-out

Menu