سنستعرض تاليًا مبادئ تصميم واجهات RTL (من اليمين إلى اليسار). يتحدث اللغة العربية كلغة أم أكثر من 292 مليون شخص حول العالم، ما يجعلها واحدة من أكثر اللغات انتشارًا عالميًا. وبما أن العربية هي لغتي الأم، أعمل في بعض المشاريع على تطوير مواقع إلكترونية تتطلب تصميم واجهات RTL.
في الحالات التي تستخدم فيها لغات مثل الإنجليزية، يتم اعتماد اتجاه الكتابة من اليسار إلى اليمين (LTR)، بينما تستخدم الخاصية المعاكسة، من اليمين إلى اليسار (RTL)، عند التعامل مع اللغة العربية لضمان عرض المحتوى بشكل صحيح. وهنا يأتي سؤال: ما هي مبادئ تصميم واجهات RTL ؟
Contents
تصميم واجهات RTL (من اليمين إلى اليسار)
اتجاه العرض الافتراضي في CSS يكون من اليسار إلى اليمين (LTR). إذا قمت بفتح أدوات المطور في متصفحك (Inspect) وفحصت عنصر HTML الأساسي، ستجد أن القيمة الافتراضية لخاصية dir هي ltr، وهي اختصار لكلمة direction أي الاتجاه.
عند ملاحظة فقرة مكتوبة بالعربية، ستلاحظ أنها تقرأ بسهولة من اليمين إلى اليسار، على عكس النصوص الإنجليزية التي تقرأ من اليسار إلى اليمين. في هذه الحالات، يقوم المتصفح تلقائيًا بترتيب اتجاه النص دون تدخل المستخدم. لكن إذا رغبت في تغيير اتجاه الصفحة بالكامل، فيجب إضافة السمة dir إلى العنصر الجذري أو العنصر الأب.
وبمجرد تغيير قيمة dir في عنصر ما، ينتقل التأثير تلقائيًا إلى جميع العناصر الداخلية (الأبناء)، مثل عناوين <h1> إلى <h6>، والفقرات <p>, والروابط <a>, والصور <img>, وعناصر النماذج <form>، وغيرها.
تجدر الإشارة إلى وجود القيمة dir=”auto”، التي تسمح بتحديد الاتجاه تلقائيًا وفقًا لنص المحتوى. ومع ذلك، وبحسب مواصفات HTML، يفضل تجنب استخدام auto إلا في الحالات التي لا يمكن فيها تحديد اتجاه النص بشكل دقيق عبر الخادم (Server)، أو عندما لا يتوفر دليل واضح على لغة المحتوى.
إلى جانب تعيين dir=”rtl” على عنصر <html>, يمكن أيضًا استخدام خاصية CSS direction: rtl لضبط اتجاه المحتوى. لكن من الأفضل دائمًا تعريف اتجاه الصفحة في عنصر <html> الجذري، لأن CSS Working Group توصي بتحديد الاتجاه في العنصر الجذري لضمان ضبط اتجاه الصفحة حتى لو تأخر تحميل ملف CSS أو لم يتم تحميله على الإطلاق.
التعامل مع الخطوط وفقًا لمبادئ تصميم واجهات RTL
كيف تتعامل مع الخطوط وفقًا لمبادئ تصميم واجهات RTL ؟ عند تصميم تخطيطي الاتجاهين (LTR وRTL)، يجب عليك تخصيص خط مختلف لكل اتجاه. قد تدعم بعض الخطوط عدة لغات بشكل جيد، وهذا يعد ميزة كبيرة.
لكن، غالبًا ما تفضل الشركات والعلامات التجارية استخدام خط مخصص للاتجاه من اليمين إلى اليسار (RTL) لبناء هوية بصرية متناسقة مع اللغة العربية. لذا، يجب تحديد خط خاص بالاتجاه RTL ضمن إعدادات الخط في المشروع.
وفي هذا السياق، تسهل خاصية font-family في CSS عملية تحديد بدائل الخط في حال تعذر تحميل الخط الأساسي. إذ يمكن وضع عدة خطوط ضمن قائمة font-family، وبذلك يستخدم المتصفح الخط التالي في القائمة إذا لم يتوفر الخط الأول.
لكن هناك نقطة مهمة يجب الانتباه لها: إذا كان الخط الأول لا يدعم الحروف أو الرموز الخاصة بالنص (glyphs)، فإن المتصفح سيتجاوز هذا الخط مباشرة ويعتمد الخط التالي في القائمة.
التعامل مع وحدة تخطيط Flexbox وفقًا لمبادئ تصميم واجهات RTL
كيف تتعامل مع وحدة تخطيط Flexbox وفقًا لمبادئ تصميم واجهات RTL ؟ يعتمد تخطيط Flexbox على وضع كتابة المستند (writing mode)، الذي يحدد طريقة ترتيب العناصر داخل الصفحة. فمثلًا في اللغة الصينية يكون تدفق النص من الأعلى إلى الأسفل، وبالتالي يتوافق تخطيط المحتوى مع هذا الوضع.
في Flexbox، يتم توزيع العناصر بناءً على وضع الكتابة المحدد للمستند، وتعتبر القيمة الافتراضية لوضع الكتابة في اللغتين العربية والإنجليزية هي horizontal-tb. ويعني وضع horizontal-tb أن:
- يتدفق المحتوى أفقيًا من اليسار إلى اليمين.
- ثم يتدرج المحتوى عموديًا من الأعلى إلى الأسفل.
- وعند وصول النص إلى نهاية السطر ينتقل تلقائيًا إلى السطر التالي.
عند تصميم واجهات RTL، يتكيف Flexbox تلقائيًا مع هذا التغيير، حيث يقوم بقلب اتجاه توزيع العناصر بما يتناسب مع اتجاه الصفحة. وهذه هي واحدة من أهم مزايا استخدام Flexbox، إذ يضمن التوافق بين تصميم الواجهة واتجاه اللغة.
التعامل مع وحدة تخطيط Grid وفقًا لمبادئ تصميم واجهات RTL
كيف تتعامل مع وحدة تخطيط Grid وفقًا لمبادئ تصميم واجهات RTL ؟ تعتمد وحدة التخطيط Grid، كما هو الحال في Flexbox، على وضع كتابة المستند (writing mode)، وهو ما يضمن التوافق تلقائيًا مع اتجاه اللغة المستخدم في الصفحة. وبالتالي، فإن توزيع الأعمدة والصفوف يتغير تلقائيًا عند التحول من اتجاه اليسار إلى اليمين إلى اتجاه اليمين إلى اليسار، دون الحاجة لتعديل الكود.
عند استخدام الاتجاه LTR (من اليسار إلى اليمين)، يكون الشريط الجانبي (sidebar) في الجهة اليسرى، بينما يظهر المحتوى الرئيسي (main) في الجهة اليمنى. وعند تغيير الاتجاه إلى RTL (من اليمين إلى اليسار)، ينقلب ترتيب الأعمدة تلقائيًا بحيث يصبح الشريط الجانبي في الجهة اليمنى، والمحتوى الرئيسي في الجهة اليسرى، بما يتوافق مع طبيعة اللغة واتجاه القراءة.
الأخطاء الشائعة عند تصميم واجهات RTL
يرتكب غير الناطقين بالعربية بعض الأخطاء التي يلاحظها المتحدثون بها فورًا، وتؤثر على جودة التصميم والقراءة، بما في ذلك:
- إضافة تباعد بين الأحرف: يعتبر استخدام خاصية letter-spacing شائعًا في التصميم الإنجليزي لضبط المسافات بين الحروف، وهو ما يعرف أيضًا بـ tracking في الطباعة. لكن في العربية، قد يؤدي التباعد بين الأحرف إلى مظهر غير طبيعي، ويفقد النص سلاسته ووضوحه.
- شفافية النص: من المعتاد في التصاميم الإنجليزية تخفيض شفافية النص لجعله ثانويًا أو أقل بروزًا، دون أن يؤثر ذلك على القراءة. أما في العربية، فإن النص يصبح غير متناسق ويظهر بشكل غريب عند تطبيق الشفافية، لأن خطوط العربية تحتاج إلى وضوح أعلى للحفاظ على قابلية القراءة.
- اختلاف أحجام الكلمات بين اللغات: تختلف أبعاد الحروف من لغة إلى أخرى، وبالتالي قد يتغير حجم الكلمة عند الترجمة. قد تبدو كلمة عربية أكبر أو أصغر من نظيرتها الإنجليزية، وهذا يسبب اختلافًا في توزيع العناصر داخل التصميم، وقد يؤدي إلى عدم تناسق في المساحات والهوامش.
- بتر النص: في بعض المشاريع المختلطة بين اللغات، قد يحدث قص أو بتر للنص عند التبديل بين الاتجاهين، خاصة إذا كان التصميم غير معد بشكل صحيح للـ RTL، مما ينتج عنه ظهور النصوص ناقصة أو غير مفهومة.
- اختيار خط غير مناسب للـ RTL: لا يمكن الاعتماد على خط نظام التشغيل الافتراضي عند تصميم نسخة RTL. يجب اختيار خط يدعم العربية بشكل جيد، ويضمن وضوح الحروف وسلاسة القراءة، وإلا سيبدو النص غير متقن وغير محترف.
- خلط الأرقام الهندية والعربية: توجد في العربية طريقتان لكتابة الأرقام، الأرقام الهندية: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩، الأرقام العربية (المستخدمة في الإنجليزية): 0 1 2 3 4 5 6 7 8 9. لذلك يجب الالتزام بنمط واحد داخل الموقع، وعدم المزج بينهما، لأن ذلك يسبب عدم اتساق ويؤثر على المظهر العام للمحتوى.
أمور شائعة لا تعمل في الاتجاه من اليمين إلى اليسار
الأخطاء الشائعة عند تصميم واجهات RTL، هناك أمور شائعة لا تعمل عند تصميم واجهات RTL، وتتضمن:
ارتفاع الخط
عند تصميم واجهات RTL، يجب عليك اختيار خط مخصص يدعم الاتجاه من اليمين إلى اليسار، وذلك لضمان وضوح النص وسلاسة القراءة. كما يتطلب الأمر اختبار عرض المحتوى سواء على سطر واحد أو على عدة أسطر، لأن اختلاف طول الكلمات بين العربية والإنجليزية قد يؤثر على توزيع الأسطر داخل الفقرات. لذلك ينبغي تحديد قيمة line-height مناسبة لكل لغة على حدى، بحيث تكون المسافة بين الأسطر متناسقة وتوفر تجربة قراءة مريحة للمستخدمين في كلتا اللغتين.
الروابط المسطرة
يظهر التسطير الافتراضي للنصوص بشكل غير ملائم في الكلمات العربية، وذلك بسبب طبيعة تشكيل الحروف وارتباطها ببعضها في اللغة العربية. وفي هذا الإطار، يمكن استخدام خاصية text-decoration-skip-ink لتفادي تداخل نقاط الحروف مع خط التسطير السفلي، حيث تعمل على تحسين مظهر التسطير وتقليل التشوهات. القيمة الافتراضية لهذه الخاصية هي skip.
ومن ناحية أخرى، أصبح دعم المتصفحات لخاصية box-shadow أفضل بكثير مقارنةً بدعم text-decoration في بعض الحالات. لذلك، عند عدم توفر دعم خاصية text-decoration في المتصفح، يمكن الاعتماد على box-shadow كبديل لتطبيق تأثيرات التسطير بشكل أقرب إلى المطلوب.
انقطاع الخط
إذا كان ملف CSS يحتوي على خاصية word-break، فمن الضروري اختبار تأثيرها بدقة لأنها قد تسبب قطعًا غير مناسب للكلمات العربية. في اللغة العربية، ترتبط الأحرف ببعضها، لذا قد يؤدي تفعيل word-break إلى اقتطاع أجزاء من الكلمة عند نهاية السطر، وهو ما يسبب تشوشًا في القراءة ويفقد النص انسجامه.
على عكس ذلك، يمكن في اللغات الأجنبية تقسيم الكلمة بشكل طبيعي عند نهاية السطر ونقل جزء منها إلى السطر التالي دون أن يؤثر ذلك على المعنى أو الشكل. لذلك، ينصح بمراجعة إعدادات word-break عند تصميم صفحات عربية، واختيار القيم المناسبة أو الاستغناء عنها إذا كانت تتسبب في تكسير الكلمات بشكل غير صحيح.
اختصارات الكلمات
في اللغة الإنجليزية، ينتشر استخدام الاختصارات لتقليل طول الكلمات، مثل اختصار أسماء أيام الأسبوع، حيث يتم تقصير كلمة Saturday إلى Sat على سبيل المثال. أما في اللغة العربية، فالأمر يختلف بسبب طبيعة الكتابة، حيث ترتبط الأحرف ببعضها داخل الكلمة، مما يجعل اختصار الكلمات بهذه الطريقة غير مناسب غالبًا، ويؤدي إلى تشويه الكلمة أو فقدان معناها تمامًا.
في الختام، يظهر بوضوح أن تصميم واجهات ومحتوى يدعم اللغتين العربية والإنجليزية ليس مجرد عملية ترجمة نصوص، بل يتطلب فهم الفروقات اللغوية والكتابية بين اللغتين.
تتطلب اللغة العربية معالجة خاصة بسبب اتجاه الكتابة من اليمين إلى اليسار، واتصال الأحرف داخل الكلمة، واختلاف قواعد التسطير، والتعامل مع الأرقام، وكذلك اختلاف أحجام الكلمات وتأثير ذلك على تصميم العناصر والمساحات.
ومن هنا تأتي أهمية مبادئ تصميم واجهات RTL، مثل استخدام خطوط مناسبة لكل اتجاه، وضبط التخطيطات باستخدام flexbox وgrid، وتفادي خصائص CSS التي قد تؤثر سلبًا على النص العربي، مثل word-break أو letter-spacing.
في النهاية عزيزي القارئ، لا يقتصر دور احترام خصائص اللغة العربية أثناء التصميم على الشكل العام فقط، بل يعكس مدى جودة واحترافية العلامة التجارية ومن ثم يكتسب ثقة العملاء.
وبذلك عزيزي القارئ نكون قد استعرضنا كافة مبادئ تصميم واجهات RTL (من اليمين إلى اليسار) (العربية)، وقبل أن تذهب، نود تذكيرك أنك تستطيع الحصول على خدماتنا فقط عن طريق طلب عرض سعر، ودمتم بخير.
