HTML, printable hyperlink references, like table of contents

Question

A link 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?

Answer 1

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.