View Single Post
Old 03-03-2010, 07:18 AM   #70
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Fiddling with superscripts

I've been playing around with superscripts trying to get them to work nicely. Maybe this has been covered before, but I couldn't find anything on it.

The stock result of adding a <sup> tag in your code is to cause a nasty variation in line height to accommodate the superscript. If you want your lines to be regular, the trick is to specify vertical-align explicitly. With this in place, you can now alter the vertical position of the superscript by using the line-height attribute.
I.e.:
Code:
sup {
  font-size: 80%;
  vertical-align: top;
  line-height: 0.8
}
I've attached an example epub that shows what happens without this code and the results of using different line-heights. A value of 0.8 seems about right, though as the leading of your body text increases, you can get away with decreasing this value. Since the font-size is set using a % in the sup tag, the size of the superscript will scale with the size of the surrounding text and you won't have to worry about adjusting line-height for different font sizes.

Note that the paragraphs with larger values for the superscript line-height may appear more compact. This is because the superscript lies closer to the line of the body text and is an optical illusion common with type. The actual height of the block, as measured on my screen, is the same as with smaller line-heights.

Any comments are welcome.
Attached Files
File Type: epub superscript-test.epub (3.6 KB, 513 views)
charleski is offline   Reply With Quote