لماذا تبدو الواجهات العربية دائمًا كترجمة؟Why do Arabic interfaces always look like a translation?

قبل بضعة أيّام، فتحتُ تطبيقًا مصرفيًّا جديدًا بالعربيّة. كلّ شيء مترجَم، والاتّجاه معكوس، والأيقونات في أماكنها الصحيحة. ومع ذلك، كان شعور استخدامه يشبه ارتداء سُترة مقلوبة الظَّهر: كلّ الأزرار هناك، لكنّها لا تناسب الجسد.A few days ago I opened a new Arabic banking app. Everything was translated, the direction was mirrored, the icons were in the right places. And yet using it felt like wearing a jacket back-to-front — all the buttons are there, but nothing fits the body.

هذا الشعور ليس مصادفة. وليس خطأً تقنيًّا يمكن إصلاحه بـ dir="rtl" أو بتغيير خطّ النصّ. إنّه عَرَض لمشكلة أعمق في كيفيّة تفكيرنا — نحن كمصمّمين ومطوّرين — حول معنى أن تكون الواجهة عربيّة.That feeling isn't an accident. It's not a tech bug that dir="rtl" and a new font can fix. It's a symptom of a deeper question we — designers and developers — rarely stop to answer: what does it actually mean for an interface to be Arabic?

الترجمة ليست توطينًاTranslation is not localization

معظم المنتجات العربيّة التي تستخدمها اليوم لم تُصمَّم بالعربيّة. بل صُمِّمت بالإنجليزيّة، ثمّ قُلبت. هذا فرقٌ جوهريّ. الترجمة تعالج الكلمات؛ التوطين يعالج التجربة.Most Arabic products you use today weren't designed in Arabic. They were designed in English and flipped. That distinction matters. Translation treats words; localization treats the experience.

فكّر في الأمر بهذه الطريقة: عندما تصمّم شاشة بالإنجليزيّة، أنت تتّخذ آلاف القرارات الصغيرة — أين يقع زرّ «التالي»، كم طول الحقول النصّيّة، أين تُوضع الأيقونات بالنسبة للنصّ، كيف تُبنى الهَرميّة البصريّة. كلّ هذه القرارات مُشبَعة بافتراضات عن اللغة: أنّها تُقرأ من اليسار، أنّ الأرقام لاتينيّة، أنّ الكلمات متوسّطة الطول.Think about it this way: when you design a screen in English, you make thousands of small decisions — where "Next" sits, how long text fields are, where icons go relative to labels, how hierarchy reads. Those decisions are soaked in language assumptions: it reads left-to-right, numerals are Latin, words are of middling length.

«القلب لا يكفي. الواجهة العربيّة الحقيقيّة تُصمَّم من الصفر بلغة عربيّة، لا تُعكَس من لغة أخرى.»"Mirroring is not enough. A true Arabic interface is designed in Arabic from zero — not reflected from somewhere else."

— ملاحظة قديمة في دفتري— An old note from my journal

ثلاث علامات خفيّةThree quiet signs

1. الأرقام تبدو غريبة1. The numerals look off

أغلب المنتجات تستخدم الأرقام اللاتينيّة (1, 2, 3) حتّى في النسخة العربيّة. هذا ليس خطأً دائمًا — في الخليج، الأرقام اللاتينيّة أكثر شيوعًا في الحياة اليوميّة. لكنّ المشكلة تظهر عندما تخلط دون قصد: نصّ عربيّ، ثمّ تاريخ لاتيني، ثمّ سعر عربيّ هنديّ. العين تتعثّر، والقارئ يشعر بأنّ التصميم لم يُفكّر فيه أحد.Most products use Latin numerals (1, 2, 3) even in the Arabic version. That's not always wrong — in the Gulf, Latin numerals are more common day-to-day. The problem is when you mix unintentionally: Arabic text, then a Latin date, then an Arabic-Indic price. The eye stumbles and the reader senses no one thought it through.

2. الأيقونات تشير في الاتّجاه الخطأ2. Icons point the wrong way

السهم إلى اليمين في الإنجليزيّة يعني «تقدُّم». في العربيّة، يعني «رجوع». بعض الأيقونات تحتاج إلى قَلب (الأسهم، قوائم التبويب، شريط التقدّم). وبعضها لا يحتاج (أيقونة القلب، السلّة، الجرس). الفرق بين مصمّم جيّد ومصمّم ممتاز هو معرفة متى يَقلِب ومتى لا يَقلِب.A right-pointing arrow means "forward" in English and "back" in Arabic. Some icons need flipping (arrows, tabs, progress bars). Others don't (heart, cart, bell). The gap between a good designer and a great one is knowing exactly which is which.

// bad — blind mirroring breaks directional icons selectively
const rules = {
  '[dir=rtl] .icon': { transform: 'scaleX(-1)' }
};

// good — only flip icons that carry direction
const rules = {
  '[dir=rtl] .icon-chevron': { transform: 'scaleX(-1)' },
  '[dir=rtl] .icon-arrow': { transform: 'scaleX(-1)' },
  // heart, bell, cart stay as-is
};

3. النصّ «يتنفّس» بشكل خاطئ3. Text "breathes" wrong

الكلمة العربيّة المتوسّطة أطول من الإنجليزيّة بمقدار 20–40٪. الحرف العربيّ يحتاج ارتفاع سطر أكبر (بسبب النِّقاط فوق وتحت الخطّ الأساسي). المسافة بين الكلمات مختلفة. كلّ هذا يعني أنّ شاشة صُمّمت للإنجليزيّة ثمّ عُرِّبت ستبدو دائمًا مكتظّة أو متفرّقة — لا توجد طريقة وسط.The average Arabic word is 20–40% longer than its English counterpart. Arabic letters need taller line heights (dots live above and below the baseline). Word spacing is different. The result: a screen designed in English and Arabized will always look either packed or sparse — there is no middle.

كيف نصمّم من الصفر؟How do you start from zero?

الحلّ ليس معقّدًا، لكنّه يتطلّب قرارًا مبكرًا: ابدأ بالعربيّة. ارسم أوّل ويرفرم بالعربيّة. اختر أوّل خطّ على أساس جماله العربيّ لا اللاتيني. اختبر كلّ عنصر بسطر عربيّ حقيقيّ — مقال، مراجعة، تعليق — لا بنصّ lorem ipsum معرّب.The fix isn't hard, but it needs an early decision: start in Arabic. Sketch your first wireframe in Arabic. Pick your first typeface for its Arabic beauty, not its Latin. Test every element with real Arabic — a paragraph, a review, a comment — not Arabized lorem ipsum.

ثمّ، وفقط ثمّ، أضِف الإنجليزيّة كطبقة ثانية. ستفاجأ كم ستبدو واجهتك الإنجليزيّة أفضل أيضًا، لأنّ القيود العربيّة ستجبرك على اتّخاذ قرارات أكثر تعمّقًا في الفراغ والنَّفَس.Then — and only then — layer English on top. You'll be surprised: your English interface will be better too, because Arabic constraints force deeper decisions about space and breath.

خلاصةIn closing

«عربيّ أوّلًا» ليس شعارًا قوميًّا، بل قرار هندسيّ. يعني: هذه اللغة ليست حالة-حافّة، بل الحالة الأساسيّة. كلّ قرار تصميم سيُختبر فيها أوّلًا. وإذا نجح هناك — حيث اللغة تطول، والاتّجاه يعاكس، والحرف يرقص — فسينجح في كلّ مكان."Arabic-first" isn't a slogan. It's an engineering decision: this language isn't an edge case, it's the default. Every design choice gets tested here first. If it works where words grow long, direction reverses, and letters dance — it'll work anywhere.

هذا ما أحاول فعله في كلّ مشروع أبنيه. ليس دائمًا بنجاح، لكن دائمًا بنيّة.That's what I try to do in every project I build. Not always successfully — but always with intent.