aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--doc/bugs/footnotes-look-weird.mdwn41
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]]