پشتیبانی از RTL

1) اصول

1. RTL ترجمه متن نیست، بلکه بازتاب تفکر است. محورها، نظم خواندن، نظم تمرکز، حرکات و تغییر ناوبری.
2. خصوصیات منطقی CSS به جای چپ/راست. به «margin-inline-start»، «inset-inline-end»، «border-start-start-radius» و غیره بروید.
3. جهت را در سطح جهانی روشن کنید، قطعات LTR را به صورت محلی جدا کنید. اعداد، URL ها، کدها، ایمیل ها و IBAN همیشه از چپ به راست خوانده می شوند.
4. آینه چیزی است که به جهت بستگی دارد، نه معنی. آیکون های «Play»، «↗»، «↙» و ساعت/فرآیند ممکن است آینه نباشند.
5. تست شبه RTL. شامل 'dir = «rtl «'/' جهت: rtl 'و ترجمه شبه قبل از خروج.

2) جهت: خواص «dir» و بولی

در سطح جهانی در سند/ریشه:

html
<html lang="ar" dir="rtl"> … </html>

خواص بولی (جایگزینی چپ/راست):

css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }

انتخابگرهای جهت:

css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }

محلی تمرکز خودکار از محتوای کاربر:

html
<p dir="auto">…</p>

3) BiDi و جداسازی متن مخلوط

مخلوط کردن عربی/عبری با لاتین/اعداد، نظم شخصیت را می شکند. استفاده از جداسازی BiDi:

برچسب ها: '' (جهت جدا شده)، ' '(لغو نیروها).

نشانه های یونیکد:

'u2066' LRI/' u2067 'RLI - شروع جداسازی LTR/RTL ،\u2069' PDI - پایان،
'u200E' LRM/' u200F 'RLM - نشانه های تک بایت برای درج کوتاه.

عبارت مثال با شماره حساب و ارز:

html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>

4) ناوبری، سلسله مراتب و طرح بندی

Breadcrumbs: نظم آینه: « »

پانل/منوها: نوار پیمایش اصلی - در سمت راست ؛ نقطه «عقب» به سمت چپ (به ابتدای خط RTL) اشاره دارد.
کارت ها/لیست ها: سرصفحه ها را به صورت درون خطی شروع کنید ؛ آیکون های وضعیت - به درون خطی پایان.
چرخ فلک و کش رفتن: حرکت به سمت درون خطی شروع (در RTL - به سمت راست). شاخص های صفحه نیز منعکس شده است.
صفحه بندی: فلش «بعدی» می رود به درون خطی شروع، «قبلی» - به درون خطی پایان.

5) آیکون ها و تصاویر

آیکون های جهت آینه: فلش، «جلو/عقب»، playhead، «گسترش/فروپاشی».
آیا آینه نیست: آیکون متن، نمودار، ساعت (اگر یک فلش زمان واقعی وجود دارد)، آرم نام تجاری.

از لحاظ فنی:

css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }

برای SVG: از «transform-box: view-box;» استفاده کنید. جلوگیری از «شناور شدن»

اجتناب از متن داخل تصاویر → محلی سازی در لایه های جداگانه.

6) فرم ها و ورودی

تراز محتوا: متن تراز: شروع ؛ 'زمینه های متن، عددی/مقدار/URL/ایمیل - LTR.

ویژگی ها:

html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">

محل نگهدارنده/برچسب محلی هستند، اما دقت در اعداد/کد باید از چپ به راست بروید.
ماسک: به شدت «رهگیری» نکنید. درج و انتخاب پشتیبانی.
لیست/رادیو/چک باکس: امضا در سمت راست کنترل، کلیک کنید مناطق ≥ 44 × 44 پیکسل.
min → max لغزنده: در RTL، حداقل در لبه راست، حداکثر در سمت چپ (یا مقیاس بدون معکوس و اعداد LTR را نشان می دهد).

7) شماره ها، تاریخ ها، ارزها

به طور پیش فرض، مناطق عربی از حوزه های عربی-هند (٠١٢٣٤٥٦٧٨٩) استفاده می کنند. راه حل - سیاست کسب و کار:

در رابط کاربری مالی، اعداد لاتین (0-9) اغلب به خاطر قابلیت همکاری نشان داده می شوند، اما فرمت (فضاها/نشانه ها) محلی است.

استفاده کنید. با محل هدف:

js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());

زمان نسبی ("بین المللی. RelativeTimeFormat ')، محدودیت های جهت دار و اختصارات روز/ماه محلی.

8) تایپوگرافی و خوانایی

فونت با خوب عربی/زبان عبری و لیگاتورها (شکل دادن به عربی).

فاصله خط 1. 4–1. 6; اجتناب از ردیابی محدود

برای عربی، کاشیدا (سکته های طولانی) هنگام تراز کردن عرض مجاز است - با دقت روشن کنید ("text-justify: inter-word; "/پشتیبانی موتور).
ایتالیایی لاتین را در داخل خط عربی ممنوع کنید (ریتم عمودی را خراب می کند).

9) نمودار، مقیاس و جداول

محورهای X از راست به چپ میروند ؛ افسانه با انتهای خطی هماهنگ شده است.
ستون جدول: ستون «اصلی» (نام/بازی) - راست ؛ اعداد/مقادیر می توانند LTR باقی بمانند و به انتهای خطی تراز شوند.

«+/ −» علائم و درصد - قبل از تعداد، رقم LTR جدا شده است:

html
<bdi dir="ltr">+12. 5%</bdi>

10) خوانندگان A11y و صفحه نمایش

اطمینان حاصل کنید که «lang =» ar «»/« lang =» he «» در معرض قرار گرفته است: موتور TTS صدای صحیح را انتخاب می کند.
تغییرات دینامیکی صدا در جهت با دقت - «dir» را بر روی قطعات غیر ضروری تغییر ندهید.
به روز رسانی زنده ('aria-live = «مودبانه»') - متن بدون مخلوط کردن جهت.
آیکون ها بدون برچسب های متن معنی را انتقال نمی دهند ؛ از aria-label استفاده کنید.

11) ویژگی های iGaming

11. 1 کوپن شرط بندی (betslip)

سفارش فیلد: مقدار → نسبت → سود بالقوه ؛ امضاهای درست، اعداد/عوامل LTR.
ضرایب را به آرامی به روز کنید فلش های بالا/پایین نیازی به آینه ندارند (معنای جهت قیمت جهانی است).

11. 2 مسابقات/بازار

تراز لیست لیگ/حوادث با درون خطی شروع (در RTL - در سمت راست).
تایمر و شمارش - LTR 'dir = «ltr» با ارقام جدول (' font-variant-numeric: tabular-numbs ؛ ').

11. 3 پرداخت/ACC

فیلدهای IBAN/BIC/تلفن همیشه LTR هستند.
نام بانک/آدرس - RTL.
خطاها/اعتبارسنجها نشانگرهایی را در سمت راست نشان میدهند.

11. 4 مسابقات/مدیران

ستون ها: موقعیت، نام مستعار، عینک - موقعیت در سمت راست ؛ تراز عینک به inline-end (LTR رقم).

12) تولید و آزمایش

شبه RTL در دوشیزه:

css html. debug-rtl { direction: rtl; }

آیکون های آینه خودکار در RTL (فقط جهت):

css html:dir(rtl). icon-dir { transform: scaleX(-1); }

تست های خودکار (نمونه ای از ایده ها):

طرح بندی عکس های فوری در «dir = rtl».
اگر «چپ/راست» در CSS (lint) وجود نداشته باشد، بررسی می کند.
E2E: نظم جدول بندی، چرخش چرخ فلک، رفتار لغزنده.
تست های بصری با متن عربی + LTR درج (ایمیل، مجموع).

13) نشانه های سیستم طراحی (به عنوان مثال)

json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}

14) قطعه

برای تغییر جهت در برنامه (React):

tsx import { useEffect } from "react";

export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}

هماهنگی لیست/breadcrumb:

css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }

اعداد و مجموع به عنوان قطعات LTR:

html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>

min → حداکثر لغزنده برای RTL:

css html:dir(rtl) input[type="range"] { direction: rtl; }

15) ضد گلوله

سخت «چپ/راست» در → سبک RTL می شکند.
وارد کردن اعداد/IBAN/URL بدون "dir =" ltr "→" شکسته "caret و سفارش.
بازتاب آرم/نمودار/ساعت.
همان مجموعه ای از آیکون ها همیشه آینه - بدون استثنا در معنی.
چرخ فلک ها، اعلامیه ها و صفحه بندی ها وارونه نیستند.
رشته های مخلوط بدون انزوا BiDi → شخصیت های «رقص».

16) معیارها

پوشش RTL: نسبت صفحه نمایش هایی که تحت بررسی RTL قرار گرفته اند.
نقص BiDi/انتشار: تعداد اشکالات متن مخلوط.
زمان سرب (LTR در مقابل RTL): نباید متفاوت باشد> 5-10٪.
خطای ورودی در فرم های شماره - درصد حوادث با اشتباه/ماسک.
CLS/perf: بدون طرح پرش زمانی که سوئیچ «dir».

17) چک لیست QA

جهت و طرح

'' برای مناطق RTL ؛ ': سبک dir (rtl)' اعمال می شود.
خواص بولی به جای «left/right».
ناوبری/bredkramby/carousels/صفحه بندی zerkalitsya به درستی.

متن و BiDi

شماره ها/ارزها/URL/ایمیل - 'dir =' ltr '' یا ''.
هیچ شخصیت «معکوس» در رشته های مخلوط.
تاریخ ها/ارزهای محلی از طریق 'Intl. '.

فرم ها

برچسب های مناسب ؛ کلیک کنید مناطق ≥ 44 × 44 پیکسل.
تلفن/IBAN/مقدار - LTR مراقبت، ماسک درست است.
لغزنده/پایین/بالا رفتار به عنوان انتظار می رود.

آیکون ها/تصاویر

فقط جهت نشان داده شده است ؛ استثناها برآورده شود.
بدون متن در تصاویر بدون نسخه های محلی.

А11у/Performance

'لنگ' در معرض ؛ SR درست می خواند.
بدون redraws غیر ضروری در هنگام تغییر 'dir'.
حلقه های کنتراست/تمرکز مربوط به AA است.

18) مستند سازی در سیستم طراحی

بخش Direction & BiDi: سیاست معکوس، لیست استثنائات برای آیکون ها.
مجموعه ای از نشانه های RTL و یک لینتر سبک (ممنوعیت «چپ/راست»).
آیا/آیا گالری: چرخ فلک، bredcrambs، فرم های شماره، لغزنده، نمودار.
اسکریپت های Pseudo-RTL و چک لیست های بررسی.

خلاصه ای کوتاه

پشتیبانی مناسب RTL ویژگی های منطقی CSS، آینه سازی آگاهانه و جداسازی سخت BiDi است. جدا کردن اعداد/URL ها در LTR، ناوبری آینه و آیکون های جهت دار، حفظ شکل قابل پیش بینی و نمودار قابل خواندن است. بنابراین رابط کاربری برای عربی، عبری، فارسی یا اردو طبیعی و سریع خواهد بود - از کوپن شرط بندی و فرم های پرداخت گرفته تا جداول مسابقات و مسابقات زنده.

پشتیبانی از RTL

متن و BiDi

فرم ها

آیکون ها/تصاویر

А11у/Performance

خلاصه ای کوتاه

با ما در تماس باشید

ارتباط سریع

ویدئو به‌زودی به‌روزرسانی می‌شود

ما در حال حاضر بسیار درگیر پروژه‌ها هستیم