How can I keep consistent line height with superscript elements?

Question

If I have a <sup> element in a multi-line paragraph, the line with the superscript on it has a larger line spacing above it than the other lines, regardless of what line-height I put on the paragraph.

It doesn't mean I have lots of paragraphs, each which is on a single line. I have a single paragraph with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a <sup> or <sub>. This affects the line height for that line by adding extra spacing above/below. If I set a larger line-height on the paragraph this makes no difference to the problem. The line-height is increased, but the extra spacing still remains.

How can I make it consistent - i.e. all lines have the same spacing whether they contain a <sup> or not?

Your solutions must be cross-browser (IE 6+, Firefox, Safari, Opera, Chrome)

Answer 1

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.

Answer 2

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

The trick is to set the <sup>'s line-height to 0. @Scott said to use normal, but this doesn't always work.

This means you don't have to change the line-height of surrounding text to accommodate the superscript text. I've tested this in IE7+ and the other major browsers.

Answer 3

I had the same problem and non of the given answers worked. But I found a git commit with a fix that did work for me:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

keep it easy:

sup { vertical-align: text-top; }

[font-size dependent on your individual type-face]

Answer 5

I prefer the solution suggested here, as exemplified by this jsfiddle:

CSS:

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

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

The beauty of this solution is that you can tailor the vertical positioning of the superscript and subscript, to avoid any clashes with the line above or below... in the above, just increase or decrease the 0.2em to suit your requirements.

Answer 6

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

Answer 7

The reason why the <sup> tag is affecting the spacing between two lines has to do with a number of factors. The factors are: line height, size of the superscript in relation to the regular font, the line height of the superscript and last but not least what is the bottom of the superscript aligning with... If you set... the line height of regular text to be in a "tunnel band" (that's what I call it) of 135% then regular text (the 100%) gets white padded by 35% of more white. For a paragraph this looks like this:

 p
    {
            line-height: 135%;
    }

If you then do not white pad the superscript...(i.e. keep its line height to 0) the superscript only has the width of its own text... if you then ask the superscript to be a percentage of the regular font (for example 70%) and you align it with the middle of the regular text (text-middle), you can eliminate the problem and get a superscript that looks like a superscript. Here it is:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 8

I only needed to change the default <sup> behavior in one section of the page, so I applied a class there. Also for me vertical-align: top worked just fine, goosed up about 4 pixels.

sup.my-class {
    vertical-align: top;
    position: relative;
    top: -4px;
}

Answer 9

I prefer to use length on the vertical-align. This aligns the baseline of the element at the given length above the baseline of its parent.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 10

Specially use this on newsletter -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer 11

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)

Answer 12

I like Milingu Kilu's solution but in the same spirit I prefer

sup { vertical-align:top; line-height:100%; }

Answer 13

&sup1, &sup2 etc. might do the trick. it's an HTML trick to superscript

Answer 14

Answer from here, works in both phantomjs and in email-embedded HTML:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

Answer 15

I've been using line-height: normal for the superscript, which works fine for me in Safari, Chrome, and Firefox, but I'm not sure about IE.

Answer 16

Here’s what I have working:

<div>
 <span>line</span><br/>
 <span>span styled with vertical align super</span><span style="vertical-align:super;">1</span><br/>
 <span>line</span><br/>
 <span>same as before but line height set to 0</span><span style="vertical-align:super; line-height:0; font-size:.75em">1</span><br/>
 <span>line</span><br/>
 <span>now using sup tag and sup class with line height 0</span><sup style="line-height: 0">1</sup><br/>
 <span>line</span>
</div>