ansaurus

Question

HTML <sup /> tag affecting line height, how to make it consistent?

Answer 1

A:

To make all lines taller, to look the same as the line with the superscript, define a larger line-height for the entire paragraph

<p style='line-height:150%'>

or whatever value gives the effect you desire.

It may look strange, but that's how you described your requirements.

EDIT: In order to make all lines look the same when only one needs more vertical space than the others, ALL lines in the paragraph will have to be taller.

This, as I said, may not an attractive solution. Maybe something can be done with a span making just the text with the sub/superscript smaller, apart from that I don't believe what you want can be achieved. But I'd like to see someone else's solution.

EDIT2: Incidentally, I've tried a small html file containing

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

And the lines are all the same height in FF3.0.14 and Konqueror (I can't speak for other browsers)

pavium 2009-10-07 10:19:17

i said in the question that this doesnt solve the problem. Ive added clarification incase you misunderstood

Andrew Bullock 2009-10-07 10:24:18

yeah I understand if i need more room for one line, for consistency i need to add extra room to the others, thats obvious. What i'm saying is line-height doesnt fix it, this increases the space yes, but there is _still extra_ space with the sup

Andrew Bullock 2009-10-07 10:46:18

Maybe there's a difference between browsers - after all, the answer you accepted begins 'line-height does fix it', but we don't know what browser bobince was using.

pavium 2009-10-07 11:38:17

see my comment to his answer

Andrew Bullock 2009-10-07 11:41:41

Answer 2

+2 A:

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.

bobince 2009-10-07 10:39:09

vertical-align fixed it, thanks. Even a massive line-height 300%+ does not fix it in IE8, Chrome 3 or FF 3.5. I still get 1-2px of difference.

Andrew Bullock 2009-10-07 10:44:41

Thanks bobince. This is excatly what I was searching for!

Richard West 2010-04-17 01:37:31

ansaurus

tags:

views:

answers:

HTML <sup /> tag affecting line height, how to make it consistent?

related questions