RTL

@better-translate/core tiene soporte integrado para RTL. Declaras qué idiomas son de derecha a izquierda en la configuración, luego consultas la dirección en tiempo de ejecución usando getDirection o isRtl.

Cuándo usarlo

Usa el soporte para RTL cuando tu aplicación necesite soportar idiomas como árabe, hebreo, persa o urdu. Los helpers de dirección te brindan una forma tipada de establecer el atributo dir en elementos HTML sin necesidad de gestionar una tabla de búsqueda separada.

Declarar direcciones

Añade una clave directions a tu llamada configureTranslations. Cualquier idioma que omitas usará "ltr" por defecto.

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});

Consultar la dirección

Llama getDirection para obtener "ltr" o "rtl" para cualquier idioma. Llama isRtl para obtener un atajo booleano.

tsx

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

Sobrescritura por llamada

Pasa config.rtl para sobrescribir la dirección configurada para una sola llamada. Esto no afecta la búsqueda de mensajes, solo cambia qué dirección se resuelve.

tsx

1// Forzar LTR incluso para un idioma RTL2translator.t("greeting", {3  locale: "ar",4  config: { rtl: false },5});67// Forzar RTL incluso para un idioma LTR8translator.t("greeting", {9  locale: "en",10  config: { rtl: true },11});

Aplicar a HTML

Usa getDirection al renderizar el atributo dir en elementos raíz.

tsx

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 específico5<div dir={translator.getDirection({ locale })}>6  {t("greeting")}7</div>

Archivos fuente clave

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

Continuar con

Ver el adaptador Core Ver el adaptador Next.js