UX Menu Árabe RTL: Layout Espelho, Direção dos Números e Etiquetas de Preço

Um restaurante turco no Dubai City Walk lançou seu menu árabe no mês passado. A primeira reclamação chegou em horas: "Adana Kebap 45 AED" aparecia como uma confusão ilegível. O problema não era tradução, mas gerenciar dígitos latinos embutidos num fluxo RTL. Este guia cobre layout espelho, direção da etiqueta de preço e comportamento do line-clamp em descrições árabes multilinha com exemplos reais de produção.

Espelho e direção do preço

Com dir="rtl" na raiz HTML, Flex e Grid espelham automaticamente. Nome do produto à direita, preço à esquerda — o que leitores árabes esperam. Para "45 AED", o algoritmo BiDi Unicode trata bem: número LTR, contexto RTL.

Os problemas começam em descrições como "pronto em 5 minutos" onde dígito e glifos árabes se misturam. Na quebra de linha o dígito pula para o lado errado. Solução: unicode-bidi: plaintext no elemento descrição.

Line-clamp e wrap multilinha

Cards costumam limitar a 2-3 linhas. Em latim sem problema, em árabe a última linha some ou números pulam. Motivo: line-clamp corta primeiro, BiDi reordena depois.

• unicode-bidi: plaintext — cada linha em sua direção
• text-align: start — alinhamento por locale
• word-break: normal — preserva ligaduras árabes

Números e moedas

Menus sauditas mostram "45 ر.س"; EAU preferem "AED 45". Na config local a posição está em currency.position. Dígitos arábicos orientais (٠١٢٣٤٥٦٧٨٩) agradam público mais velho mas o Golfo usa dígitos latinos.

thMenu usa Intl.NumberFormat com numberingSystem: "latn" default e override "arab" para Egito e Levante onde ainda são comuns.

FAQ

dir="rtl" basta? Não, cards mistos precisam de unicode-bidi: plaintext.

Dígitos árabes obrigatórios? Não, só para Egito/Levante.

Espelhar logos? Não de marca, sim ícones direcionais.

Achou útil? Compartilhe.