Arab Menü RTL UX: Tükör-Elrendezés, Számirány és Árcímkék

Egy török étterem a Dubai City Walkban a múlt hónapban indította el arab nyelvű étlapját. Az első panasz órákon belül megérkezett: "Adana Kebap 45 AED" olvashatatlan kupacként jelent meg. A probléma nem a fordítás volt, hanem a beágyazott latin számjegyek kezelése egy RTL áramlásban. Ez az útmutató a tükör-elrendezést, az árcímke irányát és a line-clamp viselkedését tárgyalja többsoros arab leírásokban valódi gyártási példákkal.

Tükör és ár-irány

Ha dir="rtl"-t állítunk a HTML gyökéren, a Flex és Grid automatikusan tükröződik. Terméknév jobbra, ár balra — amit az arab olvasók várnak. A "45 AED"-t a Unicode BiDi algoritmus helyesen kezeli: szám LTR, kontextus RTL.

A bajok olyan leírásokban kezdődnek mint "5 perc alatt kész" ahol szám és arab írásjegyek keverednek. Sortöréskor a szám rossz oldalra ugrik. Megoldás: alkalmazz unicode-bidi: plaintext-et a leírás elemen.

Line-clamp és többsoros tördelés

A kártyák általában 2-3 sorra korlátoznak. Latin betűknél nincs probléma, arabnál az utolsó sor eltűnik vagy a számok átugranak. Ok: line-clamp először vág, BiDi utána rendez.

• unicode-bidi: plaintext — minden sor saját irányában
• text-align: start — locale szerinti igazítás
• word-break: normal — megőrzi az arab ligatúrákat

Számok és valuták

Szaúdi menük "45 ر.س"-t mutatnak; az EAE az "AED 45"-öt preferálja. A locale konfigban a pozíció a currency.position alatt van. A kelet-arab számjegyek (٠١٢٣٤٥٦٧٨٩) idősebb közönséget szólítanak meg, de az Öböl-térség latin számjegyeket használ.

A thMenu az Intl.NumberFormatot használja numberingSystem: "latn" alapértelmezéssel, "arab" felülírással Egyiptomhoz és a Levantéhoz.

GYIK

Elég a dir="rtl"? Nem, a vegyes kártyáknak unicode-bidi: plaintext kell.

Kötelező az arab számjegy? Nem, csak Egyiptomhoz/Levantéhoz.

Tükrözzük a logókat? Márkákat nem, irány-ikonokat igen.

Hasznosnak találtad? Oszd meg.