RTL

يتضمن @better-translate/core دعم RTL مدمجًا. تُعلن في الإعداد أي الإعدادات المحلية من اليمين إلى اليسار، ثم تستعلم عن الاتجاه في وقت التشغيل باستخدام getDirection أو isRtl.

متى تستخدمه

استخدم دعم RTL عندما يحتاج تطبيقك لغات مثل العربية أو العبرية أو الفارسية أو الأردية. تمنحك مساعدات الاتجاه طريقة مكتوبة الأنواع لتعيين سمة dir على عناصر HTML دون إدارة جدول بحث منفصل.

إعلان الاتجاهات

أضف مفتاح directions إلى استدعاء configureTranslations. أي إعداد محلي تُهمله يكون افتراضيًا "ltr".

tsx

1import { configureTranslations } from "@better-translate/core";23const translator = await configureTranslations({4  availableLocales: ["en", "ar"] as const,5  defaultLocale: "en",6  messages: { en, ar },7  directions: {8    ar: "rtl",9  },10});

الاستعلام عن الاتجاه

استدعِ getDirection للحصول على "ltr" أو "rtl" لأي إعداد محلي. استدعِ isRtl للحصول على اختصار منطقي.

tsx

1translator.getDirection({ locale: "ar" }); // "rtl"2translator.getDirection({ locale: "en" }); // "ltr"34translator.isRtl({ locale: "ar" }); // true5translator.isRtl({ locale: "en" }); // false

تجاوز لكل استدعاء

مرّر config.rtl لتجاوز الاتجاه المُعدّ لاستدعاء واحد. لا يؤثر ذلك على البحث عن الرسالة، بل يغيّر فقط الاتجاه المُحلَّ.

tsx

1// فرض LTR حتى لإعداد محلي RTL2translator.t("greeting", {3  locale: "ar",4  config: { rtl: false },5});67// فرض RTL حتى لإعداد محلي LTR8translator.t("greeting", {9  locale: "en",10  config: { rtl: true },11});

التطبيق على HTML

استخدم getDirection عند عرض سمة dir على العناصر الجذرية.

tsx

1// على عنصر html (مثلًا في تخطيط Next.js)2<html lang={locale} dir={translator.getDirection({ locale })}>34// على حاوية محددة5<div dir={translator.getDirection({ locale })}>6  {t("greeting")}7</div>

ملفات المصدر الرئيسية

packages/core/src/types.ts
packages/core/src/create-configured-translator.ts
packages/core/src/normalize-config.ts

تابع مع

محول الأساس محول Next.js