CSS - Propriété writing-mode

Description.

writing-mode définit le sens d'écriture (horizontal, vertical) afin de l'adapter à la langue utilisée :

• Les langues européennes s'écrivent horizontalement, de gauche à droite, et les lignes s'enchaînent du haut vers le bas.
• Les langues arabes ou l'hébreu s'écrivent également horizontalement mais de droite à gauche. Les lignes se suivent du haut vers le bas.
• Les langages CJK (Chinois, Japonais, Coréen) s'écrivent verticalement, et les lignes se suivent de la droite vers la gauche.
• Enfin, certains langages comme le mongolien, s'écrivent verticalement, avec des lignes qui s'enchaînent de gauche à droite.

reportez-vous également aux propriétés direction et unicode-bidi.

Syntaxes pour writing-mode.

• writing-mode: horizontal-tb;

  Valeur par défaut, correspondant aux langues européennes et arabes. Le texte s'écrit ligne par ligne, et du haut en bas. Pour les langues arabes, il sera nécessaire de préciser que le sens d'écriture est de droite à gauche. Ceci peut être fait en utilisant la balise bdo dans le code HTML.

• writing-mode: vertical-rl;

  Le texte s'écrit verticalement de haut en bas, puis de droite à gauche. Ceci correspond aux langages CJK : chinois, japonais, coréen.

• writing-mode: vertical-lr;

  Le texte s'écrit verticalement de haut en bas, puis de gauche à droite. Cette présentation est adaptée à des langages tels que le mongolien.

• writing-mode: lr;	✗
  writing-mode: lr-tb;	✗
  writing-mode: rl;	✗
  writing-mode: rl-tb;	✗
  writing-mode: tb;	✗
  writing-mode: tb-rl;	✗

  Ces valeurs sont obsolètes bien que encore reconnues par de nombreux navigateurs. Voici leur équivalence avec les nouvelles valeurs standardisées :

  lr lr-tb rl rl-tb	horizontal-tb
  tb tb-rl	vertical-rl

• writing-mode: initial;

  La valeur initiale est horizontal-tb.

• writing-mode: unset; writing-mode: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Voir aussi...

Langues non latines : arabes, chinoises, japonaises ou coréennes - Propriétés.

• direction : Sens d'écriture.
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• line-break : Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
• unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.

Blocs de texte - Propriétés.

• direction : Sens d'écriture.
• hyphens : Césure des mots.
• letter-spacing : Espacement des lettres.
• line-height : Définit la hauteur des lignes de texte.
• text-align : Alignement du texte.
• text-align-last : Alignement de la dernière ligne des paragraphes.
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.
• text-emphasis-position : Position des caractères de mise en exergue.
• text-emphasis-style : Style de mise en exergue.
• text-indent : Définit le retrait de la première ligne des paragraphe (indentation).
• text-justify : Méthode utilisée pour justifier le texte.
• text-overflow : Indication de débordement du texte.
• unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.
• word-spacing : Espacement des mots.