Adicionando suporte para idiomas árabe e hebraico no Airbnb

A apresentação da direita para a esquerda desses idiomas solicitados apresenta desafios únicos de engenharia e design.

Bot Mati em Airbnb Engineering & Data Science Segue 23 de maio · 4 min ler

Autores: Yaniv Zimet , Mati Bot

O que torna isso digno de nota?

A missão da Airbnb é criar um mundo onde qualquer pessoa possa pertencer a qualquer lugar e, com esse lançamento, possibilitamos que mais de 300 milhões de falantes de árabe e hebraico no mundo todo pertençam ao Airbnb.

Árabe e hebraico são ambas as linguagens que usam uma direção de escrita da direita para a esquerda (RTL). O início da página em um layout RTL é o lado direito. Todos os textos e elementos visuais estão alinhados à direita e fluem para a esquerda.

Em um layout da direita para a esquerda, as informações fluem da direita para a esquerda (Figura 1)

Começamos nosso processo da mesma forma que adicionamos qualquer outra linguagem: traduzindo todas as nossas strings, definindo formatos de data, formatos numéricos e regras linguísticas (por exemplo, pluralização). Estas são sensibilidades de localização. Mas assim que introduzimos um layout da direita para a esquerda, o escopo de nosso trabalho aumenta drasticamente. Estas são sensibilidades visuais, funcionais e comportamentais.

Considerações visuais e de nomenclatura

Vamos ver alguns exemplos. Não está claro qual estrela é a primeira estrela no seguinte componente interativo de classificação por estrelas.

Componente de classificação por estrelas interativo (Figura 2)

Para sabermos qual estrela é a primeira, precisamos saber a direção da página. Para idiomas que são escritos da esquerda para a direita, o primeiro elemento é o mais à esquerda; para idiomas que são escritos da direita para a esquerda, o primeiro elemento é o mais à direita.

Esquerda para a direita:

Esquerda-para-direita, 1 estrela selecionada (Figura 3)

Direita para esquerda:

Da direita para a esquerda, 1 estrela selecionada (Figura 4)

Ícones individuais também devem estar cientes da direção do layout.

Ícones direcionais (Figura 5)

Os nomes desses ícones de seta são iconArrowPrevious e iconArrowNext, em vez de iconArrowLeft e iconArrowRight .

Em toda a base de código, evitamos fazer referência a uma direção explicitamente: em nomes de variáveis, nomes de ativos e definições de estilo. Em vez disso, usamos a terminologia que representa a direção relativa ao conteúdo .

Por exemplo, o ícone ao lado de um rótulo de botão é o ícone principal e não o ícone à esquerda . Ao deslizar para avançar um carrossel de fotos, uma passa para a frente e não para a direita .

Uma representação mais concreta desses conceitos é o componente de interface do usuário para um cartão de listagem residencial. (Figura 6) O carrossel de fotos avança conforme apropriado para cada direção, o que é sugerido pelos pontos indicadores. O alinhamento do texto e do coração “save to wish list” é espelhado. Como vimos anteriormente, as classificações por estrelas também fluem com a direção do conteúdo.

Cartões de listagem da esquerda para a direita e da direita para a esquerda, lado a lado (Figura 6)

Experiência de desenvolvedor

Para garantir que essas alterações de design e localização sejam adotadas em todas as equipes de produtos, automatizamos o máximo possível para tornar mais fácil e transparente o suporte RTL a todas as páginas. Em clientes da web, toda a inversão de layout foi integrada em nossos principais componentes de UI e o pipeline de construção para que, sempre que esses componentes forem usados para criar uma página, o suporte a RTL seja incluído gratuitamente.

Também criamos uma maneira de os engenheiros testarem facilmente o layout de RTL. Um modo de visualização RTL foi adicionado ao nosso explorador de biblioteca de componentes, bem como um ambiente de visualização para todas as páginas, telas e modelos. Criamos diffs visuais automáticos para cada alteração no código da interface do usuário.

Qual é o próximo

Criar uma experiência de desenvolvedor integrada e fácil de usar não é isenta de desafios. Em postagens subseqüentes, detalharemos a jornada para o suporte a idiomas RTL na Web, no Android e no iOS. Se você tiver perguntas específicas que gostaria que respondêssemos, sinta-se à vontade para comentar aqui e nos informar!

Você pode experimentar árabe ou hebraico como seu idioma padrão visitando https://ar.airbnb.com ou https://he.airbnb.com . Em novas versões de nossos aplicativos iOS e Android, você pode selecionar árabe e hebraico como o idioma do seu sistema.

Bem vinda

???? ???

?????? ?????

Mati Bot (Engenheiro Chefe de Android e iOS) e Yaniv Zimet (Engenheiro Web Líder)

Graças a:

Hyelim Chang (Gerente de Localização), John Furlong (Gerente do Programa de Localização), Salvo Giammarresi (Diretor de Localização), Dylan Hurd (Editor de Postagem no Blog, Engenheiro de Software), Marcella Iulo (Produtor Fotográfico), Diego Lagunas (Gerente de Engenharia), Rebecca Lanthorne (Líder de produção criativa), Taido Nakajima (projeto de globalização), Michael “Byph” Singh (analista de controle de qualidade), Sergio Pelino (gerente de operações de localização) e Maja Wichrowska (engenheiro de software)

Ex-colegas: Pablo Caro (Designer) e Jason Katz-Brown (engenheiro de software)

Em colaboração com PLUS QA: Ido Avraham, Katie Heynderickx, Joud Kashgari, Hikmet Luleci, Michael Manca e Nataliya Pirumova