Superscripts and Line-Heights
You learn something new every day.
In an online book application I recently finished at work, the client came across an issue that I’d never had to deal with before - the effect of a set line-height (in the CSS) on the flow of superscripts and subscripts, which were necessary for his footnotes.
Superscript with defined line-height in Firefox 2
Superscript with defined line-height in Internet Explorer 7
If you look at the difference between the correctly applying line-height (highlighted in blue) and the line-height affected by the superscripts, there’s a bit of a difference. Firefox doesn’t handle it too badly and the difference isn’t noticeable to your average person skim reading paragraphs, although it is there. In Internet Explorer however (both 7 and 6), it completely disrupts the flow of text and looks quite noticeably bad. This only occurs when you have explicitly defined the line-height in the css.
I looked around for solutions and ended up with this:
Normally superscripts have a vertical-align value of ‘superscript’, but if you change it align with the top of the surrounding text’s characters it seems to solve the line-height issue.
This does also bring the superscript down rather than it’s usual position, and from a typographic perspective I’m not sure that it’s completely correct. Alternatively you can adjust the line-height on the sup element to nullify the general one that you’ve set, but this only works in Firefox and predictably wreaks havoc in IE.
Is there a more elegant and typographically correct way of doing this?
That’s clever :)
I never did know how to use vertical-align either haha. This cleared it up a bit, thanks!
PS- IE sucks…
Does any of the reset CSS from YAHOO, Dojo, etc help? Good find!
Hey Teresa,
I just saw your Cosplay picture… Hahahaha very cool. I’m tempted to pay you out but I’ll leave that to Ben.
And yeah…IE sucks. :( When I used CSS I never experimented with line height: is it important to define the line height or does it not matter?
hi im on gaia.
i’m sorry to bother you could you tell me what this this thing called a mirror glitch is and can someone hack into your profile when they do that? I’m kinda worried about it.
Wow, that’s odd.
I created a span class and styled it with a line height of zero.
span.footnotenumbers {
vertical-align:super;
line-height:0;
}
Seems to work in firefox, haven’t tested for other browsers though. I’m assuming that as it’s rather simple you’ve tried and discarded already
Did you notice that in your “Categories” sidebar on the main page, “2.0” skips a line and goes over/underneath Tutorials and makes a bizarre looking thing?
I found something like this to work for me as well:
sup {
vertical-align: super;
line-height: 1.5em;
font-size: 14px;
}
Solutions that set a new line-height (even if it’s the same of the body of text the super or subscript sits in) or even worse, that sets a new font size are bound to produce more cross browser and platform rendering problems than they solve. Combine that with accidentally activating or deactivating hasLayout in <abbr>IE</abbr> I think the solution you noted probably works best.
I’ve found similar issues with styling versals, in particular drop caps often fixed — at least partially — with vertical-align: top;.