Skip to content Skip to sidebar Skip to footer

Html Upper And Lower Indecies

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

Solution 1:

Use the <sup> and <sub> tags.

Solution 2:

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 <spanclass=sup>upper</span><spanclass=sub>lower</span>

Solution 3:

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

Solution 4:

<style>.sub, .sup { position: relative; font-size: 80%; }
</style>
...    
<spanclass=sub>a</span> (subscript)
<spanclass=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).

Post a Comment for "Html Upper And Lower Indecies"