Most, if not all, browsers produce a mediocre appearance when displaying text with superscripts and subscripts. This page shows how to cure it.
The problem is that the browser bumps up the line spacing on the fly when it encounters a superscript, such as in y=x2 or subscript, as in H2O. This gives the lines of the paragraph an uneven spacing, which is quite unattractive. Neither HTML nor CSS provides a straightforward way of dealing with this.
The uneven effect can be reduced slightly by increasing the line height to about 1.4em, as shown below. (The paragraph text is identical, to permit a fair comparison.) This reduces the percentage difference in spacing, but not the absolute difference.
The problem is that the browser bumps up the line spacing on the fly when it encounters a superscript, such as in y=x2 or subscript, as in H2O. This gives the lines of the paragraph an uneven spacing, which is quite unattractive. Neither HTML nor CSS provides a straightforward way of dealing with this.
The problem can however be solved by both increasing the line height on the paragraph to 1.4em, and reducing the line-height of the <SUB> and <SUP> elements to zero, as below.
The problem is that the browser bumps up the line spacing on the fly when it encounters a superscript, such as in y=x2 or subscript, as in H2O. This gives the lines of the paragraph an uneven spacing, which is quite unattractive. Neither HTML nor CSS provides a straightforward way of dealing with this.
This uses the following CSS rules:
.spaced { line-height: 1.4em; }
.spaced SUB, .spaced SUP { line-height: 0; }
It has been tested in Opera, Mozilla, Firefox and IE6.
If one makes only occasional use of superscripts and subscripts, one might compromise, using say 1.3em line-height for the main text and 0.2em for the superscripts and subscripts. This decreases the unevenness without increasing line spacing so much. On the other hand, if one uses them intensively, it might be wise to increase line-height to around 1.8em or 2em. This maintains a good spacing between a subscript on one line and a superscript on the line below. For example:
H2SO4
X2 + Y2 = 25