كيف تصمم موقع عربي يناسب المستخدم السعودي: من الاتجاه لا من الألوان

كيف تصمم موقع عربي يناسب المستخدم السعودي: الاتجاه قرار بنائي

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

البداية الصحيحة سطران في أعلى المستند: dir="rtl" و lang="ar-SA" على عنصر html. الأول يضبط الاتجاه الافتراضي للمستند كله، والثاني يخبر المتصفح ومحركات البحث بأي عربية نكتب، وهو فرق حقيقي عند اختيار الخط وعند التعامل مع المحتوى.

ثم تأتي الطبقة التي تُهمل: كتابة التخطيط بخصائص CSS المنطقية. توثيق MDN لوحدة الخصائص والقيم المنطقية، وهو بالإنجليزية، يعدّد المجموعات: المقاسات inline-size و block-size، والهوامش والحدود والحشو بصيغة margin-inline-start و padding-block-end وما شابه، والإزاحة inset-inline-start. والصفحة تنص على أن المعنى الفيزيائي لهذه المصطلحات يتحدد بوضع الكتابة، وأن البعد السطري موازٍ لتدفق النص داخل السطر.

النتيجة العملية واحدة: التخطيط المكتوب منطقياً ينقلب مع الاتجاه من تلقاء نفسه. والمكتوب بـ left و right يحتاج ورقة تنسيقات موازية، وهذه الورقة هي أول ما يُنسى عند أول تعديل بعد التسليم.

النص المختلط: الأسعار والأرقام والأسماء اللاتينية

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

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

والأهم أن المقالة تحدد القاعدة بدلاً من الحيلة: ضع حدود التغيير الاتجاهي في بداية كل جزء ونهايته، لا حول الجملة كلها، وتداخل النطاقات بشكل صحيح بدلاً من رصّها جوار بعضها. ومقابل عناصر التحكم في النص المجرد توجد وسوم HTML: dir="rtl" و dir="ltr" للعزل الصريح، و dir="auto" الذي تصفه المقالة بأنه يعزل المحتوى ويضبط الاتجاه حسب أول حرف ذي اتجاه قوي. والمقالة تنص كذلك على أنك ستحتاج الوسوم لضبط الاتجاه الافتراضي للمستند كله على أي حال.

ما لم يكتمل دعمه في المتصفحات بعد

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

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

الخط العربي، وتكلفته التي لا تُحسب

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

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

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

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

النماذج: الحقل الذي يفشل بصمت

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

• كل حقل نصي يستقبل محتوى من المستخدم يحمل dir="auto"، لأن المستخدم قد يكتب بالعربية أو بالإنجليزية ولا يمكن معرفة ذلك مسبقاً.
• الحقول التي تعرف اتجاهها قطعاً تُضبط صريحاً: البريد الإلكتروني و IBAN ورمز الطلب بـ dir="ltr".
• حقل الجوال السعودي يبدأ بصفر وخمسة أو بالمفتاح الدولي، وكلا الصيغتين رقميتان بحتة فالأسلم ضبطه ltr وعدم ترك محاذاته للاستدلال.
• استخدم dirname على الحقول التي سيُعاد عرض قيمتها لاحقاً، فالاتجاه يُمرر مع بيانات النموذج إلى السيرفر بدلاً من إعادة تخمينه عند العرض.
• رسائل الخطأ تُكتب بنفس سجل الموقع، لا بترجمة آلية. رسالة خطأ بعامية غير محلية تُفقد الثقة في اللحظة الأكثر حساسية.

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

ما يخص القارئ السعودي تحديداً

حتى الآن كان الكلام عن العربية عموماً. وهذه البنود تخص السوق السعودي بالذات، وهي الفرق بين موقع عربي وموقع كُتب لهذا القارئ.

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

فحص عشر دقائق يمكن تنفيذه اليوم

هذه ليست خطة مشروع، بل ما يمكن أن يراه أي شخص في موقعه الآن دون أدوات.

1. افتح صفحة منتج فيها سعر. هل الريال في الموضع المقصود، أم انتقل إلى الجهة الأخرى من الرقم؟
2. ابحث عن جملة عربية فيها اسم لاتيني، ثم جملة فيها اسمان مفصولان بفاصلة. الحالة الثانية هي التي تنكسر.
3. اكتب في حقل نموذج كلمة إنجليزية ثم كلمة عربية. هل المحاذاة تتبع ما تكتب؟
4. افتح لوحة الإدارة وانظر إلى قيمة أدخلها مستخدم. هل تُعرض كما كُتبت؟
5. اقرأ رسالة خطأ واحدة بصوت مسموع. هل تبدو مكتوبة لهذا الجمهور؟
6. صغّر نافذة المتصفح إلى عرض الجوال. أي عنصر خرج من مكانه هو عنصر منسّق بـ left أو right.

حدود يجب أن تُقال

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

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

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

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