2026-06-03 · Redação Baduno · 8 blog.readMin · Blog & Conhecimento
Design RTL: O que muda quando a direção de leitura inverte
Árabe e hebraico são lidos da direita para a esquerda – e viram de cabeça para baixo suposições implícitas de design. Um relato prático do nosso sistema de design.
Mais do que espelhado
A abordagem ingênua – 'simplesmente espelhar tudo' – falha rapidamente: números e nomes de marcas latinas permanecem da esquerda para a direita, símbolos de players de mídia mantêm sua direção, números de telefone quebram. Design RTL significa decidir para cada elemento se ele é lógico (seguindo a direção de leitura) ou físico (fixo em direção).
CSS: propriedades lógicas
A lógica moderna de CSS torna o RTL controlável: margin-inline-start em vez de margin-left, inset-inline-end em vez de right, text-align:start em vez de left. Quem escreve de forma lógica desde o início obtém a segunda direção de leitura quase de graça – quem adapta posteriormente luta com centenas de exceções. Este site usa propriedades lógicas de forma consistente; cada versão RTL é gerada a partir da mesma folha de estilo que a alemã.
Tipografia e densidade
A escrita árabe não tem maiúsculas, tem outras ascendentes/descendentes e parece menor e mais densa no mesmo tamanho de fonte. Uma boa tipografia RTL precisa de fontes especializadas próprias, geralmente um a dois pontos maiores e entrelinha mais generosa. Também efeitos de espaçamento entre letras, populares no latim, não funcionam com escrita cursiva.
Testar com falantes nativos
Nenhum automatismo substitui o olhar de uma pessoa que vive na escrita: quebras de linha em compostos, números em texto corrido, direções misturadas em formulários – as classes de erros são sutis. Nosso processo de revisão inclui, portanto, sempre uma revisão visual RTL, não apenas correção de texto.
Navegação: Onde a lógica se inverte
Em ambientes RTL, as estruturas de navegação precisam ser repensadas. Uma barra de menu horizontal começa à direita, o primeiro item de menu é o mais à esquerda – a ordem permanece lógica da direita para a esquerda. Menus suspensos abrem-se por padrão para a esquerda e para baixo, em vez de para a direita e para baixo, porque o ponto de ancoragem está no lado direito. Barras laterais que no layout LTR estão posicionadas à esquerda, no caso RTL passam para a direita. Cuidado especial com menus hambúrguer: o ícone em si (três linhas horizontais) é neutro em direção, mas seu posicionamento (canto superior esquerdo vs. canto superior direito) deve ser trocado. Um erro comum são submenus que ainda mostram direção LTR porque não são controlados por propriedades CSS lógicas. No nosso sistema de design, definimos componentes de navegação completamente com inset-inline-start/end, para que alternem automaticamente entre LTR e RTL. Exemplo prático: uma navegação por breadcrumbs mostra no modo RTL a página atual à esquerda e a página inicial à direita – as setas separadoras também devem mudar de direção. Usamos CSS-content com setas embutidas que usam uma entidade diferente dependendo do valor dir.
Direções mistas: Números e caracteres
Números, números de telefone, endereços de e-mail e nomes de marcas latinos mantêm sua orientação LTR, mesmo quando o texto ao redor é RTL. Isso leva às chamadas seções bidirecionais, onde a direção da leitura muda no meio da frase. Por padrão, o algoritmo bidirecional Unicode (Bidi) lida com esses textos mistos, mas você deve garantir que a troca de direção esteja correta. Use o atributo dir no nível do elemento misto ou use caracteres como LRM (Left-to-Right Mark) e RLM (Right-to-Left Mark). Exemplo: Em uma frase hebraica "Telefone: 01234 56789", a sequência de números deve ser lida da esquerda para a direita. Sem a marcação correta, o navegador pode quebrar ou exibir incorretamente a sequência. Em formulários, é essencial que os rótulos estejam à direita e os campos à esquerda, pois o usuário começa a ler pela direita. Nossa abordagem: Para cada elemento de texto com material latino embutido, no template RTL colocamos um wrapper <span dir="ltr"> com um LRM final, para que o caractere RTL seguinte se mova corretamente para o final.
Árabe e hebraico são lidos da direita para a esquerda – e viram de cabeça para baixo suposições implícitas de design. Um relato prático do nosso sistema de design.
Símbolos: Direção fixa ou lógica?
Ícones e pictogramas geralmente carregam direções implícitas: setas para frente apontam para a direita, setas para trás para a esquerda. Elas devem ser espelhadas em interfaces RTL, caso contrário a navegação parece contra-intuitiva. No entanto, nem todos os símbolos dependem de direção: um triângulo de play permanece sempre igual (porque representa uma ação física), um ícone de e-mail ou telefone também. A regra geral: a direção lógica (fluxo temporal, direção de leitura, direção de navegação) deve ser espelhada; a física ou simbólica não. No desenvolvimento, usamos transformações CSS para ícones: scaleX(-1) para todos os SVGs direcionais, controlado por uma classe [dir=rtl] .icon--directional. Assim, evitamos ativos duplicados. Atenção: as setas do carrossel que apontam para a direita devem apontar para a esquerda no modo RTL, pois a página "seguinte" agora está à esquerda. O mesmo vale para barras de progresso: o progresso deve aumentar da direita para a esquerda. No nosso sistema de design, esses componentes são implementados com propriedades lógicas (inline-size em vez de width), de modo que o preenchimento se prenda automaticamente ao início da barra de progresso.
Imagens: O que espelhar, o que redesenhar?
Gráficos e ilustrações frequentemente contêm símbolos culturais ou dependentes de direção: relógios que giram no sentido horário (no contexto RTL, o espelhado parece normal), apertos de mão, linhas do tempo. Nem toda imagem precisa ser completamente espelhada – um movimento de ponteiro de relógio espelhado pode ser percebido como errado, pois a realidade física é mantida. Mas uma linha do tempo da esquerda para a direita deve, no contexto RTL, ir da direita para a esquerda. Logos e imagens de marca geralmente permanecem inalterados, pois seguem uma identidade visual fixa. O desafio é entregar automaticamente as imagens corretas. Armazenamos para cada gráfico um equivalente RTL como ativo separado ou usamos transformações CSS para casos simples. Em cenários complexos (ex.: infográficos com texto), é necessária uma reformulação manual. Nosso fluxo de trabalho: o designer gráfico marca cada imagem como „sem direção“, „espelhável“ ou „individual“ no CMS. A entrega é feita por uma condição que lê o atributo dir do elemento pai. Exemplo: uma ilustração de uma estante de livros com livros em escrita latina precisaria ser espelhada para que as lombadas fiquem à direita – isso pode parecer surpreendente à primeira vista, mas é consistente.
SEO e hreflang: Marcação específica para RTL
Para os motores de busca, a correta marcação de idioma e direção é essencial. Além do atributo de idioma (lang), o atributo dir deve estar definido em cada página para que o navegador e o motor de busca interpretem corretamente a direção de leitura. Em páginas RTL multilíngues, a marcação hreflang é particularmente crítica: uma página em árabe (ar) deve referenciar corretamente suas equivalentes em alemão ou inglês. Entradas hreflang incorretas levam a indexações erradas, pois o Google não deduz automaticamente a direção de leitura. Além disso, você deve considerar sitemaps separados para versões LTR e RTL para reforçar os sinais. Um erro comum é o uso de tags genéricas sem considerar a direção da escrita. Apostamos na geração dinâmica de hreflang, que deriva tanto os códigos de idioma quanto os de região a partir do banco de dados de idiomas. Para dialetos árabes, a diferenciação regional é necessária, pois consumidores e algoritmos têm expectativas diferentes. Além disso, usamos a tag canonical para evitar inconsistências entre conteúdos espelhados e não espelhados. Nosso workflow verifica automaticamente se o atributo dir no cabeçalho HTML é consistente com as informações hreflang. Pois um texto árabe sem dir="rtl" pode ser exibido incorretamente pelos navegadores, o que aumenta a taxa de rejeição. O desempenho SEO é influenciado não apenas pelos textos, mas também pela correta marcação da direção de leitura.
Acessibilidade: Desafios RTL para tecnologias assistivas
As necessidades dos leitores de tela e outras tecnologias assistivas mudam com a direção de leitura. Leitores de tela como JAWS ou VoiceOver esperam o atributo dir para determinar a ordem correta de leitura em voz alta. Se essa informação faltar, eles podem ler conteúdos multilíngues na ordem errada. Os marcos ARIA permanecem os mesmos, mas a posição no DOM deve idealmente seguir a direção de leitura: o menu principal deve vir antes do conteúdo principal no código-fonte – em RTL, isso significa lado direito primeiro. Outro ponto são as ordens de foco: os índices de tabulação devem fluir logicamente da direita para a esquerda em páginas RTL. Use elementos HTML nativos que ajustam automaticamente a navegação por teclado. Os textos alternativos das imagens devem ser específicos do idioma e refletir a perspectiva da cultura-alvo. Exemplo: um gráfico mostrando um aperto de mão deve ser descrito em árabe como "duas mãos que se cruzam", pois a conotação cultural é diferente. Recomendamos realizar auditorias de acessibilidade tanto na visualização LTR quanto na RTL. Isso inclui a verificação de contrastes, que podem ser diferentes sob tipografia RTL. Nossa equipe utiliza ferramentas automatizadas combinadas com testes manuais por falantes nativos para garantir que a experiência do usuário seja inclusiva.
blog.faqT
Preciso espelhar todas as imagens ao criar uma versão RTL?
Não. Apenas imagens com uma direção de leitura clara, como linhas do tempo, setas ou diagramas contínuos, devem ser espelhadas. Logotipos, retratos, gráficos com objetos físicos (relógio, globo) permanecem inalterados, caso contrário, o significado seria distorcido. Decida caso a caso.
Como testar RTL de forma mais eficiente durante o desenvolvimento?
Use as ferramentas de desenvolvedor do navegador para definir o atributo dir no elemento html como "rtl" e verifique cada componente quanto ao alinhamento correto. Amplie seu processo de revisão de código com uma verificação RTL dedicada com falantes nativos, que cubra irritações visuais e fluxos de texto bidirecionais incorretos.
