Website Design Forum - Style of external links

Author

Style of external links

John Dunlop

2007-05-05, 6:18 pm

How you would show that a link leads away from a site? Maybe
you would just say so, but I'm after something more subtle, some
stylesheet rule I can apply to external links.

--
Jock

Adrienne Boswell

2007-05-05, 6:18 pm

Gazing into my crystal ball I observed John Dunlop <john@dunlop.name>
writing in news:1178388784.288800.157100@y5g2000hsa.googlegroups.com:

> How you would show that a link leads away from a site? Maybe
> you would just say so, but I'm after something more subtle, some
> stylesheet rule I can apply to external links.
>
> --
> Jock
>
>

<a class="external" href="http://www.example.com" title="External Site">
Some External Site</a>

..external {
background-image: url(link-external.png);
background-position: top right;
padding-right:11px;
background-repeat: no-repeat;
}
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Brendan Gillatt

2007-05-05, 10:18 pm

On 5 May 2007 11:13:04 -0700, John Dunlop <john@dunlop.name> wrote:

>How you would show that a link leads away from a site? Maybe
>you would just say so, but I'm after something more subtle, some
>stylesheet rule I can apply to external links.

Something similar to the Wikipedia's idea of a very un-saturated
off-site icon is a good plan.

If IE6 supported it, you could probably use CSS to generate a Unicode
arrow proceeding each link; I'm not sure of the specifics, though.

Beauregard T. Shagnasty

2007-05-05, 10:18 pm

Brendan Gillatt wrote:

> John Dunlop <john@dunlop.name> wrote:
>
>
> Something similar to the Wikipedia's idea of a very un-saturated
> off-site icon is a good plan.
>
> If IE6 supported it, you could probably use CSS to generate a Unicode
> arrow proceeding each link; I'm not sure of the specifics, though.

The Wikipedia CSS way doesn't work in IE (6).

I use this, which seems to work.

<a href="http://example.com/">http://example.com/ <img src="offsite.gif"
alt="↗" title="External Site: Right-Click and Open in New Window"
width="14" height="11"></a> ...

The 'offsite.gif' is an image of a north-east facing arrow.
http://k75s.home.att.net/show/offsite.gif

You could also swipe that cute wikipedia arrow. <g>

--
-bts
-Motorcycles defy gravity; cars just suck

John Dunlop

2007-05-06, 6:20 pm

Adrienne Boswell:

> <a class="external" href="http://www.example.com" title="External Site">
> Some External Site</a>

Well, for the technical means of _identifying_ external links, I had
been using class="external", but I plan to use CSS3's
A[href^="http:"].
I know, this only matches HTTP URLs and not all absolute URLs are
necessarily external, but this avoids extra markup.

> .external {
> background-image: url(link-external.png);
> background-position: top right;
> padding-right:11px;
> background-repeat: no-repeat;}

Thanks, this was the sort of thing I was after. What would the image
look like?

--
Jock

Dr J R Stockton

2007-05-06, 6:20 pm

In comp.infosystems.www.authoring.site-design message <1178388784.
288800.157100@y5g2000hsa.googlegroups.com>, Sat, 5 May 2007
11:13:04, John Dunlop <john@dunlop.name> posted:
>How you would show that a link leads away from a site? Maybe
>you would just say so, but I'm after something more subtle, some
>stylesheet rule I can apply to external links.

In <URL:http://www.merlyn.demon.co.uk/uksumtim.htm> I do it with
titles: # for other site, + for other page, . for same page - e.g.
<a href="datelinx.htm" title="+">...</a>.

When the mouse-pointer reaches a link, it turns into a hand. If
it is a titled link, a cuff soon appears with a cuff-link showing
the potency of the link. The cut of the shirt is browser-
dependent.

It seems possible to scan a document onLoad with javascript and
modify the style of external links or add a title :

for (j in document.links) { X = document.links[j]
// if (X.protocol == "http:") X.style.background = "white" }
if (X.protocol == "http:") X.title = "#" }

On my Home Page, external links are bold and in-page ones italic.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

John Dunlop

2007-05-10, 6:18 am

John Dunlop:

> How you would show that a link leads away from a site? Maybe
> you would just say so, but I'm after something more subtle, some
> stylesheet rule I can apply to external links.

Thanks for all the comments.

I like the idea of a small arrow after the link generated by
CSS. By what people here have said, using an arrow seems to
be an established practice. Generating it in CSS would at
most mean adding class="external" to the markup, and at best
avoid any extra markup. I would prefer a character instead
of an image because it would resize along with the rest of
the text.

I plan to use the following rule (once CSS3 gets a move on):

A[href^="http:"]::after{
content: " > "
}

and maybe a similar rule for mailto:.

What character would be best, I have not yet decided.

--
Jock

Jukka K. Korpela

2007-05-10, 6:20 pm

Scripsit John Dunlop:

> I plan to use the following rule (once CSS3 gets a move on):

In terms of WWW authoring, I think you should allow eight years or so for
delivery (of specifications and conforming browsers). :-(

> A[href^="http:"]::after{
> content: " > "
> }
>
> and maybe a similar rule for mailto:.
>
> What character would be best, I have not yet decided.

The greater than sign characters doesn't sound great. Some arrow might be
better, but any arrow might be interpreted as pointing to a particular
direction (e.g., as indicating a "forward" link).

Some months ago, there was a discussion in the public Unicode list about
adding an "external link" symbol to Unicode. Its shape was meant to resemble
the icon that Wikipedia uses for external links (an arrow that points away
from the center of a box). People were sceptic (and I surely was), but this
discussion itself suggests that existing Unicode repertoire doesn't really
contain a suitable character.

As a more realistic approach, you might use something like

<span class="extlink">(external link)</span>

together with CSS code that replaces the text by an image. (How? Some
background image technique together with setting font size to 1px? Sounds
tricky indeed.)

An icon of the globe (the Earth) might be descriptive, but it's very
difficult to make it work in the normal sizes of letters.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Brendan Gillatt

2007-05-13, 6:18 pm

On 10 May 2007 01:28:22 -0700, John Dunlop <john@dunlop.name> wrote:

>and maybe a similar rule for mailto:.
>
>What character would be best, I have not yet decided.

#x2709 is pretty good - an envelope
Brendan Gillatt
www.brendangillatt.co.uk
GPG: 0x6E265E61

Jukka K. Korpela

2007-05-15, 3:20 am

Scripsit Brendan Gillatt:

>
> #x2709 is pretty good - an envelope

If you wish to refer to U+2709, then a correct character reference is
✉ (and without "&" it won't be recognized at all, without the ";" it
won't be recognized by IE 7).

But why would you use an iconic image that symbolizes sending messages on
sheets of paper enclosed in envelopes and typically delivered via a postal
service, when you in fact mean a _completely_ different method of sending a
message? Would you also use an image of a horse to symbolize a car or an
image of an apple to symbolize beef?

An envelope image (or, theoretically speaking, the ENVELOPE character) would
be a suitable symbol for a _postal address_, if abuse of such symbols were
not so common.

I know that envelopes are common symbols for email on web pages. This
doesn't make such usage less stupid. It would be a different matter if such
symbolism were ubiquous, since bad symbols become good symbols when they
become universally adopted. But envelopes standing for email are normally
used on sloppily designed childish pages only, often as animated images to
make the cluelessness more obvious.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/