العربية مسألة تصميم، لا ترجمة

كل موقع ثنائي اللغة سلّمته لعملاء في السعودية ومصر مرّ بنفس القصة. تصل الترجمة، تضيف dir="rtl"، وفجأة تجد الصفحة خاطئة في عشرين تفصيلة صغيرة. ولا واحدة منها تتعلق بالكلمات. كلها تتعلق بالتخطيط، والخطوط، والأرقام، والروابط.

هذه هي القائمة التي أراجعها الآن قبل أن يرى العميل النسخة العربية. جمعتها من Aevenda و HotSpot و CPS و Athenas و Midex و Edge، وكلها مواقع Next.js App Router فيها مقطع [locale].

1. توقف عن استخدام left و right في CSS

الخصائص الفيزيائية (margin-left وpadding-right وleft: 0 وtext-align: left) لا تنعكس. الخصائص المنطقية تنعكس. في Tailwind هذا يعني:

فيزيائية	منطقية
`ml-4` / `mr-4`	`ms-4` / `me-4`
`pl-4` / `pr-4`	`ps-4` / `pe-4`
`left-0` / `right-0`	`start-0` / `end-0`
`text-left`	`text-start`
`rounded-l-lg`	`rounded-s-lg`

ابحث عن الخصائص الفيزيائية قبل التسليم:

grep -rnoE '\b(ml|mr|pl|pr|left|right)-[a-z0-9.\[\]/-]+|\btext-(left|right)\b' src

أي شيء يتبقى يجب أن يكون داخل عنصر قررت أنت أن يبقى من اليسار إلى اليمين.

2. بعض الأشياء يجب أن تبقى LTR

المخططات، وكتل الكود، وأرقام الهواتف، والبريد الإلكتروني، والروابط. غلّف كل واحد منها:

<span dir="ltr" className="inline-block">+20 100 700 4828</span>

inline-block مهم. بدونه ستعيد خوارزمية bidi ترتيب علامات الترقيم حول الرقم في بعض المتصفحات.

3. الخط الذي تستخدمه لا يحتوي على الحروف العربية

Geist و Inter و Space Grotesk لا تحتوي على حروف عربية. يلجأ المتصفح إلى أي خط موجود في نظام التشغيل، وهو غالبًا مقبول على iOS وسيئ على Windows. اختر خطًا عربيًا عن قصد، وحمّله فقط في المسارات العربية:

// app/[locale]/layout.tsx
import { Cairo } from "next/font/google";
const arabic = Cairo({ variable: "--font-arabic", subsets: ["arabic", "latin"], weight: ["400", "500", "700"] });
 
<html lang={locale} dir="rtl" className={locale === "ar" ? `${arabic.variable} font-ar` : ""}>

ثم بدّل الخطوط في CSS بدلًا من تعديل كل مكوّن:

html.font-ar {
  --font-display: var(--font-arabic), system-ui, sans-serif;
  --font-sans: var(--font-arabic), system-ui, sans-serif;
}
html.font-ar .display { letter-spacing: 0; line-height: 1.35; }

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

4. الأرقام والتواريخ

Intl سيعطيك الأرقام الهندية (٣ بدلًا من 3) مع ar-EG. العملاء في السعودية ومصر يفضلون غالبًا الأرقام الغربية على الويب. افرضها عبر امتداد اللغة:

new Intl.DateTimeFormat("ar-EG-u-nu-latn", { hour: "2-digit", minute: "2-digit" });

استخدم نفس الطريقة مع Intl.NumberFormat وIntl.RelativeTimeFormat.

5. اعكس الأيقونات التي تعبّر عن اتجاه

الأسهم التي تعني "التالي" أو "فتح" يجب أن تنعكس. الأيقونات التي تمثل شيئًا حقيقيًا (هاتف، زر تشغيل، شعار) لا تنعكس. في Tailwind يكفي rtl:rotate-180 على السهم.

6. الروابط جزء من التخطيط

اجعل الروابط مترجمة وبحروف ASCII. /ar/services/led-screens يظهر في نتائج البحث، أما /ar/خدمات/شاشات-led فهو مشكلة دعم فني تنتظر الحدوث في نصف الأدوات التي ستربطها بالموقع. ضع الكلمة العربية في العنوان وفي H1، لا في المسار.

من أجل SEO، تحتاج كل صفحة إلى روابط hreflang لكل اللغات مع x-default، ونفس الروابط في sitemap، وog:locale بقيمة ar_EG أو ar_SA. واجهة metadata في Next تفعل ذلك بشكل نظيف عبر alternates.languages.

7. جرّب على لوحة مفاتيح هاتف حقيقي

آخر خطأ يكون دائمًا في نموذج ما. يكتب الزائر اسمه بالعربية، فترفضه خاصية pattern المكتوبة للحروف اللاتينية، ولا تسمع منه أبدًا. تحقق من البيانات على الخادم بـ Zod، واكتفِ في المتصفح بـ required وtype="email"، واقرأ رسائل الخطأ بصوت عالٍ بالعربية مرة واحدة.

ما الذي سأكرره

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