Coming Soon

The Localization feature is under active development and not yet available. The information below describes planned functionality.

RTL Support

BreakGround supports right-to-left (RTL) languages such as Arabic, Hebrew, Farsi, and Urdu. When an RTL locale is active, the SDK automatically adjusts content layout and positioning.

Enabling RTL for a Locale

RTL support is configured per locale. When creating or editing a locale in Settings > Localization, set the isRtl flag to true:

Property	Value
code	ar
name	Arabic
isRtl	true

The SDK reads this flag at runtime and applies RTL layout rules whenever that locale is active.

How the SDK Adjusts Layout

When an RTL locale is detected, the SDK applies the following changes:

• Text direction -- all rendered content uses direction: rtl and text-align: right as the base.
• Tooltip positioning -- tooltips that would normally appear to the right of a target element are mirrored to appear on the left, and vice versa. Vertical positioning (top/bottom) is unchanged.
• Modal and slideout alignment -- internal content alignment within modals and slideouts is flipped. Close buttons and action buttons swap sides.
• Step navigation -- "Next" and "Back" button positions are swapped so that forward progression follows the RTL reading direction (right to left).
• Progress indicators -- step progress bars and numbered indicators flow from right to left.

Positioning Adjustments

The SDK mirrors horizontal positioning automatically. The mapping works as follows:

LTR Position	RTL Equivalent
Left	Right
Right	Left
Top-left	Top-right
Bottom-left	Bottom-right
Top-right	Top-left
Bottom-right	Bottom-left

Vertical positioning (top, bottom, center) remains the same in both modes.

Mixed-Direction Content

If your content includes LTR text within an RTL layout (for example, code snippets, URLs, or brand names), wrap those segments in a <span dir="ltr"> tag within your content fields. The SDK preserves inline direction overrides.

Testing RTL Layouts

To verify RTL rendering:

1. Add an RTL locale (e.g., Arabic) under Settings > Localization with isRtl enabled.
2. Add translations for a flow or tooltip in that locale using the Translation Editor.
3. Initialize the SDK with the RTL locale:

   BreakGround.init({
     apiKey: "wfx_your_key",
     locale: "ar",
   });

4. Verify that tooltips, modals, and flow steps display with correct RTL alignment.
5. Walk through multi-step flows to confirm navigation button placement and progress indicator direction.

Test with actual translated content rather than placeholder text to catch layout issues caused by longer or shorter strings in the target language.