SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  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.

  2. #2
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow... well done, you should write an article for SPF on this as it is incredibly useful!
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah very nice, shame about IE though.

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I might take that into consideration eventually, Jeremy... I'm just warming up ;-)

    I agree TechSited, and one of the best advantages of this is that there aren't any reasons to not use it because it doesn't cause any detrimental effects. It degrades very well from where I've tested it.

    One word of caution I'd add is that long URL might become quite cumbersome, but then they are anyway, usually.

    ~~Ian

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I wondering if you guys want me to make this a pseudo-regular thing around here? I'm thinking of other things I can do, but I was wondering if you have your own suggestions for threads? :-)

    ~~Ian

  6. #6
    SitePoint Member
    Join Date
    Jan 2002
    Location
    USA
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. And I thought that hiding divs during printing -- a la A List Apart -- was cool.

    A "Style Guide" feature would be great, especially if they keep people like me, who consider ourselves as knowledgeable as can be, totally surprised that CSS can do that. It's good for people to see that the language can do more than stupid link effects.

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Ian Glass
    Hey, I wondering if you guys want me to make this a pseudo-regular thing around here? I'm thinking of other things I can do, but I was wondering if you have your own suggestions for threads? :-)

    ~~Ian
    Do it, Ian! Consider yourself an empowered member. Thanks for taking the initiative.

    Sketch
    Aaron Brazell
    Technosailor



  8. #8
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, happy 1000 posts, Ian.

    Aaron
    Aaron Brazell
    Technosailor



  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    BTW, happy 1000 posts, Ian.
    Ha, Thanks, Aaron. I'm busting, absolutely busting. :-D

  10. #10
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woah, that's an amazing tip but somehow I don't like it doesn't support IE

    Wouldn't mind seeing you and your weekly tip, go for it
    Jeroen Mulder

    w: www.jeroenmulder.com


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
  •