اختبار الواجهات من اليمين إلى اليسار

ابدأ بسمتي dir وlang

تحتاج كل صفحة RTL إلى سمتين على عنصرها الجذري: lang التي تعلن اللغة (ar أو ar-SA)، وdir="rtl" التي تضبط الاتجاه الأساسي. وتوصي إرشادات التدويل في W3C بضبط الاتجاه بسمة dir في الوسوم لا بخاصية direction في CSS وحدها، لأن الاتجاه جزء من معنى المحتوى ويجب أن يبقى حين تغيب الأنماط، وحين يُنسخ المحتوى، وحين تقرؤه التقنيات المساعدة. وينطبق الأمر نفسه على رسائل البريد بصيغة HTML والقوالب التي تولّد ملفات PDF.

سمة lang تفعل أكثر من توثيق اللغة: فهي تتيح لقارئ الشاشة اختيار صوت عربي، وللمتصفح انتقاء خطوط مناسبة، وتشغّل المحدِّد :lang() المستخدم في الأنماط الخاصة بنظام الكتابة. والصفحة الموسومة lang="en" مع dir="rtl" معيبة حتى لو بدت صحيحة.

• افحص العنصر الجذري في كل صفحة، بما فيها صفحات الأخطاء والبريد والعروض القابلة للطباعة وملفات PDF.
• بدّل اللغة أثناء التشغيل ثم أعدها: يجب أن يتغير الاتجاه والخطوط والتخطيط المخزَّن مؤقتاً كلها، دون أن تبقى شاشة نصف معكوسة.

ما الذي يُعكس وما الذي لا يُعكس

في التخطيط من اليمين إلى اليسار تبدأ القراءة من اليمين، فتُعكس الواجهة حول المحور الرأسي (Mirroring). وتقدم إرشادات Apple للواجهات البشرية مجموعة قواعد عملية: اعكس عناصر التحكم التي تُظهر التقدم من قيمة إلى أخرى (أشرطة التمرير ومؤشرات التقدم)، وعناصر التحكم التي تتنقل بين عناصر بترتيب ثابت (السابق والتالي)، والأيقونات التي تمثل اتجاه النص أو القراءة أو الحركة إلى الأمام والخلف؛ واعكس ترتيب الصور حين يكون للترتيب معنى. ولا تعكس الصور الفوتوغرافية والأعمال الفنية، والشعارات والعلامات العالمية مثل علامة الصح، والأيقونات التي تصوّر أشياء من العالم الحقيقي مثل الساعة، وعناصر التحكم التي تشير إلى اتجاه مادي حقيقي، ولا الأرقام داخل العدد الواحد مثل رقم الهاتف أو البطاقة.

تشغيل الوسائط استثناء مقصود في منصات كثيرة: فإرشادات ثنائية الاتجاه في Material Design، التي تحيل إليها وثائق Android، تُبقي أزرار التشغيل وشريط تقدم الوسائط من اليسار إلى اليمين لأنها تعكس اتجاه الوسائط التي تُشغَّل (اتجاه الشريط) لا اتجاه الزمن. وأياً كان قرار منتجك، اكتبه في مواصفة التصميم واختبر مقابله، لأن العيب الحقيقي هو التعامل غير المتسق بين الشاشات. وتبقى الشيفرة المصدرية ومخرجات الطرفية والتعابير الرياضية من اليسار إلى اليمين أيضاً.

• يُعكس: تخطيط الصفحة، والقوائم الجانبية، وترتيب التبويبات، ومسار التنقل، وأسهم الرجوع والتقدم، ومؤشرات الخطوات، والعروض الدوّارة، وأشرطة التقدم، وأشرطة التمرير، وأسهم القوائم، وترتيب أعمدة الجداول، وموضع الأيقونات بالنسبة إلى تسمياتها.
• لا يُعكس: الشعارات، وعلامات الصح، والساعات وأيقونات التحديث الدائرية التي تصوّر حركة حقيقية باتجاه عقارب الساعة، والصور، والخرائط، وأرقام الهواتف والبطاقات، وكتل الشيفرة، والرسوم البيانية التي يمثل محورها الزمن ما لم يقرر التصميم غير ذلك.

خصائص CSS المنطقية وتخطيط المنصات

تأتي معظم عيوب العكس من كود التخطيط الفيزيائي. فخصائص CSS مثل margin-left وpadding-right وleft وright وtext-align: left تبقى في الجانب نفسه أياً كان الاتجاه؛ أما مقابلاتها المنطقية (Logical properties) — margin-inline-start وpadding-inline-end وinset-inline-start وtext-align: start — فتتبع اتجاه الكتابة. ويتبع Flexbox وGrid الاتجاه تلقائياً؛ أما التموضع المطلق والتحويلات ومواضع الخلفيات وإزاحات الظلال فلا. وتحتاج الأيقونات الاتجاهية إلى قلب صريح، والاتجاهية منها فقط.

وللمنصات الجوالة المفهوم نفسه بأسماء أخرى. في Android يعلن التطبيق android:supportsRtl="true"، وتستخدم التخطيطات start وend بدل left وright، ويمكن للرسومات الاتجاهية البسيطة ضبط android:autoMirrored="true". وفي iOS تُعكس قيود leading وtrailing في Auto Layout بينما لا تُعكس قيود left وright، ويجب وسم الصور الاتجاهية لتُقلب في تخطيطات اليمين إلى اليسار. لا يحتاج المختبِر إلى كتابة هذا الكود، لكن التعرف على الخصائص الفيزيائية في المراجعة أو في أدوات المطور يفسّر معظم عيوب «هذا العنصر لم يتحرك».

/* Physical properties: do not mirror */
.card   { margin-left: 16px; text-align: left; }
.badge  { position: absolute; right: 8px; }

/* Logical properties: follow the writing direction */
.card   { margin-inline-start: 16px; text-align: start; }
.badge  { position: absolute; inset-inline-end: 8px; }
.list   { padding-inline-start: 24px; border-inline-end: 1px solid; }

/* Directional icons flip explicitly; logos, check marks and media icons do not */
[dir="rtl"] .icon-chevron-next { transform: scaleX(-1); }

/* Arabic text: no letter-spacing, room for diacritics */
:lang(ar) { letter-spacing: 0; line-height: 1.8; }

النص ثنائي الاتجاه وخوارزمية يونيكود ثنائية الاتجاه

تحتوي الجمل العربية عادةً على محتوى من اليسار إلى اليمين: أسماء علامات تجارية إنجليزية، وأرقام طلبات، ورموز منتجات، وعناوين بريد، وروابط، وأرقام هواتف، وشيفرة. ويحدد ترتيب العرض خوارزميةُ يونيكود ثنائية الاتجاه (Unicode Bidirectional Algorithm – UAX #9). وعلى المستوى العملي، المحارف إما قوية (للحروف العربية واللاتينية اتجاه)، أو ضعيفة (الأرقام وبعض الفواصل)، أو محايدة (المسافات ومعظم علامات الترقيم). وتأخذ المحايدات الواقعة بين مقطعين مختلفي الاتجاه، وتلك الواقعة على حافة الفقرة، الاتجاهَ الأساسي — ولهذا تقفز علامة الترقيم بعد عبارة إنجليزية إلى الجانب الخطأ. وللأرقام قواعد إضافية: فالأرقام التي تأتي بعد حروف عربية تُصنَّف ضمن فئة «الرقم العربي» في الخوارزمية (Arabic Number – AN) دون أن يتغير شكلها، والشرطة أو المسافة بين هذه الأعداد، وعلامة + قبلها، تأخذ اتجاه اليمين إلى اليسار، فتُرتَّب كل مجموعة أرقام مقطعاً مستقلاً — ولهذا قد يُعرض رقم طلب بشرطة أو رقم هاتف بمسافات بأجزاء مُعاد ترتيبها داخل الجملة العربية.

والإصلاح هو العزل (Isolation). في HTML غلّف المحتوى المضمَّن معروف الاتجاه بعنصر له dir خاص به، واستخدم <bdi> أو dir="auto" للمحتوى الذي لا يُعرف اتجاهه مسبقاً (أسماء المستخدمين والمراجعات وعبارات البحث)، وضع dir="auto" على حقول النص الحر. وخارج HTML — في الإشعارات النصية والرسائل القصيرة والنصوص الأصلية في التطبيقات — تؤدي محارف العزل في يونيكود المهمة نفسها (U+2066 LRI وU+2067 RLI وU+2068 FSI، وتُغلق بـ U+2069 PDI). أما محارف التضمين القديمة (U+202A–U+202E) فاستخدامها الصحيح أصعب وقد تؤثر في النص الذي يليها.

• ابنِ مجموعة اختبار ثنائية الاتجاه: جمل عربية فيها علامة تجارية إنجليزية في البداية والوسط والنهاية؛ ومع رقم طلب وبريد ورابط ورقم هاتف؛ ومع أرقام تليها وحدات أو علامة نسبة مئوية؛ ومع أقواس وعلامات تنصيص.
• افحص المحارف غير المرئية: النص الذي «يبدو صحيحاً» قد يحمل علامات اتجاه شاردة منسوخة من نظام آخر؛ فكّه إلى نقاط ترميز لتراها.

<!-- page: base direction and language on the root element -->
<html lang="ar" dir="rtl">

<!-- order number that must keep its order -->
<p>رقم الطلب: <bdi dir="ltr">2026-0042</bdi></p>

<!-- identifiers that must always read left-to-right -->
<p>للتواصل: <span dir="ltr">+966 50 123 4567</span></p>

<!-- user-generated text of unknown direction -->
<p dir="auto">{review.text}</p>

<!-- English phrase inside Arabic: direction and pronunciation -->
<p>جرّب أداة <bdi lang="en">Mutqan Tools!</bdi> مجاناً</p>

Without isolation, an RTL paragraph can display (example):
  2026-0042            as  0042-2026
  +966 50 123 4567     as  4567 123 50 966+
  Mutqan Tools!        as  !Mutqan Tools

جرّبها: مفكّك ترميز Unicode جرّبها: مرمّز Unicode جرّبها: مولّد بيانات اختبار متعددة اللغات

عرض العربية: وصل الحروف والخطوط والحركات والاقتطاع

العربية خط متصل: معظم الحروف تتخذ شكلاً مختلفاً بحسب كونها منفردة أو متصلة بما قبلها أو بما بعدها أو بكليهما، وبعض الأزواج مثل اللام ألف (لا) تشكّل ربطاً إلزامياً. ويختار محرك تحديد أشكال الحروف (Shaping engine) هذه الأشكال، وأي شيء يتدخل فيه ينتج حروفاً منفصلة. وتباعد الحروف (letter-spacing) على النص العربي سبب كلاسيكي — فبحسب المحرك إما يُدخل فجوات تقطع الوصل أو يُتجاهل ببساطة — لذا القاعدة الآمنة letter-spacing: 0 للعربية. كما قد يكسر الوصلَ في بعض المحركات إدراجُ محرف داخل الكلمة (فاصل صفري غير واصل، أو محرف إخفاء، أو واصلة اختيارية)، أو رسم النص محرفاً محرفاً لحركة متحركة، أو تظليل جزء من كلمة بتنسيق منفصل.

والمخرجات المولّدة هي أكثر مواضع فشل العرض. فمولّدات PDF ومكتبات الرسوم البيانية والرسم على canvas والعلامات المائية على الصور التي لا تتضمن خطوة لوصل الحروف العربية وتحديد أشكالها تعرض العربية عادةً حروفاً منفصلة بترتيب معكوس. والخطوط مهمة أيضاً: فالخط اللاتيني أولاً مع بديل عربي قد يخلط الأحجام وخطوط الأساس، وتنبّه إرشادات Apple إلى أن العربية بجوار نص لاتيني بأحرف كبيرة قد تبدو أصغر مما ينبغي وقد تحتاج إلى حجم أكبر قليلاً. والحركات (التشكيل)، كما في الكلمة المثال مُتْقَن، تمتد فوق السطر وتحته، فتقصّها ارتفاعات الأسطر الثابتة وإخفاء الفائض. وحين يُقتطع النص يجب أن تقع علامة الحذف في النهاية المنطقية للنص — على اليسار في العربية — وهذا لا يحدث إلا حين يُضبط اتجاه العنصر صحيحاً.

• استخدم عربية واقعية: أسماء طويلة، وكلمات بالحركات، واللام ألف، والتطويل (ـ) الذي يكتبه بعض المستخدمين، والأرقام العربية المشرقية، وعلامات الترقيم العربية (، ؛ ؟).
• افحص العناوين والأزرار والشارات والتلميحات والرسوم البيانية وملفات PDF والبريد والإشعارات — لا متن الصفحة الرئيسي فقط.

جرّبها: مولّد بيانات الاختبار العربية جرّبها: مولّد أسماء وهمية جرّبها: عدّاد طول السلاسل النصية

النماذج من اليمين إلى اليسار

تجمع النماذج كل صعوبات RTL في مكان واحد. فالتسميات وعلامات الحقول الإلزامية ونصوص المساعدة ورسائل الخطأ تنتقل إلى الجانب المعكوس؛ وحقول النص الحر العربي تتبع اتجاه المحتوى؛ أما الحقول التي تحمل معرّفات فتبقى من اليسار إلى اليمين في كل الإعدادات المحلية: أرقام الهواتف، وعناوين البريد، والروابط، وأرقام IBAN، وأرقام البطاقات، وأرقام الهوية الوطنية والإقامة، والرموز البريدية، ورموز التحقق. قرر كيف تُحاذى هذه الحقول داخل النموذج المعكوس وطبّق القرار باتساق. ونص التلميح الظاهر داخل الحقل الفارغ يجب أن يطابق اتجاه ما سيكتبه المستخدم، وإلا قفز النص إلى الجانب الآخر عند بدء الكتابة.

يجب أن يتحدث التحقق لغة المستخدم: رسائل جانب العميل وجانب الخادم، ورسالة لكل قاعدة (إلزامي، والصيغة، والطول، والمدى)، والرسائل التي تولّدها مكونات خارجية مثل أدوات الدفع. وتحتاج الحقول الرقمية إلى قرار بشأن الأرقام العربية المشرقية — فلوحة المفاتيح العربية قد تنتجها — وعلى المنتج إما قبولها وتوحيدها أو رفضها برسالة عربية واضحة. فمثلاً جرّب رقم الجوال السعودي بالصيغة المحلية والدولية (مثل 05XXXXXXXX و+9665XXXXXXXX)، وجرّب حقول الهوية الوطنية والإقامة والجوال بالأرقام نفسها مكتوبة بلوحة مفاتيح عربية ("٠٥٠١٢٣٤٥٦٧")؛ والحقل الذي لا يقبلها ولا يشرح القاعدة بالعربية معيب.

• منتقيات التاريخ: شبكة التقويم تسير من اليمين إلى اليسار، وأسهم الأشهر معكوسة، واختيار الهجري أو الميلادي يتبع قاعدة المنتج.
• مربعات الاختيار وأزرار الراديو والمفاتيح تقع على يمين تسمياتها؛ واتجاه وضع «التشغيل» في المفتاح يتبع قرار التصميم.
• العناوين: اختبر ببيانات مولّدة على نمط العنوان الوطني السعودي، حيث يختلط رقم المبنى والشارع والحي والمدينة والرمز البريدي والرقم الإضافي بين كلمات عربية وأرقام غربية.

جرّبها: بيانات اختبار العناوين السعودية جرّبها: مولّد بيانات الاختبار العربية جرّبها: مولّد مجموعات الأحرف الخاصة

إمكانية الوصول في واجهات RTL

تعتمد قارئات الشاشة على lang. فمعيار النجاح 3.1.1 Language of Page في WCAG 2.2 يتطلب أن تكون لغة الصفحة قابلة للتحديد برمجياً، ويتطلب 3.1.2 Language of Parts الأمر نفسه للمقاطع والعبارات المكتوبة بلغة أخرى، مع استثناءات تشمل أسماء العلم والمصطلحات التقنية. لذا تحتاج الجملة الإنجليزية داخل نص عربي إلى lang="en"؛ ووسم أسماء العلامات التجارية والمصطلحات الإنجليزية بالطريقة نفسها ممارسة جيدة وإن لم يشترطها المعيار، لأنها بدونه تُقرأ بقواعد النطق العربية. اختبر بقارئات الشاشة التي يستخدمها مستخدموك (NVDA أو JAWS على Windows، وVoiceOver على أجهزة Apple، وTalkBack على Android) مع تثبيت صوت عربي.

ترتيب القراءة وترتيب التركيز يتبعان DOM. فحين يُنفَّذ العكس بالخصائص المنطقية وسمة dir يبقى ترتيب DOM ذا معنى ويُعكس الترتيب المرئي معه. أما حين يُزيَّف التخطيط بـ row-reverse أو order أو التموضع المطلق فيختلف الترتيب المرئي عن ترتيب التركيز، وهذا يتعارض مع معياري WCAG 1.3.2 Meaningful Sequence و2.4.3 Focus Order. وتحقق أيضاً من أن سلوك مفاتيح الأسهم الأفقية في التبويبات وأشرطة التمرير والعروض الدوّارة يطابق الاتجاه المرئي المعكوس، ومن ترجمة الأسماء الوصفية لأزرار الأيقونات.

قائمة تحقق اختبار RTL

نفّذ هذه القائمة لكل شاشة بالعربية على كل متصفح وفئة أجهزة مستهدفة. وسجّل القرارات التي تطلبها (أزرار الوسائط، ومحاذاة الحقول من اليسار إلى اليمين، والتعامل مع الأرقام) في مواصفة التصميم ليختبر كل مختبِر مقابل القاعدة نفسها. والقائمة أدناه مكتوبة بالإنجليزية وتجمع فحوص الأقسام السابقة في ست مجموعات: الاتجاه واللغة، وما يُعكس وما لا يُعكس، والنص ثنائي الاتجاه، وعرض العربية، والنماذج، وإمكانية الوصول.

RTL test checklist (ar, ar-SA)

Direction and language
[ ] <html lang="ar" dir="rtl"> on every page, email and PDF template
[ ] Switching language flips direction without a reload glitch or mixed state
Mirroring
[ ] Navigation, back/next arrows, breadcrumbs, steppers, sliders, progress bars mirror
[ ] Logos, check marks, clocks, photos, phone numbers, code do not mirror
[ ] Media playback controls follow the product's documented decision
Bidirectional text
[ ] Order numbers, SKUs, emails, URLs, phone numbers keep their order in Arabic sentences
[ ] Punctuation stays on the correct side of embedded English phrases
[ ] User content with unknown direction is shown with dir="auto" or <bdi>
Rendering
[ ] Arabic letters join (no letter-spacing, no characters inserted inside words)
[ ] Diacritics are not clipped; truncation ellipsis sits at the logical end
[ ] Arabic renders correctly in PDFs, emails, charts and canvas output
Forms
[ ] Labels, required markers, errors and hint text sit on the correct side
[ ] Phone, email, IBAN, ID and code fields are LTR; free-text fields follow content
[ ] Arabic-Indic digits are accepted or rejected with a clear Arabic message
Accessibility
[ ] Screen reader uses an Arabic voice; English phrases carry lang="en"
[ ] Focus order and reading order match the mirrored visual order

أتمتة فحوص RTL

تلتقط الأتمتة الانحدار في الاتجاه والتخطيط جيداً، والمشكلات اللغوية بصعوبة. شغّل حزمة اختبارات الدخان الشاملة بالإعداد المحلي العربي إضافة إلى الإنجليزي؛ وتحقق من dir وlang في الجذر؛ وافحص موضع بعض العناصر المرجعية (رابط الرجوع مكانه اليمين)؛ وتحقق من عزل المعرّفات المضمَّنة؛ وأضف مقارنة لقطات الشاشة لكل إعداد محلي في الشاشات الأساسية، لأن التحقق النصي يقرأ DOM ولا يرى إعادة الترتيب المرئية. والبحث عن خصائص CSS الفيزيائية في ملفات الأنماط يجد عيوب العكس قبل أن تصل إلى الشاشة.

في Android يحوّل الإعداد الزائف AR (XB) بناء التصحيح إلى اليمين-إلى-اليسار مع نص إنجليزي معكوس، وخيار المطور لفرض اتجاه التخطيط من اليمين إلى اليسار يقلب التخطيط دون تغيير اللغة. ويوفر Xcode لغة زائفة من اليمين إلى اليسار في خيارات لغة التطبيق ضمن المخطط (Scheme).

// RTL smoke check (Playwright Test)
test("checkout is laid out right-to-left in Arabic", async ({ browser }) => {
  const page = await (await browser.newContext({ locale: "ar-SA" })).newPage();
  await page.goto("/ar/checkout");

  await expect(page.locator("html")).toHaveAttribute("dir", "rtl");
  await expect(page.locator("html")).toHaveAttribute("lang", /^ar/);

  // the back link sits in the right half of the viewport
  const box = await page.getByRole("link", { name: "رجوع" }).boundingBox();
  expect(box.x).toBeGreaterThan(page.viewportSize().width / 2);

  // the order id is isolated; text assertions cannot see visual reordering
  await expect(page.getByTestId("order-id")).toHaveAttribute("dir", "ltr");

  await expect(page).toHaveScreenshot("checkout-ar.png");
});

# Find physical CSS that will not mirror (review each hit)
grep -rnE "margin-(left|right)|padding-(left|right)|text-align: *(left|right)|float: *(left|right)|[^-](left|right): *[0-9]" src/

أمثلة عيوب RTL مكتوبة كعناوين أخطاء

هذه أمثلة توضيحية وليست حوادث حقيقية. يسمّي كل منها العَرَض والمكان والشرط، كما يصف دليل تقرير الخطأ.

• رقم الطلب 2026-0042 يُعرض 0042-2026 في ملخص الطلب العربي
• رقم الهاتف يُعرض بمجموعات أرقام معكوسة في صفحة الملف الشخصي العربية
• علامة التعجب تظهر قبل اسم العلامة التجارية الإنجليزي في رسالة النجاح العربية
• سهم الرجوع في ترويسة الدفع العربية يشير إلى اليسار ويعود إلى الخطوة التالية
• حروف عربية منفصلة في عناوين الأقسام المنسّقة بـ letter-spacing: 0.1em
• فاتورة PDF تعرض اسم العميل العربي حروفاً منفصلة بترتيب معكوس
• حركات أسماء المنتجات العربية مقصوصة بسبب ارتفاع السطر الثابت في البطاقة
• حقل رقم الجوال يرفض الأرقام العربية المشرقية برسالة خطأ إنجليزية فقط
• قارئ الشاشة ينطق اسم العلامة التجارية الإنجليزي بقواعد عربية — lang="en" مفقودة

الأسئلة الشائعة

المراجع

• Unicode Standard Annex #9: Unicode Bidirectional AlgorithmUnicode Consortiumالخوارزمية التي تحدد ترتيب عرض النص المختلط من اليمين إلى اليسار ومن اليسار إلى اليمين — مصدر معظم أخطاء النص ثنائي الاتجاه.
• Structural markup and right-to-left text in HTMLW3Cكيف يُضبط الاتجاه الأساسي بسمة dir على عنصر html والعناصر البنيوية، ولماذا لا يُعتمد على CSS وحده لذلك.
• Inline markup and bidirectional text in HTMLW3Cكيف تعامل الخوارزمية ثنائية الاتجاه المقاطع المضمّنة — الأرقام والأسماء والروابط داخل النص العربي — والوسوم (bdi وdir) التي تعزلها.
• Arabic & Persian Layout RequirementsW3C · 2025متطلبات التخطيط والطباعة للخط العربي — الاتجاه والوصل والضبط والأرقام — التي يجب أن تدعمها البرمجيات (مسودة ملاحظة من W3C).
• Right to left — Human Interface GuidelinesAppleإرشادات Apple لقلب الواجهة للغات المكتوبة من اليمين إلى اليسار: ما الذي يُعكس وما لا يُعكس، وكيف يتصرف النص والأرقام.
• Support different languages and culturesAndroid Developers (Google)توطين تطبيقات Android: موارد اللغات، وعكس التخطيط للغات التي تُكتب من اليمين إلى اليسار، والسمات الواعية بالاتجاه.
• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• Internationalization (i18n) ActivityW3Cمقالات W3C ودروسها وفحوصها في التدويل لبناء محتوى ويب متعدد اللغات واختباره.