아랍어 메뉴 RTL UX: 미러 레이아웃, 숫자 방향, 가격 태그

두바이 City Walk의 한 터키 식당이 지난달 아랍어 메뉴를 출시했습니다. 첫 항의는 몇 시간 안에 도착했습니다: "Adana Kebap 45 AED"가 알아볼 수 없는 뒤죽박죽으로 표시되었기 때문입니다. 문제는 번역이 아니라 RTL 흐름 안에 내장된 라틴 숫자 관리였습니다. 이 가이드는 실제 프로덕션 예시로 미러 레이아웃, 가격 태그 방향, 다중 줄 아랍어 설명의 line-clamp 동작을 다룹니다.

미러와 가격 방향

HTML 루트에 dir="rtl"을 설정하면 Flex와 Grid가 자동으로 미러링됩니다. 제품명은 오른쪽, 가격은 왼쪽 — 아랍어 독자가 기대하는 방식입니다. "45 AED" 같은 가격은 Unicode BiDi 알고리즘이 올바르게 처리: 숫자는 LTR, 문맥은 RTL.

"5분 안에 준비" 같은 숫자와 아랍 글리프가 섞인 설명에서 문제가 시작됩니다. 줄바꿈 시 숫자가 잘못된 쪽으로 튀어나갑니다. 해결책: 설명 요소에 unicode-bidi: plaintext 적용.

Line-clamp와 다중 줄 래핑

카드는 보통 2-3줄로 제한. 라틴어는 문제없지만 아랍어는 마지막 줄이 사라지거나 숫자가 튀어나갑니다. 이유: line-clamp가 먼저 자르고 BiDi가 나중에 재정렬.

• unicode-bidi: plaintext — 각 줄을 자체 방향으로 유지
• text-align: start — locale별 정렬
• word-break: normal — 아랍 합자 보존

숫자와 통화

사우디 메뉴는 "45 ر.س"; UAE는 "AED 45" 선호. locale 설정에서 위치는 currency.position에 있음. 동아랍 숫자(٠١٢٣٤٥٦٧٨٩)는 노년층이 선호하나 걸프 지역은 라틴 숫자 사용.

thMenu는 Intl.NumberFormat의 numberingSystem: "latn"을 기본으로, 이집트/레반트에는 "arab" 오버라이드 가능.

FAQ

dir="rtl"만으로 충분? 아니요, 혼합 카드는 unicode-bidi: plaintext 필요.

아랍 숫자 필수? 아니요, 이집트/레반트만.

로고 미러? 브랜드는 No, 방향 아이콘은 Yes.

도움이 되셨나요? 공유해 주세요.