Taking control of sub and sup

I came across a situation today where I needed to use a few subscript characters on a web page.  There's a handy <sub> html tag for that which works nicely, and it's even integrated into the TinyMCE editor for those of you who use that.  It's useful for chemical symbols and suchlike.  I was using it in the context of climate change, where the article was talking about the amount of CO₂ in the atmosphere.  Unfortunately, when I viewed the page, the line-height had gone completely up the creek, as you'll probably see in this paragraph - the subscript bit of the CO₂ has moved the line underneath it further down the page, which is very unsightly and not at all what we want.

Span replacement

Now, one solution would be to create your own CSS class, and put the subscript character in a styled <span> instead, so that you can choose exactly how the character is displayed.  You'd end up with something a bit like this:

.subscript {font-size: 0.8em; position: relative; bottom: -4px;}

<p>Let's talk about CO<span class="subscript">2</span></p>

That has the effect of styling that character to be smaller relative to the rest of the text in the paragraph, and shifted down 4 pixels.  That's fine, but we can do better than that.

Styling the sub

In fact, using the <sub> html tag is arguably the best option here, despite the example above.  Not only is it more concise in its html markup, but it's more semantically meaningful too.  The below example is far easier to understand by looking at the code than the example above.  And thanks to a forum post I found, it's actually pretty easy to get the <sub> and <sup> objects to behave nicely and not interfere with the line height:

sub {vertical-align: baseline; font-size: 0.8em; position: relative; bottom: -0.3em;}

<p>Let's talk about CO₂</p>

As you can see, it's a lot more elegant, and translates to the <sup> tag too if you want to create superscript text.  So, next time you're writing an article about CO₂, H₂O or need to make citations¹, go wild with the <sub> and <sup> tags and include the above CSS and you'll be able to keep a lovely consistent line height too.

Share this page:

This post was originally published on www.matthewdawkins.co.uk.
Copyright © Matthew Dawkins 2009

About Matthew Dawkins

Matthew is a web designer based in Somerset, UK. He has a passion for CSS and design, and runs his own web design business.