Domingo, 11 de setembro de 2011
Para o sucesso global, seu site precisa passar por mudanças. Basta simplesmente traduzir o texto e está tudo pronto, certo? Provavelmente não. A equipe do Google para webmasters cria sites que são localizados em mais de 40 idiomas com frequência. Veja alguns aspectos que consideramos ao lançar nossas páginas em outros idiomas e regiões.
Ainda que você ache que está imune a esses problemas porque só oferece conteúdo em inglês, é possível que os visitantes que falem outros idiomas estejam usando ferramentas como o Google Tradutor para ver o conteúdo. Esse tráfego aparece no painel de análise para você ter uma ideia de quantos visitantes não estão vendo o site da maneira pretendida.
Mais idiomas != mais modelos HTML
É altamente recomendável usar o mesmo modelo para todas as versões de idioma e tentar manter o HTML simples.
Quando se trata da manutenção, usar o mesmo código HTML para todos os idiomas apresenta vantagens. Ao corrigir bugs no código HTML para cada idioma, os ajustes não são feitos em escala. Mantenha o código da página o mais limpo possível e resolva todos os problemas de estilo no CSS. Para mencionar apenas uma das vantagens do código limpo, um HTML bem estruturado e válido facilita a análise das strings de conteúdo traduzíveis no documento, feita pela maioria das ferramentas de tradução.
Qual é o comprimento de uma string?
Se o design depender do ajuste do texto com os elementos de tamanho fixo, a tradução poderá causar problemas. Por exemplo, é provável que o texto na barra de navegação à esquerda tenha strings muito mais longas na tradução para vários idiomas. Veja a diferença no comprimento das strings entre o inglês e o holandês para o mesmo conteúdo. Esteja preparado para a divisão dos títulos da navegação em mais de uma linha ao buscar um espaçamento para lidar com isso, o que também é importante considerar ao criar o texto em inglês.
Os tamanhos variáveis das palavras causam problemas específicos nos rótulos e controles de formulários. Se o layout do formulário mostrar rótulos à esquerda e campos à direita, por exemplo, as strings de texto mais longas poderão exceder uma linha e as mais curtas não parecerão estar associadas aos campos de entrada correspondentes. Em ambos os casos, o design é prejudicado e o formulário fica ilegível. Considere também os ajustes necessários no estilo para layouts da direita para a esquerda (RTL, na sigla em inglês), que serão abordados mais adiante. Por esses motivos, criamos formulários com rótulos acima dos campos, o que garante a legibilidade e a transposição do estilo para vários idiomas.
Além disso, evite colunas de altura fixa. Se você estiver tentando organizar o layout com caixas de plano de fundo da mesma altura, é provável que o texto traduzido exceda as áreas com espaço suficiente apenas para o conteúdo em inglês. Pense se os elementos da IU que você planeja usar no design funcionarão com mais ou menos texto. Por exemplo, guias horizontais ou verticais.
O outro lado da moeda
Para HTML bidirecional, editar a fonte pode ser problemático, já que muitos editores não são compatíveis com o algoritmo bidirecional Unicode (saiba mais sobre os problemas e as soluções). Basicamente, a forma como a marcação é exibida pode ficar distorcida:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Com base no nosso uso diário, os editores a seguir atualmente fornecem soluções de qualidade para a edição bidirecional: Coda, particularmente, além de Dreamweaver, IntelliJ IDEA e JEditX.
No design para idiomas RTL, é possível adicionar a maior parte da compatibilidade necessária ao CSS principal e
usar o atributo direcional do elemento html (para compatibilidade com versões anteriores) em
combinação com uma classe no elemento body. Como sempre, manter todos os estilos em uma
folha principal garante uma melhor manutenção.
Alguns problemas importantes de estilo a evitar: qualquer elemento flutuante à direita precisa flutuar à esquerda, e vice-versa. Além disso, as larguras de margem e padding adicionais aplicadas a um lado do elemento precisam ser modificadas e substituídas, e todos os atributos de alinhamento do texto precisam ser invertidos.
Normalmente, usamos a seguinte abordagem, incluindo o uso de uma classe na tag do corpo em vez de um
seletor de CSS html[dir=rtl], porque é compatível com os navegadores mais antigos:
Elementos:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Estilo da esquerda para a direita (padrão):
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Estilo da direita para a esquerda:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
Veja exemplos em inglês e árabe.
Uma última observação sobre esse assunto: na maioria das vezes, o conteúdo destinado a páginas de idiomas da direita para a esquerda é bidirecional em vez de apenas RTL, porque algumas strings provavelmente precisarão manter a direção da esquerda para a direita (LTR, na sigla em inglês), como nomes de empresas no sistema de escrita latino ou números de telefone. Para o navegador lidar corretamente com isso em um documento que é principalmente RTL, una as strings de texto incorporadas a um elemento in-line usando um atributo para definir a direção, desta forma:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Se você não tiver um contêiner HTML para conectar ao atributo "dir", como elementos de título ou código-fonte gerado por JavaScript para solicitações de mensagens, use este equivalente para definir a direção, em que ‫ e ‬ são caracteres de controle Unicode para a incorporação da direita para a esquerda:
<title>‫הפוך את Google לדף הבית שלך‬</title>
Exemplo de uso em código JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
Para mais detalhes, consulte os artigos do W3C sobre como criar HTML para o árabe, o hebraico e outros sistemas de escrita da direita para a esquerda e como lidar com os sistemas de escrita da direita para a esquerda.
Isso é grego para mim...
Se você nunca trabalhou com conjuntos de caracteres não latinos antes, como o cirílico, o grego e a infinidade de conjuntos asiáticos e índicos, talvez note que o editor e o navegador não exibem o conteúdo como pretendido.
Confira se as codificações do editor e do navegador estão definidas como UTF-8 (recomendado) e considere adicionar um elemento
<span> e o atributo lang do elemento html
ao modelo HTML para o navegador saber o que esperar ao renderizar a página. Isso também garante
que todos os caracteres Unicode sejam exibidos corretamente. Portanto, não será necessário usar entidades
HTML, como é (é), economizando bytes valiosos. Se
você tiver problemas, consulte o tutorial sobre codificação de caracteres do W3C, que contém explicações detalhadas.
Sobre a nomenclatura
Por fim, veja uma dica prática sobre as convenções de nomenclatura ao criar várias versões de idioma. O uso de um padrão para a nomenclatura, como os códigos de idioma ISO 639-1, é útil quando você começa a lidar com várias versões de idioma do mesmo documento.
Usar um padrão convencional ajuda os usuários a entender a estrutura do site, além de torná-lo mais administrável para todos os webmasters durante o desenvolvimento. Além disso, usar os códigos de idioma para outros recursos do site, como imagens de logotipo e documentos em PDF, é útil para identificar arquivos rapidamente.
Consulte as postagens anteriores da Central do webmaster para ver orientações sobre as estruturas de URL e outros problemas relacionados a sites multirregionais e multilíngues.
Esse é um resumo dos principais desafios com que lidamos diariamente, mas podemos atestar que o planejamento e o esforço para criar um HTML bem estruturado e um CSS robusto trazem benefícios durante a localização.