Nombres romains web

Les chiffres romains sont encore régulièrement utilisés en typographie contemporaine pour noter :

• les siècles et millènaires :
  le xxi^e siècle, le III^e millénaire ;
• les années du calendrier républicain :
  15 vendémiaire an II ;
• le numéro d’ordre des noms de souverains :
  Louis XVI, Napoléon I^er ;
• le numéro d’ordre des régimes politiques :
  la V^e République ;
• les actes d’une pièce de théâtre, les suites de films ou de jeux :
  Acte III, GTA IV ;
• etc.

Ça n’a l’air de rien, mais les afficher correctement sur le Web réclame pas mal d’astuce…

Espace insécable

Pour commencer, faites-moi au moins le plaisir de les lier d’une espace insécable  , pour éviter les retours à la ligne intempestifs qui entravent la compréhension :

L'an II
Louis XVI
Acte III
La Ve République

Expliciter le nombre

Savez-vous lire MMXVII ? et MI^e ? Pour éviter toute incompréhension il est recommandé l’expliciter les nombres romains avec la balise <abbr> (et non pas <dfn> comme autrefois conseillé par ailleurs) :

<abbr title="2017">MMXVII</abbr>
Acte <abbr title="3">III</abbr>
<abbr title="mille et unième">MI<sup>e<sup></abbr>

Il faut cependant garder à l’esprit que, par défaut, les abréviations ne sont pas vocalisées par nombre de lecteurs d’écran.

L’ordinal en exposant

Autre détail important, l’abréviation des ordinaux. L’erreur très répandue consiste à abréger plus lourdement que nécessaire : 1ère, 2de, 3ième, 21ième, etc. alors que l’abréviation requise est simplissime : 1re, 2e, 3e, 21e… Les nombres romains suivent la même règle : Ire, IIe, IIIe, XXIe…

L’ordinal se note en exposant. En HTML, cela s’obtient avec la balise HTML <sup> :

I<sup>e</sup>, II<sup>e</sup>, III<sup>e</sup>, XXI<sup>e</sup>…

avec ajustement CSS afin de préserver l’interlignage harmonieux du texte [*] :

sup {
    position: relative;
    font-size: 80%;
    line-height: 0;
    vertical-align: baseline;
}

Ce qui permet d’afficher correctement :

I^e, II^e, III^e, XXI^e…

Siècles en petites capitales

Exception, les siècles s’écrivent en chiffres romains, petites capitales ; à ne pas confondre avec les chiffres romains en grandes capitales, qui ne sont utilisées que pour les noms de règne (royaux, impériaux ou républicains) : ainsi nous sommes au xxi^e siècle, sous la V^e République.

Nous ne disposons pas de caractères en petites capitales pour écrire sur le Web, mais d’une règle CSS font-variant: small-caps; qui a ici le défaut de conserver les majuscules, qu’elle ne réduit pas.

Pour éviter cela, l’habitude est d’écrire le nombre romain en minuscules avant de lui appliquer ce style : <span style="font-variant: small-caps;">xxi</span><sup>e</sup> siècle pour afficher xxi^e siècle.

Plus simple, l’astuce pour obtenir des petites capitales consiste à passer d’abord en minuscule via CSS [*], comme suit :

.sc {
    text-transform: lowercase;
    font-variant: small-caps;
}

Cela garantit d’obtenir des petites capitales quelque soit la casse d’origine : <span class="sc">xXi</span><sup>e</sup> siècle affiche xXi^e siècle.

Automatiser ?

Vu la complexité, on ne peut attendre tel soin des rédacteurices. Moi-même j’y renonce préférant user de chiffres arabes. La tentation est donc forte, pour les dev typomaniaques, d’automatiser cela via un script. Mais je n’en connais pas qui gère cela correctement, sans oubli ni effet de bord. Effectivement, comment deviner si « mi » est le 1001e siècle, écrit en minuscules avant transformation en petites capitales, ou la note de musique ? Si « CD » est le nombre romain 400 ou un Compact Disc ?

Restitution vocale

C’est là que tout se complique… Selon les synthèses vocales, xxi^e sera lu en épelant chaque lettre « X X I E », ou « vingt-et-unième » ou encore « vingt-et-un E »… Difficile de deviner et impossible à anticiper à tous coups. Voir les témoignages qui émaillent cette intéressante discussion sur les chiffres romains dans le forum d’Alsacréations.

Si bien que la meilleure façon d’éviter que « Louis XVI » soit lu « Louis Croix V Bâton » au lieu de « Louis seize » reste encore de l’écrire « Louis 16 ». Cela facilitera la compréhension pour tout le monde. En témoigne ce fameux sketch des Inconnus…

Tout ça pour ça…

Pour résumer, sur le Web il faut écrire :

Nous sommes au <abbr title="vint-et-unième"><span class="sc">xxi</span><sup>e</sup></abbr>&nbsp;siècle,
sous la <abbr title="cinquième">V<sup>e</sup></abbr>&nbsp;République.

avec le code CSS qui va bien (tel que vu plus haut), pour obtenir cet affichage typographiquement correct :

Tout ça pour ça… Compliqués à bien écrire, à bien styler, mal restitués : mieux vaut s’en passer et opter pour des chiffres indo-européens, dits « chiffres arabes » :