RTL significa da direita para a esquerda (right to left). Apenas alguns idiomas no mundo usam a direção de texto RTL, mas esses idiomas abrangem mais de um bilhão de pessoas. Adicionar suporte a RTL ao seu tema é simples e pode aumentar muito o seu mercado.
Aqui estão duas páginas, uma na direção RTL e outra na LTR (normal):
| Inglês – LTR | Hebraico – RTL |
|---|---|
 |
 |
Você pode ver como tudo na página RTL aparece “invertido” horizontalmente. É como olhar para a página LTR “normal” através de um espelho. Criar essa imagem espelhada é, na verdade, muito fácil. A direção “dir” no CSS fará a maior parte do trabalho e você só precisará corrigir alguns lugares.
Como carregar um arquivo CSS diferente para idiomas RTL
O WordPress sabe quais idiomas têm fluxo RTL e facilita a personalização do layout deles. Crie um novo arquivo rtl.css e coloque-o no diretório raiz do seu tema.
O WordPress vai carregar o arquivo rtl.css depois de carregar o styles.css normal, então o arquivo CSS RTL só precisa substituir os atributos que precisam ser alterados. Isso significa que o arquivo rtl.css geralmente é bem pequeno na maioria dos temas.
Como definir a direção da página para RTL
O atributo “direction” no CSS informa ao navegador a direção da página. Para idiomas RTL, você deve defini-lo como “rtl”. Há outro atributo “mágico” que você deve definir para a exibição correta do RTL. Ele é chamado de “unicode-bidi”. Esse atributo “mágico” é bem simples de entender quando você está acostumado a escrever em RTL. Ele controla a maneira como os caracteres são exibidos dentro da linha.
Para a exibição correta do RTL, adicione o seguinte ao seletor .body:
{
direction:rtl;
unicode-bidi:embed;
}
E pronto! Seu tema agora é exibido em RTL. Ou quase. Essas duas declarações farão com que a maior parte da página pareça correta. Agora, você precisa lidar com as exceções.
Como inverter a direção do texto, floats e clears
Todo lugar no CSS onde você define a direção do texto e elementos float exige atenção manual.
Encontre todos os seletores para text-align, float e clear. Se algum deles especificar uma direção, inverta entre “right” e “left”. Lembre-se daquela imagem espelhada que estamos tentando alcançar, isso facilitará a compreensão dessa transformação.
Gráficos que indicam direção
Outra coisa a se observar são os gráficos com significado de “direção”. Por exemplo, se você estiver criando um slideshow, pode ter setas para os itens próximo e anterior. Lembre-se de que seu site aparecerá através de um espelho nos idiomas RTL, então você deve inverter os gráficos direcionais também. Se você estiver usando uma seta apontando para a direita para “próximo” em LTR, você deve fornecer uma seta apontando para a esquerda para “próximo” em RTL.
Seleção de fontes personalizadas
Os idiomas RTL não têm as mesmas fontes que os idiomas LTR. Se você estiver usando fontes elaboradas e o layout do seu tema depender delas, você deve encontrar fontes de substituição para esses idiomas. Se você escolher uma fonte que não existe em um idioma RTL, o navegador reverterá para o que ele conhece. É melhor que você especifique fontes alternativas existentes que você goste.
Se você usa fontes da web padrão, não terá problemas.
Como testar seu tema em RTL
Quando você estiver desenvolvendo seu arquivo CSS RTL, é uma boa ideia sempre testar o que está fazendo.
- Altere o idioma no arquivo wp-config.php para esse idioma. Se você estiver usando o WPML, basta adicionar um idioma RTL ao seu site.
Como adicionar idiomas RTL - Traduza os textos hard-coded do seu tema (pelo menos os do front-end) para esse idioma. O WPML permite que você faça isso usando o módulo de Tradução de Strings.
Como traduzir os textos do tema - Obtenha conteúdo de exemplo nesse idioma. Para facilitar a edição em RTL no painel de administração do WordPress, vá para o seu perfil, role até a configuração de idioma da administração e defina o idioma como o mesmo idioma de edição.
Como editar conteúdo no modo RTL
Não conhece nenhum idioma RTL? Basta usar o Google Tradutor. A tradução não fará muito sentido, mas para fins de desenvolvimento CSS, isso não é um problema.
Agora, analise os diferentes tipos de conteúdo do seu site. Certifique-se de incluir posts, páginas, a página inicial e qualquer conteúdo personalizado que você criar.
Para obter os melhores resultados, encontre alguém que fale esse idioma e peça que faça uma verificação de sanidade para você. Seu amigo que fala o idioma RTL detectará os 5% restantes dos problemas que você deixará passar. Isso é algo “bom de se ter”, portanto, não interrompa seus esforços com RTL se não conhecer ninguém para ajudar com os testes. Assim que você lançar a versão habilitada para RTL do seu tema, você receberá muito feedback dos seus clientes. Se você fizer 95% do esforço, eles ficarão felizes em contribuir com correções para os 5% restantes.
Material bônus – a administração do seu tema em idiomas RTL
O requisito básico para ter um tema compatível com RTL é que o front-end (conteúdo público) seja exibido corretamente em idiomas RTL. Isso é o básico do básico, sem o qual ninguém pode usar seu tema para construir sites em idiomas RTL.
Além disso, muitos usuários vão querer ter o painel de administração do WordPress no idioma deles. Isso também significa ver as telas de administração do seu tema na orientação RTL.
A maneira mais fácil de alcançar essa compatibilidade com RTL para as telas de administração do seu tema é usar as classes CSS padrão do WordPress para elementos da interface gráfica (GUI). É verdade que isso significa que você não pode usar efeitos CSS elaborados para incrementar sua GUI. Mas isso também significa que sua GUI se integra perfeitamente ao painel de administração do WordPress e é exibida corretamente em LTR / RTL.
Se você precisar usar seu CSS personalizado para telas de administração, verifique como ele fica em um idioma RTL. As mesmas regras que você segue para o CSS do front-end se aplicam ao back-end também. Inverta alinhamentos, floats e clears; evite posicionamento absoluto e tome cuidado com as imagens.
Uma ótima referência – o tema padrão do WordPress
Para sua informação, os temas padrão do WordPress são todos perfeitamente adaptados para idiomas RTL. Abra o tema padrão e procure pelo arquivo rtl.css. Você verá quais alterações ele fez no CSS do tema padrão. Geralmente, essas alterações são bem pequenas e fáceis de acompanhar.