Link Address Visibility

Discussion in 'HTML' started by Roy Schestowitz, Jul 30, 2005.

  1. Is there a CSS-driven way of diplaying the link address near links (without
    the use of JavaScript)? Is there a CSS hack of some sort? I would like to
    embed full URL's near the links in a printable version of a page (and in a
    printed version links cannot be followed).

    Thanks very much in advance even if the answer is no... I am willing to use
    JS if there is no alternative.

    Roy
     
    Roy Schestowitz, Jul 30, 2005
    #1
    1. Advertising

  2. Roy Schestowitz

    Els Guest

    Roy Schestowitz wrote:

    > Is there a CSS-driven way of diplaying the link address near links (without
    > the use of JavaScript)? Is there a CSS hack of some sort? I would like to
    > embed full URL's near the links in a printable version of a page (and in a
    > printed version links cannot be followed).
    >
    > Thanks very much in advance even if the answer is no... I am willing to use
    > JS if there is no alternative.


    Not sure if this is what you're after, but I'd just write the html
    like this:
    <a href="linkaddress">linktext<span> linkaddress</span></a>
    and in the CSS for screen:
    a span{display:none;}
    in CSS for print:
    a span{display:inline;}


    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 30, 2005
    #2
    1. Advertising

  3. Els wrote:

    > Roy Schestowitz wrote:
    >
    >> Is there a CSS-driven way of diplaying the link address near links
    >> (without the use of JavaScript)? Is there a CSS hack of some sort? I
    >> would like to embed full URL's near the links in a printable version of a
    >> page (and in a printed version links cannot be followed).
    >>
    >> Thanks very much in advance even if the answer is no... I am willing to
    >> use JS if there is no alternative.

    >
    > Not sure if this is what you're after, but I'd just write the html
    > like this:
    > <a href="linkaddress">linktext<span> linkaddress</span></a>
    > and in the CSS for screen:
    > a span{display:none;}
    > in CSS for print:
    > a span{display:inline;}


    That is an excellent idea, but it involves re-writing the content (about 400
    pages in this case) to include <span> elements. I once wrote a
    global/recursive search-and-replace tool for Linux, but it operates on
    files, not on a database, which is where all the data is located. If I got
    an sqldump, I can't think of a simple rule to mass-replace e.g.

    <a href="TOKEN">link name</a>

    <a href="TOKEN">link name<span> TOKEN</span></a>

    I know it is possible, but it is not trivial to implement.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 30, 2005
    #3
  4. Roy Schestowitz

    Spartanicus Guest

    Roy Schestowitz <> wrote:

    >Is there a CSS-driven way of diplaying the link address near links (without
    >the use of JavaScript)? Is there a CSS hack of some sort?


    Proper CSS, no "hack":

    @media print{
    a:after{content: " <"attr(href)">"}
    }

    Does not work in IE due to poor CSS support.

    >I would like to
    >embed full URL's near the links in a printable version of a page (and in a
    >printed version links cannot be followed).


    I'd rethink that strategy, it tends to make a mess of printed pages and
    the functionality offered is most questionable.

    --
    Spartanicus
     
    Spartanicus, Jul 30, 2005
    #4
  5. Roy Schestowitz

    Els Guest

    Roy Schestowitz wrote:

    > Els wrote:
    >
    >> Roy Schestowitz wrote:
    >>
    >>> Is there a CSS-driven way of diplaying the link address near links
    >>> (without the use of JavaScript)? Is there a CSS hack of some sort? I
    >>> would like to embed full URL's near the links in a printable version of a
    >>> page (and in a printed version links cannot be followed).
    >>>
    >>> Thanks very much in advance even if the answer is no... I am willing to
    >>> use JS if there is no alternative.

    >>
    >> Not sure if this is what you're after, but I'd just write the html
    >> like this:
    >> <a href="linkaddress">linktext<span> linkaddress</span></a>
    >> and in the CSS for screen:
    >> a span{display:none;}
    >> in CSS for print:
    >> a span{display:inline;}

    >
    > That is an excellent idea, but it involves re-writing the content (about 400
    > pages in this case) to include <span> elements. I once wrote a
    > global/recursive search-and-replace tool for Linux, but it operates on
    > files, not on a database, which is where all the data is located. If I got
    > an sqldump, I can't think of a simple rule to mass-replace e.g.
    >
    > <a href="TOKEN">link name</a>
    >
    > <a href="TOKEN">link name<span> TOKEN</span></a>
    >
    > I know it is possible, but it is not trivial to implement.


    I think it's pretty trivial for anyone fluent in regular expressions.
    i.e. not me ;-)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 30, 2005
    #5
  6. Spartanicus wrote:

    > Roy Schestowitz <> wrote:
    >
    >>Is there a CSS-driven way of diplaying the link address near links
    >>(without the use of JavaScript)? Is there a CSS hack of some sort?

    >
    > Proper CSS, no "hack":
    >
    > @media print{
    > a:after{content: " <"attr(href)">"}
    > }



    That's excellent!


    > Does not work in IE due to poor CSS support.



    The most common browser on my site is Mozilla Firefox (based on ~35k
    visits/month). I already use some :before and :after elements. If they get
    neglected, nothing is lost


    >>I would like to
    >>embed full URL's near the links in a printable version of a page (and in a
    >>printed version links cannot be followed).

    >
    > I'd rethink that strategy, it tends to make a mess of printed pages and
    > the functionality offered is most questionable.



    When I think about it, long links (of which I tend to have some) will cause
    problems indeed, much as they do in UseNet. I think I'll go ahead anyway...
    maybe down-scaling link text once it becomes an issue...

    Many thanks,

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 30, 2005
    #6
  7. Re: You were right, I was wrong

    Roy Schestowitz wrote:

    > Spartanicus wrote:
    >
    >> Roy Schestowitz <> wrote:
    >>
    >>>Is there a CSS-driven way of diplaying the link address near links
    >>>(without the use of JavaScript)? Is there a CSS hack of some sort?

    >>
    >> Proper CSS, no "hack":
    >>
    >> @media print{
    >> a:after{content: " <"attr(href)">"}
    >> }

    >
    >
    > That's excellent!
    >
    >
    >> Does not work in IE due to poor CSS support.

    >
    >
    > The most common browser on my site is Mozilla Firefox (based on ~35k
    > visits/month). I already use some :before and :after elements. If they get
    > neglected, nothing is lost
    >
    >
    >>>I would like to
    >>>embed full URL's near the links in a printable version of a page (and in
    >>>a printed version links cannot be followed).

    >>
    >> I'd rethink that strategy, it tends to make a mess of printed pages and
    >> the functionality offered is most questionable.

    >
    >
    > When I think about it, long links (of which I tend to have some) will
    > cause problems indeed, much as they do in UseNet. I think I'll go ahead
    > anyway... maybe down-scaling link text once it becomes an issue...



    You were actually right. It affect more than you want it to...

    http://www.schestowitz.com/Weblog/index-printer.php?p=384

    All <a id/name> get an empty address bound to them. Titles become obscure
    and the whole structure gets messed up. It was worth trying though...
     
    Roy Schestowitz, Jul 30, 2005
    #7
  8. Roy Schestowitz

    Spartanicus Guest

    Re: You were right, I was wrong

    Roy Schestowitz <> wrote:

    >>> @media print{
    >>> a:after{content: " <"attr(href)">"}
    >>> }

    >
    >All <a id/name> get an empty address bound to them.


    That you could fix:

    @media print{
    a[href]:after{content: " <"attr(href)">"}
    }

    >Titles become obscure
    >and the whole structure gets messed up. It was worth trying though...


    I've tried it myself, as you noted the length of the urls was a problem,
    "in-paragraph" links really mess up the readability of the content, but
    the main reason why I ditched it was that on reflection it didn't
    provide any real function for users. People don't expect an ability to
    retrieve links from printed pages, and few would be willing to type in
    the urls manually anyway.

    --
    Spartanicus
     
    Spartanicus, Jul 30, 2005
    #8
  9. Re: Print Preview and "After"

    Spartanicus wrote:

    > Roy Schestowitz <> wrote:
    >
    >>>> @media print{
    >>>> a:after{content: " <"attr(href)">"}
    >>>> }

    >>
    >>All <a id/name> get an empty address bound to them.

    >
    > That you could fix:
    >
    > @media print{
    > a[href]:after{content: " <"attr(href)">"}
    > }



    Thanks, I'll do that.


    >>Titles become obscure
    >>and the whole structure gets messed up. It was worth trying though...

    >
    > I've tried it myself, as you noted the length of the urls was a problem,
    > "in-paragraph" links really mess up the readability of the content, but
    > the main reason why I ditched it was that on reflection it didn't
    > provide any real function for users. People don't expect an ability to
    > retrieve links from printed pages, and few would be willing to type in
    > the urls manually anyway.


    If you use Firefox (in which case the "after" gets picked up) or another
    proper browser, go to Print Preview and see why I'm worried and having
    second thoughts. I don't expect people to print pages though; it is a
    "proof of concept" rather, which I hope the WordPress community will pick
    up on.

    Cheers,

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 30, 2005
    #9
  10. Re: Print Preview and "After"

    Roy Schestowitz wrote:

    > If you use Firefox (in which case the "after" gets picked up) or another
    > proper browser, go to Print Preview and see why I'm worried and having
    > second thoughts. I don't expect people to print pages though; it is a
    > "proof of concept" rather, which I hope the WordPress community will pick
    > up on.


    Surely Els suggestion fits best for a proof of concept then. I think you did
    acknowledge that as an excellent idea but the fact that 400+ pages would
    need updating, but if it's the right way then that's what you need to do,
    even if it is time consuming.

    --
    Robert
    http://brightonfixedodds.net
     
    Robert Frost-Bridges, Jul 30, 2005
    #10
  11. Re: Duplicate URL's

    Robert Frost-Bridges wrote:

    > Roy Schestowitz wrote:
    >
    >> If you use Firefox (in which case the "after" gets picked up) or another
    >> proper browser, go to Print Preview and see why I'm worried and having
    >> second thoughts. I don't expect people to print pages though; it is a
    >> "proof of concept" rather, which I hope the WordPress community will pick
    >> up on.

    >
    > Surely Els suggestion fits best for a proof of concept then. I think you
    > did acknowledge that as an excellent idea but the fact that 400+ pages
    > would need updating, but if it's the right way then that's what you need
    > to do, even if it is time consuming.


    There are pitfalls to both approaches, I guess. With Els' solution, you
    unnecessarily inflate the amount of code (no complaints, Els) and duplicate
    elements. Changing one URL may then involve changing another.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 31, 2005
    #11
  12. Roy Schestowitz

    Toby Inkster Guest

    Re: You were right, I was wrong

    Spartanicus wrote:

    > @media print{
    > a[href]:after{content: " <"attr(href)">"}
    > }


    This is place where you get an interesting difference between Presto
    (Opera) and Gecko (Netscape, Firefox, Camino, etc); when the link is a
    relative URL, Gecko will only print out the relative URL, but Opera will
    print out the absolute URL.

    In my opinion, Gecko's behaviour is more "correct", but Opera's is
    certainly more useful.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Jul 31, 2005
    #12
  13. Roy Schestowitz

    Toby Inkster Guest

    Roy Schestowitz wrote:

    > I once wrote a global/recursive search-and-replace tool for Linux, but
    > it operates on files, not on a database, which is where all the data is
    > located.


    So what? -- I can't imagine it would take more than a few lines of code to
    get it to operate of a database instead!

    As an aside, why did you write that tool? Hadn't you read "man sed"?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Jul 31, 2005
    #13
  14. Re: Sed for Search and Replace

    Toby Inkster wrote:

    > Roy Schestowitz wrote:
    >
    >> I once wrote a global/recursive search-and-replace tool for Linux, but
    >> it operates on files, not on a database, which is where all the data is
    >> located.



    I re-thought that. Over the long run, it is better the re-write Texturize (
    http://photomatt.net/tools/texturize ) of WordPress to generate these span
    elements on-the-fly, somewhat like a filter. This way the user does not
    need to do so time and time again.


    > So what? -- I can't imagine it would take more than a few lines of code to
    > get it to operate of a database instead!
    >
    > As an aside, why did you write that tool? Hadn't you read "man sed"?



    It uses sed. You had very much to do with the composition of this little
    tool: http://www.schestowitz.com/Software/Search_and_Replace/

    I even acknowledge you at the bottom. I have extended these 'scripts' to
    change pages quite radically, en masse. The longest such script is around
    30 lines long.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Aug 1, 2005
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. avnrao
    Replies:
    1
    Views:
    7,232
    avnrao
    May 4, 2004
  2. Patrice
    Replies:
    0
    Views:
    890
    Patrice
    May 4, 2004
  3. Raterus
    Replies:
    0
    Views:
    439
    Raterus
    Jun 2, 2004
  4. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    861
    Kevin Spencer
    May 17, 2005
  5. =?Utf-8?B?Ym9iYnk=?=

    Visibility of link button

    =?Utf-8?B?Ym9iYnk=?=, Sep 15, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    359
Loading...

Share This Page