Summary
When Spotlight JS is embedded into pages using right-to-left (RTL) languages such as Arabic or Hebrew, the gallery interface renders incorrectly. The layout, controls, and horizontal gestures do not behave as expected in RTL environments.
Problem
The application currently assumes a left-to-right (LTR) layout. As a result, UI components break or misalign when the host page uses direction: rtl, and gesture handling becomes inconsistent.
Possible Solutions
A) Full RTL Support
Implement native RTL support across the entire interface, including:
- Proper mirroring of UI components
- Correct handling/inversion of horizontal gestures
- Consistent layout behavior in RTL contexts
This option provides the best user experience but significantly increases development effort and bundle size.
B) LTR Fallback (Workaround)
Force the Spotlight overlay to always render in LTR mode, regardless of the underlying page direction.
Example fallback:
#spot-overlay {
direction: ltr;
}This is easier to maintain and avoids breaking layouts, but does not provide true RTL support.
Expected Outcome
The gallery should display and function correctly on RTL pages—either through complete RTL integration or by enforcing an LTR-only overlay as a safe fallback.
Summary
When Spotlight JS is embedded into pages using right-to-left (RTL) languages such as Arabic or Hebrew, the gallery interface renders incorrectly. The layout, controls, and horizontal gestures do not behave as expected in RTL environments.
Problem
The application currently assumes a left-to-right (LTR) layout. As a result, UI components break or misalign when the host page uses
direction: rtl, and gesture handling becomes inconsistent.Possible Solutions
A) Full RTL Support
Implement native RTL support across the entire interface, including:
This option provides the best user experience but significantly increases development effort and bundle size.
B) LTR Fallback (Workaround)
Force the Spotlight overlay to always render in LTR mode, regardless of the underlying page direction.
Example fallback:
This is easier to maintain and avoids breaking layouts, but does not provide true RTL support.
Expected Outcome
The gallery should display and function correctly on RTL pages—either through complete RTL integration or by enforcing an LTR-only overlay as a safe fallback.