Question

I’ve noticed that when trying to use superscript or subscript in the following way…

<ul>
<li><b>Mean Radius</b>      6,371.0 km</li>
<li><b>Mean Circumference</b>   40,041.47 km</li>
<li><b>Surface Area</b>     510,072,000 km<sup>2</sup></li>
<li><b>Volume</b>       1.0832073 &times; 10<sup>12</sup> km<sup>3</sup></li>
<li><b>Mass</b>         5.9736 &times; 10<sup>24</sup> kg</li>
<li><b>Mean Density</b>     5.5153 g/cm<sup>3</sup></li>
<li><b>Axial Tilt</b>       23.439281&deg;</li>
</ul>

What winds up happening is that the height of the entire line is adjusted for the superscripted or subscripted text and the text on the left in bold is vertically centered in this line. This makes the bolded text look a little weird since it seems like it’s floating slightly above the bottom of the line and isn’t aligned with the other text. I’ve tried making a larger line-height in CSS, but that only makes the effect more visable. Vertical-align also didn’t seem to even do anything. So I’m kinda out of ideas now.

Would anyone know how to have all text in a line (regardless of line-height, subscript, superscript, etc) printed on the bottom of that line?

PS – I’ve viewed this on Chrome 6 and Firefox 3.6.9 and it happens in both, so I’m assuming this is a universal problem, not a browser problem. I’ve also noticed that text always seems to center itself vertically in a line regardless of line-height, so the problem apparently becomes that since a line of text with superscript takes up more ‘height’ than a line of text without, its centering wouldn’t line up with the other line’s.

Answer 1

Yes, this is a universal issue; related to how typography works in general.

There is little to be done for it; but with margins and paddings and all manner of other hoopy stuff you might be able to defeat the effect. Another (exceptionally) dirty hack is to add some invisible character sub/superscripted on each line, staggering the lines so that the effect becomes less visible.

Also;

Would anyone know how to have all text in a line (regardless of line-height, subscript, superscript, etc) printed on the bottom of that line?

That bit doesn’t make sense: If you want them on the bottom of the line, don’t superscript them!

Alternative: Don’t use sub/super; use real characters: 10²⁴; these are available from U+2070 outwards; to U+2094, as well as U+B2; U+B3, but depending on the font they can look rather wonky.

Alternative Expanded: If you can get away with computer notation (E+24-style) for the exponents; there are single-character stuff for things like ㎢, ㎨, and the like (Volume and Average Gravitational Acceleration, respectively), these composites begin at U+3380; but again, they might look kind of wonky (or not be present at all).