Article : Abréviations sur le web, balisage sémantique et exemples de code

Les règles typographiques de la langue française sont merveilleuses, riches et alambiquées à la fois. Surtout appliquées au Web.

Par exemple, la règle générale pour les abréviations  – même s’il existe maintes exceptions – est l’emploi de la lettre initiale suivie par les lettres significatives de la fin de mot. Ces lettres significatives sont affichées en bas-de-casse et mises en supérieur.

L’ignorance de cette règle conduit à des "variations" plus ou moins problématiques, telles que :

• Mme [absence de lettres en supérieur] pour Madame ;
• M° [capitale M suivi de ° et non pas la lettre ‘o’] pour le Métro ;
• 1è [le chiffre ‘un’ suivi de <sup>&egrave;</sup>] en tant qu’abréviation pour première (d’autres variations constatées sont 1èr ou 1ère) au lieu de 1<sup>re</sup>.

Par ailleurs, l'emploi (fréquent) de l'élément <sup> engendre deux inconvénients :

• premièrement, cet élément correspond bien à la présentation voulue, mais n’apporte pas de sens ;
• deuxièmement, nous n’avons pas accès au mot ainsi raccourci sous sa forme non-abrégée, ce qui pourrait utile pour les moteurs de recherche et les dispositifs d’accessibilité.

Or, il existe un élément spécifique pour traiter le cas des abréviations : <abbr>.

Note : <abbr> a remplacé l'élément obsolète <acronym> dans les spécifications HTML5

Utilisons donc l'élément <abbr>, accompagné de tout autre élément ou classe qui nous facilite la création de sens. Par exemple :

<abbr class="superior">M<span>ada</span>me</abbr>

En l’absence des feuilles de style, ceci affichera la forme non-abrégée : "Madame".

En présence d’une feuille de style adéquate, le contenu peut être stylé pour un écran comme suit :

.superior {
	display: inline-block;
	font-size: 80%;
	vertical-align: 60%;
	line-height: 0.5em;
}
.superior:first-letter {
	font-size: 125%;
	vertical-align: -60%;
}
abbr span {
	position: absolute;
	left: -7000px;
	overflow: hidden;
}

Aparté : les valeurs pour font-size et vertical-align ont été choisies pour leur harmonie ainsi que leur correspondance avec les pratiques habituelles de la typographie, tout en respectant un souci de lisibilité à des tailles réduites. Bien sûr, ici on explore une technique, et je ne cherche pas à être normatif en ce qui concerne tous les aspects des styles présentés ici. Vous êtes libre d’adapter ces valeurs à vos besoins spécifiques. Le nom de classe .superior a été choisi en rappel de la balise <sup>.

Explications

• La classe .superior contient le mot abrégé, et est nécessaire pour constituer une ligne de base commune au texte de l’abréviation. Ensuite nous réduisons la force du corps du texte dans ce bloc à 80% de la hauteur courante, une valeur qui, sur écran, convient pour les valeurs supérieures.
• La propriété vertical-align déplace le texte vers une position supérieure, en tenant compte non seulement du changement de force du texte en question, mais aussi de la distance nécessaire.
• La propriété line-height est nécessaire afin d’empêcher des changements à l’interligne causé par les lettres mises en supérieures. La valeur de 0.5em réduit l’interligne de notre bloc de manière à ne pas influencer l’interligne ailleurs dans le bloc parent.
• Suivant l’application de la règle .superior, le texte de notre bloc est maintenant mise en supérieur et il flotte au-dessus de la ligne de base. Il convient donc de ramener la première lettre vers le bas.
• Le sélecteur :first-letter est supporté par l’ensemble des navigateurs actuels, et même des versions antérieures.
• L’augmentation à 125% pour la propriété font-size restaure la taille originale suivant la réduction à 80%.
• La valeur négative pour vertical-align tire la première lettre vers le bas, la recollant sur la ligne de base.
• Enfin, la règle  abbr span {} cache le texte ne faisant pas partie de l’abréviation, empêchant son affichage à l’écran.

J’ai bien cherché une balise plus approprié que <span> pour ce cas — parmi eux <b> et <i>, désormais dévolus aux changements purement stylistiques — mais j’ai décidé en fin de compte qu’il n’y avait pas un meilleur élément.

Extension de la technique pour d’autres cas

Les abréviations pour boulevard ou faubourg suivent la même règle, sauf il n’y a pas l’utilisation du texte mise en supérieure. Dans ce cas, la même règle CSS peut toujours s’appliquer.

21 <abbr>b<span>oulevar</span>d</abbr> des Champs-Élysées
105 <abbr>f<span>aubour</span>g</abbr> Saint-Antoine

En n’utilisant pas la classe .superior sur la balise <abbr>, seule la règle pour abbr span { } s’applique, et ainsi le texte est caché à l’écran.

Utilisation avec les microformats

Pour enrichir sémantiquement le contenu j’ai voulu tester comment intégrer cette proposition avec le microformat hCard dans le but d’apporter le plus de sens possible. Prenons une hCard ‘basique’...

<div class="vcard" lang="fr">
  <div class="fn n">
    <span class="honorific-prefix">Mme</span>
    <span class="given-name">Jeanne</span>
    <span class="additional-name">Antoinette</span>
    <span class="family-name">Poisson</span>
  </div><!-- /.fn -->
</div><!-- /.vcard -->

Aparté : le format hCard ne semble pas avoir de champ/attributs pour des titres de noblesse – dans ce cas, Marquise de Pompadour. L’attribut honorific-suffix ne semble pas approprié... Plus de recherche à faire, je pense...

En tout cas, utilisant la technique développée précédemment donne ceci :

<div class="vcard" lang="fr">
  <div class="fn n">
    <span class="honorific-prefix">M<span>ada</span>me</span>
    <span class="given-name">Jeanne</span>
    <span class="additional-name">Antoinette</span>
    <span class="family-name">Poisson</span>
  </div><!-- /.fn -->
</div><!-- /.vcard -->

Les règles CSS doivent être adaptées pour devenir :

.honorific-prefix {
  display: inline-block;
  font-size: 80%;
  vertical-align: 60%;
  line-height: 0.5em;
}
.honorific-prefix:first-letter {
  font-size: 125%;
  vertical-align: -60%;
}
.honorific-prefix span {
  position: absolute;
  left: -7000px;
  overflow: hidden;
}

Tout fonctionne correctement. Rajoutons l’adresse...

<div class="vcard" lang="fr">
  <div class="fn n">
    <span class="honorific-prefix">M<span>ada</span>me</span>
    <span class="given-name">Jeanne</span>
    <span class="additional-name">Antoinette</span>
    <span class="family-name">Poisson</span>
  </div><!-- /.fn -->
  <div class="adr">
    <div class="extended-address">Château d’Évreux</div>
    <div class="street-address">55 rue du Faubourg-Saint-Honoré</div>
    <span class="postal-code">75008</span>
    <span class="locality">Paris</span>
    <div class="country-name">France</div>
  </div><!-- /.adr -->
</div><!-- /.vcard -->

Ainsi, si je veux utiliser une abréviation pour Faubourg je peux faire comme suit :

<div class="vcard" lang="fr">
  <div class="fn n">
    <span class="honorific-prefix">M<span>ada</span>me</span>
    <span class="given-name">Jeanne</span>
    <span class="additional-name">Antoinette</span>
    <span class="family-name">Poisson</span>
  </div><!-- /.fn -->
  <div class="adr">
    <div class="extended-address">Château d’Évreux</div>
    <div class="street-address">55 rue du
    <abbr>F<span>aubour</span>g</abbr>-Saint-Honoré</div>
    <span class="postal-code">75008</span>
    <span class="locality">Paris</span>
    <div class="country-name">France</div>
  </div><!-- /.adr -->
</div><!-- /.vcard -->

Comme la règle pour Faubourg n’emploie pas de texte mise en supérieure, je n’ai besoin que de cibler la balise <span>, seulement les autres, en ajoutant la règle .street-address abbr span.

La version révisée :

.honorific-prefix {
  display: inline-block;
  font-size: 80%;
  vertical-align: 60%;
  line-height: 0.5em;
}
.honorific-prefix:first-letter {
  font-size: 125%;
  vertical-align: -60%;
}
.street-address abbr span, .honorific-prefix span {
  position: absolute;
  left: -7000px;
  overflow: hidden;
}

Si on veut la totale, on peut aussi ajouter les attributs de titre. Ce qui donne une carte complétée comme suit :

<div class="vcard" lang="fr">
  <div class="fn n">
    <span class="honorific-prefix" title="Madame">M<span>ada</span>me</span>
    <span class="given-name">Jeanne</span>
    <span class="additional-name">Antoinette</span>
    <span class="family-name">Poisson</span>
  </div><!-- /.fn -->
  <div class="adr">
    <div class="extended-address">Château d’Évreux</div>
    <div class="street-address">55 rue du<abbr title="Faubourg">F<span>aubour</span>g</abbr>-Saint-Honoré</div>
    <span class="postal-code">75008</span>
    <span class="locality">Paris</span>
    <div class="country-name">France</div>
  </div><!-- /.adr -->
</div><!-- /.vcard -->

L’emploi de l’anglais pour les noms de classes

Même si le texte affiché est français, et attribué en tant que tel, par convention les noms des balises, classes, propriétés, règles et valeurs en HTML, CSS, et pour les microformats, proviennent de l’anglais. En suivant cette manière de faire, il y a une meilleure chance à ce que les moteurs de recherche et autres robots ‘comprennent’ mieux nos classes et attributs.

Limitations

• Cette technique ne convient pas pour les abréviations qui débutent par plus d’une lettre au départ.
• Une propriété line-height explicite est nécessaire sur le bloc parent, et donc le texte qu’il contient, afin d’assurer l’alignement sur la ligne de base.
• La dépendance sur quelques chiffres ou valeurs ‘magiques’, c’est-à-dire, qu’ils fonctionne ici mais n’ont pas une mode de calcul qui assure leur fiabilité avec d’autres polices...