Capturas de tela da App Store da direita para a esquerda: design para árabe e hebraico

Capturas de tela em árabe e hebraico precisam de mais do que legendas traduzidas. Como os dois idiomas são lidos da direita para a esquerda (RTL, na sigla em inglês), um bom conjunto RTL espelha a composição, alinha as legendas à direita, mostra a interface do próprio app capturada em uma localidade RTL e usa uma fonte que renderiza a escrita corretamente. Nomes de marca, números e termos em alfabeto latino dentro da legenda continuam da esquerda para a direita, e é nessa mistura que a maioria das capturas de tela RTL quebra.

Este guia mostra quais idiomas das lojas são RTL, como espelhar um conjunto, como capturar a interface do dispositivo em árabe ou hebraico e os erros que mais vemos.

Quais idiomas da App Store e do Google Play são da direita para a esquerda?

Na App Store, a lista de localizações da App Store da Apple tem 50 itens; os da direita para a esquerda são árabe, hebraico e urdu. No Google Play, a lista de idiomas da página da loja usa estes códigos:

Repare no código do hebraico. O Google Play usa iw-IL, baseado no código ISO antigo “iw”, e não he. Se você automatiza os envios com o fastlane supply ou com a Play Developer API, o nome da pasta ou da localidade precisa bater com o que o Play espera, ou a página vai parar no lugar errado.

A referência de localização da Apple lista o árabe como idioma compatível em várias lojas, incluindo o Egito e os Emirados Árabes Unidos, então um conjunto em árabe pode atender vários mercados. Usar árabe padrão moderno ou um tom regional nas legendas é uma decisão de texto; a maioria das páginas usa o árabe padrão moderno.

Como espelhar um conjunto de capturas de tela para árabe e hebraico

Espelhar significa inverter as partes da composição que dependem da direção, deixando de lado o conteúdo que tem uma orientação no mundo real. Passe por cada elemento:

• Alinhamento da legenda: à direita. Legendas centralizadas sobrevivem à troca, e esse é um dos motivos de alguns times centralizarem tudo.
• Posição do dispositivo e da legenda: se o layout em inglês coloca o celular à direita e a legenda à esquerda, troque os dois de lugar.
• Setas, dicas de deslizar e indicadores de progresso: inverta tudo o que sugere “para a frente”. Em RTL, para a frente aponta para a esquerda.
• Gráficos: siga o que o seu app faz. Muitos apps mantêm gráficos de séries temporais da esquerda para a direita; se o seu espelha esses gráficos em árabe, mostre isso.
• Não inverta: logos, fotos, o hardware do dispositivo (o módulo da câmera), relógios, controles de reprodução de mídia e qualquer coisa com texto em alfabeto latino.

E a ordem das capturas de tela?

As lojas mostram as capturas de tela na ordem em que você envia, em todos os idiomas, então a captura de tela 1 é sempre a sua primeira. O que muda em uma localidade RTL é a direção de leitura da interface da loja em volta dela. A documentação da Apple não detalha como o carrossel de capturas de tela rola nas lojas RTL, então sugerimos conferir em um dispositivo configurado em árabe ou hebraico em vez de supor. Isso pesa mais em conjuntos de capturas de tela panorâmicas: um design que flui pela emenda da esquerda para a direita pode ser lido ao contrário por um usuário RTL. Se estiver em dúvida, faça cada quadro RTL funcionar sozinho, ou monte o fundo contínuo para ser lido da direita para a esquerda.

Capture a interface do app na localidade RTL

O que mais entrega uma página localizada pela metade é uma legenda em árabe em cima de uma tela do app em inglês. Capture as telas dentro da moldura do dispositivo com o app rodando de verdade em árabe ou hebraico. Se o seu app tem bom suporte a RTL, a navegação, as barras de abas e os botões de voltar já vão estar espelhados.

iOS

No Xcode, edite o scheme, abra Run → Options e defina App Language como árabe ou hebraico para as capturas finais. Para conferir o espelhamento antes de ter as traduções, use a opção Right-to-Left Pseudolanguage, que inverte o layout mantendo o seu idioma de desenvolvimento. A sessão da WWDC22 da Apple “Get it right (to left)” é a melhor referência única sobre como o iOS lida com layouts RTL e algarismos. Você também pode passar um argumento de inicialização nos seus testes de UI:

-AppleLanguages (ar) -AppleLocale ar_SA

Android

O app precisa de android:supportsRtl="true" no manifesto e de start/end em vez de left/right nos layouts, segundo o guia do Android para oferecer suporte a diferentes idiomas. Para uma conferência rápida, o Android 4.4 e versões mais recentes têm a opção do desenvolvedor Forçar layout da direita p/ esquerda. Para as capturas finais, mude o idioma do sistema do emulador para árabe ou hebraico. Nosso guia de capturas de tela limpas no simulador e no emulador mostra como limpar a barra de status, e isso vale do mesmo jeito em RTL.

Tipografia para legendas em árabe e hebraico

É nas fontes que um conjunto RTL parece nativo ou improvisado.

• Use uma fonte feita para a escrita. Se a fonte da sua marca não tem glifos árabes ou hebraicos, o sistema recorre a outra, muitas vezes com um peso que não combina. Escolha uma família complementar que já inclua a escrita. O Google Fonts tem várias, por exemplo Noto Sans Arabic, IBM Plex Sans Arabic e Cairo para o árabe, e Noto Sans Hebrew, Heebo e Rubik para o hebraico.
• Nunca adicione espaçamento entre letras no árabe. As letras árabes se ligam. Um espaçamento que fica elegante em inglês quebra essas ligações e deixa as palavras mais difíceis de ler. Deixe em zero nas legendas em árabe.
• Não existem maiúsculas. Nem o árabe nem o hebraico têm letras maiúsculas, então um estilo em caixa-alta do inglês não tem equivalente. Use peso e tamanho para dar ênfase.
• Dê mais altura de linha ao árabe. O árabe tem ascendentes altas, descendentes profundas e sinais acima e abaixo das letras, então um entrelinhamento que funciona em inglês pode cortá-lo.
• Espere comprimentos diferentes. Legendas em árabe muitas vezes têm uma largura diferente das em inglês; em hebraico, costumam ser mais curtas. Deixe o layout se ajustar em vez de diminuir o texto.

Números, nomes de marca e texto com direções misturadas

A maioria das legendas RTL tem algum texto da esquerda para a direita: o nome do app, o nome de um recurso em inglês, um número. O algoritmo bidirecional do Unicode cuida da direção de cada trecho, mas o resultado ainda pode surpreender.

Algarismos

O hebraico usa algarismos ocidentais. O árabe usa tanto os algarismos ocidentais (123) quanto os arábico-índicos (١٢٣), dependendo do mercado e das configurações do usuário. O guia de localização do Android observa que muitas localidades árabes formatam números com os próprios algarismos por padrão. Use o que o seu app mostra na localidade capturada, para que a legenda e a tela combinem.

Nomes de marca e pontuação

Um nome de marca em alfabeto latino dentro de uma frase em árabe ou hebraico continua da esquerda para a direita, e a pontuação ao lado dele pode pular para a ponta errada da linha. Problemas típicos: um ponto final que cai antes do nome da marca, um sinal de porcentagem do lado errado do número ou um parêntese que fica ao contrário. Soluções, em ordem de preferência:

1. Reescreva a legenda para que a palavra em alfabeto latino não fique no começo nem no fim da linha.
2. Tire a pontuação final; legendas de capturas de tela raramente precisam dela.
3. Em último caso, insira uma marca da direita para a esquerda (U+200F) depois do trecho em alfabeto latino, para que a pontuação se prenda no lugar certo.

Sempre peça para um falante nativo conferir a imagem final, não o arquivo de texto. Problemas bidirecionais muitas vezes só aparecem depois que o texto é renderizado.

Erros comuns em capturas de tela RTL

O ponto mais profundo, sobre o qual escrevemos em traduzir a página da loja não é localizar, é que os mercados RTL percebem quando uma página é só uma cópia refletida da versão em inglês. Para o fluxo geral de localização (por quais mercados começar, como gerenciar as legendas por idioma), veja como localizar capturas de tela da App Store.

Fazendo isso com uma ferramenta de capturas de tela

No Figma ou em uma ferramenta de design genérica, um conjunto RTL normalmente é uma página duplicada em que você inverte cada quadro à mão. As ferramentas de capturas de tela variam muito nesse ponto, então confira três coisas: uma configuração de direção de texto da direita para a esquerda, fontes com glifos árabes e hebraicos e se os layouts são espelhados automaticamente. O Launch Shots tem suporte a tradução RTL para árabe e hebraico, e os tamanhos continuam os mesmos dos seus outros idiomas (veja nossa referência de tamanhos de capturas de tela). Seja qual for a ferramenta, capture de novo as telas do app na localidade RTL; nenhum gerador consegue fazer essa parte por você.

Checklist de capturas de tela RTL

• Legendas alinhadas à direita (ou centralizadas) e escritas ou revisadas por um falante nativo.
• Composições espelhadas: dispositivo e legenda trocados de lugar, setas e dicas de deslizar invertidas.
• Logos, fotos, hardware do dispositivo e texto em alfabeto latino sem inverter.
• Interface do app capturada com o app rodando em árabe ou hebraico, não em inglês.
• Uma fonte com glifos árabes ou hebraicos de verdade, espaçamento entre letras zero no árabe e altura de linha generosa.
• Algarismos iguais aos que o app mostra naquela localidade.
• Pontuação em volta de nomes de marca e números conferida na imagem renderizada.
• Localidade certa: árabe, hebraico ou urdu no App Store Connect; ar, iw-IL, fa ou ur no Play Console.
• Visualização em um dispositivo real configurado no idioma RTL antes de publicar.