SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Threaded View

  1. #1
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    STYLE GUIDE: Printable Hyperlinks

    Every day I happen upon a site that I want to keep a record of. So, of course, my curser goes straight for the print button to print out the page (bookmarks are for sissies). But, that creates a problem: you can't click a link on a printed page. We've all been there.

    Once you've printed a page, you've negated the principal advantage of HTML, but fret not because CSS2 is to the rescue! All you'll need to start is a text editor, a working knowledge of HTML and CSS, and access to a browser that supports CSS generated content (that is a Mozilla based browser or Opera 5+ -- Microsoft doesn't seem to have gotten around to it yet). So lets see the code, shall we?
    Code:
    /* Since we don't want this to affect our onscreen appearances,
    we'll need to use the @media rule */
    @media print {
      /* Let's say we don't want our links to be blue and underlined
      when printed out, because those clues are practically useless
      on a page */
      a {
        color: black;
        text-decoration: none;
      }
      /* But we do want to print out the URL of the reference so that
      the next time the reader is online s/he can find it if s/he is
      interested in the subject, and just for the hell of it we want
      to format it a bit different from the rest of the page to set
      it off a bit */
      a.printMe:after {
        content: " {" attr(href) "}";
        font-size: smaller;
        font-style: italic;
        color: gray;
      }
      /* Now, suppose that we've added a title attribute to some links
      where we put the title or name of the linked reference; the style
      rules from the previous rule (the less specific class declaration)
      will be carried over in to this one, so we don't need to restate
      them */
      a.printMe[title]:after {
        content: " ("  attr(title) " {" attr(href) "})";
      }
    }
    This means that this code, for instance,
    Code:
    ... <a class="printMe" href="http://w3c.org/" title="World Wide Web Consortium">standards
    people</a> ... <a class="printMe" href="http://webstandards.org/">Webstandards.org</a> ...
    will look like this when printed with a standards compliant browser (all others will print out the link as usual),
    ... standards people (World Wide Web Consortium {http://w3c.org/}) ... Webstandards.org {http://webstandards.org/} ...
    ~~What'ca Think?
    Last edited by Ian Glass; Jan 29, 2002 at 08:46.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •