Comparação de layout RTL e LTR com alinhamento de texto

Guia Prático

Fundamentos de Webdesign RTL para Árabe, Persa e Hebraico

O suporte a escritas da direita para a esquerda (RTL), como árabe, persa e hebraico, exige técnicas especiais de webdesign. Este guia explica os fundamentos essenciais: o atributo dir, layouts espelhados, propriedades CSS lógicas, o tratamento de números e latim incorporado, bem como a seleção adequada de fontes e o espelhamento de ícones. O objetivo é criar uma experiência consistente e amigável para idiomas RTL.

ar: Árabe RTL
fa: Persa RTL
he: Hebraico RTL

Atributo dir fundamental

O atributo dir com o valor 'rtl' é a base para qualquer design RTL. Geralmente é definido na tag <html> ou <body> e afeta o alinhamento do texto, a ordem padrão das células da tabela e a direção das propriedades CSS como 'text-align'. Sem esse atributo, o conteúdo permanece alinhado à esquerda, o que parece antinatural para idiomas RTL. Além disso, você deve sobrescrever 'dir' no nível do contêiner quando houver direções mistas. Um atributo dir ausente ou incorreto resulta em layouts difíceis de ler e, portanto, deve ser priorizado.

Layout espelhado e propriedades CSS lógicas

Em vez de propriedades físicas como 'left' e 'right', utilize propriedades CSS lógicas como 'margin-inline-start' e 'padding-inline-end'. Elas se adaptam automaticamente à direção da escrita e evitam substituições manuais. Um layout espelhado significa que a barra de navegação começa à direita e o conteúdo à esquerda. Com valores lógicos como 'float: inline-start' ou 'text-align: start', você consegue isso sem media queries. Propriedades modernas de CSS Grid e Flexbox como 'justify-content: flex-start' funcionam corretamente de acordo com o atributo dir. Teste sempre com conteúdo real, pois as propriedades lógicas não são interpretadas da mesma forma por todos os navegadores.

Exemplo de propriedades lógicas CSS com inline-start e end

Números e latim incorporado

Em textos RTL, números e letras latinas incorporadas permanecem alinhados da esquerda para a direita. Isso apresenta desafios, pois podem interromper a direção da leitura. Use o atributo 'unicode-bidi' ou 'direction: ltr' para esses elementos, garantindo uma exibição consistente. Para formatos de data ou número, é aconselhável ajustar a ordem à cultura RTL. Preste atenção também ao layout de formulários, onde os campos de entrada de números devem permanecer alinhados à esquerda. Um tratamento cuidadoso dessa direção mista evita quebras visuais e melhora a legibilidade.

Fontes e tipografia

A escolha da fonte é crucial: árabe, persa e hebraico exigem fontes com suporte adequado de glifos. Opções populares são 'Noto Naskh Arabic', 'Vazir' para persa e 'Noto Sans Hebrew'. Defina fallbacks, por exemplo, 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Garanta tamanhos de fonte e espaçamento entre linhas suficientes, pois as fontes RTL costumam ser mais estreitas ou complexas. Evite itálico, pois ele não existe em muitas fontes árabes. Teste a exibição em diferentes dispositivos para garantir que as fontes sejam carregadas corretamente e legíveis.

Ícones e espelhamento

Ícones que indicam direção (por exemplo, setas, símbolos de avançar/voltar) devem ser espelhados em layouts RTL. Isso pode ser feito com transformações CSS como 'transform: scaleX(-1)' ou usando conjuntos de ícones que suportam RTL automaticamente (por exemplo, Font Awesome com o atributo 'dir'). Símbolos sem referência direcional (como casa, configurações) permanecem inalterados. Certifique-se de que o espelhamento não distorce a semântica. Teste todos os ícones na visualização RTL, pois espelhamentos não intencionais podem prejudicar a usabilidade.

Lista de verificação para entrada no mercado

Defina dir='rtl' no elemento html.
Utilize propriedades CSS lógicas em vez de físicas.
Trate números e direções mistas com 'direction'.
Escolha fontes com suporte abrangente a glifos.
Espelhe ícones direcionais usando scaleX.
Teste o layout com conteúdo real em todos os idiomas alvo.

Espelhamento de ícones em layout RTL com setas

Perguntas frequentes

Por que apenas dir='rtl' não é suficiente?

O atributo dir define a direção base, mas propriedades CSS como 'margin-left' permanecem à esquerda. Sem propriedades lógicas, você precisa sobrescrever muitos valores manualmente, o que é propenso a erros e prejudica a manutenibilidade.

Como lidar com números em layouts RTL?

Números são LTR por padrão em contextos RTL. Use 'unicode-bidi: embed' no elemento pai ou defina 'direction: ltr' para intervalos numéricos, garantindo o alinhamento correto.

Todos os ícones precisam ser espelhados?

Não, apenas ícones com direção implícita, como setas, devem ser espelhados. Símbolos como uma casa ou engrenagem permanecem inalterados. Espelhe apenas ícones que representam direção de movimento ou leitura.

Pronto para este mercado?

Localizamos o seu site linguística, técnica e culturalmente – com revisão de falantes nativos e preço fixo. Solicite um orçamento sem compromisso.

Solicitar orçamento sem compromisso