SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Greece
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to do this '' in HTML?

    Hello,

    I've spent some considerable time inserting the <sup>2</sup> tags to represent m in a website's HTML. The original texts given to me looked like this: m2. So I had to insert the tags myself to get the 2 up there. And also do some CSS trickery to not allow the <sup> mess up my line heights.

    However, I just discovered that the '2' can also be done simpler, with a copy/paste character! Like this:

    duh!

    So much simpler. And survives copy/pastes too!

    So which is the right way to do it? Do I go back and edit all my content to this seemingly better solution?

    Thank you

  2. #2
    Non-Member
    Join Date
    Nov 2011
    Location
    New Delhi
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello dear,

    alternate methods you can use is put that 2 in span tag and adjust the font size and line height to few pixels smaller than the other text in line and also put some padding from bottom.

    just try this!!!

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My gut feeling is that using the <sup> is the more correct way to do it. Firstly it is valid html and secondly, using a superscipted 2 character could lead to browser rendering issues, depending on how they handle such characters. But I don't know with 100% certainty 'cause I've always used a <sup>

    One way to find out for sure, test both ways in the browsers you support and see how the 2 is rendered.

  4. #4
    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)
    You may mainly disregard post #2. Since in this case the 2 has actual meaning. The markup SUP is fine in that example since it's a very simple mathematical or physics formula http://www.w3.org/TR/html4/struct/text.html#h-9.2.3

    Ideally you could use a mathematical markup language like MathML http://www.w3.org/Math/

    However, if SUP wasn't rendered there sometimes can be ambiguity if linearised. With Unicode: http://www.unicode.org/charts/PDF/U2070.pdf a lot depends upon the language of the page.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EvanGR View Post
    I just discovered that the '2' can also be done simpler, with a copy/paste character! Like this:
    One argument against that may be that those characters tend to be quite small and hard to read, which leads the Wikipedia manual of style to favor <sup> and <sub>.

    Whether or of that is a compelling argument for you is up to you to decide.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Greece
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all. I am keeping the <sup> since this is the proper way to do it, it seems. Readability above all.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You can make sup/sub not screw up your line heights by adjusting it with css.

    Code:
    sup,
    sub {
    	position:relative;
    	height:1%; /* trip haslayout, make positioning behave IE */
    	line-height:1.2em; /* should equal surrounding line-height */
    	vertical-align:middle;
    	top:-0.25em;
    }
    
    sub {
    	top:0.25em;
    }


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
  •