تدقيق تخطيط RTL

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

ملف المهارة

---
name: rtl-layout-audit
description: استخدمها قبل إطلاق العربية أو العبرية أو الفارسية أو الأردية، أو عندما تُظهر لغة RTL نصًا متداخلًا أو روابط معكوسة أو حركات تسير في الاتجاه الخاطئ.
---

# تدقيق تخطيط RTL

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

## ما تحتاجه أولًا

- الموقع وهو يعمل بلغة RTL
- وحدة تحكم المتصفح

## الطريقة

1. استبدل الخصائص الفيزيائية بالخصائص المنطقية في كل مكان: margin-inline وpadding-inline وinset-inline وtext-align بقيمتي start وend. هذا يحل معظم الأعطال دفعة واحدة.
2. اعزل كل جزيرة نص لاتيني باستخدام unicode-bidi. الروابط والكود وأسماء العلامات وأرقام الإصدارات تعيد ترتيب نفسها بشكل كارثي بغير ذلك - فـ "https://" تُعرض عادةً كـ "//:https".
3. دقّق تثبيت النص في SVG على حدة. داخل SVG، يعيد الاتجاه أيضًا تعريف معنى text-anchor start، فتطير التسميات المثبّتة يسارًا خارج اللوحة. استخدم unicode-bidi plaintext، الذي يصلح الترتيب دون المساس بالتثبيت.
4. افحص كل ما يتحرك عبر transform. الأشرطة المتحركة والكاروسيلات لا تنعكس تلقائيًا، والمسار المبني بـ flex سيحرّك النصف المكرر فيتلعثم التكرار المتصل.
5. افحص الحقول التي يجب أن تبقى LTR - حقل رابط تكون فيه بادئة البروتوكول في عنصر منفصل سينقسم، فيقع النصفان على طرفي الصندوق.
6. اقرأ الصفحة عند 375px كما على سطح المكتب. أعطال RTL تتجمع حيث تضيق المساحة.

## ما الذي تنتجه

قائمة أعطال مجمّعة حسب السبب - خصائص فيزيائية، غياب العزل، تثبيت SVG، حركة قائمة على transform - وكل منها مع القاعدة المحددة التي تحلها.

## أين تخطئ عادةً

- ضبط direction rtl على SVG، وهو ما يدفع كل تسمية مثبّتة يسارًا خارج الشاشة
- عكس الحركة بشكل شامل، وهو ما يلغي التناوب في الصفوف المعكوسة أصلًا
- افتراض أن خطًا يدعم العربية يكفي - فـ letter-spacing وحده يكسر اتصال الحروف العربية

---

من مكتبة مهارات QuQi - https://www.quqi.io/ar/skills/rtl-layout-audit

ما تحتاجه أولًا

• الموقع وهو يعمل بلغة RTL
• وحدة تحكم المتصفح

الطريقة

1. 01 استبدل الخصائص الفيزيائية بالخصائص المنطقية في كل مكان: margin-inline وpadding-inline وinset-inline وtext-align بقيمتي start وend. هذا يحل معظم الأعطال دفعة واحدة.
2. 02 اعزل كل جزيرة نص لاتيني باستخدام unicode-bidi. الروابط والكود وأسماء العلامات وأرقام الإصدارات تعيد ترتيب نفسها بشكل كارثي بغير ذلك - فـ "https://" تُعرض عادةً كـ "//:https".
3. 03 دقّق تثبيت النص في SVG على حدة. داخل SVG، يعيد الاتجاه أيضًا تعريف معنى text-anchor start، فتطير التسميات المثبّتة يسارًا خارج اللوحة. استخدم unicode-bidi plaintext، الذي يصلح الترتيب دون المساس بالتثبيت.
4. 04 افحص كل ما يتحرك عبر transform. الأشرطة المتحركة والكاروسيلات لا تنعكس تلقائيًا، والمسار المبني بـ flex سيحرّك النصف المكرر فيتلعثم التكرار المتصل.
5. 05 افحص الحقول التي يجب أن تبقى LTR - حقل رابط تكون فيه بادئة البروتوكول في عنصر منفصل سينقسم، فيقع النصفان على طرفي الصندوق.
6. 06 اقرأ الصفحة عند 375px كما على سطح المكتب. أعطال RTL تتجمع حيث تضيق المساحة.

ما الذي تنتجه

قائمة أعطال مجمّعة حسب السبب - خصائص فيزيائية، غياب العزل، تثبيت SVG، حركة قائمة على transform - وكل منها مع القاعدة المحددة التي تحلها.

أين تخطئ عادةً

• ضبط direction rtl على SVG، وهو ما يدفع كل تسمية مثبّتة يسارًا خارج الشاشة
• عكس الحركة بشكل شامل، وهو ما يلغي التناوب في الصفوف المعكوسة أصلًا
• افتراض أن خطًا يدعم العربية يكفي - فـ letter-spacing وحده يكسر اتصال الحروف العربية

المزيد في SEO الدولي