Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS for <sub> and <sup>
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;
}
@unruthless

This comment has been minimized.

Show comment Hide comment
@unruthless

unruthless May 26, 2010

This is tested to not break line-heights in WinXP/IE6, WinXP/IE7, WinXP/IE8, Mac/FF 3.5.9, Mac/Chrome 5.0, Mac/Safari 4.0.4, assuming a base font size of 14px and a line-height of 21px, or 1.5em. Poke this, try to make it break!

Owner

unruthless commented May 26, 2010

This is tested to not break line-heights in WinXP/IE6, WinXP/IE7, WinXP/IE8, Mac/FF 3.5.9, Mac/Chrome 5.0, Mac/Safari 4.0.4, assuming a base font size of 14px and a line-height of 21px, or 1.5em. Poke this, try to make it break!

@paulirish

This comment has been minimized.

Show comment Hide comment
@paulirish

paulirish Jan 24, 2011

Great work, this. :D

Great work, this. :D

@ryanflorence

This comment has been minimized.

Show comment Hide comment
@ryanflorence

ryanflorence Feb 19, 2011

Glad this made it in.

Glad this made it in.

@tchalvak

This comment has been minimized.

Show comment Hide comment
@tchalvak

tchalvak May 13, 2011

Nice.

Nice.

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Sep 1, 2011

Having a problem in webkit using a ® in an anchor link... Line-height breaks. Suggestions?

Having a problem in webkit using a ® in an anchor link... Line-height breaks. Suggestions?

@unruthless

This comment has been minimized.

Show comment Hide comment
@unruthless

unruthless Sep 22, 2011

michaeladamek: I'm unable to replicate this issue -- http://jsfiddle.net/ksZrh/ works fine in Safari 5.0.5. Can you link to a test case that shows the breakage you're talking about?

Owner

unruthless commented Sep 22, 2011

michaeladamek: I'm unable to replicate this issue -- http://jsfiddle.net/ksZrh/ works fine in Safari 5.0.5. Can you link to a test case that shows the breakage you're talking about?

@tchalvak

This comment has been minimized.

Show comment Hide comment
@tchalvak

tchalvak Sep 22, 2011

Not able to duplicate in google chrome 14 or it's so subtle that I can't tell, even when the original font size is at 500%.

Not able to duplicate in google chrome 14 or it's so subtle that I can't tell, even when the original font size is at 500%.

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Sep 22, 2011

@tchalvak

This comment has been minimized.

Show comment Hide comment
@tchalvak

tchalvak Sep 22, 2011

Err, so you're saying the underline breaks, not the css line-height, right? That I can confirm.

Err, so you're saying the underline breaks, not the css line-height, right? That I can confirm.

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Sep 22, 2011

@unruthless

This comment has been minimized.

Show comment Hide comment
@unruthless

unruthless Sep 22, 2011

Thanks for reporting the potential issue! I don't think the link made it in to your comment. Can you re-post just the link?

[EDIT] Ah, link's there now. Thanks, will take a look at it shortly.

Owner

unruthless commented Sep 22, 2011

Thanks for reporting the potential issue! I don't think the link made it in to your comment. Can you re-post just the link?

[EDIT] Ah, link's there now. Thanks, will take a look at it shortly.

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Sep 22, 2011

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Sep 23, 2011

Sorry. I don't have a live link to share because the superscripted (R) didn't make it into production because of the bug.

Sorry. I don't have a live link to share because the superscripted (R) didn't make it into production because of the bug.

@tchalvak

This comment has been minimized.

Show comment Hide comment
@tchalvak

tchalvak Oct 4, 2011

Seems like the best solution here would be to simply lose the underline style on link sup/sub blocks, though when I tried that out earlier I couldn't get that destyling to apply. Anyone else able to make the fiddle display that way?

tchalvak commented Oct 4, 2011

Seems like the best solution here would be to simply lose the underline style on link sup/sub blocks, though when I tried that out earlier I couldn't get that destyling to apply. Anyone else able to make the fiddle display that way?

@michaeladamek

This comment has been minimized.

Show comment Hide comment
@michaeladamek

michaeladamek Oct 4, 2011

@unruthless

This comment has been minimized.

Show comment Hide comment
@unruthless

unruthless Oct 15, 2011

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.

Owner

unruthless commented Oct 15, 2011

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.

@unruthless

This comment has been minimized.

Show comment Hide comment
@unruthless

unruthless Nov 3, 2011

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/

Owner

unruthless commented Nov 3, 2011

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/

@debjitbis08

This comment has been minimized.

Show comment Hide comment
@debjitbis08

debjitbis08 Nov 30, 2011

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.

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.

@rposky

This comment has been minimized.

Show comment Hide comment
@rposky

rposky Dec 19, 2013

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

rposky commented Dec 19, 2013

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

@GigaGerard

This comment has been minimized.

Show comment Hide comment
@GigaGerard

GigaGerard Mar 22, 2014

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.

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.

@tellmethetruth

This comment has been minimized.

Show comment Hide comment
@tellmethetruth

tellmethetruth Jul 10, 2014

Nice! It's work for me.. 👍

Nice! It's work for me.. 👍

@bheitkem

This comment has been minimized.

Show comment Hide comment
@bheitkem

bheitkem Aug 27, 2014

Thank you! Great work!

Thank you! Great work!

@imrehg

This comment has been minimized.

Show comment Hide comment
@imrehg

imrehg Jan 30, 2015

@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.

imrehg commented Jan 30, 2015

@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.

@vfonsecad

This comment has been minimized.

Show comment Hide comment
@vfonsecad

vfonsecad May 31, 2015

Amazing, thank you!!

Amazing, thank you!!

@kaidjohnson

This comment has been minimized.

Show comment Hide comment
@kaidjohnson

kaidjohnson Jun 15, 2015

@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.

@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.

@o-o-ZEPHYROS-o-o

This comment has been minimized.

Show comment Hide comment
@o-o-ZEPHYROS-o-o

o-o-ZEPHYROS-o-o Nov 22, 2016

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

o-o-ZEPHYROS-o-o commented Nov 22, 2016

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

@sjorsvanheuveln

This comment has been minimized.

Show comment Hide comment
@sjorsvanheuveln

sjorsvanheuveln Mar 30, 2017

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

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

@Tzikas

This comment has been minimized.

Show comment Hide comment
@Tzikas

Tzikas May 12, 2017

+1

Tzikas commented May 12, 2017

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment