La propriété CSS writing-mode offre un contrôle étendu sur l’orientation du texte dans les pages web, permettant de gérer l’écriture de gauche à droite, de droite à gauche, verticale et d’autres modes d’écriture internationaux.
Cela inclut la possibilité d’écrire verticalement, horizontalement, ou même de renverser l’ordre des caractères.
La propriété writing-mode
- writing-mode: horizontal-tb;
- writing-mode: vertical-rl;
- writing-mode: vertical-lr;
- writing-mode: horizontal-rl; direction: rtl;
Bonjour
Les valeurs de la propriété CSS writing-mode
La propriété writing-mode affecte principalement les éléments de type bloc, définissant la direction dans laquelle ils s’agrandissent et la disposition de leur contenu textuel. Les valeurs possibles pour writing-mode se répartissent en deux catégories principales :
Orientation horizontale
horizontal-tb: Texte horizontal de haut en bas (par défaut pour la plupart des langues)horizontal-rl: Texte horizontal de gauche à droite
Orientation verticale
vertical-rl: Texte vertical de haut en bas, de gauche à droite (écriture chinoise traditionnelle)vertical-lr: Texte vertical de haut en bas, de droite à gauche (écriture arabe)eb-rl: Texte vertical de bas en haut, de gauche à droite (écriture mongole)eb-lr: Texte vertical de bas en haut, de droite à gauche
Il est important de noter que writing-mode ne modifie pas l’orientation des caractères individuels, mais uniquement la disposition globale des lignes de texte.
Couplez les propriétés writing-mode et direction en CSS
La propriété CSS direction est utilisée pour définir la direction du texte, les éléments de blocs, et le sens de l’écriture dans une page web.
Les valeurs possibles pour direction sont :
ltr(left-to-right) : Texte écrit de gauche à droite. C’est la valeur par défaut.rtl(right-to-left) : Texte écrit de droite à gauche.
La propriété direction influence plusieurs aspects du rendu des éléments, notamment la direction dans laquelle le texte est écrit, l’alignement des blocs et des boîtes de texte et le positionnement des éléments flottants.
Exemple concret de la propriété CSS writing-mode
Ce code affichera le texte d’un paragraphe de haut en bas et de droite à gauche :
<p>Bonjour à tous !</p>p {
background: #555;
color: #fff;
writing-mode: vertical-rl;
height: 60px;
width: calc(100% - 40px);
padding: 20px;
}Bonjour à tous !
Exemple avec plusieurs blocs
<div id="container">
<div class="item">Bonjour</div>
<div class="item">à</div>
<div class="item">tous</div>
</div>.item {
background: #555;
color: #fff;
writing-mode: vertical-rl;
width: calc(100% - 40px);
padding: 20px;
margin-top: 10px;
}Remarques
- La propriété
writing-moden’est pas prise en charge par tous les anciens navigateurs. Il est important de vérifier la compatibilité pour garantir un affichage correct dans tous les environnements. - L’utilisation de
writing-modepeut affecter la disposition des autres éléments de la page. Il est nécessaire de prévoir un ajustement du design pour une mise en page harmonieuse.
En maîtrisant la propriété writing-mode, les développeurs web peuvent créer des pages web qui prennent en charge l’écriture de toutes les langues du monde, offrant ainsi une expérience utilisateur inclusive et accessible à tous.
