Exposants et indices

Une formule mathématique ou une composition chimique nécessite parfois le recours aux exposant et indice. Plus couramment, on peut avoir envie de mettre un peu de style à certaines abréviations qui nécéssitent des lettres en supérieures. Comment faire ? En utilisant les balises <sup> (superscript - exposant) et <sub> (subscript - indice).

Exposants

Notation typographique supérieure à droite, de moindre corps, symétrique de l'indice. Elle permet d'indiquer des notes de bas de page, des opérations exposant en mathématique ou des masses atomiques en physique. Ils peuvent être numériques ou littéraux. Dans ce dernier cas, ils sont toujours mis en italique sauf pour les grandes et petites capitales. Voyons comment faire pour les afficher sur une page web.

1. Utiliser le clavier

Utilisez simplement la touche du clavier correspondante. Elle se trouve juste en dessous de la touche Esc sur les claviers français et belges. Les puissances deux et trois correspondent au code HTML &sup2; et &sup3;. Le résultat est correct aussi bien dans Firefox qu'Internet Explorer. Ce souci de taille peut être réglé avec une feuille de style et un span.

Exemple: E=MC² — 4 x 3³ = 108

  1. <p>
  2. E=MC&sup2; — 4 x 3&sup3; = 108
  3. </p>

2. Utiliser la balise HTML

Le HTML dispose d'une balise spécifique pour les exposants: <sup>. Cette balise a pour effet de réduire la taille de la police de caractère et de la positionner à hauteur. La taille de l'exposant n'est pas aussi petite que dans le cas précédent. Il est devenu plus lisible dans notre cas. Le problème c'est qu'il créé un interlignage de quelques pixels. Il faut alors faire un choix: diminuer la taille des exposants ou augmenter l'interlignage du corps du texte. Personnellement, je trouve les chiffres plus lisibles dans cette taille.

Exemple: E=MC2 — 4 x 33 = 108

  1. <p>
  2. E=MC<sup>2</sup> — 4 x 3<sup>3</sup> = 108
  3. </p>

3. Utiliser une feuille de style

En CSS, il existe une propriété pour spécifier un exposant: vertical-align:"super". Cette propriété ne fait que positionner le chiffre exposant. Il convient de réduire sa taille pour l'adapter selon ses préférences.

Exemple: E=MC2 — 4 x 33 = 108

  1. .exposant {
  2. vertical-align: super
  3. }

C'est pas très présentable sous cette forme mais on va améliorer le tout. Avec font-size, je vais modifier la taille de la police. Ensuite, je vais positionner l'exposant au pixel près grâce à la propriété top. Sur cette page, l'interlignage a été augmenté de trois pixels. Je pourrais diminuer encore le corps de ma police mais je la trouve parfaite ainsi. Je préfère augmenter l'interlignage du corps de texte dans mon body. Et voilà le travail.

Exemple: E=MC2 — 4 x 33 = 108

  1. .exposant {
  2. vertical-align: super;
  3. font-size: 0.75em;
  4. position: relative;
  5. top: 2px
  6. }

Remarques

Reste à voir comment se comportent les différentes méthodes d'un point de vue de l'accessibilité. Il est fort probable que l'utilisation d'une balise adaptée soit plus pertinente pour les lecteurs d'écran.

Les adeptes du Georgia devront se méfier des chiffres elzéviriens. Il est préférable alors de choisir une typo plus adaptée aux formules et aux calculs mathématiques comme la Verdana.

Indices

En typographie, un indice est une notation inférieure à droite, de moindre corps (70 %), symétrique de l'exposant. Elle permet de numéroter des éléments d'ensembles dénombrables en mathématique ou des numéros atomiques en physique. Ils peuvent être numériques (v7) ou littéraux (vr). Les indices littéraux sont mis en italique.

Le code HTML pour les indices est la balise <sub>. Cette balise peut être stylisée pour réduire la taille de la fonte ou son positionnement.

  1. <p>
  2. 2<sub>n-1</sub>
  3. </p>

 

Réalisé le 29 octobre 2005.
Mis à jour le 17 juin 2007.

haut

 
S