RTL

@better-translate/core には RTL サポートが組み込まれています。設定で右から左のロケールを宣言し、getDirection や isRtl でランタイムに方向を問い合わせます。

使うタイミング

アラビア語、ヘブライ語、ペルシア語、ウルドゥー語などの言語をサポートする必要があるときに RTL サポートを使います。方向ヘルパーにより、別のルックアップ表なしで HTML 要素の dir 属性を型安全に設定できます。

方向の宣言

configureTranslations に directions キーを追加します。省略したロケールは "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// RTL ロケールでも LTR を強制2translator.t("greeting", {3  locale: "ar",4  config: { rtl: false },5});67// LTR ロケールでも RTL を強制8translator.t("greeting", {9  locale: "en",10  config: { rtl: true },11});

HTML への適用

ルート要素の dir 属性を描画するときは getDirection を使います。

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 アダプターを見る