Internacionalização

A Web está disponível para todos no mundo. O nome já diz tudo. Isso significa que seu site pode ser acessado por qualquer pessoa que tenha acesso à Internet, independentemente de onde esteja, do dispositivo que está usando ou dos idiomas que fala.

O objetivo do design responsivo é disponibilizar seu conteúdo para todos. Aplicar essa mesma filosofia aos idiomas humanos é a força motriz por trás da internacionalização, preparando seu conteúdo e designs para um público internacional.

Propriedades lógicas

O inglês é escrito da esquerda para a direita e de cima para baixo, mas nem todos os idiomas são escritos dessa forma. Alguns idiomas, como árabe e hebraico, são lidos da direita para a esquerda, e alguns tipos de letra japoneses são lidos verticalmente em vez de horizontalmente. Para acomodar esses modos de escrita, as propriedades lógicas foram introduzidas no CSS.

Se você escreve CSS, talvez tenha usado palavras-chave direcionais como "esquerda", "direita", "parte de cima" e "parte de baixo". Essas palavras-chave se referem ao layout físico do dispositivo do usuário.

As propriedades lógicas, por outro lado, se referem às bordas de uma caixa em relação ao fluxo de conteúdo. Se o modo de escrita mudar, o CSS escrito com propriedades lógicas será atualizado de acordo. Esse não é o caso das propriedades direcionais.

Enquanto a propriedade direcional margin-left sempre se refere à margem no lado esquerdo de uma caixa de conteúdo, a propriedade lógica margin-inline-start se refere à margem no lado esquerdo de uma caixa de conteúdo em um idioma da esquerda para a direita e à margem no lado direito de uma caixa de conteúdo em um idioma da direita para a esquerda.

Para que seus designs se adaptem a diferentes modos de escrita, evite propriedades direcionais. Use propriedades lógicas.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Quando o CSS tem um valor direcional específico, como left ou right, há uma propriedade lógica correspondente. Onde antes tínhamos margin-left, agora também temos margin-inline-start.

Em um idioma como o inglês, em que o texto flui da esquerda para a direita, inline-start corresponde a "esquerda" e inline-end corresponde a "direita".

Da mesma forma, em um idioma como o inglês, em que o texto é escrito de cima para baixo, block-start corresponde a "parte de cima" e block-end corresponde a "parte de baixo".

Se você usar propriedades lógicas no CSS, poderá usar a mesma folha de estilo para traduções das suas páginas. Mesmo que as páginas sejam traduzidas para idiomas escritos da direita para a esquerda ou de baixo para cima, o design será ajustado de acordo. Não é necessário criar designs separados para cada idioma. Ao usar propriedades lógicas, seu design vai responder a todos os modos de escrita. Isso significa que seu design pode alcançar mais pessoas sem que você precise gastar tempo criando designs separados para cada idioma.

As técnicas modernas de layout CSS, como grade e flexbox, usam propriedades lógicas por padrão. Se você pensar em termos de inline-start e block-start em vez de left e top, vai achar essas técnicas modernas mais fáceis de entender.

Considere um padrão comum, como um ícone ao lado de um texto ou um rótulo ao lado de um campo de formulário. Em vez de pensar "o rótulo precisa ter uma margem à direita", pense "o rótulo precisa ter uma margem no final do eixo inline".

label {
  margin-right: 0.5em;
}

label {
  margin-inline-end: 0.5em;
}

Se essa página for traduzida para um idioma da direita para a esquerda, os estilos não precisarão ser atualizados. Você pode imitar o efeito de ver suas páginas em um idioma da direita para a esquerda usando o atributo dir no elemento html. Um valor de ltr significa "da esquerda para a direita". Um valor de "rtl" significa "da direita para a esquerda".

Se você quiser fazer um teste com todas as permutações de direções de documentos (o eixo de bloco) e modos de escrita (o eixo inline), confira esta demonstração interativa.

Identificar o idioma da página

É recomendável identificar o idioma da página usando o atributo lang no elemento html.

<html lang="en">

Esse exemplo é para uma página em inglês. Você pode ser ainda mais específico. Veja como declarar que uma página está usando o inglês americano:

<html lang="en-us">

Declarar o idioma do documento é útil para mecanismos de pesquisa. Também é útil para tecnologias assistivas, como leitores de tela e assistentes de voz. Ao fornecer metadados de idioma, você ajuda esses tipos de sintetizadores de voz a pronunciar seu conteúdo corretamente.

O atributo lang pode estar em qualquer elemento HTML, não apenas html. Se você mudar de idioma na sua página da Web, indique essa mudança. Nesse caso, uma palavra está em alemão:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Identificar o idioma de um documento vinculado

Há outro atributo chamado hreflang que pode ser usado em links. O hreflang usa a mesma notação de código de idioma que o atributo lang e descreve o idioma do documento vinculado. Se houver uma tradução de toda a página disponível em alemão, vincule-a assim:

<a href="/path/to/german/version" hreflang="de">German version</a>

Se você usar texto em alemão para descrever o link para a versão alemã, use hreflang e lang. Aqui, o texto "Deutsche Version" está marcado como sendo em alemão, e o link de destino também está marcado como sendo em alemão:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Você também pode usar o atributo hreflang no elemento link. Isso vai no head do seu documento:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Mas, ao contrário do atributo lang, que pode estar em qualquer elemento, hreflang só pode ser aplicado a elementos a e link.

Considerar a internacionalização no seu design

Ao criar sites que serão traduzidos para outros idiomas e modos de escrita, pense nestes fatores:

• Alguns idiomas, como o alemão, têm palavras longas de uso comum. Sua interface precisa se adaptar a essas palavras. Portanto, evite criar colunas estreitas. Você também pode usar CSS para introduzir hífens.
• Verifique se os valores de line-height podem acomodar caracteres como acentos e outros sinais diacríticos. Linhas de texto que parecem boas em inglês podem se sobrepor em um idioma diferente.
• Se você estiver usando uma fonte da Web, verifique se ela tem uma variedade de caracteres ampla o suficiente para cobrir os idiomas para os quais você vai traduzir.
• Não crie imagens com texto. Se você fizer isso, terá que criar imagens separadas para cada idioma. Em vez disso, separe o texto e a imagem e use CSS para sobrepor o texto à imagem.

Pense internacionalmente

Atributos como lang e hreflang tornam seu HTML mais significativo para a internacionalização. Da mesma forma, as propriedades lógicas tornam seu CSS mais adaptável.

Se você está acostumado a pensar em termos de top, bottom, left e right, pode ser difícil começar a pensar em block start, block end, inline start e inline end. Mas vale a pena. As propriedades lógicas são essenciais para criar layouts verdadeiramente responsivos.

Teste seu conhecimento

Teste seu conhecimento sobre internacionalização.

Em seguida, você vai aprender a abordar layouts no nível da página, também conhecidos como layouts macro.