Pourquoi les propriétés logiques : internationalisation
Comprenez pourquoi les propriétés CSS physiques perturbent les mises en page RTL et comment les propriétés logiques corrigent ce problème.
Pourquoi les propriétés logiques : internationalisation est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Le problème des propriétés physiques
Le CSS traditionnel utilise des directions physiques : haut, droite, bas, gauche. Elles conviennent aux langues s’écrivant de gauche à droite (LTR), comme l’anglais, mais posent problème pour les langues s’écrivant de droite à gauche (RTL), comme l’arabe et l’hébreu, ou pour les systèmes d’écriture verticaux, comme le japonais traditionnel.
Physique ou logique
Comparez :
- Physique : haut, droite, bas, gauche — fixe par rapport à l’écran
- Logique : block-start, block-end, inline-start, inline-end — relatif au mode d’écriture
Axes des blocs et des lignes
Chaque système d’écriture possède :
- Axe des blocs : direction dans laquelle les blocs de texte s’empilent (verticale en LTR/RTL, horizontale dans une écriture verticale)
- Axe des lignes : direction dans laquelle le texte s’écoule sur une ligne (horizontale en LTR/RTL, verticale dans une écriture verticale)
Mise en page LTR ou RTL
En LTR (anglais) : inline-start = gauche, inline-end = droite. En RTL (arabe) : inline-start = droite, inline-end = gauche. Les propriétés logiques s’adaptent automatiquement, sans requêtes de média ni JavaScript.
Le coût réel des propriétés physiques
Un site conçu avec des propriétés physiques nécessite une feuille de styles de surcharge RTL distincte ou des surcharges pour chaque propriété de marge, de remplissage, de bordure, de position et d’alignement du texte qui doit s’inverser. Cela double le travail de maintenance.
Le mode d’écriture modifie les axes
Lorsque writing-mode: vertical-rl est défini (japonais ou coréen verticaux), l’axe des blocs devient horizontal et l’axe des lignes devient vertical. Les propriétés logiques s’adaptent automatiquement.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Adoption dans le CSS moderne
Tous les navigateurs principaux prennent en charge les propriétés logiques. La spécification CSS recommande désormais d’utiliser des propriétés logiques pour toute propriété liée à une direction susceptible de changer avec le mode ou la direction d’écriture.
Impact pratique
Une seule base de code utilisant correctement les propriétés logiques prend en charge LTR, RTL et l’écriture verticale sans duplication. Le CSS suit simplement les valeurs de direction et de writing-mode sur l’élément racine.
dir="rtl" dans HTML
Définissez la direction d’écriture dans HTML, et pas uniquement en CSS :
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Adoption progressive
Vous n’avez pas besoin de réécrire tout votre CSS en une seule fois. Commencez à utiliser les propriétés logiques pour les nouveaux composants. Au fil du temps, refactorisez les propriétés physiques des composants qui se trouvent dans des zones sensibles à l’internationalisation.
Propriété CSS direction
La propriété CSS direction (ltr ou rtl) agit sur la direction d’écoulement des lignes. Elle fonctionne avec writing-mode pour définir le contexte complet du système d’écriture de l’élément.
Vérification rapide
Pourquoi les propriétés CSS physiques comme margin-left posent-elles problème dans les mises en page RTL ?
Récapitulatif
Les propriétés logiques CSS utilisent le modèle des blocs et des lignes plutôt que les directions physiques haut, droite, bas et gauche. Cela permet à une seule feuille de styles de fonctionner avec les systèmes d’écriture LTR, RTL et verticaux. Les propriétés direction et writing-mode définissent le contexte auquel les propriétés logiques s’adaptent automatiquement.
Questions Fréquemment Posées
La leçon « Pourquoi les propriétés logiques : internationalisation » est-elle gratuite ?
Oui — le texte complet de « Pourquoi les propriétés logiques : internationalisation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Pourquoi les propriétés logiques : internationalisation » ?
Comprenez pourquoi les propriétés CSS physiques perturbent les mises en page RTL et comment les propriétés logiques corrigent ce problème. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Pourquoi les propriétés logiques : internationalisation » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi les propriétés logiques : internationalisation
- Directions des blocs et des éléments en ligne
- Marges, espacements internes et bordures logiques
- Propriétés logiques dans les mises en page RTL