العربية والاتجاه من اليمين إلى اليسار

مشاريع حسنات عربية أولًا. العربية ليست ترجمة تُضاف في النهاية، والواجهة العربية ليست الواجهة الإنجليزية معكوسة.

اللغة والاتجاه في HTML

اضبط lang وdir على عنصر html: lang="ar" dir="rtl" للعربية، وlang="en" dir="ltr" للإنجليزية. يفعل ذلك Layout.astro في القالب بحسب لغة الصفحة.
الاتجاه معلومة دلالية في HTML، لا مجرد تنسيق CSS.
للنص الذي يكتبه المستخدم ولا تعرف لغته، استخدم dir="auto"، أو العنصر <bdi> للأسماء داخل الجمل.
الروابط والأوامر والأكواد والأرقام اللاتينية داخل نص عربي قد تنقلب مواضعها. ضعها في عنصر بـ dir="ltr" أو داخل <code>، وجرّبها بنصوص حقيقية.

يدعم القالب العربية (الافتراضية) والإنجليزية:

الصفحات في src/pages/ar/ وsrc/pages/en/، والجذر يحوّل إلى /ar/.
النصوص في src/i18n/ar.json وsrc/i18n/en.json. أضف كل نص جديد إلى الملفين معًا، ولا تكتبه مباشرة في الصفحة.
في src/i18n/utils.ts: الدالة useTranslations(locale) لجلب النصوص، وgetDirection(locale) وisRTL(locale) للاتجاه، وgetTranslatedPath(path, locale) لرابط الصفحة نفسها في اللغة الأخرى.

---
import { useTranslations } from "@/i18n/utils";

const t = useTranslations("ar");
---
<h1>{t("hero.title")}</h1>

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

وفي CSS العادي: margin-inline-start بدل margin-left، وpadding-inline-end بدل padding-right، وinset-inline-start بدل left.

الأسهم والأيقونات الاتجاهية: سهم «التالي» يشير إلى اليسار في العربية. اقلبه، ولا تقلب الأيقونات التي لا اتجاه لها.
ترتيب القراءة: راجع أن يتبع ترتيب العناصر منطق القراءة العربي، لا أن يكون مرآة شكلية للإنجليزية.
الأرقام والتواريخ: اختر تنسيقًا واحدًا واضحًا، وجرّبه مع النص المحيط به.
الرسوم والصور التي فيها نص أو اتجاه.

استخدم خطًا عربيًا واضحًا، مثل IBM Plex Sans Arabic. انظر نظام التصميم.
اجعل ارتفاع السطر واسعًا، ولا تضف تباعدًا بين الحروف العربية.
اكتب بعربية فصيحة بسيطة، وجمل قصيرة، وفكرة واحدة في كل فقرة.
اطلب من متحدث أصلي أن يراجع النصوص في اللغتين، كما في مهمة مراجعة الترجمة والاتجاه.