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 ficheiro da competência

---
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

O que precisa primeiro

• O site a correr num locale RTL
• Uma consola de browser

Método

1. 01 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. 02 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. 03 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. 04 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. 05 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. 06 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

Use esta skill na sua própria IA

O ficheiro é markdown simples, com o nome e o gatilho no frontmatter. Quando um assistente consegue carregar skills sozinho, é esse frontmatter que lê para decidir que esta se aplica.

Mais em SEO internacional