Link Address Visibility

[Roy Schestowitz]

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

 

[Els]

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;}

 

[Roy Schestowitz]

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

 

[Spartanicus]

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.

 

[Els]

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 ;-)

 

[Roy Schestowitz]

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'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 Schestowitz]

That's excellent!




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




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...

 

[Spartanicus]

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

That you could fix:

@media print{

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.

 

[Roy Schestowitz]

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.

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

 

[Robert Frost-Bridges]

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.

 

[Roy Schestowitz]

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

 

[Toby Inkster]

@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 Inkster]

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"?

 

[Roy Schestowitz]

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