Da direita para a esquerda não é uma troca de tipo de letra. A direcção inverte o layout, a ancoragem e o significado de esquerda e direita, e um design construído com propriedades físicas parte-se de formas invisíveis até alguém ler a página. Esta skill encontra as falhas de forma sistemática em vez de por acaso.
QUANDO USAR ISTO
Use antes de lançar árabe, hebraico, farsi ou urdu, ou quando um locale RTL mostra texto sobreposto, URLs espelhados ou animações a correr no sentido errado.
---
name: rtl-layout-audit
description: Use antes de lançar árabe, hebraico, farsi ou urdu, ou quando um locale RTL mostra texto sobreposto, URLs espelhados ou animações a correr no sentido errado.
---
# Auditoria de layout RTL
Da direita para a esquerda não é uma troca de tipo de letra. A direcção inverte o layout, a ancoragem e o significado de esquerda e direita, e um design construído com propriedades físicas parte-se de formas invisíveis até alguém ler a página. Esta skill encontra as falhas de forma sistemática em vez de por acaso.
## O que precisa primeiro
- O site a correr num locale RTL
- Uma consola de browser
## Método
1. Substitua as propriedades físicas por propriedades lógicas em todo o lado: margin-inline, padding-inline, inset-inline, text-align start e end. Isto resolve de uma vez a maior parte das falhas.
2. Isole cada ilha de texto latino com unicode-bidi. URLs, código, nomes de marcas e números de versão reordenam-se catastroficamente de outra forma - "https://" aparece habitualmente como "//:https".
3. Audite a ancoragem de texto em SVG à parte. Em SVG, a direcção também redefine o que significa text-anchor start, pelo que etiquetas ancoradas à esquerda saem da tela. Use unicode-bidi plaintext, que corrige a ordenação sem mexer na ancoragem.
4. Verifique tudo o que seja animado por transform. Marquees e carrosséis não se espelham automaticamente, e uma pista construída com flex vai mover a metade duplicada, fazendo um loop contínuo tremer.
5. Verifique os campos que têm de continuar LTR - um campo de URL com o prefixo do protocolo num elemento separado vai dividir-se, colocando as duas metades em extremos opostos da caixa.
6. Leia a página a 375px tal como no desktop. Os bugs de RTL concentram-se onde o espaço é escasso.
## O que isto produz
Uma lista de defeitos agrupada por causa - propriedades físicas, falta de isolamento, ancoragem SVG, animação baseada em transform - cada uma com a regra específica que a resolve.
## Onde isto corre mal
- Definir direction rtl num SVG, o que move todas as etiquetas ancoradas à esquerda para fora do ecrã
- Inverter uma animação globalmente, o que cancela a alternância nas linhas que já estavam invertidas
- Assumir que basta um tipo de letra que suporte árabe - só o letter-spacing já parte a ligação das letras em árabe
---
Da biblioteca de competências da QuQi - https://www.quqi.io/pt/skills/rtl-layout-audit
Transferência gratuita · sem conta, sem e-mail
Uma lista de defeitos agrupada por causa - propriedades físicas, falta de isolamento, ancoragem SVG, animação baseada em transform - cada uma com a regra específica que a resolve.