By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

CSS for Print Media

P: n/a
I'm new to CSS and I want to show URLs for links in parentheses when printing.

Example:
Given the html:
<a href="http://www.google.com">Google</a>
Print:
Google (http://www.google.com)
One way to do this is to do the following:
Change the html to:
<a href="http://www.google.com">Google</a>
<div class="ahref">(http://www.google.com)</a>
Then turn the display of class ahref on for print or screen.

Is there a way to do this without adding extra HTML for every link?

Jared
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Jared Frailey wrote:
I'm new to CSS and I want to show URLs for links in parentheses when printing. [...] One way to do this is to do the following:
Change the html to:
<a href="http://www.google.com">Google</a>
<div class="ahref">(http://www.google.com)</a>
Then turn the display of class ahref on for print or screen.

Is there a way to do this without adding extra HTML for every link?


You can try generated content (see the CSS 2 specification), something like
content: attr(href);
Note: no support in IE
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jul 20 '05 #2

P: n/a
jf******@hotmail.com (Jared Frailey) wrote:
I'm new to CSS and I want to show URLs for links in parentheses when printing.

Example:
Given the html:
<a href="http://www.google.com">Google</a>
Print:
Google (http://www.google.com)

One way to do this is to do the following:
Change the html to:
<a href="http://www.google.com">Google</a>
<div class="ahref">(http://www.google.com)</a>
Then turn the display of class ahref on for print or screen.

Is there a way to do this without adding extra HTML for every link?


In your print stylesheet:

a:after {content: " (" attr(href) ") "; }

Supported by Opera and Gecko based browsers.
Not supported by IE.
Don't know about Safari, etc.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
On Thu, 23 Oct 2003 05:26:44 -0700, Jared Frailey wrote:
I'm new to CSS and I want to show URLs for links in parentheses when printing.

Example:
Given the html:
<a href="http://www.google.com">Google</a>
Print:
Google (http://www.google.com)
With CSS:

HTML:
<p>Here is a <a href="http://google.com">link</a>.</p>

With this CSS:
@media print {
*[href]:after {
content: ' (' attr(href) ')';
}
}

You can replace *[href] with :link or a:link if you like. Here's a
different bit of CSS:

@media print {
*[href^='http:']:after {
content: ' (' attr(href) ')';
color: blue;
}
*[href]:not([href^='http:']):after {
content: ' (' attr(href) ')';
color: green
}
}

The first bit would only match links starting with 'http:', i.e. external
links if the HTML is written with relative links. I *think* the second one
should match everything else, and make it green. In combination with
:before, this could be used to write (e.g.) 'External' or 'Internal' by
the links.

@media print {
*[href^='http:']:before {
content: '[External site] ';
color: blue;
}
*[href^='http:']:after {
content: ' (' . attr(href) . ')';
color: blue;
}
*[href]:not([href^='http:']):before {
content: '[Page on this site] '; /*Unless diff. protocol, news: etc */
color: green
}
*[href]:not([href^='http:']):after {
content: ' (' attr(href) ')';
color: green
}
}

Note that the :not() pseudo-class is in CSS3, which isn't official yet
(AFAIK). S is the ^= (begins with) part of the [href^=...].
Both work for me in Mozilla Firebird though.

Konqueror doesn't support :not() or content: ' (' attr(href) ')';, it
won't join the strings together. It does do the ^= though.

I'm not sure what to suggest. You're probably best going with:

@media print {
*[href]:after {
content: ' (' attr(href) ')';
}
}

Although Konqueror shows a final ) instad of the full text. Firebird id
fine.

Of course, you cna change print to screen (or all) if you want this effect
all the time, but most UAs have a status bar, tooltip or similar anyway.
One way to do this is to do the following:
Change the html to:
<a href="http://www.google.com">Google</a>
<div class="ahref">(http://www.google.com)</a>
Then turn the display of class ahref on for print or screen.


You'd need span instead of div, to keep it on the same line (assuming no
div.ahref {display: inline; }, which is silly).

You also need a space before the ( otherwise they'll run together.

HTH :-)

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.