Skip to content

Instantly share code, notes, and snippets.

@unruthless

unruthless/CSS for <sup> and <sub>

Created May 26, 2010 01:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unruthless/413930 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unruthless/413930 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. unruthless revised this gist Jun 11, 2010. 1 changed file with 11 additions and 6 deletions.
    17 changes: 11 additions & 6 deletions CSS for <sup> and <sub>
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,18 @@
    sub, sup {
    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
    /* Specified in % so that the sup/sup is the
    right size relative to the surrounding text */
    font-size: 75%;

    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
    /* Zero out the line-height so that it doesn't
    interfere with the positioning that follows */
    line-height: 0;

    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
    /* Where the magic happens: makes all browsers position
    the sup/sup properly, relative to the surrounding text */
    position: relative;

    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
    /* Note that if you're using Eric Meyer's reset.css, this
    is already set and you can remove this rule */
    vertical-align: baseline;
    }

    @@ -18,6 +22,7 @@ sup {
    }

    sub {
    /* Move the subscripted text down, but only half as far down as the superscript moved up */
    /* Move the subscripted text down, but only
    half as far down as the superscript moved up */
    bottom: -0.25em;
    }
    }
  2. unruthless created this gist May 26, 2010.
    23 changes: 23 additions & 0 deletions CSS for <sup> and <sub>
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    sub, sup {
    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
    font-size: 75%;

    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
    line-height: 0;

    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
    position: relative;

    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
    vertical-align: baseline;
    }

    sup {
    /* Move the superscripted text up */
    top: -0.5em;
    }

    sub {
    /* Move the subscripted text down, but only half as far down as the superscript moved up */
    bottom: -0.25em;
    }