external link symbol at wikipedia?

[T.J.]

Hi all,

Using ,
http://en.wikipedia.org/wiki/Amsterdam as an example.
What is the symbol after the external links at the bottom
of the page?
and how do you replicate what they are doing?
(using HTML rather than XHTML)

Many thanks

 

[David Dorward]

http://en.wikipedia.org/wiki/Amsterdam as an example.
What is the symbol after the external links at the bottom
of the page?

A background image, set on links starting with "http://" using a substring
matching attribute selector from CSS 3 (not yet a recommendation).

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings

 

[T.J.]

A background image, set on links starting with "http://" using a substring
matching attribute selector from CSS 3 (not yet a recommendation).

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings

Thank you for the reply,
I'm afraid that is all way above me, and think the symbol
is a bit of a red herring as to what I am trying to ask anyway.

I will try to rephrase it.
again using http://en.wikipedia.org/wiki/Amsterdam as an example.
Looking at the first of the external links, this appears to be the code.
(sorry may wrap)

<a href="http://wikitravel.org/en/article/Amsterdam" class='external'
title="http://wikitravel.org/en/article/Amsterdam">Wikitravel</a>
<span
class='urlexpansion'> (<i>http://wikitravel.org/en/article/Amsterdam</i>)</span>

From what I have found out, it appears it is to make the url display next to
the text when in printing out the page.
How can I achieve the same effect?

 

[David Dorward]

From what I have found out, it appears it is to make the url display next
to the text when in printing out the page.

That is an entirely seperate issue to the icon you asked about previously.

How can I achieve the same effect?

Set different values for the display: property for the span in the screen
media and print media stylesheets - but note that the URL (if you use that
technique) will be displayed to any user who doesn't have a browser which
can handle screen media style sheets (including, but not limited to, Lynx
users).

http://www.w3.org/TR/CSS2/media.html

 

[Andy Dingley]

What is the symbol after the external links at the bottom
of the page?

It's just a random symbol. Some sites use a "world" icon or similar.

how do you replicate what they are doing?

This is the HTML code

<a href="http://foo.com" class='external-link' >Some Stuff</a>

And the CSS will contain something like this:

a.external-link:after {
content : " \21D2" url(/images/inline-icon-external-link.gif);
text-decoration: none;
}


This is from one of my own sites - not exactly the same as Wiki.

The key is to use a CSS "content" rule. You can put text, odd
characters by code or images in there.

It's not done with CSS "background-image", as that won't align
correctly for this purpose.

 

[T.J.]

That is an entirely seperate issue to the icon you asked about previously.


Set different values for the display: property for the span in the screen
media and print media stylesheets - but note that the URL (if you use that
technique) will be displayed to any user who doesn't have a browser which
can handle screen media style sheets (including, but not limited to, Lynx
users).

http://www.w3.org/TR/CSS2/media.html

Thank you again,
Yes, sorry the image was a completely separate issue.
I think I have now got a page set up so that
text is added when printing the page, but doesn't
display on the screen.
http://www.sim64.co.uk/test-print.html

It seems to work on the latest versions of IE, Opera,
Firefox and Netscape, but from what you say wont work
on all.
Is this a technique I can safely use, assuming that I check
that when the text added for the printer is displayed on
the screen it doesn't mess the page up to much?

 

[T.J.]

It's just a random symbol. Some sites use a "world" icon or similar.



This is the HTML code

<a href="http://foo.com" class='external-link' >Some Stuff</a>

And the CSS will contain something like this:

a.external-link:after {
content : " \21D2" url(/images/inline-icon-external-link.gif);
text-decoration: none;
}


This is from one of my own sites - not exactly the same as Wiki.

The key is to use a CSS "content" rule. You can put text, odd
characters by code or images in there.

It's not done with CSS "background-image", as that won't align
correctly for this purpose.

Thank you,
Sorry, the image/symbol was actually not related to the
question I was trying to ask see my reply to David Dorward
for what I was trying to do.

 

[Andy Dingley]

<a href="http://wikitravel.org/en/article/Amsterdam" class='external'
title="http://wikitravel.org/en/article/Amsterdam">Wikitravel</a>
<span
class='urlexpansion'> (<i>http://wikitravel.org/en/article/Amsterdam</i>)</span>

From what I have found out, it appears it is to make the url display next to
the text when in printing out the page.
How can I achieve the same effect?

Use the CSS print media selector

You can link to a default stylesheet with most things in it and a second one that's only used for printing. This needs
to be done on every page.

<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<link rel="stylesheet" type="text/css" media="print" href="/styles/printonly.css" />


Or more easily, add a print-only section to the bottom of your existing stylesheet. The following example will do it
(and some other things you can probably work out for yourself)



/*
Print control
*/

..urlexpansion {
display: none;
visibility: hidden;
}

..print-only{
display: none;
visibility: hidden;
}


@media print {

body {
background-image: none ! important;
background-color: #ffffff ! important;
color : black ! important;
}

.urlexpansion {
display: inline ! important;
visibility: visible;
}

/* Mark up any small sections for non-printing */
.no-print {
display: none ! important;
visibility: hidden;
}

div.print-only {
display: block ! important;
visibility: visible;
}

span.print-only {
display: inline ! important;
visibility: visible;
}

div.print {
display: block ! important;
visibility: visible;
}

span.print {
display: inline ! important;
visibility: visible;
}
}