RTL-soutien
1) Principes
1. RTL n'est pas une traduction de texte, mais une mise en miroir de la pensée. Les axes, l'ordre de lecture, l'ordre de mise au point, les gestes et la navigation changent.
2. Propriétés CSS logiques au lieu de left/right. Passez à « margin-inline-start », « inset-inline-end », « border-start-start-radius », etc.
3. Nous incluons globalement la direction, isolons localement les fragments LTR. Les chiffres, URL, codes, e-mail et IBAN sont toujours lus de gauche à droite.
4. Mettez en miroir ce qui dépend de la direction et non du sens. « Play », « ↗ », « ↙ » et les icônes de l'horloge/du processus peuvent ne pas être en miroir.
5. Testez le pseudo-RTL. Incluez 'dir =' rtl '/' direction : rtl 'et les pseudo-trajets jusqu'à la sortie.
2) Direction : 'dir'et propriétés logiques
Globalement sur le document/racine :html
<html lang="ar" dir="rtl"> … </html>css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }html
<p dir="auto">…</p>3) BiDi et l'isolation du texte mixte
Le mélange de l'arabe/hébreu avec le latin/les nombres brise l'ordre des caractères. Utiliser l'isolation BiDi :- Tags : '' (isole la direction), '' (force redéfinit).
- '\u2066 'LRI/'\u2067' RLI - début LTR/RTL-isolation, '\u2069 'PDI - fin,
- \ u200E 'LRM/'\u200F' RLM sont des marqueurs à un octet pour les inserts courts.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navigation, hiérarchie et mises en page
Breadcrumbs : l'ordre est miroir : « الصفحة الرئيسية ‹ الرهان ‹ التأكيد ».
Panneaux/menus : Navbar principal - à droite ; « back » indique à gauche (au début de la ligne RTL).
Cartes/listes : aligner les titres sur inline-start ; les icônes de statut sont à inline-end.
Carrousels et swips : glisser vers inline-start (en RTL - à droite). Les indicateurs de page sont également miroirs.
Pagination : la flèche « suivant » passe à inline-start, la flèche « précédent » à inline-end.
5) Icônes et images
Mettez en miroir les pictogrammes directionnels : flèches, « avant/arrière », tête de série, « déplier/réduire ».
Ne pas mettre en miroir : icônes de texte, graphiques, montres (s'il y a une vraie flèche temporelle), logos de marques.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Pour SVG : Utilisez 'bou-box : view-box ;' pour ne pas « nager ».
Évitez le texte à l'intérieur des images → localisez-le en couches individuelles.
6) Formulaires et entrées
Alignement par contenu : champs de texte par 'text-bou : start ;', nombres/montants/URL/e-mail - LTR.
Attributs :html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">Placeholder/label sont localisés, mais le caret dans les nombres/codes doit aller de gauche à droite.
Masques : ne pas « intercepter » le caret dur ; soutenez l'insertion et la sélection.
Liste/radio/checkbox : signatures à droite des contrôles, zones de clic ≥ 44 × 44 px.
Les sliders sont min→max : sur RTL, le minimum est à droite, le maximum est à gauche (ou montrez l'échelle sans inversion et les chiffres LTR).
7) Nombres, dates, devises
Par défaut, les localités arabes utilisent des indocyphres arabes (٠١٢٣٤٥٦٧٨٩). Solution - Politique d'entreprise :- Dans l'IU financière, les chiffres latins (0-9) sont plus fréquents pour l'interopérabilité, mais le format (espaces/signes) est local.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Temps relatif ('Intl. RelatifTimeFormat '), séparateurs directionnels et abréviations locales de jours/mois.
8) Typographie et lisibilité
Polices avec un bon graphème arabe/juif et ligatures (Arabic shaping).
Intervalle entre les lignes 1. 4–1. 6; éviter les trackings étroits.
Pour l'arabe, le kashida (allongement des traits) est valide lors de l'alignement en largeur - incluez soigneusement ('text-justify : inter-word ; '/support du moteur).
Interdisez les latins italiques à l'intérieur de la ligne arabe (gâche le rythme vertical).
9) Graphiques, échelles et tableaux
Les axes X vont de droite à gauche ; la légende s'aligne sur l'inline-end.
Colonnes des tables : Colonne « primaire » (nom/jeu) - à droite ; les numéros/montants peuvent rester LTR et s'aligner sur inline-end.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y et lecteurs d'écran
Assurez-vous que 'lang = « ar « '/' lang = » he » est affiché : le moteur TTS choisira la voix droite.
Si vous changez de direction dynamiquement, ne passez pas « dir » aux tranches inutiles.
Mise à jour ('aria-live = « polite ») est un texte sans mélange de directions.
Les icônes ne transmettent pas le sens sans étiquettes de texte ; utilisez 'aria-label'.
11) Spécificité iGaming
11. 1 Coupon de mise (betslip)
Ordre des champs : montant → coefficient → gains potentiels ; signatures à droite, nombres/coefficients LTR.
Mettre en surbrillance les mises à jour des coefficients ; il n'est pas nécessaire de mettre en miroir les flèches « haut/bas » (le sens de la direction du prix est universel).
11. 2 Matchs/marchés
Alignez la liste des ligues/événements sur inline-start (RTL à droite).
Les minuteurs et le compte sont LTR 'dir = « ltr » avec des chiffres tabulaires (« font-variant-numeric : tabular-nums ; »).
11. 3 Paiements/CUS
Les champs IBAN/BIC/téléphone sont toujours LTR.
Nom/adresse bancaire - RTL.
Les erreurs/validateurs montrent les marqueurs à droite.
11. 4 tournois/leaders
Colonnes : position, pseudo, lunettes - position à droite ; aligner les lunettes sur inline-end (chiffres LTR).
12) Production et essais
Pseudo-RTL dans la vierge :css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Snapshots de mise en page à 'dir = rtl'.
- Vérifie l'absence de 'left/right' dans le CSS (lint).
- E2E : ordre de tabulation, balayage du carrousel, comportement des sliders.
- Tests visuels avec texte arabe + inserts LTR (e-mail, somme).
13) Tokens de système de conception (exemple)
json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}14) Snappets
Changement de direction dans l'application (React) :tsx import { useEffect } from "react";
export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15) Anti-modèles
Le « left/right » dur dans les styles est → cassé par RTL.
Entrez les nombres/IBAN/URL sans 'dir = « ltr » → caret « cassé » et l'ordre.
Mise en miroir des logos/graphiques/montres.
Le même jeu d'icônes est toujours en miroir - sans exception au sens.
Les carrousels, les feuilles et les pagines ne sont pas inversés.
Chaînes mixtes sans isolation BiDi → caractères « dansants ».
16) Métriques
RTL coverage : part des écrans passés par RTL revue.
BiDi défauts/release : nombre de bugs de texte mixte.
Temps d'exécution des tâches clés (LTR vs RTL) : ne doit pas être différent> 5-10 %.
Erreur de saisie dans les formes de nombres : proportion d'événements avec un caret/masque incorrect.
CLS/perf : pas de sauts de mise en page lors de la connexion « dir ».
17) Liste de vérification QA
Direction et mise en page
- '' pour les localités RTL ; ': dir (rtl)' styles sont appliqués.
- Propriétés logiques au lieu de 'left/right'.
- Navigatsiya/bredkramby/karouseli/paginatsiya зеркалятся est correct.
Texte et BiDi
- Les nombres/devises/URL/e-mail sont 'dir =' ltr 'ou' '.
- Il n'y a pas de caractères « inversés » dans les lignes mixtes.
- Les dates/devises sont localisées via 'Intl.'.
Formulaires
- Signatures à droite ; les zones de la clique ≥ 44 × 44 px.
- Téléphone/IBAN/somme - LTR caret, masques corrects.
- Les sliders/minimums/maximums se comportent comme prévu.
Icônes/Images
- Seules les directions sont mises en miroir ; les exceptions ont été respectées.
- Il n'y a pas de texte dans les images sans versions locales.
A11u/Performance
- « lang » exposé ; SR lit correctement.
- Il n'y a pas de redessinement supplémentaire lors du changement de 'dir'.
- Les anneaux de contraste/focus correspondent à AA.
18) Documentation dans le système de conception
Section Direction & BiDi : stratégie de mise en miroir, liste d'exceptions pour les icônes.
Jeu de jetons RTL et linter de styles (interdiction 'left/right').
Galerie Do/Don't : carrousels, délires, formes de nombres, sliders, graphiques.
Les scripts pseudo-RTL et les listes de chèque sont revus.
Résumé succinct
Le support RTL correct est une propriété CSS logique, une mise en miroir consciente et une isolation BiDi stricte. Isolez les nombres/URL dans LTR, miroirs de navigation et icônes directionnelles, gardez les formes prévisibles et les graphiques lisibles. Ainsi, l'interface pour l'arabe, l'hébreu, le farsi ou l'ourdou sera naturelle et rapide - du coupon de paris et de formulaires de paiement aux tables de tournois et de matchs en direct.