Tutoriel CSS : Propriété writing-mode

Définition de la propriété css writing-mode

La propriété CSS writing-mode spécifie la direction d'écriture du texte dans un élément. Elle permet de définir si le texte doit être disposé horizontalement (écriture de gauche à droite) ou verticalement (écriture de haut en bas).

Syntaxe générale de la propriété css writing-mode

La syntaxe générale de la propriété writing-mode est la suivante :

    writing-mode: valeur;

Valeurs par défaut	horizontal-tb
Inherited:	oui
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.writingMode="vertical-rl"

Valeurs possibles de la propriété css writing-mode

Voici les valeurs possibles pour la propriété writing-mode :

horizontal-tb : Le texte est disposé horizontalement de gauche à droite (valeur par défaut).
vertical-rl : Le texte est disposé verticalement de haut en bas, colonne par colonne.
vertical-lr : Le texte est disposé verticalement de haut en bas, colonne par colonne, dans l'ordre inverse de lecture (communément utilisé pour l'écriture japonaise).
sideways-rl : Le texte est disposé verticalement de gauche à droite, avec les caractères tournés de 90 degrés dans le sens des aiguilles d'une montre.
sideways-lr : Le texte est disposé verticalement de gauche à droite, avec les caractères tournés de 90 degrés dans le sens inverse des aiguilles d'une montre.

Jusqu'à l'écriture de cet article les deux derniéres valeur ne sont prise en charge que dans firefox

Exemples pratiques d'utilisation de la propriété css writing-mode

Voici un exemple simple d'utilisation de la propriété writing-mode :

	.container {
      width: 400px;
      height: 200px;
      border: 1px solid black;
      writing-mode: vertical-rl;
    }

Astuces et conseils d'utilisation de la propriété css writing-mode

La propriété writing-mode peut être utile pour créer des mises en page originales et adaptées à des langues ou des scripts spécifiques.
Il est important de tester et de vérifier la compatibilité de la propriété writing-mode avec différents navigateurs, car son support peut varier.
Assurez-vous de prendre en compte les différentes règles de direction d'écriture lors de l'utilisation de la propriété writing-mode afin de garantir une expérience de lecture fluide pour les utilisateurs.

Exemple 2:

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de writing-mode : sideways-rl et sideways-lr</title>
  <style>
    .container {
      width: 200px;
      height: 400px;
      border: 1px solid black;
    }
    
    .sideways-rl {
      writing-mode: sideways-rl;
    }
    
    .sideways-lr {
      writing-mode: sideways-lr;
    }
	 .vertical-rl {
      writing-mode: vertical-rl;
    }
    
    .vertical-lr {
      writing-mode: vertical-lr;
    }
	table,td{  
	border:solid 1px;
	border-collapse: collapse;
}}
  </style>
</head>
<body>
  <h1>Exemple de writing-mode : sideways-rl et sideways-lr</h1>
  
  
  <table>
<tr class="container"><td><h2>Sideways-rl</h2>  <div class="sideways-rl">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div></td>
  <td><h2>Vertical-rl</h2><div class="vertical-rl">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div></td></tr>
<tr class="container"><td><h2>Sideways-lr</h2>  <div class="sideways-lr">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div></td>
  <td><h2>Vertical-lr</h2><div class="vertical-lr">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div></td></tr>
</body>
</html>

Le tableau présenté dans l'exemple permet de comparer les différents modes d'écriture (`sideways-rl`, `sideways-lr`, `vertical-rl` et `vertical-lr`) en affichant du texte selon différentes orientations. En plaçant les exemples côte à côte, vous pouvez facilement comparer visuellement l'apparence et le comportement du texte dans chaque mode d'écriture.

Le tableau est divisé en deux colonnes, avec chaque colonne représentant un mode d'écriture spécifique. Les lignes du tableau présentent des exemples de texte avec chaque mode d'écriture correspondant. Cela vous permet de voir les différences entre les modes d'écriture et de comprendre comment le texte est affiché dans chacun d'eux.

En comparant les résultats obtenus, vous peuvez visualiser les variations dans l'orientation, la rotation et la disposition du texte. Cela peut être utile pour prendre des décisions de conception en fonction des besoins spécifiques du projet ou pour expérimenter différentes options stylistiques.

Le tableau de comparaison offre donc une manière claire et concise d'illustrer et de distinguer ces différents modes d'écriture CSS.