Internacionalização

A World Wide Web está disponível para todas as pessoas no mundo — está bem ali no nome! Isso significa que seu site está potencialmente disponível para qualquer pessoa com acesso à Internet, independentemente de onde ela esteja, do dispositivo que use ou do idioma que fale.

O objetivo do design responsivo é disponibilizar seu conteúdo para todos. Aplicar essa mesma filosofia às línguas humanas é 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 letras japonesas são lidos verticalmente em vez de horizontalmente. Para acomodar esses modos de escrita, as propriedades lógicas foram introduzidas no CSS.

Se você escrever CSS, é possível que tenha usado palavras-chave direcionais como "esquerda", "direita", "superior" e "inferior". 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 da caixa no que se refere ao fluxo do conteúdo. Se o modo de escrita mudar, o CSS escrito com propriedades lógicas será atualizado. Esse não é o caso das propriedades direcionais.

Enquanto a propriedade direcional margin-left sempre se refere à margem do lado esquerdo de uma caixa de conteúdo, a propriedade lógica margin-inline-start se refere à margem do lado esquerdo de uma caixa de conteúdo em um idioma da esquerda para a direita e à margem do 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. Em vez disso, use propriedades lógicas.

O que não fazer

.byline {
  text-align: right;
}

O que fazer

.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 "left" e inline-end corresponde a "right".

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

Se você usar propriedades lógicas no CSS, será possível usar a mesma folha de estilo para traduções das páginas. Mesmo que suas páginas sejam traduzidas para idiomas escritos da direita para a esquerda ou de baixo para cima, o design vai se ajustar de acordo. Você não precisa fazer designs separados para cada linguagem. Usando 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ê tenha que 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, considerará que essas técnicas modernas serão mais fáceis de entender.

Use um padrão comum, como um ícone ao lado de um texto ou uma etiqueta ao lado de um campo de formulário. Em vez de pensar que "o rótulo deve ter uma margem à direita", pense que "o rótulo deve ter uma margem no final de seu eixo em linha".

O que não fazer

label {
  margin-right: 0.5em;
}

O que fazer

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

Se essa página for traduzida para um idioma da direita para a esquerda, os estilos não vão precisar ser atualizados. É possível imitar o efeito da visualização das 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 "rtl" significa "da direita para a esquerda".

Se você quiser testar todas as permutações das direções do documento (eixo do bloco) e dos modos de gravação (o eixo inline), confira uma 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 os mecanismos de pesquisa. Ele 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 ficar em qualquer elemento HTML, não apenas em html. Indique essa alteração se você trocar de idioma na sua página da Web. 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 você pode usar em links. O hreflang usa a mesma notação do código de idioma que o atributo lang e descreve o idioma do documento vinculado. Se houver uma tradução de toda a sua página disponível em alemão, crie um link para ela assim:

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

Se você usar texto em alemão para descrever o link da versão em alemão, 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>

Também é possível usar o atributo hreflang no elemento link. Isso consta 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.

Considere a internacionalização no seu design

Ao projetar 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 em uso comum. Sua interface precisa se adaptar a essas palavras, então, evite criar colunas estreitas. Você também pode usar CSS para introduzir hífens.
• Os valores de line-height precisam acomodar caracteres como acentos e outros sinais diacríticos. As linhas de texto que parecem corretas em inglês podem se sobrepor em um idioma diferente.
• Se você estiver usando uma fonte da Web, certifique-se de que ela tenha um intervalo de caracteres amplo o suficiente para cobrir os idiomas para os quais você vai traduzir.
• Não crie imagens contendo texto. Se fizer isso, será preciso criar imagens separadas para cada idioma. Em vez disso, separe o texto da imagem e use CSS para sobrepor o texto na imagem.

Pense internacionalmente

Atributos como lang e hreflang tornam o HTML mais significativo para internacionalização. Da mesma forma, as propriedades lógicas tornam o 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. Propriedades lógicas são fundamentais para criar layouts realmente responsivos.

Teste seu conhecimento

Teste seus conhecimentos sobre internacionalização.

Em inglês, o lado físico do right de uma caixa é logicamente qual lado?

block-start

Tente de novo. Em inglês, é top.

block-end

Tente de novo. Em inglês, é bottom.

inline-start

Tente de novo. Em inglês, é left.

inline-end

🎉

Qual atributo você deve adicionar ao HTML para torná-lo mais significativo para a internacionalização?

english

Tente de novo.

lang

🎉 Isso sinaliza aos navegadores em qual idioma o documento está, o que ajuda a definir o modo de escrita, a direção do documento e as traduções.

language

Tente de novo.

i18n

Tente de novo.

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