Réponse courte
Définissez la direction sur le conteneur, pas sur la page, et isolez chaque segment en ligne qui va dans l'autre sens. Les chiffres latins dans un texte arabe sont la casse la plus fréquente : 1 247 peut s'afficher 247 1 s'il n'est pas encapsulé et isolé.
Le problème dont personne ne prévient
L'arabe se lit de droite à gauche. L'alphabet latin de gauche à droite. Les chiffres vont de gauche à droite dans les deux cas. Une phrase qui contient les trois n'est pas une direction avec des exceptions : c'est un ensemble de segments, et le navigateur applique l'algorithme bidirectionnel Unicode pour décider de leur ordre.
L'algorithme est bien spécifié et généralement correct. Il se trompe quand il lui manque le contexte que vous avez : il ne peut pas savoir que 2026/044 est un numéro de référence unique plutôt que deux nombres autour d'une barre oblique.
La panne rencontrée en pratique
Un compteur de caractères affiché 1 247 حرف s'affichait 247 1 حرف. Les chiffres étaient bons, le groupement était bon, l'ordre était faux, parce que dans un contexte de droite à gauche les groupes séparés par une espace étaient réordonnés.
La correction consiste à garder le nombre dans son propre segment de gauche à droite :
<!-- faux : tout le segment hérite du RTL -->
<span dir="rtl">1 247 حرف</span>
<!-- juste : nombre isolé, libellé en RTL -->
<span>1 247 <span dir="rtl">حرف</span></span>Les règles qui évitent l'essentiel
- La direction appartient au bloc. Mettez
dir="rtl"sur le paragraphe ou la section réellement en arabe, pas sur<html>d'une page majoritairement française. - Isolez les segments opposés. Utilisez
<bdi>, oudirsur un élément englobant, autour des noms, références, montants et dates. - Ne concaténez jamais des chaînes de directions différentes. Construisez le balisage, laissez le moteur décider de l'ordre.
- Utilisez les propriétés CSS logiques.
margin-inline-startplutôt quemargin-left, pour que la mise en page se reflète correctement. - Testez avec du vrai contenu. Du faux texte ne reproduira jamais ces bugs. Un document bilingue authentique les trouve en quelques secondes.
Les polices font partie du problème
Beaucoup de polices latines n'ont aucune couverture arabe, et le navigateur substitue alors silencieusement une police de repli. Résultat : deux caractères typographiques sur une même ligne, avec des graisses et des lignes de base qui ne correspondent pas. Choisissez une famille couvrant réellement les deux écritures, ou appariez délibérément et vérifiez les métriques verticales au lieu d'espérer.
Pourquoi cela compte commercialement
En Algérie, un document professionnel est couramment bilingue. Un texte qui s'affiche à l'envers n'est pas un défaut cosmétique pour la personne qui le lit : cela ressemble à un outil qui ne comprend pas sa langue, ce qui est une conclusion raisonnable à en tirer. Pour un logiciel destiné à des gens dont le travail doit être exact, cette impression coûte cher.
Voir la page de service : Site web avec IA intégrée pour entreprises algériennes.
Questions fréquentes
Pourquoi les nombres apparaissent-ils inversés dans un texte arabe ?
Les chiffres se lisent de gauche à droite même à l'intérieur d'un texte de droite à gauche. Quand un nombre se trouve dans un segment RTL sans isolation, l'algorithme bidirectionnel peut réordonner les groupes séparés par une espace. Encapsuler le nombre pour qu'il garde sa direction corrige le problème.
Comment mêler correctement arabe et français sur une page web ?
Définissez dir sur le bloc réellement en arabe plutôt que sur tout le document, isolez les segments en ligne de direction opposée avec bdi ou un attribut dir, et utilisez les propriétés CSS logiques pour que la mise en page se reflète correctement.
Quelle police utiliser pour l'arabe et le latin ensemble ?
Choisissez une famille couvrant réellement les deux écritures, ou appariez-en deux délibérément en vérifiant que les graisses et les métriques verticales correspondent. Se fier à la substitution silencieuse produit des lignes de base incohérentes sur une même ligne.
