تخطَّ إلى المحتوى
مطوّرو دكانالتوثيق
Englishتسجيل الدخول

العربية أولاً

الاتجاه واللغة، وملفات الترجمة والمرشّح t، والتواريخ والأرقام، والخطوط، وقائمة فحص RTL.

آخر تحديث 2 أيلول 2026قراءة 2 د
في هذه الصفحة

هذه الصفحة لمن يصمّم ثيماً يبيع في سوق عربي. واجهات دكان عربية أولاً واتجاهها RTL افتراضياً، والإنجليزية طبقة ثانية تُفعَّل عند الطلب. في نهايتها تعرف كيف تبني اتجاهاً صحيحاً، ونصوصاً مترجمة، وأرقاماً وتواريخ محلية، وخطاً عربياً سليماً.

الاتجاه واللغة#

يحمل request.locale القيمة ar أو en، وrequest.direction القيمة rtl أو ltr. اربطهما بجذر المستند ولا تثبّت اتجاهاً في CSS:

layout/theme.liquidLiquid
<html dir="{{ request.direction }}" lang="{{ request.locale }}">

صمّم RTL أولاً وافحص LTR ثانياً. استخدم الخصائص المنطقية حصراً (margin-inline-start، padding-inline، inset-inline-end، text-align: start) حتى لا تحتاج إلى ورقة أنماط ثانية للاتجاه الآخر.

ملفات الترجمة والمرشّح t#

كل نص يراه الزائر يمرّ عبر {{ 'key' | t }} وقيمته في locales/ar.json (وlocales/en.json إن دعمت الإنجليزية). لا تكتب العربية في القوالب.

locales-ar.jsonJSON
{
  "nav": {
    "home": "الرئيسية",
    "cart": "السلة"
  },
  "product": {
    "add_to_cart": "أضف إلى السلة",
    "sold_out": "نفد المخزون"
  },
  "footer": {
    "powered_by": "مدعوم من دكان"
  }
}
snippets/buy-box.liquidLiquid
<button type="button" data-dukkan-add-to-cart data-variant-id="{{ variant.id }}">
  {{ 'product.add_to_cart' | t }}
</button>
  • تُسطَّح الملفات إلى مفاتيح منقّطة (product.add_to_cart)، فالتداخل حرّ.
  • تُختار جداول اللغة الحالية عند التصيير؛ المفتاح الغائب يعيد نص المفتاح نفسه ولا يرمي خطأ، فتكتشفه في المعاينة بسهولة.
  • إعدادات التاجر النصية التي تحمل localized: true تصل بقيمتها الإنجليزية تلقائياً عندما يزور القارئ بالإنجليزية ووجدت ترجمة في مستند الإعدادات؛ راجع مخطط الإعدادات.

الأرقام#

  • قيم money تُعرض بأرقام غربية افتراضياً، مع رمز العملة قبل المبلغ وتغليف ثنائي الاتجاه كي لا ينقلب السعر داخل سطر عربي.
  • أعلن إعداداً منطقياً بالمعرّف arabic_numerals لتمنح التاجر الأرقام المشرقية: عند تفعيله تعرض مرشّحات المال الأرقام ٠١٢٣٤٥٦٧٨٩ والفواصل العربية، ويبقى money_amount غربياً للاستهلاك الآلي. اختم الجذر بالسمة ليتطابق محوّل العملة على المتصفح:
layout/theme.liquidLiquid
<html dir="{{ request.direction }}" lang="{{ request.locale }}"{% if theme_settings.arabic_numerals %} data-dukkan-numerals="arabic"{% endif %}>
  • الأعداد الأخرى (product.sold_count، pagination.total) تصل أعداداً خاماً؛ اعرضها كما هي أو نسّقها بمرشّحات Liquid القياسية.

التواريخ#

تواريخ المنصّة (مثل review.created_at) بصيغة YYYY-MM-DD. حوّلها إلى نص مقروء باللغة الحالية:

Liquid
{{ review.created_at | date_localized: request.locale }}

بالعربية تظهر أسماء الأشهر الشامية («٢٧ آب ٢٠٢٦»)، وبالإنجليزية الصيغة الإنجليزية العادية. أي قيمة ليست بصيغة التاريخ تمرّ كما هي.

الخطوط#

  • الخط الموصى به IBM Plex Sans Arabic بأوزان 400 و500 و600؛ ضمّنه كملفات woff2 في assets/ أو اعتمد على خطوط النظام العربية.
  • ارتفاع السطر 1.7 إلى 1.9 للنص العربي؛ لا تستخدم letter-spacing مع العربية لأنه يقطع الوصلات.
  • أحجام العناوين العربية أصغر بدرجة من نظيرتها اللاتينية عند الوزن نفسه؛ اضبط المقياس على الحرف العربي أولاً.
  • المعرّفات الفنية (رمز التتبع، رمز الخصم، رقم الهاتف) اعرضها داخل عنصر بـ unicode-bidi: plaintext أو dir="ltr" كي لا تنقلب.

قائمة فحص RTL#

  • dir وlang من request لا مثبّتان.
  • لا left/right في CSS إلا لما يجب ألا ينعكس (مثل الصور).
  • الأيقونات الاتجاهية (أسهم، شيفرون) تنعكس في RTL.
  • الأسعار لا تنقلب داخل الجمل العربية (استخدم money لا التنسيق اليدوي).
  • النماذج والحقول تُحاذى إلى البداية، والأرقام داخلها dir="ltr".
  • كل النصوص عبر t، ولا نص عربي في القوالب أو CSS.
  • الصفحة تُقرأ على الجوال بعرض 360 بكسل أولاً.