RTL
@better-translate/coreにはRTLサポートが組み込まれています。
configで右から左に書くロケールを宣言し、getDirectionまたはisRtlを使用して
実行時に方向をクエリします。
使用するタイミング
アプリがアラビア語、ヘブライ語、ペルシア語、ウルドゥー語などの言語をサポートする必要がある場合にRTLサポートを使用します。
directionヘルパーを使用すると、別のルックアップテーブルを管理せずに、
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.tspackages/core/src/create-configured-translator.tspackages/core/src/normalize-config.ts