Formatting Superscript and Subscript

Superscript and subscript characters on a line of text can be formatted with the HTML <sup> and <sub> tags.

Examples of characters using the ^sup and _sub tags.

What you see is the default for the system you are using to view this article. It works. So why an article about it?

If you want more control over the position and font size of the superscript and subscript characters, you'll need to do something different than using the sup and sub tags.

Before I proceed, the way to use the sup and sub tags is like you would use most tags — start the tag, type the characters to affect, then place the end tag. Example and code:

The ^sup tag and the _sub tag.

The <sup>sup</sup> tag and the <sub>sub</sub> tag.

To control the position and spacing of the superscript and subscript characters, a span tag with position:relative; and text sizing CSS can be used.

Here is an example that uses a span tag, followed by the source code for it. The positions are higher and lower then the sup and sub tags would render. The text size is also different.

The sup tag and the sub tag.

The <span style="position:relative; top:-1em; font-size:60%;">sup</span> tag and the <span style="position:relative; bottom:-1em; font-size:60%;">sub</span> tag.

Now you know how: When you want more control over the rendering of superscript and subscript, use a span tag with CSS instead of the sup and sub tags.

(This content first appeared in Possibilities newsletter.)

Will Bontrager