تصميم واجهات RTL: العربية والنص المختلط والنماذج دون قلب عشوائي

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

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

ابدأ تصميم واجهات RTL باتجاه موثق

حدد اللغة واتجاه الصفحة في البنية المناسبة، ثم راجع العناصر التي تحتاج إلى اتجاه مختلف. توضح إرشادات W3C لاتجاه النص في HTML استخدام خاصية الاتجاه في البنية. لا تعامل محاذاة النص وحدها على أنها قرار اتجاه؛ قد يتطابق المظهر في فقرة بسيطة ثم يختلف عند دخول أرقام أو علامات ترقيم.

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

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

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

راجع ترتيب القراءة قبل مواضع الزينة

ابدأ بما يحتاج المستخدم إلى فهمه أولًا ثم ثانيًا. هل يظهر عنوان القسم ثم وصفه ثم إجراءه؟ وهل ترتيب عناصر البطاقة يخدم هذه العلاقة بالعربية؟ نقل زر من طرف إلى آخر لا يفيد إذا بقيت المعلومات موزعة بطريقة تجعل الزائر يقفز بين مناطق متباعدة لفهم المهمة.

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

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

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

احفظ النص المختلط في ترتيبه المنطقي

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

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

عندما لا يسمح السياق بعلامات HTML، تعرض إرشادات W3C للنص ثنائي الاتجاه في النصوص العادية خيارات التعامل مع الحدود الاتجاهية. هذه تفاصيل تحتاج إلى المطور واختبار وجهة الاستخدام؛ ليست دعوة لإضافة محارف غير مرئية إلى كل سطر بلا فهم أو مراجعة.

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

صنف العناصر التي تقلب والعناصر التي تبقى

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

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

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

اجعل المسافات تخدم العلاقات

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

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

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

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

اختبر الحقول بحسب نوع البيانات

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

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

لا تضف قيودًا على المدخلات لمجرد رغبة في مظهر متناسق. إذا كانت الخدمة تسمح بأسماء مركبة أو علامات معينة أو صيغة عنوان مختلفة، ينبغي أن يعكس التحقق هذه الإمكانية. يحتاج القرار إلى صاحب النظام والبيانات، وليس إلى مترجم يغير المثال ثم يظن أن النموذج أصبح محليًا.

في مثال توضيحي، يكتب مستخدم اسم مؤسسة باللاتينية داخل نموذج عربي، ثم يضيف ملاحظة بالعربية. افحص الحقلين ورسالة التأكيد. إذا صح العرض عند الإدخال واضطرب في صفحة الملخص أو البريد، فالمراجعة لم تكتمل عبر المسار الذي تمر به القيمة.

اكتب رسائل خطأ تقود إلى تصحيح

رسالة «خطأ في الإدخال» لا تخبر المستخدم ماذا يفعل. اربط الملاحظة بالحقل، ووضح المشكلة والخطوة الممكنة إذا كانت معروفة. لا تحمل المستخدم مسؤولية عطل في الخدمة بعبارة توحي بأنه أدخل قيمة خاطئة. تختلف الرسالة وفق السبب، ويجب أن يوفر النظام معلومات كافية لتمييزه.

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

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

راجع القوائم والانتقال عبر الموقع

أسماء الأقسام يجب أن تصف ما سيجده المستخدم. قد تكون ترجمة حرفية لعنوان أصلي غير مناسبة للهيكل العربي. اقرأ القائمة كاملة، وراجع الكلمات المتقاربة التي قد تخفي الفرق بين خدمتين. لا تغير اسمًا في القائمة ثم تترك عنوان الصفحة بلغة مفهومية أخرى.

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

وعند تبديل اللغة، راجع الوجهة التي يصل إليها المستخدم. هل ينتقل إلى الصفحة المكافئة أم إلى الرئيسية؟ وهل يبقى اختياره أو يحتاج إلى إعادة المهمة؟ يعتمد القرار على إمكانات الموقع، لكن ينبغي أن يكون واضحًا ومتسقًا، وألا يعد الزر بوجهة غير موجودة.

اختبر الجداول والبطاقات بمحتوى طويل

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

قد يناسب بعض المعلومات عرض بطاقات بدل جدول، لكن التحويل يحتاج إلى حفظ العلاقة بين الحقول. لا تنقل القيم إلى قائمة منفصلة عن عناوينها بحجة الاستجابة. جرب مثالًا فيه بيانات ناقصة وآخر فيه نص طويل، حتى لا يكون التصميم صالحًا للحالة المثالية فقط.

وفي البيانات القابلة للفرز، اختبر المؤشر والاتجاه والنتيجة. لا يكفي قلب الأيقونة إذا بقي الترتيب أو وصفه غير واضح. راجع أيضًا التصدير إن كان جزءًا من المنتج، لأن النص الذي يبدو صحيحًا داخل الصفحة قد يحتاج إلى معالجة أخرى في ملف خارجها.

اكتب سيناريوهات تكشف الخلل

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

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

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

وثق الملاحظة بحيث يمكن إعادة إنتاجها

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

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

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

احفظ قرارات الاتجاه ضمن النظام

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

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

راجع تكبير النص دون فقدان الوظيفة

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

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

قائمة فحص للواجهة العربية

• لغة الصفحة واتجاهها محددان بصورة صحيحة.
• النص المختلط يحتفظ بالقيم وترتيبها المنطقي.
• قرارات الأيقونات والصور مرتبطة بوظائفها.
• التدرج والمسافات يدعمان ترتيب القراءة.
• الحقول اختُبرت أثناء الكتابة والنسخ والإرسال.
• رسائل الخطأ والنجاح مترجمة ومفهومة.
• القوائم والجداول اختُبرت بمحتوى طويل وعلى الهاتف.
• الملاحظات قابلة لإعادة الإنتاج والإصلاح والتحقق.

أسئلة شائعة عن اتجاه الواجهات العربية

هل نقلب جميع الأيقونات في العربية؟

لا. حدد معنى الأيقونة وعلاقتها بالاتجاه. عناصر الانتقال قد تحتاج إلى تغيير، بينما الشعارات والصور وبعض رموز الوسائط تحافظ على معناها المعتاد. سجل القرار واختبر الوظيفة بدل تطبيق قلب شامل بلا تمييز.

هل محاذاة النص يمينًا تكفي؟

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

هل نغير ترتيب حروف الرمز اللاتيني؟

لا تغير القيمة الصحيحة لتصلح العرض. حافظ على ترتيبها المنطقي، واضبط حدودها واتجاهها في المكون. تحقق من العرض والنسخ والبحث، حتى لا تصبح معالجة بصرية سببًا في خطأ لدى المستخدم أو فريق الدعم.

من يراجع مشكلات RTL؟

يتعاون المراجع اللغوي مع المصمم والمطور. اللغة تفسر العلاقة والمعنى، والتصميم يضبط العرض، والتطوير يعالج المكونات. حدد مسؤولية الحسم لكل نوع، وقدم ملاحظات تسمح بإعادة إنتاج المشكلة بدل وصف عام.

هل اعتماد شاشة الحاسوب يغني عن الجوال؟

لا، لأن ترتيب العناصر والمساحات والتفاف النصوص يتغير. اختبر المهام الأساسية والمحتوى الطويل وحالات النظام على المقاسات المتفق عليها. وراجع بعد الإصلاح ما يظهر فعليًا، لا الملف اللغوي أو الرسم الأولي وحدهما.