Soporte de RTL
1) Principios
1. RTL no es una traducción de texto, sino un espejo de pensamiento. Cambian los ejes, el orden de lectura, el orden de enfoque, los gestos y la navegación.
2. Propiedades lógicas CSS en lugar de left/right. Vaya a 'margin-inline-start', 'inset-inline-end',' border-start-start-radius ', etc.
3. Incluimos globalmente la dirección, aislamos localmente los fragmentos LTR. Los números, URL, códigos, e-mail e IBAN siempre se leen de izquierda a derecha.
4. Espejen lo que depende de la dirección, no del sentido. Es posible que «play», «↗», «↙» e iconos de reloj/proceso no se espejen.
5. Pruebe pseudo-RTL. Habilite 'dir =' rtl'/' direction: rtl' y pseudo-procesadores antes de salir.
2) Dirección: 'dir' y propiedades lógicas
Globalmente en el documento/raíz: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 y aislamiento de texto mixto
La mezcla del árabe/hebreo con el latín/números rompe el orden de los caracteres. Utilice el aislamiento BiDi:- Etiquetas: '' (aísla la dirección), '' (anula forzosamente).
- '\u2066 'LRI/'\u2067' RLI - inicio del aislamiento LTR/RTL, '\u2069 'PDI - final,
- '\u200E 'LRM/'\u200F' RLM - marcadores de un solo byte para insertos cortos.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navegación, jerarquía y diseños
Breadcrumbs: el orden de espejo: "الصفحة الرئيسية‹ الرهان "التأكيد".
Paneles/menús: la barra principal es a la derecha; «hacia atrás» indica a la izquierda (al principio de la línea RTL).
Tarjetas/listas: alinee los encabezados en línea-start; iconos de estado - a inline-end.
Carruseles y deslizamientos: deslizamiento hacia inline-start (en RTL - derecha). Los indicadores de página también son espejados.
Paginación: la flecha «siguiente» va a inline-start, la «anterior» a inline-end.
5) Iconos e imágenes
Espeje los pictogramas direccionales: flechas, «adelante/atrás», cabeza de juego, «desplegar/enrollar».
No espejes: iconos de texto, gráficos, relojes (si hay una flecha de tiempo real), logotipos de marcas.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Para SVG: use 'transformación-box: view-box;' para no «navegar».
Evite el texto dentro de las imágenes → localice en capas separadas.
6) Formularios y entrada
Alineación de contenido: cuadros de texto por 'text-align: start;', numéricos/sumas/URL/e-mail - LTR.
Atributos: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 están localizados, pero caret en números/códigos debe ir de izquierda a derecha.
Máscaras: no «intercepte» la careta rígidamente; admitir inserción y selección.
Lista/radio/casilla de verificación: firmas a la derecha de los controles, zonas de clic ≥ 44 × 44 px.
Control deslizante min→max: en RTL, mínimo en el borde derecho, máximo en el izquierdo (o mostrar la escala sin inversión y los dígitos LTR).
7) Números, fechas, monedas
De forma predeterminada, se aplican indocifras árabes (٠١٢٣٤٥٦٧٨٩) en los locales árabes. Solución - Política de negocio:- En la IU financiera, es más común mostrar números latinos (0-9) en aras de la interoperabilidad, pero el formato (espacios/signos) es local.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Tiempo relativo ('Intl. RelativeTimeFormat '), separadores direccionales y reducciones locales de días/meses.
8) Tipografía y legibilidad
Fuentes con buen grafema árabe/hebreo y ligaduras (Arabic shaping).
Intervalo entre líneas 1. 4–1. 6; evite los tracking estrechos.
Para el árabe, es válido kashida (extensión de trazos) cuando se alinea en anchura: habilite cuidadosamente ('text-justify: inter-word; '/soporte de motor).
Prohibir la cursiva latina dentro de la línea árabe (estropea el ritmo vertical).
9) Gráficos, escalas y tablas
Los ejes X van de derecha a izquierda; la leyenda se alinea en línea-fin.
Columnas de tabla: columna «primaria» (nombre/juego) - derecha; los números/sumas pueden permanecer LTR y alinearse en línea.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y y captores de pantalla
Asegúrese de que 'lang =' ar '/' lang = 'he' está expuesto: el motor TTS seleccionará la voz correcta.
Los cambios dinámicos en la dirección de voz suavemente - no cambie 'dir' en los fragmentos sin necesidad.
Actualizaciones en vivo ('aria-live =' polite '): texto sin mezclar direcciones.
Los iconos no transmiten el significado sin etiquetas de texto; use 'aria-label'.
11) Especificidad de iGaming
11. 1 Cupón de apuestas (betslip)
Orden de los campos: suma → coeficiente → ganancias potenciales; firmas a la derecha, números/coffes LTR.
Resalte suavemente las actualizaciones de coeficientes; las flechas «arriba/abajo» no necesitan espejo (el significado de la dirección del precio es universal).
11. 2 Partidos/Mercados
Alinee la lista de ligas/eventos por inicio en línea (en RTL - derecha).
Los temporizadores y la cuenta son LTR 'dir = «ltr»' con números de tabla ('font-variant-numeric: tabular-nums;').
11. 3 Pagos/CCA
Los campos IBAN/BIC/teléfono son siempre LTR.
Nombres bancarios/dirección - RTL.
Los errores/validadores muestran marcadores a la derecha.
11. 4 Torneos/Equipos de liderazgo
Columnas: posición, nick, puntos - posición a la derecha; alinear los puntos en línea-fin (números LTR).
12) Producción y pruebas
Pseudo-RTL en virgo:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Snapshots de diseño en 'dir = rtl'.
- Comprobación de la ausencia de 'izquierda/derecha' en CSS (lente).
- E2E: orden de tabulación, deslizamiento del carrusel, comportamiento de los deslizadores.
- Pruebas visuales con texto árabe + inserciones LTR (e-mail, suma).
13) Tokens del sistema de diseño (ejemplo)
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) Snippets
Cambiar de dirección en la aplicación (Nat):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) Antipattern
El 'left/right' rígido en estilos de → se rompe por RTL.
Escriba números/IBAN/URL sin 'dir = «ltr»' → caret «roto» y orden.
Espejado de logotipos/gráficos/relojes.
El mismo conjunto de iconos se espeja siempre - sin excepciones por sentido.
Los carruseles, listones y paginaciones no están invertidos.
Líneas mixtas sin aislamiento BiDi → caracteres «bailables».
16) Métricas
RTL coverage: proporción de pantallas que han pasado el rugido RTL.
BiDi-defectos/liberación: número de errores de texto mixto.
Tiempo de ejecución de tareas clave (LTR vs RTL): no debe variar> 5-10%.
Error de entrada en formularios de números: proporción de eventos con caret/máscara incorrecta.
CLS/pearf: sin saltos de diseño en el 'dir' -el cambio.
17) Lista de comprobación de QA
Dirección y diseño
- 'Propiedades lógicas en lugar de 'izquierda/derecha'.
- Navigatsiya/bredkramby/karuseli/paginatsiya zerkalyatsya es correcto.
Texto y BiDi
- Números/Monedas/URL/e-mail - 'dir =' ltr 'o' '.
- No hay caracteres «invertidos» en las líneas mixtas.
- Fechas/monedas localizadas a través de 'Intl.'.
las Formas
- Firmas a la derecha; zonas de clic ≥ 44 × 44 px.
- Teléfono/IBAN/suma - LTR caret, máscaras correctas.
- Los deslizadores/mínimos/máximos se comportan de forma esperada.
Iconos/Imágenes
- Espejado sólo direccional; se han respetado las excepciones.
- No hay texto en las imágenes sin versiones locales.
A11u/Performance
- 'lang' está expuesto; SR lee correctamente.
- No hay sobreescrituras al cambiar 'dir'.
- Los anillos de contraste/enfoque corresponden a AA.
18) Documentación en el sistema de diseño
Sección Direction & BiDi: política de duplicación, lista de excepciones para iconos.
Conjunto de tokens RTL y linter de estilos (prohibición de 'left/right').
Galería Do/Don 't: carruseles, delirios, formas de números, deslizadores, gráficos.
Scripts pseudo-RTL y listas de cheques con rugido.
Resumen breve
El soporte RTL correcto son propiedades lógicas CSS, espejado consciente y aislamiento BiDi estricto. Aísle los números/URL en LTR, la navegación del espejo y los iconos direccionales, mantenga las formas predecibles y los gráficos legibles. Así que la interfaz para árabe, hebreo, farsi o urdu será natural y rápida - desde cupones de apuestas y formularios de pago hasta mesas de torneos y partidos en vivo.