Tutoriel sur la propriété CSS text-orientation

La propriété CSS text-orientation permet de contrôler l'orientation du texte à l'intérieur d'un élément.

Définition de la propriété CSS text-orientation

La propriété text-orientation définit l'orientation du texte à l'intérieur d'un bloc de texte. Elle peut être utilisée pour changer l'orientation du texte dans les langues qui s'écrivent de droite à gauche, comme l'arabe ou l'hébreu.

Syntaxe générale de la propriété CSS text-orientation

La syntaxe générale de la propriété text-orientation est la suivante:

text-orientation: valeur;

Valeurs par défaut	mixed
Inherited:	oui
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.textOrientation="upright"

Valeurs possibles de la propriété CSS text-orientation

Les valeurs possibles pour la propriété text-orientation sont :

mixed: permet au navigateur de choisir l'orientation du texte.
upright: le texte est orienté verticalement de haut en bas.
sideways: le texte est orienté horizontalement mais tourné de 90 degrés dans le sens des aiguilles d'une montre.
sideways-right: le texte est orienté horizontalement mais tourné de 90 degrés dans le sens inverse des aiguilles d'une montre.

Exemples pratiques d'utilisation de la propriété CSS text-orientation

Voici quelques exemples d'utilisation de la propriété text-orientation:

Exemple 1

        .vertical-text {
          text-orientation: upright;
        }

Ce code CSS rendra le texte à l'intérieur de l'élément avec la classe vertical-text orienté verticalement de haut en bas.

Exemple 2

        .rotated-text {
          text-orientation: sideways;
        }

Ce code CSS fera tourner le texte à l'intérieur de l'élément avec la classe rotated-text de 90 degrés dans le sens des aiguilles d'une montre.

Exemple 3

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel text-emphasis</title> 
    <style>
		.container {
		  display: flex;
		  padding: 2em;
		  max-width: 400px;
		  display: flex;
		}

		h1 {
		  color: red;
		  writing-mode: vertical-rl;
		}

		p {
		  font-family: Arial, serif;
		  font-size: 20px;
		  margin-top: 0;
		}

		.text-orientation {
		  text-orientation: upright;
		}
    </style>
  </head>
  <body>
<button id="toggle">Toggle Text Orientation</button>
<div class="container">
  <h1 class="text-orientation">Voici une rotation</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor dolor dolor, ac bibendum mi scelerisque non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a sem eget libero eleifend viverra a eget elit. Morbi massa risus, venenatis in elit vel, porta venenatis felis. Suspendisse ac sem nunc. Quisque elementum scelerisque quam, vitae maximus est. Etiam fermentum turpis risus, et tincidunt urna consequat sed.
  </p>
</div>
<script>
const headingClasses = document.querySelector("h1").classList;
const button = document.querySelector("#toggle");

function changeTextOrientation() {
  if (headingClasses.contains("text-orientation")) {
    headingClasses.remove("text-orientation");
  } else {
    headingClasses.add("text-orientation");
  }
}

button.addEventListener("click", changeTextOrientation);
</script>
  </body>
</html>

Dans cet exemple et Dans la section style de l'en-tête, on définit les styles CSS nécessaires:
La classe .container utilise display: flex pour créer un conteneur flexible avec un padding de 2em et une largeur maximale de 400px.
La balise h1 a une couleur de texte rouge et utilise writing-mode: vertical-rl pour orienter le texte de manière verticale de haut en bas.
Le paragraphe p a une famille de police Arial, serif, une taille de police de 20px et une marge supérieure de 0.
La classe .text-orientation utilise text-orientation: upright pour orienter le texte de manière verticale de haut en bas.

En résumé, lorsque le bouton "Toggle Text Orientation" est cliqué, la classe text-orientation est ajoutée ou supprimée de l'élément h1. Cela modifie l'effet de text-orientation défini dans les styles CSS, permettant de basculer entre l'orientation verticale et l'orientation par défaut du texte.

Astuces et conseils d'utilisation de la propriété CSS text-orientation

Assurez-vous de vérifier la compatibilité des navigateurs avec la propriété text-orientation avant de l'utiliser dans un projet.
La propriété text-orientation peut être particulièrement utile lors de la conception de sites multilingues avec des langues qui s'écrivent de droite à gauche.
Expérimentez avec les différentes valeurs de la propriété pour obtenir l'effet de texte souhaité.
Utilisez des classes CSS pour cibler spécifiquement les éléments où vous souhaitez appliquer la propriété text-orientation.