CODEWITHSUNDEEP
htmlcsssubscriptsuperscript
Andrew Bullock
Andrew Bullock

Reputation: 37378

How can I keep consistent line height with superscript elements?

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)

Upvotes: 166

Views: 140354

Answers (16)

Scott Chandler
Scott Chandler

Reputation: 299

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

Upvotes: 0

1.21 gigawatts
1.21 gigawatts

Reputation: 17736

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>

Upvotes: 0

StackOverflowUser
StackOverflowUser

Reputation: 1123

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;
}

Upvotes: 3

Ric
Ric

Reputation: 3458

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.

Upvotes: 138

drmrbrewer
drmrbrewer

Reputation: 12989

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.

Upvotes: 5

TheZver
TheZver

Reputation: 1582

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>

Upvotes: 0

Rizzoli
Rizzoli

Reputation: 1

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

Upvotes: 0

Anup Puri
Anup Puri

Reputation: 65

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

Upvotes: 3

nth
nth

Reputation: 21

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;
}

Upvotes: 2

Dallas
Dallas

Reputation: 45

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;
}

Upvotes: 1

Bigmat
Bigmat

Reputation: 1

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

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

Upvotes: 0

Milingu Kilu
Milingu Kilu

Reputation: 141

keep it easy:

sup { vertical-align: text-top; }

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

Upvotes: 5

PiTheNumber
PiTheNumber

Reputation: 23542

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;
}

Upvotes: 10

Hadi
Hadi

Reputation: 2905

Specially use this on newsletter -

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

Upvotes: 0

pavium
pavium

Reputation: 15108

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)

Upvotes: 0

bobince
bobince

Reputation: 536339

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.

Upvotes: 207

Related Questions