EBW Knowledge Base

Superscript and subscript

Superscript and subscript can be achieved using old-style HTML tags, or CSS, or XML entities. If you’ve created an epub from an app like InDesign, it’s likely 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>TM</span>” means the same thing as “SupermanTM”.

We’ve found that the best solution here is to use vertical-align in exactly 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. Two 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.

When not to use CSS

When super and subscripts are not 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” = “&#8308;”

(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. “A” is Unicode 65. So its XML entity is “&#65;”.

In the stylesheet, remember to set a fallback font family (e.g. “sans-serif” or “serif”) so that if your current font doesn’t have a character for the Unicode 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 to XML entities can be very time consuming, and in many cases it may not be worth the investment. Purists would quarter us for that, and they’d be right. In the great database that is the Internet and its ebooks: rubbish in, rubbish out.

Leave a Reply