RTL

@better-translate/core has built-in RTL support. You declare which locales are right-to-left in config, then query direction at runtime using getDirection or isRtl.

When to use it

Use RTL support when your app needs to support languages like Arabic, Hebrew, Persian, or Urdu. The direction helpers give you a typed way to set the dir attribute on HTML elements without managing a separate lookup table.

Declaring directions

Add a directions key to your configureTranslations call. Any locale you omit defaults to "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});

Querying direction

Call getDirection to get "ltr" or "rtl" for any locale. Call isRtl to get a boolean shorthand.

tsx

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

Per-call override

Pass config.rtl to override the configured direction for a single call. This does not affect message lookup , it only changes what direction is resolved.

tsx

1// Force LTR even for an RTL locale2translator.t("greeting", {3  locale: "ar",4  config: { rtl: false },5});67// Force RTL even for an LTR locale8translator.t("greeting", {9  locale: "en",10  config: { rtl: true },11});

Applying to HTML

Use getDirection when rendering the dir attribute on root elements.

tsx

1// On the html element (e.g. in a Next.js layout)2<html lang={locale} dir={translator.getDirection({ locale })}>34// On a specific container5<div dir={translator.getDirection({ locale })}>6  {t("greeting")}7</div>

Key source files

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

Continue with

See the Core adapter See the Next.js adapter

Declaring directions

Add a directions key to your configureTranslations call. Any locale you omit defaults to "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});

Per-call override

Pass config.rtl to override the configured direction for a single call. This does not affect message lookup , it only changes what direction is resolved.

tsx

1// Force LTR even for an RTL locale2translator.t("greeting", {3  locale: "ar",4  config: { rtl: false },5});67// Force RTL even for an LTR locale8translator.t("greeting", {9  locale: "en",10  config: { rtl: true },11});

1// On the html element (e.g. in a Next.js layout)2<html lang={locale} dir={translator.getDirection({ locale })}>34// On a specific container5<div dir={translator.getDirection({ locale })}>6 {t("greeting")}7</div>