CODEWITHSUNDEEP
htmlcssmarkup
Max Frai
Max Frai

Reputation: 64276

Html upper and lower indecies

any ways to put into html using css upper or lower indecies like: ¹ or ₁ (I also need latin letters).

Upvotes: 5

Views: 22918

Answers (4)

Rajat Singhal
Rajat Singhal

Reputation: 11264

HTML TAGS: try sup and sub tags,...

Demo

Other Option Using css:

.sup,
.sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative;
}

.sup {
  bottom: 1ex;
}

.sub {
  top: .5ex;
}
text <span class=sup>upper</span><span class=sub>lower</span>

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

<style>
.sub, .sup { position: relative; font-size: 80%; }
</style>
...    
<span class=sub>a</span> (subscript)
<span class=sup>a</span> (superscript)

Tune the values as desired. In particular, you may wish to use different classes for different situations, especially depending on the letter that a superscript is attached to. For example, after an uppercase letter like “A,” a superscript should be placed considerably higher.

Why classes and CSS?

Although HTML appears to have just the right markup for this, sup and sub, they have several drawbacks. Their rendering is inconsistent across browsers and often typographically poor: both the vertical placement and the size can inadequate. It might seem easy to fix this in CSS, but it isn’t, due to an odd IE bug with sizing them: it interprets percentages incorrectly. Moreover, sup and sub often create uneven line spacing.

If you intend to use sup and sub, run some tests before starting to use them extensively. Test on a few browsers and with superscripts and subscripts inside text paragraphs (so that you see the line spacing issue).

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

I'm not quite sure what you want with latin letters or if you know what latin letters are, but the unicodes you can find here http://unicodelookup.com/#latin

In case you mean roman numbers, there is no automatic translation in HTML, except for an ol

Upvotes: 0

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

Use the <sup> and <sub> tags.

Upvotes: 15

Related Questions