CSS Superscript and Subscript Using Relative Position

You might have noticed in my previous post that the note references in the body of the text were displayed as superscript. Now sup and sub are presentational tags and should be avoided because the presentation should be in the CSS. However, there is no immediate CSS property for superscript and subscript. Here is a solution using the relative value of the position property. Let's take fractions as an example and assume I want to write 3/17. I will use classes fnum and fden for the fraction numerator and denominator respectively.

The first step is to make the text smaller, 70% should be fine. Then we need to offset it vertically. The best way to do this is to use position:relative. For the superscript, it's easy, just push it up from the bottom by 0.5em. For the subscript it is a bit more difficult. Using the top property has no effect so instead we are going to use a negative bottom property to push it down. Here is the resulting code:

.fnum {
  font-size:70%;
  position:relative;
  bottom: 0.5em;
}
.fden {
  font-size:70%;
  position:relative;
  bottom:-0.5em;
}

This works but looks weird for the denominator because, in a fraction, the forward slash (/) character between the numerator and denominator leaves a lot of white space in front of the denominator. The solution for this is to slightly shift the left margin of the denominator: margin-left:-0.2em. Why not use the fact that we are using a relative position and add left:-0.2em instead? This is because the left property shifts the content of the display box but not the box itself and it would leave a gap on the right of the denominator. The margin-left property will shift the whole box and modify the right margin as well. Of course, none of this applies for a standard subscript such as the one used in chemical fomulae like C2H5OH. That's one more reason to use semantic HTML and CSS: you can adjust the display of each individual element depending on their meaning so that they look good in context.

Update

Following the comments below, here's a simpler solution to achieve the same thing courtesy of squidoography.com:

.fnum {
  font-size:70%;
  vertical-align: super;
}
.fden {
  font-size:70%;
  vertical-align: sub;
  margin-left:-0.1em;
}
.atomnum {
  font-size:70%;
  vertical-align: sub;
}

I also agree that in an ideal world we would use MathML to display mathematical formulae but a number of major browsers (this one in particular) don't support MathML so for web documents, we have to do with HTML and CSS.