SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What CSS replaces the <sup> tag?

    We're having troubles at work recreating the <sup> tag in CSS so it is all XHTML-compliant.

    Has anyone successfully created a style for this? We've tried "vertical-align:super" and "line-height:0.75em" - both unsuccessful!!

    Any help on this greatly appreciated!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    <p>E = mc<span style="vertical-align: super; font-size: 60%;">2</span></p>

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    xhtmlcoder's suggestion works, but it does not reduce the font size the way SUP does

    you can fix that by saying

    <p>E = mc<span style="vertical-align: super;"><small>2</small></span></p>

    but then again, i suppose if you object to the idea of SUP, you will also object to SMALL



    by the way, both SUP and SMALL are valid in xhtml 1.0 strict

    bigsi, what level of xhtml compliance are you shooting for?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with that is it doesn't look right when content is in a table. Also, even with that method, the "super" character looks like its on a new line.

    Any other methods?
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  5. #5
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't realise it was valid code in XHTML - I just assumed it was redundant seeing as it is a stylising tag. If it's valid then we'll continue using <sup> instead!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    p.s. see also What is the intended usage of SUB and SUP in HTML?

    in particular, note that the example E=mc˛ demonstrates that SUP is not stylistic only, but rather, carries semantic meaning, unlike SPAN, which is purely stylistic

    remember, when you separate style from content, the content should be able to stand on its own, and E=mc2 is most definitely not the same as E=mc˛

    therefore i favour SUP for this particular example

    in fact, i can't think of any examples of superscripts where i would favour SPAN over SUP

    rudy
    xhtml strict pedant

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    other methods? well, if you want superscripts 1, 2, or 3, you can always use the html entities &sup1; &sup2; &sup3;

    also, if you want to eliminate the additional line spacing effect that a superscript produces, you can do this:

    here's a footnote<small><sup>[47]</sup></small>
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that clears all that up then rudy - ta very much! I never thought of it as when styles are removed, I'll bear that in mind for the future.

    Back to <sup> then

    While we're talking about XHTML standards, are there any resources that outline all the HTML tags that are permitted online? It would be a useful bookmark that I would probably print out for reference!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    yeah, separation of style and content, that's an important thing to keep in mind -- i mean, that's why we're using css, right?

    so it helps to always see what the content looks like without the style

    that's why i keep a copy of netscape gold 3 around

    remember netscape gold 3? it was the cadillac of all browsers, in its day

    came on a single floppy, too, if i recall

    if you don't have it, you can get it at http://browsers.evolt.org

    very handy to keep you honest as far as the separation of style and content goes

    as for your question about a resource which lists valid tags, i personally just use http://www.w3.org/TR/html4/ which covers xhtml 1.0 as well
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    <p>E = mc<span style="vertical-align: super;"><small>2</small></span></p>
    Yeah, <sup> looks a lot better than that.

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Personally I would probably have used MathML if I wanted to create a representation for such a mathematical formula though I couldn't think of any decent dummy-text at the time.

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    good idea

    what browsers support MathML?

    also, can you give an example of something a little more complicated than a superscript?

    i.e. post an actual working page somewhere

    i'd love the view the source and see how MathML works

    thanks
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    what browsers support MathML?
    Mozilla supports MathML, but I'm not sure if that's native or if you have to download an extension (like the SVG support).

    And for more info, here are some MathML examples: http://www.zvon.org/xxl/MathML/Output/

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,263
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    thanks, vinnie, that sure helps, and i can see now why MathML is not in very widespread use

    much easier to use gifs, as that site does, to demonstrate its own examples:
    http://www.zvon.org/xxl/MathML/Standard/image/f4098.gif
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •