Suporte de Apoio ao
1) Princípios
1. A SE não é uma tradução de texto, mas um espelho de pensamento. Alteram eixos, ordem de leitura, ordem de foco, gestos e navegação.
2. Propriedades CSS lógicas em vez de left/right. Passe para 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius', etc.
3. Incluímos globalmente a direção, isolamos localmente os fragmentos LTR. Números, URL, códigos, e-mail e IBAN são sempre lidos esquerda-direita.
4. Espelhe o que depende da direção, não do sentido. «Play», «↗», «↙» e os ícones do relógio/processo podem não se espelhar.
5. Teste o pseudônimo-RENAULT. Inclua 'dir =' se '/' direction 'e pseudo-operadores antes de sair.
2) Direção: 'dir' e propriedades lógicas
Globalmente no documento/raiz: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 e isolar texto misto
Misturar árabe/hebraico com latim/números rompe a ordem de caracteres. Use o isolamento BiDi:- Marcas de formatação: '' (isolando a direção), ' '(forçado a substituir).
- '\u2066 'LRI/'\u2067' RLI - Início do isolamento LTR/SE, '\u2069 'PDI - Fim,
- '\u200E 'LRM/'\u200F' RLM - Marcadores de um bits para inserções curtas.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navegação, hierarquia e layouts
Breadcrumbs: ordem espelhada: « ».
Painéis/menus: bar principal - direita; «Para trás» indica para a esquerda (para o início da linha de verba).
Cartões/listas: Aline os cabeçalhos em inline-start; ícones de status - para inline-end.
Carrossel e Swippee: flutuação em direção ao inline-start (para a direita). Os indicadores de página também são espelhados.
Paginação: A seta seguinte vai para inline-start, a anterior para inline-end.
5) Ícones e imagens
Espelhe os ícones direcionados: seta, «para trás e para trás», «para trás e para trás».
Não espelhe: ícones de texto, gráficos, relógios (se houver uma seta de tempo real), logótipos de marcas.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Para SVG: use 'transfer-box: view-box;' para não «flutuar».
Evite o texto dentro das imagens → localize as camadas individuais.
6) Formulários e entrada
Alinhamento de conteúdo: campos de texto por 'text-align: start;', números/somas/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ão localizados, mas caret em números/códigos deve ir da esquerda para a direita.
Máscaras: Não «intercepte» caret rígido; suporte a inserção e seleção.
Lista/rádio/checkbox: assinaturas à direita dos controladores, zona do clique ≥ 44 x 44 px.
Sliders: No SE, o mínimo na borda direita, no máximo na esquerda (ou exibe escala sem inversão e números LTR).
7) Números, datas, divisas
Por padrão, as localizações árabes usam indocifras árabes (٠١٢٣٤٥٦٧٨٩). A solução é política de negócios:- Na UI financeira, os números latinos (0-9) são mais frequentes por interoperabilidade, mas os formatos (espaços/sinais) são localizados.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Hora relativa ('Intl. RelativeTimeFormat '), separadores e cortes locais de dias/meses.
8) Tipografia e leitura
Fontes com bom grafema árabe/judeu e ligaduras (Arabic shaping).
Intervalo de linha 1. 4–1. 6; evite trekings estreitos.
Para árabe, é aceitável kashida (alongamento de barras) ao alinhar a largura - ative com cuidado ('text-justify: inter-word; '/suporte de motor).
Proíba o cursivo do latim dentro da linha árabe (estraga o ritmo vertical).
9) Gráficos, escalas e tabelas
Os eixos X vão da direita para a esquerda; a legenda é alinhada pelo inline-end.
Colunas de tabela: coluna primária (nome/jogo) - direita; números/somas podem permanecer LTR e ser alinhados pelo inline-end.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y e screeners
Verifique se 'lang =' ar '/' lang = 'he' está exposto: o TTS escolhe a voz correta.
Altere a direção dinâmica com cuidado - não altere 'dir' em fatias sem necessidade.
Atualizações Live ('aria-live =' polite ') - texto sem mistura de direções.
Os ícones não transmitem o significado sem marcas de texto; use 'aria-label'.
11) Especificidades iGaming
11. 1 cupom de apostas (betslip)
Ordem de campos: soma → coeficiente → potencial ganho; assinaturas à direita, números/coffs LTR.
Atualize os coeficientes de realce suavemente; seta «para cima/para baixo» não é necessário espelhar (sentido de direção de preço - versátil).
11. 2 Jogos/Mercados
Aline a lista de eventos/ligas para o inline-start (no SE à direita).
Os temporizadores e a conta são LTR 'dir = «ltr»' com números de tabela ('fonte-variant-numérico: tabular-nums;').
11. 3 Pagamentos/CUS
Campos IBAN/BIC/telefone sempre LTR.
Os nomes bancários/endereço são de SE.
Erros/validadores mostram marcadores à direita.
11. 4 Torneios/liderbordes
Colunas: posição, nico, pontos - posição à direita; alinhar os óculos em inline-end (números LTR).
12) Produção e testes
Pseudo-RENAULT em:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Snapshots de layout a 'dir ='.
- Verificando a ausência de 'left/right' no CSS (lente).
- E2E: ordem de tabulação, swipps de carrossel, comportamento de sliders.
- Testes visuais com texto árabe + inserções LTR (e-mail, soma).
13) Sistema de design de tokens (exemplo)
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
Mudar de direção no aplicativo (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) Antipattern
"Left/right' rígido em estilos de → é quebrado por SE.
Digite números/IBAN/URL sem 'dir =' ltr '' → 'quebrado' caret e ordem.
Espelhar logos/gráficos/relógios.
O mesmo conjunto de ícones é sempre espelhado, sem exceções de sentido.
Carrosséis, folhas e paginações não estão invertidos.
Linhas mistas sem isolamento BiDi → caracteres «dançantes».
16) Métricas
A parte dos ecrãs que passaram por «RAM».
BiDi defeitos/lançamento: número de bags de texto misto.
Tempo de execução de tarefas-chave (LTR vs): não deve variar> 5-10%.
Erro ao digitar nos formulários de números: proporção de eventos com caret/máscara incorreta.
CLS/perfis: Sem saltos de layout em 'dir' - chave.
17) QA-folha de cheque
Direção e layout
- '' para os lotes ',': dir '
- Propriedades lógicas em vez de 'left/right'.
- Navegação/bradkramba/carrossel/paginação se espelham corretamente.
Texto e BiDi
- Números/moedas/URL/e-mail - 'dir =' ltr 'ou' '.
- Não há caracteres invertidos em linhas mistas.
- Localizadas datas/divisas através de 'Intl'.
Formulários
- Assinaturas à direita; zonas do clique ≥ 44 x 44 px.
- Telefone/BAN/montante - LTR caret, máscaras corretas.
- Os sliders/mínimos/máximos comportam-se de forma esperada.
Ícones/Imagens
- Espelham-se apenas os apontados; exceções foram respeitadas.
- Não há texto em imagens sem versão local.
A11u/Performance
- 'lang' está exposto; A SR lê corretamente.
- Não há redescobrimento ao mudar 'dir'.
- Contraste/anéis de foco correspondem a AA.
18) Documentação em design
A seção Direction & BiDi é uma política de espelhamento, uma lista de exceções para ícones.
Conjunto de tokens e estilo linter (proibição de 'left/right').
Galeria Do/Don 't: carrossel, bradkrambs, formas de números, sliders, gráficos.
Os script são pseudônimos e as folhas de cheque estão com ciúmes.
Resumo curto
O suporte a se aplicar é a propriedade CSS lógica, espelhamento consciente e isolamento BiDi rigoroso. Isole números/URL no LTR, espelhar navegação e ícones direcionados, mantenha os formulários previsíveis e os gráficos legíveis. Assim, a interface para árabe, hebraico, farsi ou urdu será natural e rápido - desde o cupom de taxas e formulários de pagamento até tabelas de torneios e jogos ao vivo.