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