CSS for <sub> and <sup>

CSS for <sup> and <sub>

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;
}

Folks, I threw together a test case with all of the HTML entities from http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references, not including those that are just spaces or otherwise non-rendering characters.

As michaeladamek points out, the glyphs for the (R) and (C) symbols aren't superscripted by default like the (TM), degree, spanish ordinal operators (a) and (o), and some other glyphs are.

Turns out that if you apply an underline to any glyph that isn't superscripted by default, it will render inconsistently between Webkit and non-Webkit browsers, because Webkit browsers superscript the underline and the glyph, while non-Webkit browsers superscript only the glyph. Whether the underline is applied via a border-bottom or text-decoration:underline declaration doesn't seem to make a difference, unfortunately.

Here's the full test case if you'd like to fork it: http://jsfiddle.net/ksZrh/9/

I'm going to keep thinking about this, and welcome suggestions for normalizing the underline placement cross-browser.

Interesting: a potential approach to getting underlines by using gradients rather than border-bottom or text-decoration. Lost the link to the tweet, but credit goes to @chikuyonok -- http://jsfiddle.net/yyHNp/5/

Having a strange issue with IE7. I have a large content (Terms etc.) inside a fixed height div with scroll: auto. There are a lot of sup tags inside. These show up below the div and for the full length of the content.

This is the only consistent solution I have found to the superscript underline problem outlined above. Thanks for sharing @unruthless.

Disclaimer: I don't know what this GitHub is and they are not allowed to bill me for anything, I just want to comment on this excellent post.

I use sub and sup a lot and specially with the old Explorers and now with the new Firefox 27 you run into troubles that only the here proposed CSS can save you from. Well done!

In special cases a subscript or superscript can be given
margin-left: -1px;
margin-right: 1px;
depending on the context.
Also a paragraph can be given some extra line-height when sub and sup appear in it.

Nice! It's work for me.. 👍

Thank you! Great work!

@unruthless Trying the full test linked above, with Firefox 35.0.1 (current), now it behaves like Chrome as well, breaking the text decoration with superscipt.

Amazing, thank you!!

@unruthless @michaeladamek -- Not sure of the complete x-browser implications (will test IE/Safari tomorrow), but one way to remove the text-decoration from <sub> and <sup> is to display: inline-block. http://jsfiddle.net/kaidjohnson/89jdwp0f/ Seems cleaner than adding more selectors, but full browser testing is still needed on this example.

This is great! Since I was already using the SUP tag, I just added your code to my CSS and voila. Well done!

Thanks this implementation is fantastic. This helped me to solve some alignment problems that were caused by superscript for mathematical notations.

+1

Thanks, man this helped

Thanks man. Good work 👍