Parece haver algo errado com a manchete? Esse é um dos problemas que os desenvolvedores da Web enfrentam ao adicionar suporte para idiomas como o árabe. Neste artigo, falaremos sobre os problemas que encontramos e as soluções que encontramos para oferecer suporte ao idioma árabe no cliente de desktop Spotify e no web player.

A localização do Spotify é importante. Nossa missão é "liberar o potencial da criatividade humana, oferecendo a milhões de músicos a oportunidade de ganhar a vida com sua arte, e bilhões de fãs podem aproveitar e se inspirar nela". Para alcançar essa missão, é importante que usuários de diferentes países possam se comunicar efetivamente em seus idiomas. Lançamos recentemente o Spotify nas regiões do norte da África e oeste da Ásia. Um dos idiomas nessas regiões é o árabe. Ao contrário do inglês, o árabe é lido da direita para a esquerda. Isso afeta sites que desejam oferecer suporte ao árabe.

Sumário

No artigo, usaremos as seguintes abreviações:

LTR (da esquerda para a direita): texto lido da esquerda para a direita, como inglês ou espanhol.
RTL (da direita para a esquerda): texto lido da direita para a esquerda, como o árabe.

Layout da imagem espelhada

Em árabe, não apenas o texto é distribuído da direita para a esquerda, mas também todo o layout da página. Por exemplo, inverta as imagens que indicam a direção. Encontramos várias exceções, as quais discutiremos abaixo na seção de ícones.

Como o atributo dir funciona

A direção do texto no elemento para o navegador é relatada pelo atributo dir . Para definir a direção global de uma página, você deve definir o atributo dir para a página inteira.

Valores dos Atributos:

ltr - usado para escrever da esquerda para a direita (por exemplo, inglês, sueco). Este é o valor padrão.
rtl - usado para escrever da direita para a esquerda (por exemplo, árabe, hebraico, persa).
usado automaticamente para conteúdo dinâmico. O próprio navegador escolhe a direção. Para processar elementos e determinar a direção, o Algoritmo Bidirecional Unicode é usado . Para mais informações, consulte "Inglês no formato RTL" .

CSS

O CSS Flexbox e o CSS Grid examinam o atributo dir para determinar a direção do elemento. Por exemplo, flex-start alterna automaticamente para RTL quando o atributo dir está definido como "rtl" .

Mas o atributo dir usando flexbox ou grade pode não ser suficiente para refletir toda a interface do usuário no RTL. Há muitas propriedades CSS assimétricas a serem observadas ao desenvolver um site que suporte LTR e RTL. Por exemplo, margin-left: 20px e text-align: right na RTL mudará e se tornará margin-right: 20px e text-align: left .

Existem muitas ferramentas para automatizar este trabalho. Escolhemos o PostCSS-RTL , que gera regras de RTL com propriedades "invertidas" durante a fase de construção.

 .foo { margin-left: 15px; text-align: right; color: rebeccapurple; }

Entrada CSS

 [dir] .foo { color: rebeccapurple; } [dir="ltr"] .foo { margin-left: 15px; text-align: right; } [dir="rtl"] .foo { margin-right: 15px; text-align: left; }

Saída CSS

Ícones

Ícones e elementos que têm uma direção ou estão relacionados ao progresso devem ser convertidos para RTL. Por exemplo, os botões de navegação para frente e para trás precisam ser trocados.

Botão Voltar no LTR

Botão Voltar em RTL (texto em inglês é usado em vez de árabe)

Todas as animações direcionais também devem ser invertidas. Por exemplo, os carrosséis devem deslizar para o outro lado.

Exceções

Inicialmente, assumimos que tudo seria espelhado. Mas rapidamente vi algumas exceções. Por exemplo, os botões de reprodução de mídia e a barra de progresso não requerem espelhamento, pois estão relacionados à direção da fita que está sendo reproduzida. Os usuários de língua árabe esperam que os controles de reprodução e a barra de progresso sejam iguais aos da LTR.

Indicador de reprodução em LTR

Inglês em formato RTL

Geralmente, os textos LTR e RTL são misturados na mesma página. O Spotify tem mais de 40 milhões de músicas de músicos de todo o mundo e mais de 3 bilhões de playlists. O conteúdo é apresentado em vários idiomas para usuários de todo o mundo. Portanto, os clientes do Spotify geralmente combinam conteúdo LTR e RTL.

(Olá (Mundo: o problema de pontuação e parênteses

Um dos primeiros problemas que encontramos foi o seguinte:

Problema entre parênteses

Isso acontece porque o navegador define a direção básica do texto com base no valor do atributo dir do nosso elemento. Marcas de pontuação como ( ) . ! ( ) . ! e o restante não é descrito por direção no Unicode. Eles herdam a direção básica do texto.

O algoritmo bidirecional Unicode bidirecional examina cada caractere em uma sequência da direita para a esquerda. Como exemplo, pegue a linha "Hello (World)" na página.

O algoritmo começa a analisar a linha à direita. Ele vê um caractere não direcionado ) , então ele olha para a direção básica do texto e vê que o texto vai da direita para a esquerda. O algoritmo decide mover-se ) para o início da linha.
```
  "Olá (Mundo)" -> "(Olá (Mundo)) 
```
O algoritmo vê d com uma direção LTR. Não precisa ser movido. O mesmo se aplica a outros caracteres em inglês até ( .
O algoritmo vê ( sem direção. Lembra a direção básica predominante (dada pelo W anterior) da esquerda para a direita. O algoritmo decide não se mover ( . O mesmo vale para o espaço e todos os caracteres em "Hello”

Saiba mais sobre como o Algoritmo Bidirecional Unicode funciona aqui .

Como resultado, obtemos a sequência "(Hello (World" . Resolvemos esse problema especificando o valor auto para o atributo dir em todo o conteúdo dinâmico, por exemplo, nos nomes de artistas, álbuns e nomes de músicas. Isso isola o conteúdo e define a direção base de acordo com o primeiro um caractere de direção fortemente digitado. Nesse caso, os caracteres não direcionados sempre herdarão a direção dos caracteres circundantes, não da página. Portanto, você obterá a sequência "Hello (World)" . Para garantir o alinhamento adequado, use o atributo apenas para elementos embutidos, caso contrário, você precisará adicionar a propriedade text-align aos elementos.

... ello World: problema de truncamento

O conteúdo misto também é um problema se você deseja adicionar truncamento que não se encaixa no elemento.

Interface do usuário LTR: texto em árabe truncado do lado errado

Interface do usuário RTL: texto em inglês truncado do lado errado

O truncamento ocorre no lado errado, porque o navegador define a direção do texto a partir do atributo dir . O problema é resolvido definindo o atributo "auto" para um elemento com texto truncado.

Interface do usuário LTR: texto em árabe truncado no lado direito

UI RTL: texto em inglês truncado no lado direito

Letra árabe

Ao desenvolver uma interface do usuário multilíngue, é importante garantir que a interface funcione corretamente para todos os alfabetos. Aqui, em poucas palavras, o que você precisa verificar ao adicionar o árabe.

Intersymbol

A escrita árabe é ligadura. A maioria, se não todos, os caracteres de uma palavra estão relacionados entre si. Por esse motivo, o espaçamento entre símbolos não deve ser usado em árabe. Ele quebra os símbolos, quebrando a ligadura natural.

Tamanho da fonte

Normalmente, os caracteres árabes têm glifos mais complexos que os caracteres ingleses. Existem mais linhas e nuances que devem caber no mesmo espaço. Por esse motivo, as letras árabes com o mesmo tamanho de fonte são menos legíveis que o inglês. Os caracteres são muito pequenos. Decidimos aumentar o tamanho mínimo da fonte em árabe de 11 para 12px. Também garantimos que a fonte não complique os glifos em árabe. Uma boa opção seria o Google Noto , que é mais legível que o Arial, a fonte de backup padrão para o árabe no navegador.

Corte vertical

Algumas letras árabes são mais altas que o inglês. Isso pode fazer com que os caracteres sejam truncados verticalmente. Para o árabe, pode ser necessário aumentar o espaçamento entre linhas (altura da linha).

Corte vertical

Letras maiúsculas

Como não há letras maiúsculas em árabe, não faz sentido destacar algo em letras maiúsculas na página.

Vírgulas árabes

Muitos idiomas usam ,, como vírgula. Em árabe, outro delimitador: ، .

O código array.join(', ') frequentemente encontrado em nosso código. Para oferecer suporte a diferentes delimitadores, dependendo das configurações de idioma do usuário, adicionamos o método getSeparator() .

Algarismos arábicos

Em árabe, dois sistemas numéricos

Números arábicos ocidentais: 0 1 2 3 4 5 6 7 8 9
Numerais do árabe oriental: ٩ ٣ ٤ ٥ ٦ ٧ ٨ ١ ٢ ٢

Selecione um sistema e use-o de forma consistente em todo o aplicativo. Escolhemos os algarismos arábicos ocidentais.

Cor do texto transparente

Os glifos em árabe podem se sobrepor. A cor transparente do texto não funciona, porque as partes sobrepostas não obtêm a transparência esperada. A solução é uma cor e opacidade completamente opacas para o elemento de texto.

Questão de transparência

Padrões de qualidade

Aqui estão algumas das ações que fizemos para atualizar o idioma árabe:

Sessões de teste da equipe
Teste beta com funcionários que falam árabe
Interface do usuário de teste e traduções de agências externas.

Para garantir a qualidade da interface do usuário em árabe, foram necessárias algumas ferramentas.

Decidimos criar um bot no GitHub. Ele publica comentários sobre solicitações de pool que correspondem a possíveis problemas. O comentário não impõe nada: é apenas um lembrete para verificar como a alteração afetará o idioma árabe, com referência às instruções de teste. O bot comenta as linhas alteradas correspondentes a preenchimento, espaçamento de caracteres, conversões, etc. O código CSS é convertido pelo PostCSS-RTL; portanto, basta olhar para a alteração em árabe e verificar se ela está boa. As propriedades CSS podem ser definidas via JS, e o PostCSS-RTL não converte JS. O bot verifica os arquivos JS e os comenta também, se as propriedades correspondentes forem encontradas lá.

Comentado por tob-bot

(Da direita para a esquerda (através do espelho