Skip to content
FuncionalidadesPreciosAfiliadosBlogAyudaNosotrosContacto
ComenzarIniciar sesión
Volver al Blog
guides2026-07-145 min de lectura

UX Menú Árabe RTL: Diseño Espejo, Dirección de Números y Etiquetas de Precio

Dubai City Walk: un restaurante turco mantiene 45 AED en LTR mientras la descripción fluye en RTL. Solución con unicode-bidi: plaintext.

th

thMenu Team

thmenu.com

Un restaurante turco en Dubai City Walk lanzó su menú árabe el mes pasado. La primera queja llegó pronto: "Adana Kebap 45 AED" se mostraba como un revoltijo ilegible. El problema no era la traducción sino gestionar dígitos latinos embebidos en un flujo RTL. Esta guía cubre el diseño espejo, la dirección de etiquetas de precio y el comportamiento del line-clamp en descripciones árabes multilínea con ejemplos reales de producción.

Espejo y dirección del precio

Con dir="rtl" en la raíz HTML, Flex y Grid se reflejan automáticamente. Nombre del producto a la derecha, precio a la izquierda — lo que esperan los lectores árabes. Para "45 AED", el algoritmo BiDi Unicode lo maneja bien: número LTR, contexto RTL.

Los problemas comienzan en descripciones como "listo en 5 minutos" donde dígito y glifos árabes se mezclan. Al saltar de línea, el dígito acaba en el lado equivocado. Solución: aplicar unicode-bidi: plaintext al elemento descripción.

Line-clamp y envoltura multilínea

Las tarjetas suelen limitar a 2-3 líneas. En latín no hay problema, en árabe la última línea desaparece o los números saltan. Razón: line-clamp recorta primero, BiDi reordena después del recorte.

  • unicode-bidi: plaintext — cada línea en su dirección
  • text-align: start — alineación según locale
  • word-break: normal — preserva ligaduras árabes

Números y divisas

Menús saudíes muestran "45 ر.س"; EAU prefiere "AED 45". En la config local la posición vive en currency.position. Los dígitos arábigos orientales (٠١٢٣٤٥٦٧٨٩) son apreciados por audiencias mayores pero el Golfo usa mayoritariamente dígitos latinos.

thMenu usa Intl.NumberFormat con numberingSystem: "latn" por defecto, con override "arab" para Egipto y el Levante donde aún son comunes.

FAQ

¿Basta dir="rtl"? No, las tarjetas mixtas necesitan unicode-bidi: plaintext.

¿Dígitos árabes obligatorios? No, solo para Egipto/Levante.

¿Reflejar logos? No los de marca, sí iconos direccionales.

¿Te resultó útil? Compártelo.