عدد الكلمات: ~٢٥٠٠ · مدة القراءة: ١٤ دقيقة

مشروع التدقيق: إصلاح واجهة قُلبت بشكل خاطئ

نبني خطوةً بخطوة — نُشرّح الأخطاء أولاً، ثم نُعيد بناء الواجهة على أساسٍ سليم

ملاحظةٌ للقارئ: هذا المقال هو المشروع التطبيقي الختامي للسلسلة. يمكن قراءته مستقلاً، لكنه يستفيد من المفاهيم التي بنيناها في المقالات الثلاثة السابقة: الخصائص المنطقية، والمكوّنات الصامدة، وعلم النظر.

في هذا المقال من منصة ذي يزن، نصل إلى لحظة الاختبار الحقيقي: هل ما تعلمناه في المقالات الثلاثة السابقة يتحوّل إلى قدرةٍ تشخيصية فعلية؟ الجواب نعم، وسنثبت ذلك بواجهةٍ مكسورةٍ حقيقية نُصلحها كودٌ بكود.

الواجهة التي سنتناولها: لوحة تحكم تطبيق إدارة مهام — قُلبت باستخدام dir="rtl" وحده دون أي معالجة إضافية، وهو السيناريو الأكثر شيوعاً في المشاريع الحقيقية. سنُحدد أخطاءها، ونُصنّفها، ثم نُصلحها بالترتيب الصحيح.

الخطوة الأولى: جرد الأخطاء قبل لمس الكود

المبدأ الأول في أي عملية تدقيق: لا تكتب سطراً واحداً قبل أن تُكمل الجرد. المطور الذي يبدأ بالإصلاح قبل الفهم الكامل يخاطر بإصلاح عرض يظهر تحته عشرة أخطاء أعمق.

المنهجية: افتح الواجهة بـ dir="rtl"، وصوّرها، ثم ابدأ بتصنيف كل خلل ترصده في أحد فئتين:

• خطأ القلب الناقص: شيءٌ يجب أن ينقلب ولم ينقلب — سببه الخصائص الفيزيائية المتبقية.
• خطأ القلب الزائد: شيءٌ انقلب وكان يجب أن يصمد — سببه غياب استثناء صريح.

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

الخطوة الثانية: إصلاح أخطاء القلب الناقص

هذه الأخطاء الأسهل تشخيصاً: ترى عنصراً لا يزال يسلك سلوكه اللاتيني رغم أن الصفحة في وضع RTL. السبب دائماً خاصيةٌ فيزيائية متبقية.

الخطأ الأول — حد الشريط الجانبي على الجهة الخاطئة

الشريط الجانبي (Sidebar) للتطبيق يحمل حداً ديكورياً يفصله عن المحتوى الرئيسي. في الكود الأصلي:

/* ❌ الكود الأصلي — فيزيائي */
.sidebar {
  border-right: 1px solid #e0e0e0;  /* الحد على اليمين دائماً */
  padding-left: 0;
  padding-right: 20px;
}

في LTR، الشريط الجانبي يقع على اليسار، فالحد الفاصل على يمينه منطقي. حين قُلبت الواجهة وانتقل الشريط لليمين، بقي الحد على اليمين أيضاً — فأصبح على الجانب الخارجي للشريط لا الداخلي الفاصل.

/* ✅ الإصلاح — منطقي */
.sidebar {
  border-inline-end: 1px solid #e0e0e0;  /* الحد عند نهاية الشريط دائماً */
  padding-inline: 20px 0;
}

الخطأ الثاني — هامش الأيقونات عكسي

كل رابط في الشريط الجانبي يحتوي أيقونةً يليها نصٌ. الهامش بين الأيقونة والنص مكتوب فيزيائياً:

/* ❌ الكود الأصلي */
.nav-item .icon {
  margin-right: 12px;   /* هامش بعد الأيقونة في LTR */
}

في RTL، الأيقونة أصبحت على يمين النص، فالهامش الصحيح صار على يسارها — لكن الكود مازال يضعه على اليمين، فظهرت الأيقونة ملتصقةً بالحد الخارجي بلا مسافة، والنص مبتعداً عنها بهامشٍ لا معنى له.

/* ✅ الإصلاح */
.nav-item .icon {
  margin-inline-end: 12px;  /* هامش بعد الأيقونة في اتجاه القراءة */
}

الخطأ الثالث — تلميح الأداة (Tooltip) يظهر من الجهة الخاطئة

عناصر التلميح المُتموضعة مطلقاً (position: absolute) تستخدم left أو right لتحديد موضعها:

/* ❌ الكود الأصلي */
.tooltip {
  position: absolute;
  left: calc(100% + 8px);   /* يظهر على يمين العنصر في LTR */
  top: 50%;
  transform: translateY(-50%);
}

في RTL، التلميح يجب أن يظهر على يسار العنصر — لكنه يظهر على يمينه ثم يتجاوز حدود الشاشة أو يتداخل مع الشريط الجانبي.

/* ✅ الإصلاح */
.tooltip {
  position: absolute;
  inset-inline-start: calc(100% + 8px);  /* يظهر بعد العنصر في اتجاه القراءة */
  top: 50%;
  transform: translateY(-50%);
}

الخطأ الرابع — محاذاة النص في الجداول

جداول البيانات في لوحة التحكم تعتمد text-align: left صريحاً في الكود الأصلي بدلاً من الاعتماد على الإرث:

/* ❌ الكود الأصلي */
.data-table td {
  text-align: left;     /* يُلغي إرث RTL ويجبر النص لليسار */
}

/* ✅ الإصلاح */
.data-table td {
  text-align: start;    /* يتبع اتجاه القراءة تلقائياً */
}

الخطوة الثالثة: إصلاح أخطاء القلب الزائد

هذه الأخطاء أصعب رصداً وأكثر أثراً على تجربة المستخدم. الواجهة قلبت عناصر كانت يجب أن تصمد.

الخطأ الخامس — مشغّل صوت المهمة مقلوب كاملاً

التطبيق يتيح تسجيلاً صوتياً لكل مهمة. المشغّل ورث dir="rtl" من الصفحة فانقلب شريط تقدمه:

/* ❌ المشكلة: المشغّل يرث RTL بالكامل */
/* شريط التقدم يظهر من اليمين، والأرقام الزمنية مقلوبة */

/* ✅ الإصلاح: تثبيت محور الزمن فقط */
.task-audio-player .progress-bar,
.task-audio-player .time-display {
  direction: ltr;
  unicode-bidi: isolate;
}

/* النص والتسمية تبقى عربية — لا نتدخل */
.task-audio-player .track-title {
  /* يرث RTL من الصفحة — صحيح */
}

الخطأ السادس — سهم “التالي” في الترقيم يشير للاتجاه الخاطئ

شريط ترقيم الصفحات يستخدم أيقونات SVG للأسهم. لأن الأيقونات لم تُضبط، انقلبت مع الصفحة — فأصبح سهم “التالي” (الذي يجب أن يشير لليمين في RTL) يشير لليسار، والعكس:

/* ❌ المشكلة: Flexbox عكس ترتيب الأزرار تلقائياً
   لكن الأيقونات ذاتها لم تُعكس — فالسهم يشير للاتجاه الخاطئ */

/* ✅ الإصلاح: قلب بصري للأيقونات الاتجاهية فقط */
[dir="rtl"] .pagination .arrow-next svg,
[dir="rtl"] .pagination .arrow-prev svg {
  transform: scaleX(-1);
}

/* ⚠️ لا تقلب أيقونات التشغيل أو الحذف أو الإعدادات */
/* هذه رموز عالمية — تبقى كما هي */

الخطأ السابع — حركة Skeleton تسير عكس القراءة

حركة التحميل في البطاقات تسير من اليسار إلى اليمين — عكس اتجاه القراءة العربية — مما يُنتج انزعاجاً بصرياً خفياً لاحظناه في المقال السابق:

/* ✅ الإصلاح: عكس اتجاه حركة التحميل في RTL */
[dir="rtl"] .skeleton-card {
  animation-name: shimmer-rtl;
}

@keyframes shimmer-rtl {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

الخطأ الثامن — الرسم البياني الزمني مقلوب

لوحة التحكم تحتوي مخططاً بيانياً يعرض إنتاجية المستخدم عبر الأيام. المكتبة المستخدمة ورثت dir="rtl" فعكست محور الزمن — الأحدث على اليسار والأقدم على اليمين، عكس المنطق العلمي:

/* ❌ المشكلة: حاوية الرسم البياني ورثت dir="rtl" */

/* ✅ الإصلاح: تثبيت اتجاه حاوية المخطط */
.productivity-chart-wrapper {
  direction: ltr;   /* محور الزمن X اتفاق علمي — لا يُقلب */
}

/* التسميات العربية داخل المخطط تحتاج إعادة تعيين */
.productivity-chart-wrapper .chart-label {
  direction: rtl;           /* إعادة RTL للنص فقط */
  unicode-bidi: isolate;
}

الخطوة الرابعة: إصلاح موضع CTA بناءً على مسار البصر

هذا النوع من الأخطاء لا يظهر بالنظر إلى الكود — بل بالنظر إلى الواجهة كاملةً وسؤال: هل زر اتخاذ القرار يقع في مسار البصر الصحيح؟

في واجهتنا، زر “إنشاء مهمة جديدة” كان يقع في أسفل يسار الشاشة — وهو المكان المعتاد في تطبيقات LTR (زر الإجراء العائم في الزاوية اليمنى السفلى ينقلب إلى اليسار السفلى تلقائياً). لكن كما تعلمنا في المقال الثالث، الزاوية اليسرى السفلى هي المنطقة الأكثر إهمالاً لدى المستخدم العربي:

/* ❌ زر الإجراء العائم — قُلب تلقائياً لليسار السفلى */
.fab-button {
  position: fixed;
  bottom: 24px;
  /* في LTR كان: right: 24px */
  /* بعد القلب أصبح تلقائياً: left: 24px */
}

/* ✅ الإصلاح: نعيده لليمين السفلى في RTL */
/* اليمين السفلى أدفأ بصرياً من اليسار السفلى للمستخدم العربي */
.fab-button {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;  /* يمين في RTL، يسار في LTR */
}

لاحظ المفارقة: في LTR، الزر على اليمين (نهاية المحور المضمن). في RTL، الزر على اليمين أيضاً — لأن اليمين هو بداية المحور المضمن، وهي المنطقة الساخنة. استخدام inset-inline-end بدل right الثابتة يُعطي نتيجةً صحيحةً في الاتجاهين.

الخطوة الخامسة: الكود الكامل — جاهزٌ للتطبيق

هذا ملف التصحيح الكامل الذي يعالج جميع الأخطاء الثلاثة عشر في الواجهة، مُنظَّماً بتعليقات تشرح سبب كل قرار:

/* ════════════════════════════════════════════
   ملف تصحيح RTL — لوحة تحكم إدارة المهام
   دليل هندسة واجهات اليمين — منصة ذي يزن
   ════════════════════════════════════════════ */


/* ── ١. إصلاحات القلب الناقص (خصائص فيزيائية متبقية) ── */

.sidebar {
  border-inline-end: 1px solid #e0e0e0;
  padding-inline: 20px 0;
}

.nav-item .icon {
  margin-inline-end: 12px;
}

.tooltip {
  position: absolute;
  inset-inline-start: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.data-table td,
.data-table th {
  text-align: start;
}

.task-card .badge {
  inset-inline-end: 12px;   /* كان: right: 12px */
  inset-block-start: 12px;  /* كان: top: 12px */
}

.dropdown-menu {
  inset-inline-start: 0;    /* كان: left: 0 */
}

.form-input {
  padding-inline: 12px 40px;   /* الأيقونة في النهاية المنطقية */
}

.form-input-icon {
  inset-inline-end: 12px;  /* كان: right: 12px */
}


/* ── ٢. إصلاحات القلب الزائد (مكوّنات صامدة انقلبت) ── */

/* مشغّل الصوت: تثبيت محور الزمن */
.task-audio-player .progress-bar,
.task-audio-player .time-display {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ترقيم الصفحات: قلب بصري للأسهم فقط */
[dir="rtl"] .pagination .arrow-next svg,
[dir="rtl"] .pagination .arrow-prev svg {
  transform: scaleX(-1);
}

/* حركة التحميل: عكس اتجاه الـ shimmer */
[dir="rtl"] .skeleton-card {
  animation-name: shimmer-rtl;
}

@keyframes shimmer-rtl {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* المخطط البياني: تثبيت محور الزمن مع إعادة RTL للنصوص */
.productivity-chart-wrapper {
  direction: ltr;
}

.productivity-chart-wrapper .chart-label {
  direction: rtl;
  unicode-bidi: isolate;
}

/* مؤشر الحالة الدائري: لا يتغير */
/* .status-indicator — لا إصلاح مطلوب، صامد بطبيعته */


/* ── ٣. إصلاح موضع CTA بناءً على مسار البصر ── */

.fab-button {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
}

/* تنبيه للمراجعة اليدوية: */
/* أيقونات العمليات (حذف، تعديل، إعدادات) لا تُقلب */
/* الشعار ورأس الصفحة راجعهما يدوياً */
/* ════════════════════════════════════════════ */

قائمة التدقيق — للاستخدام في مشاريعك

بعد كل مشروع RTL جديد، اجرِ هذه القائمة قبل التسليم:

قائمة التدقيق لا تُغني عن الفهم — لكنها تُمنع من نسيان ما فهمته. احفظها في مشروعك كملف rtl-checklist.md وأضف إليها كلما اكتشفت نمطاً جديداً.

الذكاء الاصطناعي في خدمة التدقيق — ما يستطيعه وما لا يستطيعه

مع انتشار نماذج اللغة الكبيرة، بات سؤالٌ عملي يطرح نفسه: هل يمكن تفويض جزءٍ من عملية تدقيق واجهات RTL لنموذجٍ ذكي؟ الجواب الأمين: نعم في مراحل محددة، ولا في مراحل أخرى.

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

البرومبت التطبيقي — جاهزٌ للاستخدام

هذا البرومبت مصمَّمٌ لمشروع لوحة التحكم الذي عملنا عليه في هذا المقال. انسخه، ألصق فيه كودك الفعلي في الخانات المحددة، وأرفق لقطة شاشة للواجهة المُقلَّبة إن أمكن:

أنت خبير في تصميم واجهات RTL وهندسة CSS للغة العربية.
لدي واجهة مستخدم [نوع التطبيق: لوحة تحكم / متجر / مدونة]
قُلبت باستخدام dir="rtl" على وسم html فقط دون معالجة إضافية.
 
المهمة:
١. افحص الكود أدناه وحدِّد كل خاصية CSS فيزيائية (تحتوي left/right)
   تحتاج تحويلاً لخاصية منطقية.
 
٢. حدِّد أي مكوّنات يجب أن تصمد في وضع LTR داخل صفحة RTL،
   مع تبرير قصير لكل مكوّن (زمني / كمي / اتفاق عالمي).
 
٣. اكتب ملف CSS إصلاح كامل منظَّماً في قسمَين:
   - القسم الأول: إصلاحات القلب الناقص (خصائص فيزيائية → منطقية)
   - القسم الثاني: إصلاحات القلب الزائد (مكوّنات صامدة تحتاج direction: ltr)
 
٤. أضف تعليقاً مختصراً فوق كل قاعدة CSS يشرح سبب القرار.
 
قيود مهمة:
- لا تقلب: أيقونات العمليات (حذف / تعديل / إعدادات)
- لا تقلب: مشغّلات الوسائط وأشرطة تقدمها
- لا تقلب: المخططات البيانية ذات محور الزمن X
- لا تقلب: الأرقام والتواريخ (عزلها بـ unicode-bidi: isolate فقط)
 
--- الكود ---
[الصق هنا ملف CSS الأصلي أو الجزء المراد تدقيقه]
 
--- HTML ذو الصلة (اختياري لكن مفيد) ---
[الصق هنا بنية HTML للمكوّنات الرئيسية]

إطار عام لكتابة برومبتات RTL لمشاريع أخرى

البرومبت الجيد لأي مهمة تدقيق RTL يحتاج أربعة عناصر بالترتيب:

• السياق: نوع التطبيق وطريقة القلب الحالية (dir="rtl" وحده؟ أم مع ملف rtl.css؟ أم أداة مثل Tailwind؟)
• القيود الصريحة: ما الذي لا يجب لمسه — النماذج بدون قيود تميل للإفراط في الإصلاح.
• شكل المخرج المطلوب: ملف CSS منظَّم؟ قائمة مُرقَّمة؟ تعليقات داخل الكود؟ حدِّدها مسبقاً.
• لقطة الشاشة: إرفاقها يرفع دقة التشخيص بشكل ملحوظ — النموذج يرى الكسر البصري مباشرةً لا يستنتجه من الكود.

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

خلاصة السلسلة

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

المبدأ الجامع للسلسلة كلها بسيط: بناء واجهةٍ عربيةٍ جيدةٍ لا يعني ترجمة واجهةٍ غربيةٍ، بل يعني بناء واجهةٍ تفهم من أين يبدأ مستخدمها، وما الذي يعرفه مسبقاً، وأين يتوقع أن يجد ما يحتاجه. الكود أداة، والخصائص المنطقية أداة، والمكوّنات الصامدة إطار تفكير. لكن في النهاية كل هذه الأدوات تخدم هدفاً واحداً: مستخدمٌ عربيٌ يستخدم واجهةً تشعره أنها صُنعت له، لا أُعيد صياغتها من أجله.

المراجع والمصادر:

1. إرشادات Material Design لتدقيق واجهات RTL: Material Design — Bidirectionality
2. دليل Apple لاختبار واجهات RTL: Apple HIG — Right to Left
3. أداة تدقيق RTL في Chrome DevTools: Chrome DevTools
4. سلسلتنا الكاملة — دليل هندسة واجهات اليمين: المقال الأول: الخصائص المنطقية

— دليل هندسة واجهات اليمين —

المقال السابق: ٣- علم النظر: كيف يقرأ المستخدم العربي الشاشة

المقال الأخير: ٤- مشروع التدقيق: إصلاح واجهة قُلبت بشكل خاطئ

سلاسل مشابهة:
دليل معالجة النصوص الهجينة | دليل معايرة البيانات المالية | ورشة التوطين لتطبيقات الويب ٣.٠ والذكاء الاصطناعي

منصة ذي يزن © ٢٠٢٦