دعم RTL

1) المبادئ

1. RTL ليست ترجمة للنص، ولكنها انعكاس للتفكير. المحاور، ترتيب القراءة، ترتيب التركيز، الإيماءات وتغيير الملاحة.
2. خصائص CSS المنطقية بدلاً من اليسار/اليمين. انتقل إلى "هامش-inline-start' و" inset-inline-end "و" border-start-start-ratior "وما إلى ذلك.
3. قم بتشغيل الاتجاه عالميًا، وعزل شظايا LTR محليًا. تُقرأ الأرقام وعناوين URL والرموز والبريد الإلكتروني و IBAN دائمًا من اليسار إلى اليمين.
4. عكس ما يعتمد على الاتجاه وليس المعنى. قد لا تعكس «اللعب» و «↗» و «↙» وأيقونات الساعة/العملية.
5. اختبار RTL الزائف. ضع «dir =» rtl' «/» direction: rtl' والترجمات الزائفة قبل الخروج.

2) الاتجاه: خصائص «dir» و boolean

على الصعيد العالمي على أساس الوثيقة/الجذر:

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 - end،
'\u200E 'LRM/'\u200F' RLM - رموز أحادية البايت للإدخالات القصيرة.

مثال عبارة مع رقم الحساب والعملة:

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

4) الملاحة والتسلسل الهرمي والتخطيطات

فتات الخبز: ترتيب مرآة: " " "

الألواح/القوائم: نافبار رئيسي - على اليمين ؛ تشير كلمة «ظهر» إلى اليسار (إلى بداية خط RTL).
البطاقات/القوائم: مواءمة الرؤوس مع البداية الداخلية ؛ أيقونات الحالة - إلى النهاية.
الدوارات والضربات الشديدة: التمرير نحو البداية الداخلية (في RTL - إلى اليمين). كما تنعكس مؤشرات الصفحات.
التثبيت: السهم «التالي» يذهب إلى البداية الداخلية، «السابق» - إلى النهاية.

5) الأيقونات والصور

أيقونات اتجاه المرآة: السهام، «إلى الأمام/إلى الخلف،» رأس اللعب، «توسيع/انهيار».
لا تعكس: أيقونات النص، الرسوم البيانية، الساعات (إذا كان هناك سهم في الوقت الفعلي)، شعارات العلامة التجارية.

من الناحية الفنية:

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 px.
منزلقات min→max: في RTL، على الأقل على الحافة اليمنى، على الأكثر على اليسار (أو تظهر مقياسًا بدون انعكاس وأرقام LTR).

7) الأرقام والتواريخ والعملات

بشكل افتراضي، تستخدم المواقع العربية المجالات العربية الهندية (٠١٢٣٤٥٦٧٨٩). الحل - سياسة الأعمال:

في واجهة المستخدم المالية، غالبًا ما يتم عرض الأرقام اللاتينية (0-9) من أجل قابلية التشغيل البيني، ولكن التنسيق (المساحات/العلامات) محلي.

استخدم 'Intl. مع موقع الهدف:

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

الوقت النسبي ('Intl. RelativeTimeFormat ')، محددات الاتجاه، ومختصرات اليوم/الشهر المحلي.

8) الطباعة وسهولة القراءة

خطوط ذات رسومات وأربطة عربية/عبرية جيدة.
تباعد الخط 1. 4–1. 6; تجنب التتبع الضيق.
بالنسبة للعربية، يُسمح بالكشيدة (الضربات المطولة) عند محاذاة العرض - تشغيل بعناية ("تبرير النص: بين الكلمات ؛ دعم المحرك).
حظر الخط المائل اللاتيني داخل الخط العربي (يفسد الإيقاع الرأسي).

9) الرسوم البيانية والمقاييس والجداول

المحاور السينية تنتقل من اليمين إلى اليسار ؛ تتماشى الأسطورة مع النهاية الداخلية.
أعمدة الجدول: العمود «الأساسي» (الاسم/اللعبة) - إلى اليمين ؛ الأرقام/المبالغ يمكن أن تظل LTR وأن تكون متوافقة مع النهاية.

علامات «+/ −» والنسب المئوية - قبل الرقم، يتم عزل أرقام LTR:

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

10) A11y وقارئات الشاشة

تأكد من أن «lang =» ar «/» lang = «هو» مكشوف: سيختار محرك TTS التمثيل الصوتي الصحيح.
التغييرات الديناميكية الصوتية في الاتجاه بعناية - لا تبدل «dir» على الشظايا دون داع.
تحديثات حية ('aria-live = «مهذب») - نص بدون خلط الاتجاهات.
لا تنقل الأيقونات المعنى بدون تسميات نصية ؛ استخدام 'aria-label'.

11) تفاصيل iGaming

11. 1 قسيمة رهان (betslip)

الترتيب الميداني: المبلغ → النسبة → الكسب المحتمل ؛ التوقيعات الصحيحة، أرقام/عوامل LTR.
تحديث المعاملات برفق ؛ لا تحتاج الأسهم العلوية/السفلية إلى الانعكاس (معنى اتجاه السعر عالمي).

11. 2 مباريات/أسواق

قم بمواءمة قائمة الدوريات/الأحداث مع البداية الداخلية (في RTL - على اليمين).
المؤقتات والعد - LTR 'dir = «ltr» مع أرقام الجدول (' font-variant-numeric: tabular-nums; ').

11. المدفوعات 3/لجنة التنسيق الإدارية

حقول IBAN/BIC/الهاتف هي دائمًا LTR.
الأسماء المصرفية/العنوان - RTL.
تظهر الأخطاء/المعتمدات علامات على اليمين.

11. 4 بطولات/لوحات قيادية

الأعمدة: الموضع، اللقب، النظارات - الوضع على اليمين ؛ محاذاة النظارات مع نهاية الخط (أرقام LTR).

12) التصنيع والاختبار

Pseudo-RTL في البكر:

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

أيقونات المرآة التلقائية في RTL (الاتجاه فقط):

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

الاختبارات الذاتية (مثال الأفكار):

لقطات تخطيط على 'dir = rtl'.
يتحقق مما إذا كان «يسار/يمين» مفقودًا في CSS (الوبر).
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) مقتطفات

لتبديل الاتجاه في التطبيق (رد):

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]);
}

مواءمة القائمة/فتات الخبز:

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→max لـ RTL:

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

15) أنتيباترن

«اليسار/اليمين» الصلب في أنماط → يكسر RTL.
إدخال الأرقام/IBAN/URL بدون 'dir = «ltr» → «break» caret and order.
تعكس الشعارات/المخططات/الساعات.
تعكس نفس المجموعة من الأيقونات دائمًا - دون استثناء في المعنى.
الدوارات والمنشورات والوثبات ليست مقلوبة رأسًا على عقب.
أوتار مختلطة بدون عزلة BiDi → شخصيات «الرقص».

16) المقاييس

تغطية RTL: نسبة الشاشات التي خضعت لمراجعة RTL.
عيوب/إطلاق BiDi: عدد أخطاء النص المختلطة.
مهلة (LTR vs RTL): يجب ألا تختلف> 5-10٪.
خطأ الإدخال في نماذج الأرقام - النسبة المئوية للأحداث ذات الوظيفة/القناع غير الصحيح.
CLS/perf: لا يقفز تخطيط عند تبديل «dir».

17) قائمة QA المرجعية

الاتجاه والتخطيط

'الخصائص المنطقية بدلاً من «اليسار/اليمين».
الملاحة/bredkramby/carousels/pagination zerkalitsya بشكل صحيح.

النص و BiDi

الأرقام/العملات/URL/البريد الإلكتروني - 'dir = «ltr»' أو ''.
لا توجد أحرف «مقلوبة» في أوتار مختلطة.
التواريخ/العملات المحلية عبر Intl. '.

النماذج

العلامات الصحيحة ؛ انقر فوق المناطق ≥ 44 × 44 px.
الهاتف/IBAN/المبلغ - حذر LTR، أقنعة صحيحة.
تتصرف المنزلقات/الانخفاضات/الارتفاعات كما هو متوقع.

أيقونات/صور

يعكس الاتجاه فقط ؛ استثناءات.
لا يوجد نص بالصور بدون نسخ محلية.

А11у/Performance

«لانغ» مكشوفة ؛ يقرأ SR بشكل صحيح.
لا توجد عمليات إعادة رسم غير ضرورية عند تغيير «dir».
حلقات التباين/التركيز تتوافق مع AA.

18) التوثيق في نظام التصميم

قسم التوجيه و BiDi: يعكس السياسة، قائمة الاستثناءات للرموز.
مجموعة من رموز RTL وبطانة أسلوب (حظر «يسار/يمين»).
Do/Don 't Gallery: دائري، bredcrambs، أشكال أرقام، منزلقات، رسوم بيانية.
Speudo-RTL scripts and review checklists.

موجز موجز

دعم RTL المناسب هو خصائص CSS المنطقية، والانعكاس الواعي، وعزل BiDi الصارم. عزل الأرقام/عناوين URL في LTR، والملاحة المرآة ورموز الاتجاه، والحفاظ على الأشكال يمكن التنبؤ بها وقراءة الرسوم البيانية. لذا فإن واجهة اللغة العربية أو العبرية أو الفارسية أو الأردية ستكون طبيعية وسريعة - من قسيمة الرهان ونماذج الدفع إلى طاولات البطولة والمباريات الحية.

دعم RTL

النص و BiDi

النماذج

أيقونات/صور

А11у/Performance

موجز موجز

اتصل بنا

اتصال سريع

سيتم تحديث الفيديو قريبًا

نحن مشغولون جدًا بالمشاريع في الوقت الحالي