Propriété CSS writing-mode

La propriété CSS writing-mode spécifie si le texte doit être disposé verticalement ou horizontalement.

La propriété writing-mode change l'alignement du texte afin qu'il puisse être lu de haut en bas ou de gauche à droite, selon la langue. Par exemple, les langues est-asiatiques telles que le chinois ou le japonais sont écrites horizontalement, ou il existe des langues écrites verticalement.

La propriété writing-mode affecte la direction selon laquelle le bloc grandit, qui est une direction dans laquelle les conteneurs bloc sont empilés, et une direction dans laquelle le contenu en ligne (inline-level) s'écoule dans un conteneur de blocs.

Pour la compatibilité maximale des navigateurs, des extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), sont utilisées avec cette propriété.

Valeur initiale	horizontal-tb
Appliquée à	Tous les éléments à l'exception des groupes des lignes de tableaux, groupes des colonnes des tableaux, lignes des tableaux, colonnes des tableaux, conteneur de base ruby, conteneur d'annotation ruby.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.writingMode = "vertical-lr";

Syntaxe

writing-mode: horizontal-tb | vertical-rl | vertical-lr | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: horizontal-tb;
      writing-mode: horizontal-tb;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété writing-mode</h2>
    <p>
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
    </p>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, dans lequel le contenu s'écoule verticalement de haut en bas et de droite à gauche:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété writing-mode</h2>
    <p>
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
    </p>
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel le contenu s'écoule verticalement de haut en bas et de gauche à droite:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: vertical-lr;
      writing-mode: vertical-lr;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété writing-mode</h2>
    <p>
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
    </p>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
horizontal-tb	Le contenu s'écoule horizontalement de gauche à droite et verticalement de haut en bas.
vertical-rl	Le contenu s'écoule verticalement de haut en bas et horizontalement de droite à gauche.
vertical-lr	Le contenu s'écoule verticalement de haut en bas et horizontalement de gauche à droite.
sideway-rl	Le contenu s'écoule verticalement de haut en bas et tous les glyphes sont placés latéralement vers la droite.
sideway-lr	Le contenu s'écoule verticalement de haut en bas et tous les glyphes sont placés latéralement vers la gauche.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.