Este post no blog irá guiá-lo através dos passos fundamentais para implementar suporte a idiomas RTL (da direita para a esquerda) de maneira eficaz no seu aplicativo web.
Logto é a sua melhor escolha de solução de Gerenciamento de Identidade e Acesso do Cliente (CIAM). É open-source e apoiado por uma comunidade ativa. Recentemente, nossa comunidade (crédito a @zaaakher) contribuiu com a tradução para o idioma árabe tanto para o Logto Admin Console quanto para a Experiência de Login do Logto, tornando-o mais acessível para usuários falantes de árabe.
No entanto, entendemos que ter apenas a tradução não é suficiente. Precisamos garantir que o layout da interface também esteja otimizado para idiomas da direita para a esquerda (RTL). Neste tutorial, falaremos sobre os desafios comuns na compatibilidade RTL e como enfrentá-los no seu aplicativo web.
Em um aplicativo web da esquerda para a direita (LTR), o layout é projetado para começar do lado esquerdo da tela. O conteúdo flui da esquerda para a direita, e a barra de rolagem está no lado direito da tela. Em contraste, um aplicativo web RTL começa do lado direito da tela. O conteúdo flui da direita para a esquerda, e a barra de rolagem está no lado esquerdo da tela.
Tomando como exemplo uma captura de tela do Console Logto:
Ao converter um aplicativo web LTR para amigável a RTL, você pode encontrar os seguintes desafios:
Aqui estão algumas dicas e truques que utilizamos para tornar o Logto amigável ao modo RTL:
dir="rtl"Aplique o atributo HTML dir="rtl" ao elemento raiz do seu aplicativo web, se o idioma atual for árabe ou qualquer outro idioma RTL.
Isso ajuda o navegador a entender que o conteúdo deve ser exibido no modo RTL, e ele ajustará automaticamente os três primeiros desafios (alinhamento de texto, direção do conteúdo e posição da barra de rolagem). No entanto, se você estiver usando uma barra de rolagem personalizada, pode ser necessário ajustar a posição manualmente.
Quando o idioma é RTL, podemos usar o CSS transform: scaleX(-1); para inverter os ícones horizontalmente. Aqui está um exemplo escrito em React e TypeScript:
Com este componente, você pode envolver o componente de ícone e ele inverterá automaticamente o ícone no modo RTL.
Use a função JavaScript toLocalString para localizar datas, horas e números. Por exemplo:
Você também pode optar por usar uma biblioteca como date-fns para lidar com a localização de datas e horas.
Para números, também é possível usar o método toLocaleString, mas com a opção ar-u-nu-arab para exibir os algarismos indo-arábicos.
Explicação
Pode ser necessário ajustar o espaçamento, posicionamento, raio da borda e outros estilos CSS de acordo. Aqui estão alguns casos comuns:
Em vez de escrever margin-left, margin-right, padding-left e padding-right, você pode usar margin-inline-start, margin-inline-end, padding-inline-start e padding-inline-end para lidar tanto com os modos LTR quanto RTL.
Ao usar posicionamento absoluto, você pode usar inset-inline-start e inset-inline-end em vez de left e right.
Quando usar raio da borda, você pode usar border-start-start-radius, border-start-end-radius, border-end-start-radius e border-end-end-radius para lidar tanto com os modos LTR quanto RTL.
Ainda pode haver alguns casos de exceção que você não consegue lidar com os métodos acima. Nesses casos, você pode usar a pseudo-classe :dir() para aplicar estilos diferentes com base na direção do texto.
Neste tutorial, discutimos os desafios ao implementar uma interface amigável ao modo RTL e compartilhamos como lidamos com eles no Console Logto e na Experiência de Login do Logto. Aplicando as dicas e truques mencionados acima, você também pode tornar seu aplicativo web mais acessível para usuários de idiomas RTL.