So you’ve noticed it too? Your superscript and subscript tags are breaking your nice clean line-heights, aren’t they? It’s something that has bothered me for quite some time too, but for some reason I didn’t think to fix it until today when someone asked me about it.

Just insert the following CSS declarations to your style sheet and you’re good to go:

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

Check Out the Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam¹, quis nostrud exercitation ullamco laboris nisi ut aliquip ex^® ea commodo consequat. Duis aute irure_x dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa_y qui officia deserunt mollit anim id est laborum.

— lipsum

More Explanation

Originally, I thought that just setting the line-height of the sub and sup tags to zero would work, and it did, for every browser but IE6. So, knowing that the default styles for the super/subscript tags is to change the vertical-align, we can just reset those to the baseline and relatively position from there, which will not cause our other lines to displace.

Easy as pie, right?

Share your thoughts on “Stop Superscripts from Breaking Line-Heights Once and for All”.

Awesome Form was, well, pretty awesome. For any of you CSS nerds out there, you understand how difficult it can be to quickly and effectively markup long forms and still have them be logical and accessible. Awesome Form was my solution.

Share your thoughts on “Archiving Awesome Form”.

Today is a sad day; I‘ve decided to archive the beloved Awesome Box. Why, you may ask? The short answer: support and upkeep. It‘s difficult to continue to support a plugin and respond to problems people are have using it. The long answer…

Share your thoughts on “Archiving Awesome Box”.

I’m having a bit of a quandry on a CSS experiment that I’ve been attempting. The idea behind this experiment is to create an unordered list of links scale according to your hover position, like the icons work in the Mac OS X Dock, using the magnification effect.

Share your thoughts on “CSS Navigation Magnification”.

For some time now, I have wanted a way to reverse the order of an ordered list in html. I really wonder why it isn’t built into the specifications. While it is not entirely useful to have, it creates for an interesting experiment when you have goals of it being cross-browser and scalable text compatible.

Share your thoughts on “Scalable Reverse-Ordered Lists”.