Mettre Texte Arabe RTL Gutenberg : afficher l’arabe de droite à gauche proprement (direction, alignement, blocs, CSS) sans que les lettres se cassent.

Le point important est simple : aligner à droite ne suffit pas toujours, parce que l’arabe a besoin d’une direction RTL. Tu obtiens le meilleur résultat quand tu fais les deux : direction: rtl et text-align: right.

/* CSS prêt à coller */
.apx-rtl{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}
.apx-rtl *{
  direction: rtl;
  unicode-bidi: isolate;
}

/* Option utile si tu insères une partie française, un lien ou des chiffres */
.apx-ltr{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

Le cas le plus courant sur un site francophone est celui-ci : tu écris une phrase en français, tu ajoutes un mot arabe, puis tu veux que ce mot reste propre en RTL. La solution la plus fiable est de placer l’arabe dans un élément avec dir="rtl".

Si tu colles du texte et que tu vois des caractères cassés, tu peux corriger ça avec : caractères arabes cassés, Unicode arabe problème, lettres séparées copier-coller.

Text-align: right place le texte à droite, mais ça ne change pas forcément la direction de lecture. Pour l’arabe, la direction est la clé : tu veux un flux de droite à gauche. C’est pour ça qu’un bloc peut être aligné à droite, mais rester “logique LTR” et donner un rendu étrange avec les chiffres, parenthèses et liens.

Quand ça “bug”, ce n’est pas que Gutenberg déteste l’arabe. En général, c’est une combinaison entre direction, police, copier-coller, ou caractères invisibles. Tu peux corriger vite si tu identifies le vrai problème.

Si tu tapes l’arabe au lieu de copier-coller, c’est souvent plus propre. Tu peux installer un clavier : Windows 11, Mac, iPhone, Android.

Si tu colles des harakât (fatha, kasra, damma…), le rendu dépend beaucoup de la police et du bloc. Pour un rendu stable, la méthode la plus simple est de garder le bloc en RTL, et d’utiliser une police arabe correcte.

Si tu veux ajouter les voyelles au clavier plutôt que de copier-coller : taper les harakât au clavier.

Si ton site est principalement en arabe, le plus logique est de configurer WordPress pour un environnement RTL. Dans ce cas, beaucoup d’éléments (thème, blocs, alignements) deviennent naturellement plus cohérents.

Parce que l’alignement et la direction ne sont pas la même chose. L’alignement place le bloc, mais la direction indique comment le texte se déroule. Mets une vraie direction RTL sur le bloc : direction: rtl;. Si tu veux une méthode complète : écrire en arabe sur WordPress.

Tu fais pareil qu’un paragraphe : tu mets une classe RTL sur le bloc “Titre”, puis tu appliques le CSS RTL. Si tu veux intégrer les harakât dans un titre : tableau harakât.

C’est souvent lié au chemin du copier-coller et à l’encodage. Tu peux corriger en suivant : texte arabe qui se casse WordPress et Unicode arabe problème. Si tu as besoin d’un clavier : clavier arabe.

Mets le bloc en RTL, puis écris la translittération et la traduction en LTR séparément. Pour les expressions utiles : salutations et expressions arabes courantes. Pour copier un verset proprement : copier un verset sans bug.

Le plus simple est d’installer le clavier sur ton appareil : Windows 11, Mac, iPhone, Android. Pour mettre les voyelles au clavier : taper les harakât.

Si tu veux garder un site propre et lisible (même avec des blocs arabes), ces sujets complètent parfaitement le RTL dans Gutenberg.

• 🖊️ Écrire en arabe sur WordPress

  Direction RTL, rendu propre, blocs, citations, et affichage stable.
  ›
• 🧩 Texte arabe qui se casse (WordPress)

  Lettres séparées, collage qui casse, solutions simples et efficaces.
  ›
• 🧷 Unicode arabe : problème

  Quand les caractères “buggent”, et comment retrouver un affichage normal.
  ›
• ⌨️ Clavier arabe

  Installer, changer de langue, taper l’arabe et les voyelles.
  ›

Voici des articles proches, utiles juste après avoir réglé le RTL dans Gutenberg. Tu peux les ouvrir selon ton besoin (clavier, harakât, affichage, copier-coller…).

• ⌨️ Clavier arabe

  Écrire l’arabe proprement, sans dépendre du copier-coller.
  ›
• 💠 Taper les harakât au clavier

  Ajouter fatha/kasra/damma sans casser l’affichage.
  ›
• 💠 Tableau Harakat Arabe

  Comprendre et reconnaître les voyelles courtes.
  ›
• 🧩 Texte arabe séparé : solution

  Réparer les lettres séparées et les collages instables.
  ›
• 🧷 Caractères arabes cassés

  Rendre le texte lisible quand des symboles apparaissent.
  ›
• 📖 Copier un verset sans bug

  Copier-coller stable pour WordPress et Gutenberg.
  ›