تصميم مواقع بالعربية والإنجليزية
العربية ليست مهمة ترجمة تُنفَّذ في نهاية البناء، بل قرار تصميمي يُتخذ من أوله. إليك ما يتغير حين يعمل الموقع في اتجاهين، وما ينكسر حين لا يخطط له أحد.
الترجمة الآلية للعربية تُقرأ كترجمة آلية
يمكنك تمرير موقعك الإنجليزي على أداة ترجمة والحصول على عربية خلال دقيقة. ستبدو عربية، لكنها لن تُقرأ كعربية أمام من تحاول البيع له. أول ما يفضحها ترتيب الجملة: العربية كثيرًا ما تبدأ بالفعل، والصفة تأتي بعد الموصوف، والعنوان المكتوب ليصيب هدفه بالإنجليزية يصل باهتًا. وثاني ما يفضحها المستوى اللغوي؛ فمكتب علامات تجارية ومطعم برجر لا يتحدثان بالنبرة نفسها بالعربية، ومحرك الترجمة يمنح الاثنين الصوت المحايد ذاته.
أما الأعطال المرئية فأسوأ. العربية خط متصل، فكل حرف يتغير شكله بحسب جاريه، والخط الذي لا يدعم التشكيل الصحيح يفكّ الكلمة إلى حروف منفصلة. ثم فخ الأرقام: التواريخ والنِّسب تُقرأ بسلاسة هكذا ٢٨ يوليو و٢٥٪، بينما يجب أن يبقى رقم الهاتف بالأرقام اللاتينية ليتمكن العميل من الاتصال به. والعربية أقصر في معظم الجمل وأطول في ارتفاع كل سطر، فالعنوان الذي انقسم سطرين بالإنجليزية ينقسم ثلاثة ويدفع زر الإجراء أسفل الشاشة.
والعلاج ليس غريبًا. من يكتب العربية احترافيًا هو من يكتبها، انطلاقًا من مقصد النص الإنجليزي لا من قواعده، ثم يُختبر التخطيط بالكلمات الحقيقية داخله. هكذا يبيع متجر بلغتين مثل البدوي جلدًا مصنوعًا يدويًا للقاهرة وللندن من كتالوج واحد.
من اليمين لليسار انعكاس للتخطيط لا تبديل للنص
اضبط dir="rtl" وسيقلب المتصفح النص، لكنه لن يقلب تصميمك. التكوين كله عليه أن ينعكس: الشعار ينتقل إلى يمين شريط التنقل، والأعمدة الجانبية تبدّل جهتها، والجداول تبدأ عمودها الأول من اليمين، وكل هامش يتوقف عن كونه يمينًا أو يسارًا ليصير بداية أو نهاية. والأيقونات ذات الاتجاه تنعكس أيضًا: أسهم الرجوع وأزرار الشرائح وأشرطة التقدم. وإرشادات W3C حول البنية والنص من اليمين لليسار تستحق أن تسلّمها لمن سيبني الموقع.
وما لا يتحرك لا يقل أهمية. شعارك يبقى كما رُسم، إلا إن صُممت له نسخة عربية بقصد. وأرقام الهواتف تُقرأ من اليسار لليمين في كل اللغات، وكذلك عناوين البريد والروابط والكود والأسماء اللاتينية مثل Google وShopify وفوري وPaymob وInstaPay وWhatsApp. وبمجرد وضع أي منها داخل فقرة عربية تدخل في النص ثنائي الاتجاه، حيث يصيب المتصفح غالبًا وتخطئ علامات الترقيم عند الحدود غالبًا. وشرح W3C للترميز ثنائي الاتجاه داخل السطر يوضح السبب.
| ينعكس في العربية | يبقى كما هو تمامًا |
|---|---|
| شريط التنقل والأعمدة الجانبية وشبكة الصفحة | الشعار، ما لم يُصمَّم له نسخة عربية بقصد |
| الهوامش والحشو ومحاذاة النص | أرقام الهواتف، بما فيها مفتاح الدولة |
| ترتيب أعمدة الجداول وعلامات القوائم | عناوين البريد والروابط ومسارات الملفات |
| أسهم الرجوع والتالي وأزرار الشرائح | الأسماء اللاتينية: Google وShopify وفوري وPaymob وInstaPay |
| أشرطة التقدم والمنزلقات | أمثلة الكود وكل ما يُعرض بخط ثابت العرض |
ولهذا تكلف إضافة العربية في النهاية أكثر من البناء لها من البداية. كل قيمة left مكتوبة يدويًا يجب العثور عليها، وكل أيقونة يجب فحصها، وكل مكوّن يجب النظر إليه مرتين. وهذا ليس عملًا صعبًا، لكنه لا ينضغط في الأسبوع الأخير من المشروع، وهو أحد أسباب صمود البناء المخصص حيث يتهاوى الترقيع اللاحق.
الخط العربي قرار مستقل لا خيار احتياطي
خط العناوين في هذا الموقع هو Clash Display، ولا يحتوي حرفًا عربيًا واحدًا. أعطه عنوانًا بالعربية وسيتراجع المتصفح إلى أي خط على الجهاز: Noto Naskh على أندرويد وGeeza Pro على الآيفون، فيرى زائران هويتين مختلفتين ولا يرى أي منهما هويتك. وقائمة الخطوط الاحتياطية لا تصلح ذلك. تختار خطًا عربيًا بقصد ثم تزاوجه، وGoogle Fonts بعد تصفيته على المجموعة العربية نقطة البداية العملية: IBM Plex Sans Arabic وCairo وAlmarai وTajawal وNoto Kufi Arabic.
والمزاوجة تكون على النِّسب لا على الأسماء. فنص المتن المريح عند تباعد سطور ١٫٥ في Inter يحتاج غالبًا ١٫٧٥ إلى ١٫٨٥ بالعربية، لأن النقاط تحت السطر تحتاج مكانًا. واضبط التباعد بين الحروف على صفر، فالتباعد الذي يجمّل عنوانًا لاتينيًا يفكّ الحروف العربية المتصلة. والعربية بلا حروف كبيرة، فأي تدرج بنيته على الأحرف الكبيرة ينتقل إلى الوزن والحجم، وينزل درجة، لأن العربية تُقرأ أثقل عند الوزن الاسمي نفسه. وعائلة ثانية تعني تحميلًا ثانيًا، وهنا تُكسب أو تُخسر سرعة الصفحة على هاتف أندرويد متوسط ببيانات الجوال في مصر.
سيو بلغتين: لغتان تحتاجان عنوانين
هنا تخسر معظم المواقع ثنائية اللغة في مصر الزيارات التي تظن أنها تملكها. فزر التبديل الذي يستبدل النص داخل المتصفح بالجافاسكريبت يترك لك رابطًا واحدًا وعنوانًا واحدًا ووصفًا واحدًا. ويفهرس جوجل تلك الصفحة الواحدة بلغة واحدة، فيصير محتواك العربي بلا عنوان خاص به ولا يمكنه التصدر. وجوجل يعالج الجافاسكريبت جيدًا اليوم؛ المشكلة أن المحتوى الذي لا يملك رابطًا لا يملك ما يوضع في الفهرس، كما توضح أساسيات السيو للجافاسكريبت من جوجل.
وقد تعلمنا هذا على موقعنا نحن. فنسخة سابقة من ymsstudio.com كانت تخبئ اللغتين خلف زر وتحفظ الاختيار في المتصفح، وعناكب البحث بلا ذاكرة متصفح، فكانت العربية غير مرئية. أما الآن فالإنجليزية على /page والعربية على /ar/page، كل منهما صفحة HTML ثابتة بعنوانها ووصفها ورابطها المعياري، وكل منهما تشير إلى الأخرى بوسوم hreflang متبادلة مع x-default. والتبادل هو الكلمة المهمة: فإن لم تشر العربية إلى الإنجليزية بدورها، يقول توثيق جوجل للنسخ المحلية إن الإشارة قد تُتجاهل.
وترجمة الصفحة ليست ترجمة البحث. فالمصريون يكتبون «تصميم مواقع» لا الترجمة الحرفية لعبارة مثل web design agency، فعناوين الصفحات العربية وأوصافها وعناوينها الفرعية والنص البديل للصور تُكتب لما يبحث عنه الناس فعلًا لا أن تُحوَّل كلمة بكلمة. وهذا هو جوهر البناء للبحث والظهور أمام الذكاء الاصطناعي، وهنا تضيق المنصات الجاهزة: حدود المنصة تظهر أولًا في الروابط متعددة اللغات والتحكم في hreflang.
خمس لغات، وما زالت تعمل
IGBS أكبر مكتب للملكية الفكرية والعلامات التجارية في مصر، وعملاؤه يقرأون العربية والإنجليزية والفرنسية والإسبانية والصينية. بنينا موقعه العام بخمس لغات مع عربية كاملة من اليمين لليسار: تخطيط منعكس، وخط عربي مختار لا موروث، ونص عربي كتبه إنسان، وروابط منفصلة قابلة للفهرسة لكل لغة، ووسوم hreflang تربطها جميعًا. والموقع يعمل ويُصان منذ ذلك الحين، وهذا هو الاختبار الذي يعني شيئًا. وإن كنت تقارن بين جهات، فالسؤال ليس هل تستطيع إنتاج نص عربي، بل هل صُممت العربية أم تُرجمت. بدّل لغة أي موقع بلغتين على هاتفك وانظر إلى شريط التنقل والأزرار وفواصل السطور.
الأسئلة الشائعة
هل أستخدم ترجمة جوجل للنسخة العربية من موقعي؟
لمستند داخلي، نعم. أما للموقع الذي تبيع منه، فلا. الترجمة الآلية تصيب الكلمات وتخطئ ترتيب الجملة والمستوى اللغوي والإيقاع، وصاحب العمل المصري يلتقط ذلك من سطر واحد. والإضافة التي تولّد العربية لحظة العرض لا تعطي جوجل شيئًا ثابتًا ليفهرسه.
ما الذي ينعكس في تخطيط من اليمين لليسار وما الذي لا ينعكس؟
اعكس التكوين: شريط التنقل والأعمدة الجانبية وترتيب أعمدة الجداول ووسوم النماذج وعلامات القوائم وكل هامش يمين ويسار. واعكس الأيقونات ذات الاتجاه: أسهم الرجوع والتالي وأزرار الشرائح وأشرطة التقدم. ولا تعكس شعارك ولا أرقام الهواتف ولا عناوين البريد ولا الروابط ولا الكود ولا الأسماء اللاتينية مثل Google وShopify وفوري وPaymob وInstaPay وWhatsApp.
أي خط عربي يزاوج خط علامتي الإنجليزي؟
الخط الذي يطابق نسبه لا اسمه. فمعظم خطوط العناوين اللاتينية، ومنها Clash Display، لا تحمل حروفًا عربية، فيستبدل المتصفح خطًا من النظام وتتوقف صفحاتك العربية عن أن تبدو كعلامتك. وIBM Plex Sans Arabic وCairo وAlmarai وTajawal وNoto Kufi Arabic خيارات موثوقة. امنح العربية تباعد سطور أكبر، واضبط التباعد بين الحروف على صفر، وتوقّع النزول درجة وزن واحدة.
هل تكون النسخة العربية في مجلد فرعي أم نطاق فرعي أم على نطاق مصري؟
لمعظم الشركات المصرية، المجلد الفرعي على نطاق .com واحد هو القرار الصحيح. فهو يُبقي كل رابط وكل ثقة مكتسبة على ملكية واحدة، ولا يقول لعميل خليجي إن الموقع موجه لغيره. ونطاق .com.eg ميزة حقيقية إن كانت مصر سوقك الوحيد. أما النطاق الفرعي فأضعف الثلاثة: العمل نفسه، والإشارة تنقسم على أي حال.
هل يفهرس جوجل صفحاتي العربية إن استخدمت زر تبديل بالجافاسكريبت؟
غالبًا لا، وهذا أشهر سبب في ألا تجلب النسخة العربية أي زيارات. فإن كان الزر يستبدل النص على الرابط نفسه، فهناك صفحة واحدة ليفهرسها جوجل وعنوان واحد ليتصدر به. امنح كل لغة رابطها الخاص، وقدّم الاثنين كصفحات HTML، واكتب عنوانًا ووصفًا عربيين منفصلين، واربطهما بوسوم hreflang متبادلة مع x-default.