Adaptez votre site aux différentes langues avec les propriétés CSS logiques

Aujourd’hui supportées par la majorité des navigateurs, les logical properties ou propriétés logiques permettent d’adapter la mise en page d’un site selon la langue de l’utilisateur. Je vous propose un petit tour d’horizon de ces propriétés CSS encore un peu méconnues.

Section intitulée les-logical-properties-c-est-quoiLes logical properties c’est quoi ?

Les logical properties sont des propriétés CSS qui dépendent de la direction du document HTML à l’inverse de propriétés CSS physiques.

Les propriétés margin-top, border-left, padding-bottom… sont des propriétés CSS physiques. Elles appliquent un style en haut, à gauche, en bas… d’un élément. Les logical properties vont plutôt utiliser les mots clés start, end, inline et block pour définir où appliquer une marge, une bordure ou encore un padding. Leur but est de s’adapter aux différentes langues et à leur sens de lecture.

Commençons par faire un rapide tour des différents modes de lecture possibles selon les langues.

Section intitulée les-differents-modes-de-lectureLes différents modes de lecture

En français, et dans la majorité des langues, nous lisons les textes de gauche à droite. Une langue qui s’écrit et se lit de gauche à droite est dite dextoverse. Certaines langues cependant se lisent de droite à gauche comme l’arabe, elles sont dites sinistroverses.

Pour indiquer la direction d’un texte d’un document HTML on peut :

• Utiliser l’attribut dir sur l’élément html ou sur un élément particulier si besoin. Cet attribut vaut rtl (right to left), ltr (left to right) ou auto. Si l’attribut vaut auto il se base s...
  [Courte citation de 8% de l'article original]