How to do this '²' in HTML?

HTML & CSS
1

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

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

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

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 [URL=“http://www.w3.org/TR/html4/struct/text.html#edef”]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

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

Thank you all. I am keeping the <sup> since this is the proper way to do it, it seems. Readability above all.

7

You can make sup/sub not screw up your line heights by adjusting it with css.


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;
}