RTL
@better-translate/core incluye soporte RTL integrado.
Declaras qué locales son de derecha a izquierda en la configuración y consultas la dirección en runtime
con getDirection o isRtl.
Cuándo usarlo
Usa el soporte RTL cuando tu app deba admitir idiomas como árabe, hebreo, persa o urdu.
Los helpers de dirección te dan una forma tipada de establecer el atributo dir en elementos HTML
sin mantener una tabla de búsqueda aparte.
Declarar direcciones
Añade la clave directions a tu llamada configureTranslations. Cualquier locale que omitas usa "ltr" por defecto.
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});Consultar la dirección
Llama a getDirection para obtener "ltr" o "rtl" de cualquier locale.
Llama a isRtl para un atajo booleano.
1translator.getDirection({ locale: "ar" }); // "rtl"2translator.getDirection({ locale: "en" }); // "ltr"34translator.isRtl({ locale: "ar" }); // true5translator.isRtl({ locale: "en" }); // falseSobrescritura por llamada
Pasa config.rtl para sobrescribir la dirección configurada en una sola llamada.
No afecta a la búsqueda del mensaje; solo cambia la dirección resuelta.
1// Forzar LTR incluso en un locale RTL2translator.t("greeting", {3 locale: "ar",4 config: { rtl: false },5});67// Forzar RTL incluso en un locale LTR8translator.t("greeting", {9 locale: "en",10 config: { rtl: true },11});Aplicar en HTML
Usa getDirection al renderizar el atributo dir en elementos raíz.
1// En el elemento html (p. ej. en un layout de Next.js)2<html lang={locale} dir={translator.getDirection({ locale })}>34// En un contenedor concreto5<div dir={translator.getDirection({ locale })}>6 {t("greeting")}7</div>Archivos fuente clave
packages/core/src/types.tspackages/core/src/create-configured-translator.tspackages/core/src/normalize-config.ts