Member Avatar for Paulxh

When interspersing [super-script] into several lines of text.
How can I keep a consistant [line-height] ?

I have been trying to control the line-height through CSS in the paragraph tag, example.
p {line-height: 120%}
But this does not provide a consistant line height, it simply raises the overall line-height.

Perhaps putting a CSS control within the [super-script] tag will balance this out. Perhaps someone has seen this problem and can help.

  • 2 Contributors
  • 2 Replies
  • 97 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Paulxh

Dani AI

Generated

Browsers expand a line box to fit the tallest inline content on that line. was on the right track suggesting a smaller superscript and already experimented with reducing its size. For predictable, consistent spacing, combine a unitless parent line-height with an explicit, scaled font-size for the superscript and avoid relying only on default UA rules.

Try keeping the paragraph line-height unitless so it scales with font-size, and make the sup itself small with a tight line-height and a visual offset that does not affect layout (transform). Example pattern:

p {
  line-height: 1.4;
}

sup {
  font-size: 0.65em;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.25em);
}

This keeps the inline box for the superscript compact (smaller font-size + small line-height) and then nudges it visually without forcing the browser to enlarge the surrounding line (transforms are applied after layout). Test different em values and translate offsets per typeface, and avoid making superscripts so small they become unreadable.

Reference notes: unitless line-height is recommended for consistent scaling across descendants (MDN line-height). The HTML sup default behavior and options are described on MDN (MDN sup element).

Recommended Answers

All 2 Replies

Member Avatar for almostbob

superscript raises the text, and therefore raises the top of the text,
when you see typeset books with superscripts, the superscript text is a smaller font.
decrease the font size of the superscript text by the same proportion it is elevated and the top of the text box will remain the same.
else the remainder of the text line will be pushed down so the top of the superscript text does not occlude the line above.

Member Avatar for Paulxh

Thank you for responding back and explaining to me what is going on and what the super-scrip does. I have lowered the text size of the super-script by using the CSS control, 'font-size:smaller' was this what you ment?

Thanks 'paulxh'

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.