UX Arabského Menu RTL: Zrcadlový Layout, Směr Číslic a Cenovky

Turecká restaurace v Dubai City Walk spustila minulý měsíc své arabské menu. První stížnost přišla během hodin: "Adana Kebap 45 AED" se zobrazoval jako nečitelná změť. Problém nebyl v překladu, ale ve správě vložených latinských číslic v RTL toku. Tento průvodce pokrývá zrcadlový layout, směr cenovky a chování line-clamp ve víceřádkových arabských popisech se skutečnými produkčními příklady.

Zrcadlo a směr ceny

S dir="rtl" na HTML kořenu se Flex a Grid automaticky zrcadlí. Název produktu vpravo, cena vlevo — co očekávají arabští čtenáři. Pro "45 AED" Unicode BiDi algoritmus zvládá správně: číslo LTR, kontext RTL.

Potíže začínají v popisech jako "hotové za 5 minut" kde se číslice a arabské glyfy míchají. Při zalomení číslice skočí na špatnou stranu. Řešení: aplikovat unicode-bidi: plaintext na element popisu.

Line-clamp a víceřádkové zalamování

Karty obvykle omezují 2-3 řádky. V latině bez problému, v arabštině poslední řádek často zmizí nebo číslice skáčou. Důvod: line-clamp ořezává první, BiDi přerovnává poté.

• unicode-bidi: plaintext — každý řádek ve svém směru
• text-align: start — zarovnání dle locale
• word-break: normal — zachovává arabské ligatury

Číslice a měny

Saúdská menu ukazují "45 ر.س"; SAE preferují "AED 45". V konfiguraci locale je pozice v currency.position. Východoarabské číslice (٠١٢٣٤٥٦٧٨٩) oslovují starší publikum ale Záliv používá latinské.

thMenu používá Intl.NumberFormat s numberingSystem: "latn" jako default a override "arab" pro Egypt a Levantu.

FAQ

Stačí dir="rtl"? Ne, smíšené karty potřebují unicode-bidi: plaintext.

Arabské číslice povinné? Ne, jen pro Egypt/Levantu.

Zrcadlit loga? Značky ne, směrové ikony ano.

Bylo to užitečné? Sdílejte to.