blob: 4747353960d47b3d7659a9ca988a2fd93acdbbda (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
Multimarkdown footnotes are pretty useful. If they are enabled in a
wiki, they don't look so good with the default stylesheet, however, as
the references are in the same size and positioning as everything
else.
The following stylesheet should be added to `style.css`:
a.footnote { vertical-align: super; font-size: xx-small; }
div.footnote { font-size: smaller; }
This is a typical style that user-agents apply to the `<sup>` tag. For
example, chromium has this builtin style for `<sup>`:
vertical-align: super;
font-size: smaller;
Bootstrap uses this instead:
sup {
top: -.5em;
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
I settled on `xx-small` because it's the only size that doesn't affect
line-height here. However, Bootstrap's way may be better.
At any rate, the correct way to fix this is to *avoid* custom styling
and use the `<sup>` tag for the footnote reference, as it has
*meaning* which is important to have proper semantic output (e.g. for
screen readers), as detailed in [this Stack Overflow discussion][].
[this Stack Overflow discussion]: http://stackoverflow.com/questions/501671/superscript-in-css-only
Note that I also make the bottom `<div>` small as well so that it has
less weight than the rest of the text. -- [[anarcat]]
|