Suportando layout de linguagem RTL no seu aplicativo web
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.
Developer
Introdução
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.
Como se parece um aplicativo web RTL?
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:
Desafios na compatibilidade RTL
Ao converter um aplicativo web LTR para amigável a RTL, você pode encontrar os seguintes desafios:
- Alinhamento de texto: O alinhamento de texto deve ser alinhado à direita no modo RTL.
- Direção do conteúdo: A direção do conteúdo deve ser da direita para a esquerda no modo RTL. Ex.: barra de navegação lateral, gráficos, etc.
- Posição da barra de rolagem: A barra de rolagem deve estar no lado esquerdo da tela no modo RTL.
- Ícones e imagens: Alguns ícones e imagens devem ser espelhados no modo RTL. Ex.: ícones Chevron, etc.
- Localizar datas e números: Formatar datas e usar "Algarismos Indo-Arábicos (٠١٢٣٤٥٦٧٨٩)" em vez de "Algarismos Arábicos Ocidentais (0-9)" no modo RTL.
- Espaçamentos, posicionamento e mais: Outros ajustes menores que precisam ser considerados, incluindo margens e preenchimentos, borda arredondada, posicionamento absoluto, animações, etc.
Como vencer os desafios acima?
Aqui estão algumas dicas e truques que utilizamos para tornar o Logto amigável ao modo RTL:
Use o atributo HTML 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.
Implemente um componente para inverter ícones no modo RTL.
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.
Localizar data, hora e números.
Use a função JavaScript toLocalString para localizar datas, horas e números. Por exemplo:
Localização de data e hora
Você também pode optar por usar uma biblioteca como date-fns para lidar com a localização de datas e horas.
Localização de números
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
- ar: Indica o idioma árabe.
- u: Representa Unicode, permitindo extensões.
- nu-arab: Especifica o uso de algarismos indo-arábicos.
Ajustar espaçamento, posicionamento e mais.
Pode ser necessário ajustar o espaçamento, posicionamento, raio da borda e outros estilos CSS de acordo. Aqui estão alguns casos comuns:
Margens e preenchimentos
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.
Posicionamento absoluto
Ao usar posicionamento absoluto, você pode usar inset-inline-start e inset-inline-end em vez de left e right.
Raio da borda
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.
Outros diversos
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.
Resumo
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.