doc/bugs/footnotes-look-weird.mdwn

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