0 0 Votes

CSS for <sub> and <sup>

Question by Guest | 18/11/2017 at 18:33

I know the HTML tags <sub> and <sup> to low note or high note a text in HTML.

But what is the CSS for this? Are there also certain CSS rules available to be able to put a text up or down relative to the normal text baseline? Does anyone know more about it?

ReplyPositiveNegativeDateVotes

NetLabel

Show Profile | Message
Avatar
0Best Answer
0 Votes

With CSS you can decide for yourself how high a text should be superscripted or how low subscripted. For example, you can use the following rules for this:

.suptext, .subtext {
   font-size: 80%;
   position: relative;
   line-height: 0;
   vertical-align: baseline;
}

.suptext {
   top: -0.5em;
}

.subtext {
   bottom: -0.25em;
}

For sub as well as for sup, we are reducing the font size so that the higher or lower set text appears a little bit smaller. Additionally it is important to use "position: relative", "line-height: 0" and "vertical-align: baseline" which ensures that the text will be written relative to the other text and is not interfering with other lines.

Finally we are setting sup and sub with top and bottom to their higher or lower position.

PS: When writing here directly sup and sub instead of the class .suptext and .subtext, you can directly influence the appearance of the <sub> and <sup> tags.
19/11/2017 at 15:26

ReplyPositive Negative

Anja Proggy

Show Profile | Message
Avatar
00 Votes

You can also define "super" or "sub" in your CSS as value of "vertical-align" and set the text high or low with this. Some browsers even translate the normal <sup> and <sub> tags into that CSS internally.

.suptext {
   vertical-align: super;
   font-size: 80%;
}
 
.subtext {
   vertical-align: sub;
   font-size: 80%;
}

If there are occuring any problems with the line relations, you can additionally set the line height to 0, as it is made in the previous example.
20/11/2017 at 08:07

ReplyPositive Negative

Computer Expert

Show Profile | Message
Avatar
00 Votes

In principle, I am not a friend of realizing the HTML tags sub and sup with CSS. Finally, sub and sup are tags that have a special meaning such as h1, h2 or p.

That's why I'd rather use and prefer the real tags <sub> and <sup> in the html source code and only change the look of the tags with CSS if necessary, with something like sub {font-size: ...} and so on.
20/11/2017 at 18:13

ReplyPositive Negative
Reply

Related Topics

CSS Tabulator
Tip | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.