jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Convertisseur de propriétés logiques CSS

Convertissez les propriétés CSS physiques en propriétés logiques pour les mises en page RTL et multilingues.

Chargement de l'outil...

Qu'est-ce que Convertisseur de propriétés logiques CSS ?

Les proprietes logiques CSS utilisent des directions relatives au mode d'ecriture au lieu de directions physiques. L'axe Inline (direction du flux de texte) et Block (direction perpendiculaire) remplacent Left, Right, Top et Bottom. Ainsi, le meme CSS fonctionne pour les langues de gauche a droite, de droite a gauche et verticales sans necessiter de surcharges. Par exemple, margin-inline-start s'applique au cote gauche en LTR et au cote droit en RTL.

Réponse rapide

Convertissez les proprietes CSS physiques comme margin-left et padding-right en equivalents logiques tenant compte du mode d'ecriture. Cela permet aux mises en page de s'adapter automatiquement aux modes d'ecriture de droite a gauche et verticaux sans surcharges separees.

Last updated: 2026-06-11

Limites

  • Certaines proprietes logiques abregees comme border-inline, border-block et inset-inline ont une compatibilite navigateur irreguliere par rapport aux proprietes logiques de base.
  • Le convertisseur traite la conversion d'une seule propriete. La migration d'une grande feuille de style vers des proprietes logiques necessite la mise a jour de chaque paire physico-logique et la verification qu'aucun cas limite de direction mixte ne subsiste.
  • Les proprietes logiques se mappent aux proprietes physiques en fonction du writing-mode et de la direction de l'element. Un meme inline-start correspond a left en LTR et a right en RTL. Le code genere se comporte donc differemment selon la direction de la langue du document, ce qui necessite des tests en modes LTR et RTL.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez la propriete CSS physique que vous souhaitez convertir, comme margin-left ou padding-right.
  2. Selectionnez l'equivalent logique parmi les suggestions disponibles.
  3. Saisissez la valeur de la propriete.
  4. Copiez la declaration de propriete logique dans votre feuille de style et testez dans les deux directions LTR et RTL.

A quoi il sert

  • Preparer du CSS qui fonctionne pour les sites multilingues avec prise en charge des langues RTL.
  • Ecrire des styles de composants independants de la direction qui ne necessitent pas de surcharges RTL distinctes.
  • Reduire le besoin d'une feuille de style RTL separee en utilisant des proprietes logiques des le depart.

Cas d'usage

Exemples concrets

Exemple

Carte avec prise en charge RTL automatique

Un composant de carte utilise margin-inline-end au lieu de margin-right. En mode RTL, l'espacement s'inverse automatiquement sans surcharges CSS supplementaires.

Exemple

Mise en page en mode d'ecriture vertical

Une mise en page utilise padding-block-start au lieu de padding-top pour que l'espacement reste correct en mode d'ecriture vertical, ou le haut et le bas ont une signification differente.

Erreurs frequentes

  • Convertir chaque propriete physique sans verifier la compatibilite navigateur pour la variante de propriete logique specifique.
  • Melanger des proprietes physiques et logiques dans la meme declaration, ce qui peut provoquer un comportement incoherent entre les modes d'ecriture.
  • Supposer que toutes les proprietes logiques sont integralement prises en charge par les navigateurs. Certaines proprietes logiques abregees sont plus recentes que l'ensemble de base.

Vérification

  1. Appliquez les proprietes converties a une page et basculez l'attribut direction de ltr a rtl sur l'element html pour verifier que la mise en page s'inverse correctement.
  2. Testez la page en modes LTR et RTL pour confirmer que les espacements, les bordures et l'alignement se comportent comme attendu dans chaque direction.

FAQ

Questions sur Convertisseur de propriétés logiques CSS

Tous les navigateurs prennent-ils en charge les proprietes logiques ?

Chrome 87+, Edge 87+, Safari 15+ et Firefox 66+ prennent en charge l'ensemble de base des proprietes logiques. Certaines variantes abregees sont plus recentes. Verifiez la compatibilite de la propriete specifique que vous prevoyez d'utiliser.

Dois-je remplacer toutes les proprietes physiques par des proprietes logiques ?

Pour les sites multilingues avec prise en charge RTL ou verticale, oui. Pour les sites exclusivement en anglais, les proprietes logiques restent acceptables mais les proprietes physiques demeurent valides et sont plus simples a lire.

Quelle est la difference entre l'axe inline et l'axe block ?

L'axe inline suit la direction du flux de texte. En anglais, l'axe inline est horizontal. L'axe block est perpendiculaire au flux de texte, donc vertical en anglais. Dans un mode d'ecriture vertical, ces directions s'inversent.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi