Exposants et indices

Une formule mathématique ou une composition chimique nécessite parfois le recours aux exposants et indices. Plus couramment, certaines abréviations requirent des lettres montées [¹]. Alors comment faire ? En HTML, il existe deux balises spécifiques: <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.

L’exposant au clavier

Un clavier traditionnel dispose de deux exposants: deux et trois. Cette touche se trouve juste en dessous de Esc sur les claviers français et belges. Les puissances deux et trois correspondent au code HTML &sup2; et &sup3;. Cette solution est pratique mais fortement limitée à deux variables.

4 x 3² = 36

L’exposant dans le code 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 et de la positionner à hauteur. Le rendu est identique dans la plupart des navigateurs. Si vous utilisez une petite taille de caractère [²], il faudra sensiblement augmenter la grandeur de l’exposant. Le décalage vertical ne pose pas de souci pour des lignes de textes confortablement espacés mais pose problème pour des interlignages serrés. Je vous conseille de toujours préciser l’espace entre les lignes (line-height) en CSS pour éviter les accrochages de ce type mais aussi pour aérer le texte.

Il existe trois caractères de l’exposant: &sup1;, &sup2; et &sup3;. Le rendu visuel est légèrement différent: taille plus petite et alignement vertical plus bas. Ces variantes conviennent bien pour annoter du texte mais se limite à trois variables.

Voir la documentation officielle1 balise sup
Voir la documentation officielle¹ exposant 1

Pour aller plus loin que trois, il faut utiliser les caractères Unicode.

Exposants en Unicode
Caractère Unicode Désignation
N⁰ exposant 0
N⁴ exposant 4
N⁵ exposant 5
N⁶ exposant 6
N⁷ exposant 7
N⁸ exposant 8
N⁹ exposant 9

L’exposant dans une CSS

En CSS, il existe une propriété pour aligner en hauteur: vertical-align: "super". On le dira jamais assez: les feuilles de style sont destinées à mettre en forme et le HTML donne une valeur sémantique. Autrement dit, il est préférable d’utiliser les balises appropriées en HTML et de les habiller grâce à une CSS. Pensez aux utilisateurs de synthèse vocale. Même s’il n’est pas garanti que ces robots comprennent l’abréviation Mlle, ils interprètent correctement 4² au lieu de 42.

Les indices

En typographie, un indice est une notation inférieure à droite, de moindre corps (environ 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.

H2O est le symbole chimique de l’eau balise sub
H₂O est le symbole chimique de l’eau indice 2 (caractère Unicode)

Tout comme les exposants, il existe des indices en Unicode.

Exposants en Unicode
Caractère Unicode Désignation
N₀ exposant 0
N₁ exposant 4
N₂ exposant 5
N₃ exposant 6
N₄ exposant 7
N₅ exposant 8
N₆ exposant 9
N₇ exposant 9
N₈ exposant 9
N₉ exposant 9

[¹] Voir la documentation W3C: « Les indices et les exposants »
[²] Attention à certaines typos composées de chiffres elzéviriens comme le Georgia.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s