Localization and RTL

Localization and RTL

Batoi UIF 3 uses browser-native Intl APIs and CSS logical properties. Applications own translated content; UIF supplies bounded locale configuration, formatting helpers, message interpolation, and direction handling without shipping locale data or a translation runtime.

import {
  applyLocale,
  configureLocale,
  formatUIFCurrency,
  translateUIFMessage,
} from '@batoi/uif-core';

configureLocale({
  locales: ['ar-EG', 'en'],
  timeZone: 'Africa/Cairo',
  currency: 'EGP',
  messages: { total: 'الإجمالي: {value}' },
});

applyLocale(document.documentElement);
const amount = formatUIFCurrency(1250);
const label = translateUIFMessage('total', 'Total: {value}', { value: amount });

applyLocale() sets the primary language and the derived ltr or rtl direction on the target. Number, currency, and date helpers use the active locale configuration. Message interpolation returns plain strings; continue rendering untrusted values as text.

Logical-Direction Layouts

• Prefer uif-text-start and uif-text-end over physical left and right alignment.
• Use logical margin and padding helpers such as uif-ms-*, uif-me-*, uif-ps-*, and uif-pe-*.
• Verify navigation, controls, carousels, icons, tables, validation, focus order, and responsive shells in both LTR and RTL.
• Keep the compatibility utilities uif-text-left and uif-text-right only where physical alignment is intentional.
• Do not infer a user's language or direction from personal data when the application already has an explicit locale preference.

Localization changes presentation and formatting. It does not replace translated product content, server-side locale validation, or authorization.