HTML, printable hyperlink references, like table of contents

A li开发者_StackOverflow社区nk in an HTML document is normally clickable. However, on a printed page, that feature is by natural causes not available.

<a href="#foo">Link to foo</a>
[... loads of content ...]
<a name="foo"/>Here is foo

Klicking on "Link to foo" on screen will scroll the page to the right place. Is there a way to refer to page number instead if this document is printed? I would like to do like

<a href="#foo" style="printing: page-reference;">Link to foo</a>

to make it print a page number instead of the underlined text "Link to foo".

Is this possible, using HTML 4 or 5, XHTML, CSS 2 or 3, or maybe with help of some fancy javascript?

CSS allows you to specify different stylesheets for different media types - ie screen and printed page, and also audio, braille and others, as well as different screen/page sizes and resolutions, which makes it very powerful for serving content to mobile devices.

To specify a stylesheet to apply just for print, use @media print. There's a fairly good write-up on it at W3Schools.

In your case, you could use the print media styles along with :before or :after to add additional text to specific elements only when it's printed.

Something like this would do the trick for you:

@media print {
    a[href='#foo'] { text-decoration:none;}
    a[href='#foo']:after { content: "[Ref: 1]";}
    a[name='foo']:before { content: "[1]";}
}

Obviously you can change the text in the content to whatever you like; I've tried to make it close to what you asked for.

The existing content will still be shown (I've suppressed the underline though).

Hope that helps.

I've found out that doing what I want is not possible. Please, correct me if I'm wrong!