アラビア語メニュー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。

お役に立ちましたか?シェアしてください。