SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Montreal, Quebec, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I create <span class="sub"> or class="sup"

    I've searched for any related issues and the search returned empty so if I missed any other post, please let me know.

    I know there is a <sub></sub> and a <sup></sup>.
    However, I would like to use a class and give it a name to use with a span.

    ex: (this I can do, no problem) instead of
    <strong>bolded text</strong>
    I would do
    <span class="loud">bolded text</span>

    so, my need is instead of
    <p>surface of 5<sup>2</sup>inches</p>
    I would like to use
    <p>surface of 5<span class="expo">2</span>inches</p>

    I know it is longer to type out but it is still a requirement.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,340
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by LouiseMcQ View Post
    However, I would like to use a class and give it a name to use with a span.
    what's stopping you from doing exactly that?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Montreal, Quebec, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I style it in the css?

    .loud { font-weight: bold;}

    .expo { what goes here? }

    I haven't found any css referring to sub or sup?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Montreal, Quebec, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    duh!! I feel so stupid. I was looking for Font properties, never dawned on me to look at vertical align. THANK YOU SO MUCH.

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity, Louise, why the requirement for such non-semantic markup?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,340
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    i wanted to ask that as well

    what the heck is wrong with using SUP???
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Montreal, Quebec, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Just out of curiosity, Louise, why the requirement for such non-semantic markup?

    cheers,

    gary

    all our formatting must be done via css.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by LouiseMcQ View Post
    all our formatting must be done via css.
    You can still style sub and sup with css as you wish - CSS doesn't care what element it is.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    <sub> and <sup> have nothing to do with formatting. Those elements indicate that the content are subscripts or superscripts. That they are usually rendered smaller and moved down or up has nothing to do with the fact that they are a subscript or superscript.

    Soecifying H<sub>2</sub>O or x<sup>2</sup> are the only correct ways to mark up that content BEFORE you start thinking about how it should look.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use <sub> and <sup> on my oldest site with a science section.
    As stated above, H<sub>2</sub>O is the correct mark-up to use, not a span.
    Remember, html was invented by a scientist, and <sub> and <sup> are tags with a specific meaning, not styles. You can style the size of the font that is within the tags with css if you want to.

  12. #12
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LouiseMcQ View Post
    ex: (this I can do, no problem) instead of
    <strong>bolded text</strong>
    I would do
    <span class="loud">bolded text</span>
    Should be <b>bolded text</b>

    <p>surface of 5<sup>2</sup>inches</p>
    I would like to use
    <p>surface of 5<span class="expo">2</span>inches</p>
    Should be <p>surface of 5<sup>2</sup> inches</p>

    Nuff said.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The OP is getting what things are mixed up with what they look like. They are trying to incorrectly mark up what things are using CSS which is NOT what CSS is for as that is for defining the appearance. What the things are (such as a subscript or superscript) should be marked up in the HTML which is where you define what the things are. If you are not going to define what things are using HTML then you will end up with

    <span class="html"><span class="head"><span class="title">title goes here... etc

    as the start of your HTML. Those tags are no different from the ones the OP is proposing to use so if they are going to try to define everything about what things are incorrectly via CSS then that's what the HTML should start with since using any tag in the HTML other than span implies what something is and you are trying to move all of that to the CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I agree with what's been said, if it's not a case of visually offsetting the text and there's a real semantic reason for using SUP and SUB then those should be used in preference, in the case of displaying measurements (as per the OP's post) there's no justification not to use the correct elements for the right job.


Tags for this Thread

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
  •