CSS pour <sub> et <sup>

Avec CSS, vous pouvez décider vous-même à quelle hauteur un texte doit être placé haut ou bas.

Par exemple, vous pouvez utiliser les règles suivantes pour cela:

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

.suptext {
   top: -0.5em;
}

.subtext {
   bottom: -0.25em;
}

Pour sub comme pour sup, nous réduisons la taille de la police afin que le texte supérieur ou inférieur apparaisse un peu plus petit. De plus, il est important d'utiliser "position: relative", "line-height: 0" et "vertical-align: baseline" qui garantit que le texte sera écrit par rapport à l'autre texte et n'interférera pas avec les autres lignes.

Enfin, nous réglons sup et sub avec top et bottom à leur position supérieure ou inférieure.

PS: En écrivant ici directement sup et sub au lieu des classes .suptext et .subtext, vous pouvez directement influencer l'apparence des balises <sub> et <sup>.
21/10/2023 à 20:28

Vous pouvez également définir "super" ou "sub" dans votre CSS comme valeur de "vertical-align" et définir le texte haut ou bas avec cela.

Certains navigateurs traduisent même les balises <sup> et <sub> normales dans ce CSS en interne.

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

Si des problèmes surviennent avec les relations entre les lignes, vous pouvez également définir la hauteur de la ligne (line-height) sur 0, comme dans l'exemple précédent.
23/10/2023 à 20:40

Généralement, je ne suis pas un ami de la réalisation des balises HTML sub et sup avec CSS. Enfin, sub et sup sont des balises qui ont une signification particulière tel que h1, h2 ou p.

C'est pourquoi je préfère utiliser et préférer les vraies balises <sub> et <sup> dans le code source HTML et ne modifier l'apparence des balises avec CSS que si nécessaire, avec quelque chose comme sub {font-size: ...} et ainsi de suite.
27/10/2023 à 21:07