Maintain a constant spacing between the <sup> and <sub> lines

Question

Adding a <sup> or <sub> can reset the spacing between text blocks, how can I prevent this?

Answer 1

Use CSS to override the default browser style:

 sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; } sup { bottom: 1ex; } sub { top: .5ex; } 

Note that prior to version 7, IE handled vertical-align uniquely among other browsers. Using this approach, I need an underline snapshot for IE 6 and below.

Before:

After:

A source

Answer 2

In addition to @DannyBecketts' excellent answer, there is a completely different approach, which improves print quality while improving print quality, but it currently does not work, except for a few fonts (mainly Microsoft C fonts) in modern browsers. I expect it to become a realistic option in a few years, and it can be used even now under certain conditions.

Instead of using sup you can use, say, <span class=sup> , and indicate that top-level glyphs will be used by setting

 .sup { font-feature-settings: "sups"; } 

along with font-feature-settings versions.

demo available . It can be expected that it will work in modern Windows environments, almost nowhere.

This only works for fonts that actually contain such glyphs, accessible using the OpenType features, and with an increase, but still limited browser support. But when it works, it uses glyphs developed by the typographer who created the font, so you can expect it to fit the font well (this expectation is not always true).

Thus, in addition to eliminating the line spacing problem, this also helps to avoid the problem when sup implementations use only smaller versions of normal characters in a higher vertical position (so that strokes tend to be too thin, and to avoid too much problem, implementations are usually , use moderate size reduction, so the result is too large).

Using a downloadable font via @font-face will sound like a good idea in this regard. However, among the Google fonts that I tested, only Source Sans Pro seems to contain superscript glyphs for letters, and a) using it as a hosted Google does not give them access for any reason, b) when processing with FontSquirrel glyphs but somehow distorted (for example, "h" appears higher than "t"), even if they look normal in the source .ttf file.

(The reason for using span and not sub is that for the latter you need to set the font size to 100% in order to avoid reducing the default size. It would be normal if IE did not have an unpleasant error in interpreting percentages in this context, as related to the default font size for an element in IE, not the font size of the parent element.)