What's Sup Doc?
An attempt to improve the <sup> tag using CSS.
24th May 2004 · Last updated: 5th October 2016
In a recent post I needed to show a temperature value in degrees Celsius. So I used <sup> to make the letter "o" into the circle symbol for degrees. But this caused extra space above the whole line. I wasn't happy about it, so I decided to make a test to see if the <sup> tag could be replaced by CSS. Part of the reason was that the tag is classed as "presentational" and so should not be used with XHTML Strict documents.
Here is the test I came up with, and here is the code used:
<html>
<head>
<title>Sup Test</title>
<style>
p, span, sup {font-family:'trebuchet ms',verdana,arial,sans-serif;}
p {font-size:1em;}
.degree {font-size:0.7em; position:relative; top:-0.6em; left:0;}
</style>
</head>
<body>
<p>Sample line to see what happens with the line height.
<br />Sample line to see what happens with the line height.
<br />Using <span> and CSS: 100<span class="degree">o</span>C - E=MC<span class="degree">2</span>?</p>
<p>Sample line to see what happens with the line height.
<br />Sample line to see what happens with the line height.
<br />Using <sup> only: 100<sup>o</sup>C - E=MC<sup>2</sup>?</p>
</body>
</html>
The code isn't meant to be perfect but shows the differences. Using the standard <sup> tag, the superscripted characters do indeed force extra space above the line they're on. Worse, they look too large to me. So I redid the effect in CSS - it was messy, as you can see above, but possible. Using a span, I moved the text higher and made it smaller.
The question is - is it worth using CSS to avoid using the <sup> tag? Certainly CSS gives us more control, but requires markup and styles a beginner might not know how to implement. How much better it would be if the existing <sup> tag gave the desired result with no further effort.
I'd also question whether <sup> is presentational or not. It indicates the text should be higher but surely that is always the case for superscripts in areas like mathematics, temperatures and other fields. It's not like without CSS the text should be left unstyled, the same height as the surrounding characters. By marking them up as superscripts we are doing the same as marking up headers and paragraphs - detailing the content of the page. Has XHTML gone too far? Or am I missing something here? Who would want to use my code when they have a ready-made tag? I don't get it.
Then of course there's always the <sub> tag to consider too...
Comments (13)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- David:
sup [and sub] are more than just presentational---when marking up mathematics, for example, you'd want u<sub>x</sub> to have a completely different meaning from ux [the second being interpreted as u * x], and search engine 'bots would also be able to immediately see these two cases were different.
I'm curious as to why you didn't just use ° or ° for the degree symbol.
Posted on 24 May 2004 at 9:09 pm ¶ - Chris Hester:
I never thought of that! Too busy coding other things. Thanks for the tip!
Posted on 24 May 2004 at 9:22 pm ¶ - dez:
Chris
Is there any reason you did not consider vertical-align: super?
Is this because of browser support or something else that I'm missing?
Posted on 25 May 2004 at 2:07 pm ¶ - Chris Hester:
Ah damn, another solution I hadn't thought of!
From the W3C CSS2.1 Specs:
vertical-align: super
"Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)"
So I'd still need to size the text down a bit.
Oh well - you can't know everything about HTML and CSS!
Posted on 25 May 2004 at 8:45 pm ¶ - anon:
Is there any particular reason why you didn't use the ° (°) entity?
Posted on 26 June 2004 at 7:13 pm ¶ - Chris Hester:
Please read the second comment for the answer! (Your question was already asked in the first comment.)
Posted on 26 June 2004 at 8:42 pm ¶ - Ian Holmes:
When I first read the article I thought XHTML had maybe gone to far but after some thought I think it breaks down like this:
20<sup>o</sup>C is great to me and most of the other sited people who view the web however for those who can't see there is a problem as this format is an abreviattion for degrees Celsius.
So prehaps 20<abbr title="degrees Celsius"><span class="degree">o</span>C</abbr>
The same thing goes for mathematical items e.g 2<sup>2</sup> is when we see rendered in a browser if I was to read it out it I would say "two squared" so again we have an abbreviation as
I hope that makes sense? or in fact that you agree
Posted on 29 June 2004 at 4:14 pm ¶ - Chris Hester:
A great idea to use abbreviations! I would omit the span tag though. Just add the class to the abbreviation tag.
Posted on 30 June 2004 at 10:17 am ¶ - Ian Holmes:
True - except the abbr tag covers the "C" as well.
Posted on 30 June 2004 at 10:47 am ¶ - David:
That's a good point about non- or partially-sighted users. I would hope that screen-readers would say "degrees" when they come across the ° entity, in which case we should really mark things up as, e.g.,
20°<abbr title="Celcius">C</abbr>.
Creating a new class for squared, cubed, etc. doesn't scale since we never know what we're going to put in the power. Even if a screen-reader says something like, "x superscript 2 end superscript" the user will soon get used to this meaning "x to the power of 2".
Posted on 30 June 2004 at 11:43 am ¶ - David:
Sorry about the mangled mark-up. [Wot no comment preview?
]
Posted on 30 June 2004 at 11:52 am ¶ - Ian Holmes:
They would need to told what "x superscript 2 end superscript" means as somepoint the same as you were taught what visual short hand means
In terms of scaling the class this could simply be a "super" class rather than using "degree" and the abbr tag (which has no style associated with it)
There other applications of this (may be in the future) where speach may be used rather than visual output in such areas where for example taking your eye from what you are doing may not be that safe.
---
In my orginal post I used "o" rather than ° this was of course somewhat lax of me
Posted on 30 June 2004 at 12:42 pm ¶ - Maximilian Baumgart:
I think the best solution would have been using the special “degrees fahrenheit” character ℃ (Unicode hex number 2103, decimal 8451) for this should also be read correctly by screenreaders …
Posted on 25 September 2004 at 1:06 pm ¶