Un guide complet sur le CSS writing-mode, explorant comment contrôler la direction du texte pour l'internationalisation (i18n) et créer des sites web visuellement attrayants et accessibles à l'échelle mondiale.
CSS Writing Mode : Maîtriser la direction du texte international pour les sites web mondiaux
Dans le monde interconnecté d'aujourd'hui, les sites web doivent s'adresser à un public diversifié, et un aspect essentiel de cela est la gestion des différentes directions de texte. La propriété CSS writing-mode est un outil puissant qui permet aux développeurs de contrôler la direction dans laquelle le texte s'écoule, leur permettant de créer des expériences web véritablement internationalisées (i18n) et visuellement attrayantes. Ce guide complet explorera les subtilités de writing-mode, en fournissant des exemples pratiques et des informations exploitables pour vous aider à maîtriser la direction du texte pour les sites web mondiaux.
Comprendre les modes d'écriture
La propriété CSS writing-mode spécifie si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent. Elle joue un rôle crucial dans l'adaptation des pages web pour les langues qui utilisent différentes directions d'écriture, telles que :
- De gauche à droite (LTR) : Anglais, espagnol, français, allemand et de nombreuses autres langues occidentales.
- De droite à gauche (RTL) : Arabe, hébreu, persan et ourdou.
- Vertical : Chinois traditionnel, japonais et mongol.
Par défaut, les navigateurs web utilisent le mode d'écriture horizontal-tb, qui dispose le texte horizontalement de haut en bas. Cependant, writing-mode vous permet de modifier ce comportement par défaut et de créer des mises en page qui s'adaptent à différentes directions de texte.
Valeurs de la propriété `writing-mode`
La propriété writing-mode accepte plusieurs valeurs, chacune spécifiant une direction de texte et un flux de bloc différents :
horizontal-tb: Horizontal de haut en bas. Les lignes de texte sont horizontales et s'écoulent de haut en bas. C'est la valeur par défaut.vertical-rl: Vertical de droite à gauche. Les lignes de texte sont verticales et s'écoulent de droite à gauche. Les blocs progressent vers le bas.vertical-lr: Vertical de gauche à droite. Les lignes de texte sont verticales et s'écoulent de gauche à droite. Les blocs progressent vers le bas.sideways-rl: Alias obsolète pourvertical-rl.sideways-lr: Alias obsolète pourvertical-lr.
Les valeurs suivantes sont également disponibles mais moins couramment utilisées :
block-flow: Utilise la direction du contexte de formatage de bloc, qui peut être influencée par d'autres propriétés.
Exemples de base
Illustrons l'utilisation de writing-mode avec quelques exemples simples :
Texte horizontal (par défaut)
Ceci est le comportement par défaut, donc aucun writing-mode explicite n'est nécessaire :
<p>Ceci est du texte horizontal.</p>
Texte vertical (de droite à gauche)
Pour afficher le texte verticalement de droite à gauche, utilisez vertical-rl :
<p style="writing-mode: vertical-rl;">Ceci est du texte vertical (de droite à gauche).</p>
Texte vertical (de gauche à droite)
Pour afficher le texte verticalement de gauche à droite, utilisez vertical-lr :
<p style="writing-mode: vertical-lr;">Ceci est du texte vertical (de gauche à droite).</p>
Applications pratiques de `writing-mode`
Au-delà de la direction de base du texte, writing-mode offre une gamme d'applications pratiques pour créer des sites web visuellement attrayants et internationalement accessibles :
1. Adaptation aux langues RTL
Pour les sites web qui prennent en charge les langues RTL comme l'arabe ou l'hébreu, writing-mode est essentiel pour afficher correctement le texte. Vous pouvez utiliser des sélecteurs CSS pour appliquer writing-mode: rtl; à des éléments spécifiques ou à l'ensemble du document en fonction de l'attribut de langue :
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
Bien que direction: rtl; soit crucial pour définir la direction de base, vous pourriez également avoir besoin de unicode-bidi: bidi-override; pour garantir une gestion correcte du texte à direction mixte. Les approches modernes préfèrent souvent les propriétés logiques, qui sont abordées plus loin.
2. Créer des menus de navigation verticaux
writing-mode peut être utilisé pour créer des menus de navigation verticaux, souvent vus sur les sites web japonais et chinois. Cela peut ajouter une touche visuelle unique à votre site :
<ul class="vertical-menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
Dans cet exemple, text-orientation: upright; est utilisé pour s'assurer que le texte dans les éléments du menu vertical est affiché droit plutôt que tourné.
3. Concevoir des mises en page de style magazine
writing-mode peut être incorporé pour réaliser des mises en page de style magazine. Par exemple, vous pourriez avoir une grande image avec du texte vertical superposé pour créer un effet visuel saisissant.
<div class="magazine-section">
<img src="image.jpg" alt="Image de magazine">
<div class="vertical-text">Interview Exclusive</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Requis pour un rendu correct sur tous les navigateurs */
}
Le transform: rotate(180deg); est souvent nécessaire pour garantir un rendu cohérent sur différents navigateurs, en particulier les anciennes versions.
4. Améliorer la visualisation des données
Dans la visualisation de données, writing-mode peut être utile pour étiqueter les axes dans les graphiques et les diagrammes, surtout lorsque l'espace est limité. Par exemple, vous pourriez faire pivoter les étiquettes sur un axe vertical pour éviter qu'elles ne se chevauchent.
Techniques avancées et considérations
Pour exploiter pleinement la puissance de writing-mode, tenez compte de ces techniques avancées et de ces facteurs importants :
1. Propriétés et valeurs logiques
Le CSS moderne introduit des propriétés et des valeurs logiques, qui offrent une manière plus flexible et sémantique de gérer la mise en page et la direction. Au lieu de propriétés physiques comme left et right, des propriétés logiques comme start et end sont utilisées, qui s'adaptent à la direction d'écriture. Par exemple :
margin-inline-start: Équivalent àmargin-leften LTR etmargin-righten RTL.padding-block-start: Équivalent àpadding-topdans les modes d'écriture horizontaux etpadding-leftoupadding-rightdans les modes d'écriture verticaux.
L'utilisation de propriétés logiques rend votre CSS plus adaptable et maintenable, en particulier lorsque vous traitez avec plusieurs directions d'écriture.
2. Combiner `writing-mode` avec d'autres propriétés CSS
writing-mode interagit avec d'autres propriétés CSS, telles que text-orientation, direction, et unicode-bidi, pour contrôler l'apparence et le comportement du texte. Comprendre ces interactions est crucial pour obtenir les résultats souhaités.
text-orientation: Spécifie l'orientation des caractères dans les modes d'écriture verticaux. Les valeurs incluentupright,sideways,mixed, etuse-glyph-orientation.direction: Spécifie la direction de base du texte (LTR ou RTL).unicode-bidi: Contrôle la manière dont l'algorithme bidirectionnel Unicode est appliqué à l'élément.
3. Gérer le texte à direction mixte
Lorsque vous traitez du texte qui contient à la fois des caractères LTR et RTL (par exemple, du texte anglais dans un paragraphe en arabe), il est important d'utiliser la propriété unicode-bidi pour garantir un rendu correct. La valeur bidi-override est souvent utilisée pour forcer une direction spécifique.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. Considérations sur les polices
Toutes les polices ne conviennent pas à l'écriture verticale. Certaines polices peuvent ne pas contenir de glyphes pour l'écriture verticale ou ne pas s'afficher correctement. Lors de l'utilisation de modes d'écriture verticaux, choisissez des polices spécialement conçues pour le texte vertical ou qui ont un bon support pour les glyphes verticaux.
Les polices des pays d'Asie de l'Est (Chine, Japon, Corée) ont généralement un très bon support pour l'écriture verticale.
5. Accessibilité
Assurez-vous que votre utilisation de writing-mode n'a pas d'impact négatif sur l'accessibilité. Fournissez un texte alternatif pour les images et autres contenus non textuels, et assurez-vous que le texte est lisible et compréhensible pour les utilisateurs handicapés. Utilisez des éléments HTML sémantiques et des attributs ARIA pour améliorer l'accessibilité.
6. Compatibilité des navigateurs
writing-mode est bien pris en charge par les navigateurs modernes, mais les anciens navigateurs peuvent nécessiter des préfixes de fournisseurs (par exemple, -webkit-writing-mode, -ms-writing-mode). Utilisez un préprocesseur CSS comme Sass ou Less pour automatiser l'ajout de préfixes de fournisseurs ou utilisez un outil comme Autoprefixer.
Meilleures pratiques pour l'utilisation de `writing-mode`
Pour utiliser efficacement writing-mode et créer des sites web accessibles à l'échelle mondiale, suivez ces meilleures pratiques :
- Utilisez les propriétés et valeurs logiques autant que possible. Cela rendra votre CSS plus adaptable et maintenable.
- Choisissez des polices appropriées pour les modes d'écriture verticaux. Testez vos polices pour vous assurer qu'elles s'affichent correctement en texte vertical.
- Tenez compte de l'accessibilité. Assurez-vous que votre utilisation de
writing-moden'a pas d'impact négatif sur l'accessibilité pour les utilisateurs handicapés. - Testez vos mises en page sur différents navigateurs et appareils. Assurez-vous que vos mises en page s'affichent correctement sur différentes plateformes.
- Utilisez des préprocesseurs CSS ou Autoprefixer pour gérer les préfixes de fournisseurs. Cela vous fera gagner du temps et des efforts et garantira que votre CSS est compatible avec les anciens navigateurs.
- Séparez le contenu de la présentation. Utilisez CSS pour contrôler la présentation de votre contenu et évitez d'utiliser HTML à des fins de style.
Exemples de sites web mondiaux utilisant `writing-mode`
De nombreux sites web à travers le monde utilisent writing-mode à diverses fins, de l'adaptation aux langues RTL à la création de mises en page visuellement uniques. Voici quelques exemples :
- Sites d'actualités en arabe ou en hébreu : Ces sites web utilisent
direction: rtlet potentiellement des ajustements dewriting-modepour un affichage correct du texte. - Sites web d'art et de culture japonais et chinois : Incorporent souvent l'écriture verticale pour les titres, les menus et les éléments décoratifs.
- Magazines de mode : Utilisent fréquemment du texte vertical dans les mises en page visuelles pour des effets stylistiques.
Conclusion
La propriété CSS writing-mode est un outil puissant pour créer des sites web internationalisés et visuellement attrayants. En comprenant les différentes valeurs de la propriété et la manière dont elle interagit avec d'autres propriétés CSS, vous pouvez créer des mises en page qui s'adaptent à différentes directions de texte et améliorent l'expérience utilisateur pour un public mondial. N'oubliez pas de prendre en compte l'accessibilité, la compatibilité des navigateurs et la sélection des polices pour vous assurer que vos sites web sont accessibles et visuellement attrayants pour tous les utilisateurs.
Alors que le développement web continue d'évoluer, la maîtrise de techniques comme writing-mode devient de plus en plus importante pour créer des expériences en ligne véritablement mondiales et inclusives. Embrassez le pouvoir de l'internationalisation et créez des sites web qui trouvent un écho auprès des utilisateurs des quatre coins du monde.