La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal.Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer auxressources externes ainsi qu'à la sectionVoir aussi en fin de page.

La spécification des modes d'écriture

Le module de spécificationCSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introductionde la spécification quant aux modes d'écriture :

« En CSS, un mode d'écriture est défini par les propriétéswriting-mode,direction ettext-orientation. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriétéwriting-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la directionvertical-lr, on pourra utiliserwriting-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

La propriétéwriting-mode et le flux de bloc

La propriétéwriting-mode s'utilise avec les valeurshorizontal-tb,vertical-rl etvertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété esthorizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pourtop to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent touteshorizontal-tb.

Voici un exemple avechorizontal-tb.

La valeurvertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pourwriting-mode :vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

Les boîtes utilisant un mode d'écriture différent de leur parent

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avaitdisplay: inline-block.

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vautflow, le type d'affichage calculé seraflow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avechorizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

Les éléments remplacés

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriétéwriting-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

Les propriétés et valeurs logiques

Lorsqu'on travaille avec des modes d'écriture autres quehorizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avechorizontal-tb cette largeur sera selon la direction en ligne. Mais avec le modevertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

C'est pour cela que des propriétéslogiques ont fait leur apparition commeblock-size etinline-size. Si on fournitinline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical,inline-size correspondra à la direction en ligne quoi qu'il arrive.

Le module de spécificationCSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directionsphysiques.

Résumé

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

Voir aussi

• Les modes d'écritures

Ressources externes

• CSS Writing Modes (en anglais) par Jen Simmons sur24 Ways