23 replies [Last post]
Karls
Offline
newbie
Last seen: 11 years 4 days ago
Timezone: GMT-5
Joined: 2003-11-24
Posts: 2
Points: 0

How can I use CSS to make text superscript, or subscript?

Karls

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 38 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

Subscript and Superscript

Hi Karls,
You could define styles for a span to look like superscript or subscript.

 .superscript{font-size:xx-small; vertical-align:top;} 
.subscript{font-size:xx-small; vertical-align:bottom;} 

<span class="subscript">


Hope that helps[/code]

Karls
Offline
newbie
Last seen: 11 years 4 days ago
Timezone: GMT-5
Joined: 2003-11-24
Posts: 2
Points: 0

Subscript and Superscript

Cool,

Will try it out now, thanks.

Karl Smile

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 7 years 24 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Subscript and Superscript

There's also the <sup> tag, and vertical-align:super. So many options, so little time... :roll:

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 2 years 31 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Subscript and Superscript

Sven wrote:
There's also the <sup> tag, and vertical-align:super. So many options, so little time... :roll:

hello there, ladies and gentlemen.

is there a general concensus on which technique is best used for a superscript? w/out trying any yet, my guess is that Sven's CSS suggestion is intended to work for any font size at that given section where the superscript rule is applied (in other words, if the font is large, and {vertical-align: super; } is used, the superscript would be smaller than the neighboring text). am i correct?

and my guess is that Tony's example is more "guaranteed" to work in any situation.

now, what about the <sup>? is that an html tag? if so, can we count on it being deprecated?

(can you tell i didn't do any research before posting?) I hope that my inquiry might help the next person as well.

Anonymous
Anonymous's picture
Guru

Subscript and Superscript

jsabarese wrote:
now, what about the <sup>? is that an html tag? if so, can we count on it being deprecated?
I was going to say that it is a valid non-depricated tag but it is presentational kinda like the bold and italics tags.

Personally, I don't see anything wrong with using the <sup> and <sub> tags and adjusting them with css...they do seem semantic to me. :oops:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Subscript and Superscript

Triumph wrote:
Uh, maybe I'm wrong. They are listed as being presentational and "should be avoided". :oops:
http://www.htmldog.com/reference/htmltags/presentational/

Dunno if I agree with that. On the page you've linked to, there's another link to the 'bad tags' page with explanations as to why they're bad but <sup> and <sub> don't appear there. For the tags they have given an explanation for, it's usually that there's an alternative (e.g. <strong> for < b > and <em> for < i >), but there's no alernative for <sup> and <sub> and it seems to me that to get a similar presentation using CSS is over-engineering it.
And superscript & subscript aren't just small numbers - they actually have their own meaning which it seems to me you couldn't adequately convey using just CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 10 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Subscript and Superscript

Wow talk about trawling up old threads!

The sub and sup tags are valid and not deprecated and do indeed convey their own semantic meaning, to just use CSS to convey that styling would be just that styling and would have no meaning as such.

Aproach it the same way as you might for the use of an em tg where you can use CSS to style the presentation of the tag to your requirements but you still make a choice to use that tag with it's conveyed meaning in the actual HTML markup, a page rendered sans styling still conveys the intention of that section of the markup through the use of the em tag or in this case sub and sup tags.

As Tyssen says they are not just small numbers.

On a side note we ought to be careful with the somewhat unfounded beliefe that em/strong are replacements for i/b as this is not strictly true I and B still have a purpose and are not deprecated.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Subscript and Superscript

Tyssen wrote:
Triumph wrote:
Uh, maybe I'm wrong. They are listed as being presentational and "should be avoided". :oops:
http://www.htmldog.com/reference/htmltags/presentational/

Dunno if I agree with that.
I don't know if I do either...I edited my post as you were replying. Wink

Sorry about any confusion. I do think the tags have a place and are useful and semantic.

Hugo wrote:
Wow talk about trawling up old threads!
Yeah, I didn't notice the nearly 2 years worth of gap between the post before mine. :oops:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Subscript and Superscript

Huh? Who's this Sven?

His last post was 6 months ago, and before that, his last post was Jan 04.

Strange . . . .

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 10 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Subscript and Superscript

TPH judging by Svens joined date and the forum inception date I would think that Sven was one of the first and original members and possibly a friend of Tony's, given that they both hail from the same town and that the joined dates are the same Wink.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Subscript and Superscript

I've never seen Tony and Sven in the same room at the same time...maybe they are the same person. Sven is like Clark Kent to Tony's Superman. I know it!!! Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 10 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Subscript and Superscript

Are yes Tony was employing the multiple identity trick for new forums

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 38 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

Subscript and Superscript

Actually Sven is a friend of mine whom I used to work with at about the time I started this forum.
He later found another job which involved less or no web work and has since had his first child.
As you can understand peoples lives and priorities change.

He wasn't one of my multiple identities, used only for testing :roll:

Back to the topic personally I think using the tags gives semantic meaning to the content.
So perhaps a combination of the sup tags and css to style it would be the way to go.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 10 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Subscript and Superscript

Sorry didn't mean to infer any multiple personality disorder Smile

Quote:
So perhaps a combination of the sup tags and css to style it would be the way to go


That would be my take on it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Subscript and Superscript

Of course - you use <h1> tags for headings, and <div> tags to divide the page up - why not use the <sup> tag to imply superscript text?

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Subscript and Superscript

So, I wasn't wrong? Smile

I guess I just doubted myself after reading that article.

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 8 years 14 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

Subscript and Superscript

Regarding the sub/sup/css thing:

I sometimes get annoyed by the <sup> tags way of making extra linespace between the tag and the overlying row. I thought about using styled spans instead of <sup>, but then i styled <sup> like this:

sup {
	vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;
	}

Preserves the line-height, gives me more typographic control, and keeps everything semantic. Seems to work cross-browser.

Validator.w3.org compels you! Validator.w3.org compels you!

Anonymous
Anonymous's picture
Guru

Subscript and Superscript

s4ndp4pper wrote:
Regarding the sub/sup/css thing:

I sometimes get annoyed by the <sup> tags way of making extra linespace between the tag and the overlying row. I thought about using styled spans instead of <sup>, but then i styled <sup> like this:

sup {
	vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;
	}

Preserves the line-height, gives me more typographic control, and keeps everything semantic. Seems to work cross-browser.Nice. I am using it from now on. Smile

drifter1
Offline
newbie
sydney
Last seen: 6 years 16 weeks ago
sydney
Joined: 2008-08-02
Posts: 1
Points: 0

superscript

hi the css should look like this i think

font-size: xx-small;
vertical-align: text-top;

the.jim
Offline
newbie
Last seen: 6 years 9 weeks ago
Joined: 2008-09-24
Posts: 1
Points: 0

s4ndp4pper wrote:Regarding

s4ndp4pper wrote:

Regarding the sub/sup/css thing:

sup {
	vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;
	}

I use a fixed-width font in a few places. and both screw up the width so I added

margin-right: 0.125em;

It may not be mathematically perfect but works for me. Thanks for the code.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm, I'm going to break

Hmmm, I'm going to break etiquette and post this in both forums:

sup makes sense for math and chemistry and citations, but is it the right tag for ordinals? Esp, say, Dutch ordinals? I'm currently using them inside abbr tags but not sure if there's a better tag for this.

I'm no expert, but I fake one on teh Internets

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 1 year 48 weeks ago
Adelaide, Oz
Timezone: GMT+10.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well, despite the fact

Smile Well, despite the fact drifter1 dragged up a 3 year old thread, I'll post this site I found last year when I had the need and in case it helps someone else.

Five versions of superscripted endnotes/footnotes with demos, code, advantages and disadvantages of each. Enjoy! Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Oh wow Smee, thanks! Looks

Oh wow Smee, thanks! Looks like a nice site... might end up bookmarking it.

I'm no expert, but I fake one on teh Internets