Como Traduzir Idiomas RTL no WordPress: Árabe, Hebraico, Persa
Você acabou de terminar de traduzir seu tema WordPress para o árabe. Você carrega o arquivo .mo, muda o idioma do site e o resultado é ilegível. O texto transborda para a esquerda, os botões se sobrepõem e seu layout cuidadosamente projetado parece ter passado por um triturador de papel.
Bem-vindo ao mundo dos idiomas da direita para a esquerda (RTL) -- onde a tradução é apenas metade da batalha.
Árabe, hebraico e persa (farsi) estão entre os idiomas mais falados na Terra. Só o árabe tem mais de 400 milhões de falantes nativos. Se o seu site WordPress ignora esses públicos, você está perdendo muito dinheiro. Mas atendê-los requer mais do que trocar palavras em inglês por palavras em árabe. Requer repensar toda a direção do seu layout.
Este guia abrange tudo o que você precisa saber: como o RTL funciona no WordPress, como corrigir seu CSS, como lidar com arquivos .po com strings RTL e como evitar as armadilhas mais comuns.
Como o RTL Funciona no WordPress
O WordPress tem suporte RTL integrado. Quando você define o idioma do seu site para árabe (ar), hebraico (he) ou persa (fa), o WordPress adiciona automaticamente dir="rtl" à tag <html> e carrega uma folha de estilo rtl.css se o seu tema fornecer uma.
Esta é a teoria. Na prática, a maioria dos temas é fornecida com suporte RTL mínimo ou quebrado.
O Que Realmente Muda
Quando o modo RTL é ativado, o navegador espelha todo o layout da página:
- O texto flui da direita para a esquerda.
- As barras laterais trocam de lado.
- Os menus de navegação invertem a ordem.
- Os valores de preenchimento e margem são invertidos (esquerda se torna direita).
- Ícones com significado direcional (setas, chevrons) precisam ser espelhados.
Se o CSS do seu tema foi escrito apenas para LTR, cada declaração margin-left, padding-right, float: left e text-align: left agora está lutando contra o mecanismo RTL do navegador.
Corrigindo Seu CSS para RTL: Um Guia Prático
A abordagem mais limpa é usar Propriedades Lógicas de CSS, que se adaptam automaticamente à direção de escrita do documento. Em vez de left e right, você usa inline-start e inline-end.
Antes: Propriedades Físicas (Quebra em RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
Depois: Propriedades Lógicas (Funciona em Ambas as Direções)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
Com propriedades lógicas, você escreve seu CSS uma vez e ele funciona corretamente tanto em inglês quanto em árabe, sem nenhuma substituição.
O Método de Substituição [dir="rtl"]
Se você não puder refatorar toda a sua folha de estilo, você pode segmentar RTL especificamente usando seletores de atributo:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Isso funciona, mas dobra sua carga de manutenção. Cada vez que você atualizar seus estilos LTR, você também deve atualizar as substituições RTL.
Traduzindo Arquivos PO com Strings RTL
A própria tradução introduz desafios que vão além do layout. Os idiomas RTL têm características únicas que derrubam a maioria das ferramentas automatizadas.
Texto Bidirecional (Bidi) em Arquivos PO
A verdadeira complexidade aparece quando o texto RTL e LTR se misturam em uma única string. Considere este padrão comum do WordPress:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
O placeholder %s será substituído por um nome de produto em inglês como "WooCommerce". Na saída renderizada, o navegador deve exibir texto em árabe fluindo da direita para a esquerda, depois mudar para a esquerda para a direita para a palavra em inglês e, em seguida, potencialmente voltar.
Isso é chamado de texto bidirecional (ou "bidi"), e é tratado pelo Algoritmo Bidirecional Unicode. Na maioria das vezes, funciona automaticamente. Mas quando você tem vários placeholders ou números adjacentes ao texto RTL, a ordem visual pode se tornar imprevisível.
Erros de Tradução Comuns
Ferramentas de tradução genéricas cometem vários erros específicos do RTL:
-
Ordem de placeholder invertida. Uma string como
%1$s out of %2$spode ter os placeholders trocados porque a IA os reordena para corresponder à gramática árabe. Isso produz uma saída incorreta como "10 out of Page" em vez de "Page out of 10". Saiba mais sobre como proteger variáveis de código durante a tradução. -
Direcionalidade HTML quebrada. Se sua string contém HTML inline como
<span dir="ltr">, um tradutor ingênuo pode remover o atributodirou traduzi-lo. -
Formas plurais ausentes. O árabe tem seis formas plurais -- zero, um, dois, poucos, muitos e outros. Este é o sistema plural mais complexo de qualquer idioma que o WordPress suporta. Uma ferramenta que gera apenas duas formas (como singular/plural em inglês) deixará seu arquivo
.poem árabe quebrado. Para um mergulho profundo em como os plurais Gettext funcionam, consulte nosso guia sobre pluralização complexa no WordPress.
Veja como uma string plural em árabe corretamente traduzida se parece em um arquivo .po:
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Se alguma dessas seis formas estiver vazia ou incorreta, o WordPress recorrerá à string em inglês para essa contagem específica. Seus usuários verão "5 comments" em inglês espalhados por uma interface totalmente em árabe.
Testando Sua Implementação RTL
Traduzir e corrigir CSS não é suficiente. Você precisa verificar o resultado em um navegador real.
Uma Lista de Verificação Rápida de Teste
- Mude o idioma do WordPress para árabe em Configurações > Geral. Não basta adicionar
dir="rtl"manualmente -- use a configuração de idioma real para que o WordPress carregue suas próprias substituições RTL. - Verifique os menus de navegação. Eles estão espelhados? Os menus suspensos abrem na direção correta?
- Inspecione os campos do formulário. O texto de entrada deve fluir da direita para a esquerda. O texto do placeholder deve estar alinhado à direita.
- Verifique o conteúdo de direção mista. Strings que contêm árabe e inglês (como nomes de marcas ou URLs) devem ser renderizadas na ordem visual correta.
- Teste no celular. Bugs de layout RTL são frequentemente mais graves em telas menores, onde há menos espaço para erros de alinhamento.
Se suas traduções não estiverem aparecendo de forma alguma, o problema pode não estar relacionado ao RTL -- verifique a compilação do seu arquivo .mo e os caminhos dos arquivos primeiro.
Truque das Ferramentas de Desenvolvedor do Navegador
No Chrome DevTools, você pode forçar temporariamente o RTL em qualquer página sem alterar as configurações do WordPress:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Isso oferece uma prévia rápida de como seu tema lida com o RTL antes mesmo de começar a traduzir.
Automatizando a Tradução RTL da Maneira Certa
A tradução manual de idiomas RTL é cara e lenta. Tradutores profissionais de árabe cobram taxas premium, e encontrar alguém que entenda tanto o idioma quanto a sintaxe Gettext específica do WordPress é difícil.
SimplePoTranslate resolve isso com um mecanismo de IA Sensível ao Contexto que entende os desafios específicos do RTL nativamente:
- Todas as seis formas plurais em árabe são geradas automaticamente. Nosso mecanismo lê o cabeçalho
Plural-Formsem seu arquivo.poe produz exatamente o número de formas que seu idioma de destino exige. Sem slotsmsgstrvazios, sem fallbacks em inglês. - Segurança do placeholder. Variáveis como
%s,%de%1$ssão bloqueadas durante a tradução. A IA não pode reordenar, excluir ou corromper -- mesmo quando a gramática árabe sugere uma ordem de palavras diferente. Leia mais sobre como o bloqueio de sintaxe protege seu código. - Contexto bidirecional. A IA entende que strings de direção mista precisam de tratamento especial e preserva os atributos de direcionalidade HTML.
Se você está localizando um tema de blog para um público hebraico ou traduzindo uma loja WooCommerce completa para o persa, o processo é o mesmo: carregue seu arquivo .po, selecione seu idioma de destino e baixe o arquivo traduzido. Todo o fluxo de trabalho leva minutos, não dias.
Para um passo a passo completo do processo de localização do WordPress, consulte nosso guia definitivo para localização do WordPress.
Pare de Tratar o RTL como uma Reflexão Tardia
Os idiomas da direita para a esquerda representam mais de um bilhão de usuários potenciais. O árabe é o quinto idioma mais falado no mundo. Hebraico e persa atendem a mercados críticos no Oriente Médio e na Ásia Central.
Se o seu site WordPress não puder atender a esses usuários com uma experiência polida e com aparência nativa, eles encontrarão um concorrente que possa.
A boa notícia: o WordPress já tem a infraestrutura. Seu tema só precisa de CSS adequado, e seus arquivos .po precisam de uma ferramenta de tradução que respeite a complexidade dos idiomas RTL.
Pronto para traduzir seu site WordPress para árabe, hebraico ou persa? Comece gratuitamente em SimplePoTranslate.com