Niveau Niveau confirmé

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

Articlehtml

Publié par le (38048 lectures)

sémantique abréviation abbr

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 ;
  • [capitale M suivi de ° et non pas la lettre ‘o’] pour le Métro ;
  • [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...

Commentaires

Hello,
Merci pour cet article.

Différents points cependant :

- pourquoi finir l'article par du microformat sans aucun abbr dedans alors que le titre de l'article semble indiquer que abbr est le sujet principal ? (d'ailleurs un span[title] c'est étrange entre nous…)

- il me semblait que sectionner un mot avec des éléments HTML était plutôt mauvais pour les lecteurs d'écran qui vont lire "M" - "Ada" - "Me" par exemple… Qu'en est-il ?

- je n'ai pas compris l'intérêt au final, pourquoi ne pas simplement utiliser : <abbr title="Madame">Mme</abbr> ? Ton article semble indiquer que "ada" sera supprimé visuellement du mot si CSS est activé, et présent s'il est désactivé, mais je ne vois pas l'intérêt.

Bonne continuation.

Bonsoir,
Pour ma part j'utiliserai la syntaxe suivante :
<abbr title="Mademoiselle">M<sup>lle</sup></abbr>

Je pense que la balise <sup> prend ici tout son sens.
Il me semble que dans la langue française nous écrivons Mlle avec "lle" en exposant. Il ne s'agit pas ici d'un style mais belle est bien d'une convention d'écriture.
Donc le boulot doit bien se trouver du coté HTML et non CSS.

Concernant les lecteurs d'écran, je pense qu'il ne faut pas les sous estimer, nous ne sommes plus en dans les années 80. De nos jours un lecteur d’écran qui se respecte traduira tout seul Mme en Madame même si celui contient la balise <sup>.

En tout cas ton article a le mérite de montrer la complexité de la sémantique même sur une abréviation de 2 lettres...

Bonsoir,

[quote]L’ignorance de cette règle conduit à des "variations" plus ou moins problématiques[/quote]
En quoi ces variations sont-elles problématiques ?

Tu donnes une explication pour <sup>: tu le compares à <b> <i> & Co, qui serait au même titre des éléments de présentation faciles dépréciés. ARgument qui se tient et avec lequel je suis plutôt d'accord, bien que je n'aie jamais vu nulle part sa sévère remise en cause comme on a pu le voir pour les autres.

Par contre, alors, pourquoi écrire "Mme" normalement, ou bien <abbr title="Madame">Mme</abbr> serait problématique ?

Bien que les lecteurs d'écran le prononcent un peu comme "meuh", l'abbréviation de madame en Mme est, selon moi, suffisament courante pour ne pas nécéssiter d'explication. Pareil pour n° à la place de numéro ou 1er à la place de premier, ou encore "Tél." ou "Tel." pour téléphone. Après, il n'est effectivement pas toujours facile de décider de ce qui est évident et de ce qui ne l'est pas. Par exemple, pas forcément facile de trancher pour SNCF, au cas où le texte ne vise pas uniquement les français.

J'attire aussi l'attention sur quelque chose que j'ai remarqué récemment: certains lecteurs d'écran, dans certains contextes, ne sont pas insensibles aux <span> intercalaires: ils ne lisent pas nécessairement de la même manière <p>Truc</p> et <p>Tr<span>u</span>c</p> par exemple. Côté synthèse vocale, on a parfois droit à une micropause, un défaut de prononciation et d'autres petits désagréments de ce style. Ou parfois, pour la synthèse et le braille, il peut décider que les différents noeuds ne font pas partie du même mot ou de la même ligne, ce qui complique évidemment la lecture. Le changement de comportement peut, en plus, être influencé par les styles.
Pour éviter ce genre de petits problèmes, je conseillerais de ne jamais couper les mots en deux, quelque soient les balises impliqués, tout simplement...

Désolé pour le double post, mais quelqu'un a commenté pendant ma rédaction et je voulais réagir.

[quote]Concernant les lecteurs d'écran, je pense qu'il ne faut pas les sous estimer, nous ne sommes plus en dans les années 80. De nos jours un lecteur d’écran
qui se respecte traduira tout seul Mme en Madame même si celui contient la balise <sup>.[/quote]
Raison de plus pour l'explication inutile de ce terme. Pour info, cette « traduction » s'appelle dictionnaire de prononciation, et la plupart des synthèse vocales en ont un, déjà configuré d'origine pour les abbréviation les plus courantes. On y trouve par exemple "mm" => "millimètre", "etc" => "et cetera", "e-mail" => "i mél", etc... "Mme" n'y est pas, curieusement, mais ça s'ajoute facilement.

Comme le dit Geoffrey, Ce n'est pas une bonne utilisation de l'élément abbr, qui contient justement l'attribut title pour étendre le signifiant de l'abbréviation.

Oui je ne pense pas que cela soit correct d'écrire le mot entier entre la balise abbr.
Par contre merci pour le rappel de la règle du début !

Je ne suis moi non plus pas vraiment fan de cette solution.

De plus, pourquoi ne pas tout simplement mettre :
abbr span {
display: none;
}

?

Je ne suis moi non plus pas vraiment fan de cette solution.

De plus, pourquoi ne pas tout simplement mettre :
abbr span {
display: none;
}

?

Oups, désolé pour le double post apparue en faisant un précédent.

Sinon, je me répond tout seul, je suppose que ce doit être pour l'accessibilité ?
Parce que concernant l’absence des feuilles de style, cela revient au même.

@Seb: Ah non, surtout pas display:none ! Avec ça tu annules tout, le contenu n'est rendu pour personne, même pas les lecteurs d'écran; et donc c'est totalement inapproprié et inutile.