Mode d'écriture CSS : Un voyage à travers l'orientation du texte

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons entreprendre une aventure passionnante dans le monde du mode d'écriture CSS. En tant que votre enseignant informatique de quartier, je suis là pour vous guider à travers cette propriété fascinante qui peut littéralement retourner votre texte à l'envers ! Alors, bouclez votre ceinture et plongeons dedans !

Qu'est-ce que le mode d'écriture CSS ?

Avant de commencer à coder, comprenons ce qu'est le mode d'écriture. Imaginez que vous lisez un livre. En anglais, nous lisons généralement de gauche à droite et de haut en bas. Mais que se passe-t-il si vous lisez un livre traditionnel japonais ? Le texte s'écoule verticalement de haut en bas et de droite à gauche. C'est là que le writing-mode CSS devient utile !

La propriété writing-mode en CSS nous permet de contrôler la direction dans laquelle nous affichons le texte et d'autres contenus en ligne. C'est comme avoir une baguette magique qui peut faire danser votre texte dans différentes directions !

Valeurs possibles

Voyons les différentes valeurs que nous pouvons utiliser avec la propriété writing-mode :

Valeur	Description
horizontal-tb	Le texte s'écoule horizontalement de gauche à droite, de haut en bas
vertical-rl	Le texte s'écoule verticalement de haut en bas, de droite à gauche
vertical-lr	Le texte s'écoule verticalement de haut en bas, de gauche à droite
sideways-rl	Le texte s'écoule verticalement de haut en bas, tous les caractères tournés de 90° dans le sens horaire
sideways-lr	Le texte s'écoule verticalement de haut en bas, tous les caractères tournés de 90° dans le sens antihoraire

Application

La propriété writing-mode peut être appliquée à tous les éléments, y compris les pseudo-éléments ::first-letter et ::first-line. C'est comme une télécommande universelle pour la direction du texte !

Syntaxe DOM

Maintenant, voyons comment nous pouvons utiliser writing-mode dans notre CSS :

élément {
writing-mode: valeur;
}

Simple, non ? Plongeons dans chaque valeur et voyons-les en action !

CSS writing-mode - Valeur horizontal-tb

C'est le mode d'écriture par défaut pour la plupart des langues, y compris l'anglais. Voyons un exemple :

<div class="horizontal-tb">
<p>Ce texte est horizontal de gauche à droite, de haut en bas.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

Cela affichera le texte comme vous le lisez dans cet article. Rien de fancy, mais c'est notre point de départ !

CSS writing-mode - Valeur vertical-rl

Maintenant, inversons les choses :

<div class="vertical-rl">
<p>Ce texte est vertical, de droite à gauche !</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

Voilà ! Votre texte s'écoule maintenant verticalement de haut en bas, et les lignes multiples commencent à droite et se déplacent vers la gauche. C'est comme lire un rouleau traditionnel japonais ou chinois !

CSS writing-mode - Valeur vertical-lr

Essayons le mode vertical de gauche à droite :

<div class="vertical-lr">
<p>Ce texte est vertical, de gauche à droite !</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

Maintenant, votre texte est vertical, mais il commence du côté gauche. C'est comme lire un script mongol !

CSS writing-mode - Valeur sideways-rl

Prêts pour des acrobaties ? Essayons sideways-rl :

<div class="sideways-rl">
<p>Ce texte est oblique, de droite à gauche !</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

Cela fait pivoter chaque caractère de 90° dans le sens horaire. C'est comme si votre texte faisait un roue !

CSS writing-mode - Valeur sideways-lr

Et maintenant pour le dernier flip :

<div class="sideways-lr">
<p>Ce texte est oblique, de gauche à droite !</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

Cette fois, chaque caractère est pivoté de 90° dans le sens antihoraire. C'est comme si votre texte faisait un saut en arrière !

Utilisation esthétique du CSS writing-mode (langue anglaise)

Bien que ces différents modes d'écriture soient essentiels pour prendre en charge diverses langues, ils peuvent également être utilisés créativement en anglais. Voici un exemple amusant :

<div class="book-spine">
<h2>L'Aventure CSS</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

Cela crée un texte vertical qui ressemble à la tranche d'un livre sur une étagère. Génial, non ?

Propriétés liées au CSS writing-mode

Pour contrôler complètement l'orientation du texte, vous pourriez vouloir utiliser ces propriétés en combinaison avec writing-mode :

Propriété	Description
text-orientation	Définit l'orientation des caractères du texte
direction	Définit la direction du texte, des éléments en ligne et des colonnes de tableaux
unicode-bidi	Remplace l'algorithme bidirectionnel pour le texte

Voici un exemple rapide :

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

Cela permet un texte vertical où certains caractères (comme les lettres latines) sont pivotés, tandis que d'autres (comme les caractères chinois) restent droits.

Et voilà, les amis ! Nous avons fait un voyage à travers le monde fascinant du mode d'écriture CSS. Souvenez-vous, le web est une plateforme mondiale, et ces propriétés aident à le rendre accessible et beau pour tout le monde, peu importe leur langue ou script.

La prochaine fois que vous construisez un site web, pourquoi ne pas essayer de jouer avec ces propriétés ? Vous pourriez juste créer quelque chose d'incroyablement génial ! Bon codage, et peut-être que votre texte s'écoulera toujours dans la bonne direction !

Credits: Image by storyset