RTL

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

متى تستخدمه

استخدم دعم الاتجاه من اليمين لليسار عندما يحتاج تطبيقك إلى دعم لغات مثل العربية، العبرية، الفارسية، أو الأردوية. توفر لك دوال الاتجاه طريقة مكتوبة لتعيين سمة 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

المتابعة مع

اطلع على محول Core اطلع على محول Next.js

RTL