Referencing to a Common Reference Page

By JSV

Description

This addresses these problems:

1. The [[footnote]] tag creates a list only for the current page, rather than for a list common to all (or some) pages.
2. Use of the ^^superscript^^ mark-up causes the baseline to be moved, making the text look ugly.
3. The underlining of references disrupts the text.

A CSS solution, and a non-CSS solution is offered here.

1. The CSS solution uses a [[span]] tag of class ref, and benefits from the automatic inclusion of [ and ] symbols either side (which widen the focus target). Unfortunately, IE6 does not render the :before and :after elements of the style, so you may adapt this to omit the :before and :after, and put them into the referring block as escaped literals.
2. The non-CSS version packs the same information into a style attribute for a [[span]] tag, but does not change the text decoration of the link.

Attribution

Based on code found here.

Code

CSS version

Referring code (in your page)

[[span class="ref"]][[[references|3]]][[/span]]

CSS code (in your custom CSS Theme)

.ref {
    position:relative;
    font-size:85%;
    top:-0.9ex;
    margin-left:0.2em;
    margin-right:0.1em;
}
.ref a {
    text-decoration: none;
    border-bottom: solid 1px black;
}
.ref a:before {
    content: "["
}
.ref a:after {
    content: "]"
}

Non-CSS version (using style)

[[span style="position:relative; font-size:85%; top:-0.9ex; margin-left:0.2em; margin-right:0.1em;"]]@@[@@[[[references|3]]]@@]@@[[/span]]

In action

Standard footnote (illustrating the problem)

Superscripting normally disrupts the spacing in your text lines (the rest of this sentence has been put here as padding, to provide sufficient text to show that the line spacing is disrupted in this example). Here is an example of a standard footnote¹. You'll see that the line spacing is disrupted (the rest of this sentence has been put here as padding, to provide sufficient text to show that the line spacing is disrupted in this example).

Suggested reference format (CSS example)

See this page for the CSS example.

Suggested reference format (non-CSS, inline example)

Superscripting normally disrupts the spacing in your text lines (the rest of this sentence has been put here as padding, to provide sufficient text to show that the line spacing is preserved in this example). This line contains a reference[3] to another page, using the non-CSS method. You'll notice that the line spacing is not disrupted by the superscripted reference (the rest of this sentence has been put here as padding, to provide sufficient text to show that the line spacing is preserved in this example).

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Spacing

Vittek 1243862220|%e %b %Y, %H:%M %Z|agohover

What do you mean with "the spacing is disrupted?" I can't see anything wrong in the first example (the standard footnote).

Spacing: reply to Vittek

JSV 1243862667|%e %b %Y, %H:%M %Z|agohover

The spacing is uneven. The spacing between the line containing the superscript '1' and the line above is larger. Because the default line spacing is dynamic (responding to the size of the content of the line), the superscript makes the content taller, and therefore the line height changes just for that line.
If you can't see anything wrong with the example, then it's possible that your browser does not display the paragraph like my browser does (I've tried with IE and Firefox)… but with small text, it's only a few pixels difference, so might be difficult to see in some cases — which is OK.

Re: Spacing: reply to Vittek

Vittek 1243878976|%e %b %Y, %H:%M %Z|agohover

Oh, THAT spacing! I was looking at the space from on word to the next, not between line.
Yes, there is a little more space between those two lines, if you look closely, and maybe in other cirmustances (depending of font, dimensions, browser and so on) the space would be a lot more noticeable. My bad.

Footnotes

1. footnote text