CSS replacement for <sup> tag

HTML & CSS
1

Hello peeps

I was thinking there must be a way to write dates using css for example if i want to display “12th” in html I would use the superscript <sup> tag to make the th appear halfway on top of 12. I dont want to use the <sup> tag cause i want to keep all the styling seperate in the CSS file. Or maybe I’m wrong the best way could be using <sup> tag.

So people shed some light and knowledge on this small problem.

thanks (:

Peace

2

Hi, I’m not quite sure what you mean, of course you can write dates in CSS (well you can style them in CSS, and write it in HTML). What styling issues are you having? A code segment showing this (HTML and CSS) showing the issue and what you would like to achieve will be appreciated.

3

If you want to style those two letters with CSS, you will certainly need some kind of HTML element. The best choice if you’re hoping to avoid semantic pollution would be a span:

12<span class="ordinal">th</span>

You can then apply a superscript effect using CSS:

.ordinal {
  font-size: 50&#37;;
  position: relative;
  top: -0.5em;
}
4

Hello Ryan

I suck at describing stuff :smiley:

I should have used some code



<table class="events" summary="Details of upcoming events">
   <caption>Future Events</caption>
      <tr>
         <th>Day</th>
         <th>Date</th>
         <th>Time</th>
         <th>Topic</th>
      </tr>

       <tr>
         <td>Wednesday</td>
         <td>11<sup>th</sup> November 2008</td>
         <td>10:30am to 12:00pm</td>
         <td>Religion and Belief</td>
    </tr>
</table>

so basically is there a way to avoid using the <sup> tag and use css instead and what method is best.

5

Hi Kevin

thanks that works with some adjusments to the font size.

but what method is the best or recommended and is there a shorter way?

6

Unfortunately there isn’t really a better way, all involve an extra element wrapping around those letters, and the method Kevin gave is perfectly fine, however you might wnat to try text resizing to see if it doesn’t break.

7

That is actually how I would do it. The <sup> tag should be used when the superscript is semantically significant (e.g. in the case of a footnote marker).

If you wanted to reduce the amount of code you had to type, you could conceivably write a bit of JavaScript that scanned your document for ordinals like “12th” and automatically added the spans to them. Your styling would then become JavaScript-dependant, however.

8

Ok so its better to use CSS becuase I dont want to use <sup> tag incorrectly.

The javascript idea sounds cool but I dont know how to code in javascript :smiley:

thanks kevin

9

thanks for your help.

had a look at your site needs a sexy CSS make over :smiley:

10

The best and recommended (and shorter) way is to use <sup>. You are then marking up the span of characters as being, semantically, a superscript. It will render correctly in all browsers (even Lynx will show it as something like 11^th November 2008).

If you still prefer reinventing the wheel,

11<span class="ordinal">th</span> November 2008

.ordinal {
  font-size:smaller;
  vertical-align:super;
}

Kevin’s suggestion of using relative positioning works, too, but the vertical-align property is intended precisely for this sort of thing. I’ve tested it in IE5.5 and up, plus all the modern browsers and it renders correctly.

11

I’ve been meaning to rewrite my site completely, however time is a bit of an issue with real life issues of being a kid/adult. If sitepoint stopped having threads for a day or two I could do it :P.

However sitepoint is my first priority. I’d much rather help people on here :).

12