Astuces CSS - Typographie pour les siècles

Dixit...
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 des rois. Pour mettre des chiffres romains en petites capitales, il faut d’abord les écrire en lettres minuscules ; les lettres majuscules mises en petites capitales ne seront pas réduites, elles resteront au format majuscule, donc en grandes capitales …



Donc pour les petites capitales : les siècles oui, les rois non.

 

La norme veut donc que l'on écrive le nombre du siècle en chiffres romains et petites minuscules et que l'ordinal soit en exposant.

 

Comme les éditeurs ne fournissent pas toutes ces mises en forme, il va falloir le prévoir dans le fichier de style :dans notre exemple la classe romain pour le numéro de siècle et sup pour son ordinal.

 

On va donc ajouter cela à notre css :

.romain {font-variant:small-caps;}
sup {vertical-align: text-top;font-size: 70%;line-height: 80%;}

Pourquoi une taille de police et une hauteur de ligne réduite ? Pour que l'exposant ne crée pas un espace au-dessus de la ligne : il faut qu'il rentre dans le rang. Et les chiffres romains, cela se saisit tout en minuscule, c'est à la feuille de style de mettre en forme.

 

Et le html n'est pas si facile à mettre en œuvre, car en il faut aller mettre ça en place en mode source.

 

Voilà ce que l'on entre :

 

 class="romain">xiiie siècle

 

Saisie html

 

et ce que cela doit donner :

 

Rendu

 

Capisco ?




Index |Info | Imprimer | PDF | Permalien

Technique

Installer

Sécuriser

Référencer

Fabriquer le web

adHoc

Astuces CSS

Mail, Webmail, courrier etc ...

Piwigo

Écolibre