![\"P\u00e1gina](\"http:\/\/wpml.org\/wp-content\/uploads\/2014\/02\/sample-ltr.png\")
<\/a><\/td>\n![\"P\u00e1gina](\"http:\/\/wpml.org\/wp-content\/uploads\/2014\/02\/sample-rtl.png\")
<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nVoc\u00ea pode ver como tudo na p\u00e1gina RTL aparece “invertido” horizontalmente. \u00c9 como se voc\u00ea olhasse a p\u00e1gina LTR “normal” por um espelho. Na verdade, criar essa imagem espelhada \u00e9 muito f\u00e1cil. A dire\u00e7\u00e3o “dir” no CSS far\u00e1 a maior parte do trabalho e voc\u00ea s\u00f3 precisar\u00e1 corrigir alguns lugares.<\/p>\n
Carregamento de um arquivo CSS diferente para idiomas RTL<\/h2>\n
WordPress sabe quais idiomas t\u00eam fluxo RTL e facilita para voc\u00ea personalizar o layout deles. Crie um novo arquivo rtl.css e coloque-o no diret\u00f3rio raiz do seu tema.<\/p>\n
WordPress carregar\u00e1 o arquivo rtl.css depois de carregar o styles.css normal, portanto, o arquivo CSS RTL s\u00f3 precisa substituir os atributos que precisam ser alterados. Isso significa que o arquivo rtl.css geralmente \u00e9 bem pequeno para a maioria dos temas.<\/p>\n
Definir a dire\u00e7\u00e3o da p\u00e1gina como RTL<\/h2>\n
O atributo “direction” no CSS informa ao navegador a dire\u00e7\u00e3o da p\u00e1gina. Para idiomas RTL, voc\u00ea deve defini-lo como “rtl”. H\u00e1 outro atributo “m\u00e1gico” que voc\u00ea deve definir para a exibi\u00e7\u00e3o RTL adequada. Ele \u00e9 chamado de “unicode-bidi”. Esse atributo “m\u00e1gico” \u00e9 muito simples de entender, quando voc\u00ea est\u00e1 acostumado a escrever em RTL. Ele controla a maneira como os caracteres s\u00e3o exibidos dentro da linha.<\/p>\n
Para uma exibi\u00e7\u00e3o RTL adequada, adicione o seguinte ao seletor .body:<\/p>\n
E voc\u00ea est\u00e1 pronto! Seu tema agora \u00e9 exibido em RTL. Quase. Essas duas declara\u00e7\u00f5es far\u00e3o com que a maior parte da p\u00e1gina pare\u00e7a correta. Agora, voc\u00ea precisa tratar as exce\u00e7\u00f5es.<\/p>\n Cada local no CSS, onde voc\u00ea define a dire\u00e7\u00e3o do texto e os elementos de flutua\u00e7\u00e3o, requer aten\u00e7\u00e3o manual.<\/p>\n Encontre todos os seletores para text-align, float e clear. Se algum desses itens especificar uma dire\u00e7\u00e3o, alterne entre “direita” e “esquerda”. Lembre-se da imagem espelhada que estamos tentando obter e isso facilitar\u00e1 a compreens\u00e3o dessa transforma\u00e7\u00e3o.<\/p>\n Outro aspecto a ser observado s\u00e3o os gr\u00e1ficos com significado de “dire\u00e7\u00e3o”. Por exemplo, se estiver criando uma apresenta\u00e7\u00e3o de slides, voc\u00ea poder\u00e1 ter setas para os itens seguintes e anteriores. Lembre-se de que seu site ser\u00e1 exibido por meio de um espelho em idiomas RTL, portanto, voc\u00ea tamb\u00e9m deve inverter os gr\u00e1ficos direcionais. Se voc\u00ea estiver usando uma seta apontando para a direita para “pr\u00f3ximo” em LTR, dever\u00e1 fornecer uma seta apontando para a esquerda para “pr\u00f3ximo” em RTL.<\/p>\n Os idiomas RTL n\u00e3o t\u00eam as mesmas fontes que os idiomas LTR. Se estiver usando fontes sofisticadas e o layout do seu tema depender delas, voc\u00ea dever\u00e1 encontrar fontes substitutas para esses idiomas. Se voc\u00ea escolher uma fonte que n\u00e3o exista em um idioma RTL, o navegador reverter\u00e1 para o que ele conhece. \u00c9 melhor que voc\u00ea especifique fontes alternativas existentes de que goste.<\/p>\n Se voc\u00ea usar fontes padr\u00e3o da Web, n\u00e3o ter\u00e1 problemas.<\/p>\n Quando voc\u00ea estiver desenvolvendo seu arquivo CSS RTL, \u00e9 uma boa ideia sempre testar o que est\u00e1 fazendo.<\/p>\n
\n{
\ndirection:rtl;
\nunicode-bidi:embed;
\n}
\n<\/code><\/p>\nInverter a dire\u00e7\u00e3o do texto, flutuar e limpar<\/h2>\n
Gr\u00e1ficos que sugerem dire\u00e7\u00e3o<\/h2>\n
Sele\u00e7\u00e3o de fontes personalizadas<\/h2>\n
Como testar seu tema em RTL<\/h2>\n
\n
<\/a><\/a>