Modes d’écriture et valeurs logiques CSS

Dans le but d’améliorer l’accessibilité de certains documents et notamment des documents internationaux, le CSS a récemment introduit de nouveaux types de valeurs appelées valeurs « logiques » qui vont être amenées à remplacer les valeurs « physiques » dans certains cas et pour certaines propriétés.

L’introduction et la standardisation des valeurs logiques devrait être la prochaine grande évolution du CSS et il est donc important de bien comprendre ce concept.

 

Définition d’une valeur logique en CSS

Les valeurs logiques sont des valeurs qui se basent sur des concepts logiques comme le début ou la fin d’une page plutôt que sur des concepts physiques comme la gauche ou le haut d’une page.

Le résultat des propriétés utilisant des valeurs logiques va donc dépendre de ce qui aura été déclaré comme étant le « début » ou la « fin » d’une page, etc.

L’idée principale derrière l’utilisation de valeurs logiques est de faire en sorte que certains aspects de la mise en page s’adaptent en fonction du mode d’écriture de chacun.

Il existe en effet différents systèmes et donc modes d’écriture dans le monde : de gauche à droite puis de haut en bas (langages latins), de droite à gauche puis de haut en bas (arabe), de haut en bas puis de droite à gauche (chinois, japonais et coréen traditionnels), etc.

Certains aspects d’une mise en page sont en fait relatifs aux directions d’écriture et varient donc lorsque la page est traduite vers un système différent tandis que d’autres sont intrinsèquement liés à l’orientation physique de la page.

Par exemple, dans les langages latins, les titres, paragraphes et les listes sont traditionnellement alignés à gauche mais ces mêmes éléments sont alignés à droite pour des langages arabes.

Ici, en réalité, il est donc plus correct de dire que les titres, paragraphes et les listes sont alignés « au début » du document, le « début » étant défini relativement au sens d’écriture (à gauche pour les langages s’écrivant de gauche à droite et à droite pour les langages s’écrivant de droite à gauche).

Dans ce cas précis, il fait donc beaucoup de sens d’utiliser une valeur d’alignement logique (« start ») plutôt que physique (« left » ou « right ») pour ces éléments puisque la valeur logique va proposer un alignement cohérent pour n’importe quel langage.

Une valeur logique est donc finalement une valeur dont l’effet (l’interprétation) est dépendant du flux du texte.

 

Valeurs logiques, axe de bloc et axe en ligne

Les valeurs logiques sont des valeurs qui vont toujours être exprimées en fonction du début ou de la fin des axes de bloc et en ligne. Elles vont être de la forme *-block-start, *-block-end, *-inline-start, *-inline-end, etc.

L’axe de bloc est l’axe selon lequel sont disposés les différents blocs de la page. La traduction de cet axe en termes physiques dépend du mode d’écriture défini. Pour des langages dont le texte est écrit horizontalement et les lignes se placent les unes en dessous des autres, l’axe de bloc est par défaut l’axe vertical : les blocs se placent les uns en dessous des autres.

L’axe en ligne est l’axe selon lequel le texte s’écoule. La traduction de cet axe en termes physiques dépend du mode d’écriture défini. Pour des langages latins dont le texte est écrit horizontalement et les lignes se placent les unes en dessous des autres, l’axe en ligne est par défaut l’axe horizontal.

Axes de bloc et en ligne et valeurs logiques CSS
Source : https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#intro

 

Les modes d’écriture ou writing mode CSS

Le « mode d’écriture » est défini par le sens selon lequel le texte s’écoule et par la direction dans laquelle les blocs s’empilent.

Le sens selon lequel le contenu est ordonné va être défini par la propriété direction (ainsi que par la propriété unicode-bidi pour le support de la bidirectionnalité).

Le direction dans laquelle les blocs s’empilent (et dans laquelle les lignes s’empilent dans les blocs) va être définie par la propriété writing-mode.

Dans un langage latin comme le français par exemple, le contenu s’écoule de gauche à droite et les blocs s’empilent de haut en bas. Le début logique des axes en ligne et de bloc se situera donc physiquement à gauche et en haut.

A noter : Pour les modes d’écritures verticaux, il faudra également considérer la propriété text-orientation qui permet de choisir l’orientation des caractères dans une ligne et qui va donc contribuer à définir le mode d’écriture.

Les propriété direction et unicode-bidi

Dans certains documents, le texte dans un seul bloc (« bloc » en termes d’affichage visuel) peut apparaître avec une directionnalité mixte. Ce phénomène est appelé bidirectionnalité, ou « bidi » en abrégé. Cela peut se produire dans un document qui mêle le français et l’arabe par exemple.

Les propriétés CSS direction et unicode-bidi permettent de définir la direction principale des textes ainsi que la façon dont doit être gérée la bidirectionnalité d’un texte.

La propriété direction supporte deux valeurs :

  • ltr pour « left to right » (gauche à droite) ;
  • rtl pour « right to left » (droite à gauche) ;

La propriété unicode-bidi supporte les valeurs normal, embed, isolate, bidi-override, isolate-override et plaintext.

Attention : Étant donné que certains agents utilisateurs peuvent désactiver les styles CSS, la spécification officielle recommande de ne pas utiliser ces propriétés mais d’utiliser plutôt l’attribut HTML dir et l’élément bdo pour gérer la direction du texte.

La propriété writing-mode

La propriété writing-mode spécifie si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent. Elle supporte les valeurs suivantes :

  • horizontal-tb (valeur par défaut) : Les blocs s’empilent verticalement, de haut en bas. Le mode d’écriture et le mode typographique sont horizontaux ;
  • vertical-rl : Les blocs s’empilent horizontalement, de gauche à droite. Le mode d’écriture et le mode typographique sont verticaux ;
  • vertical-lr Les blocs s’empilent horizontalement, de droite à gauche. Le mode d’écriture et le mode typographique sont verticaux ;
  • sideways-rl Les blocs s’empilent horizontalement, de droite à gauche. Le mode d’écriture est vertical, tandis que le mode typographique est horizontal ;
  • sideways-lr Les blocs s’empilent horizontalement, de gauche à droite. Le mode d’écriture est vertical, tandis que le mode typographique est horizontal.

Attention ici : les valeurs sideways-rl et sideways-lr ne sont pour le moment pas encore supportées par la plupart des navigateurs.

 

Exemples d’utilisation des valeurs logiques en fonction du mode d’écriture

Code HTML :

See the Pen
Tuto CSS : writing-mode & logical values
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Tuto CSS : writing-mode & logical values
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Tuto CSS : writing-mode & logical values
by Pierre (@pierregiraud)
on CodePen.

Notre premier div possède un writing-mode : horizontal-tb et une direction : ltr (par défaut).

Son axe de bloc sera donc physiquement vertical et son axe en ligne horizontal. Le début physique de l’axe de bloc se situe au niveau du bord supérieur et la fin au niveau du bord inférieur. Le début de l’axe en ligne se situe au niveau du bord gauche et la fin au niveau du bord droit.

La propriété border-left est une propriété qui accepte des valeurs physiques. Elle définira donc toujours la bordure gauche.

La propriété border-inline-start est une propriété logique. Elle va servir à définir la bordure liée au début de l’axe en ligne. Pour les éléments de notre premier div, cela correspond physiquement à la bordure gauche.

Notre deuxième div possède un writing-mode : horizontal-tb et une direction : rtl. Son axe de bloc est également physiquement l’axe vertical et son axe en ligne est l’axe horizontal. En revanche, le début de son axe en ligne se situe physiquement à droite.

Notre troisième div possède un writing-mode : vertical-lr et une direction : ltr (par défaut). Son axe de bloc sera donc physiquement l’axe horizontal et son axe en ligne sera l’axe vertical. Les blocs vont s’écouler de la gauche vers la droite. Le début de l’axe de bloc se situe donc à gauche tandis que le début de l’axe en ligne se situe en haut.

Les axes sont les mêmes pour notre quatrième div ; la seule différence étant que les blocs s’écoulent de droite à gauche (le début de l’axe de bloc se situe donc à droite).

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales