Superscript and subscript

Superscript and subscript can be achieved using old-style HTML tags, CSS, or XML entities. If you’ve created an epub from an app like InDesign, it’s possible that your super and subscripts are all made to look so using CSS.

When to use CSS

If super or subscripts are presentational, and do not convey meaning, they should be done in CSS. E.g. Superman<span class="superscript">TM</span> means the same thing semantically as SupermanTM.

We’ve found that the best solution here is to use vertical-align in these proportions:

span.superscript {
	font-size: 70%;
	vertical-align: 15%;
}

And the same for subscript, but with a negative vertical-align value:

span.subscript {
	font-size: 70%;
	vertical-align: -15%;
}

You may see or have tried other solutions. Ones we’ve tried but don’t like, just for the record:

small, sub, sup {
  font-size: .83em;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}

(From W3.org)

This can change the height of the line that includes superscript or subscript, and looks odd. One solution we’ve seen is to increase line height throughout the document, and then set the position relative to the line. e.g.

body {
  font: 80% serif;
}
p {
  line-height: 1.5;
}
.super {
  position: relative;
  bottom: 0.5em;
  font-size: 0.8em;
}
.sub {
  position: relative;
  top: 0.3em;
  font-size: 0.8em;
}

(See HTML Dog.)

But this isn’t always suitable, because too much line height can be ugly.

It’s better to set the line-height of the super- or subscript to 0:

.super {
  line-height: 0;
}
.sub {
  line-height: 0;
}

When not to use CSS

When super and subscripts are not merely presentational, you shouldn’t use CSS. E.g. ‘2 to the power of 4’ is not the same as ‘24’.

In this case, it is better to use XML entities. E.g. superscript ‘4’ = ‘⁴’, where the superscript two is inserted in HTMl as ⁴.

(See this post.)

You can use a character map, find the Unicode for the superscript/subscript character you need, and create the entity from that. e.g. the letter ‘A’ is at Unicode code point 65. So its XML entity is A.

In your stylesheet, remember to set a generic fallback font family (e.g. ‘sans-serif’ or ‘serif’) so that if your current font doesn’t have a character for the Unicode character you are using, it can fall back to a font that does (it may be uglier, but at least it’ll work).

Here’s a list of XML and HTML character entity references.

We should note that we don’t always practice what we preach here. Changing CSS spans created by software you’re exporting from, like InDesign, to XML entities can be very time consuming, and in many cases it may not be worth the investment.