مشاكل الاتجاه RTL في المواقع العربية والإنجليزية، وحل كل وحدة

بناء موقع بالعربي والإنجليزي مو «اقلبه وترجمه» وبس. هذي ست مشاكل RTL صادفناها في مشاريع حقيقية، ومنها هذا الموقع نفسه، ووش اللي حلها.

1. الصفحة تتمرر يمين ويسار في العربي بس

العَرَض: على الجوال، الصفحة العربية تنسحب لليسار ويطلع فراغ.

السبب: فيه عنصر برا الشاشة من جهة «البداية». لقينا حقل مخفي لمكافحة السبام مضبوط بـ left: -9999px. في الإنجليزي ينخفي يسار بدون ضرر، وفي العربي صارت الصفحة أعرض بعشرة آلاف بكسل.

الحل: أخفِ العناصر بدون ما تحركها، وقص الصفحة كاحتياط.

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html, body { overflow-x: clip; }

2. المسافات في الجهة الغلط

السبب: margin-left وpadding-right وleft: اتجاهات ثابتة.

الحل: استخدم الخصائص المنطقية اللي تتبع اتجاه القراءة.

.card { margin-inline-start: 16px; padding-inline-end: 12px; inset-inline-end: 0; }

3. الأرقام والإيميلات والكود تتلخبط

العَرَض: +966 53 000 0000 يطلع 0000 000 53 966+، أو الإيميل يتنطط داخل الجملة العربية.

الحل: اعزل المقاطع اللي من اليسار لليمين.

<span dir="ltr">+966 53 000 0000</span>

.phone, code { direction: ltr; unicode-bidi: isolate; }

4. أيقونات لازم تنعكس، وأيقونات لا

أسهم «التالي» و«رجوع» لازم تنعكس في العربي. أما أزرار التشغيل وعلامات الصح والشعارات فلا. اعكس بانتقاء:

[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

5. العربي يطلع مضغوط

السبب: خط لاتيني يعرض حروف عربية احتياطية، وارتفاع سطر مضبوط للإنجليزي.

الحل: حدد خط عربي حقيقي للعربي، وأعطه ارتفاع سطر أكبر.

:root[lang="ar"] body { font-family: "Noto Naskh Arabic", serif; line-height: 1.9; }

6. محركات البحث تشوف لغة وحدة

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

<html lang="ar" dir="rtl">
<link rel="alternate" hreflang="en" href="https://example.com/post">
<link rel="alternate" hreflang="ar" href="https://example.com/ar/post">

الأسئلة الشائعة

أبني موقعين منفصلين؟

لا. كود واحد بخصائص CSS منطقية ومحتوى مترجم أسهل يبقى متزامن. اللي يهم للبحث هو رابط منفصل لكل لغة.

Tailwind يدعم RTL؟

إيه. استخدم الأدوات المنطقية (ms-* وme-* وps-* وpe-* وstart-* وend-*) بدل left وright.

---

تبني موقع بلغتين؟ اسأل المحرّر في ahmed-adil.com.