diff options
| -rw-r--r-- | doc/bugs/footnotes-look-weird.mdwn | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/doc/bugs/footnotes-look-weird.mdwn b/doc/bugs/footnotes-look-weird.mdwn new file mode 100644 index 000000000..474735396 --- /dev/null +++ b/doc/bugs/footnotes-look-weird.mdwn @@ -0,0 +1,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]] |