Unlocking Global Storefronts: ESHOPMAN's Enhanced Right-to-Left Language Support

As an e-commerce platform designed to empower merchants globally, ESHOPMAN is committed to providing a seamless experience for storefront management, regardless of language or region. Our platform, built on Node.js/TypeScript and integrated with HubSpot CMS, ensures that managing your headless commerce operations is intuitive and efficient. A crucial aspect of this commitment is robust support for Right-to-Left (RTL) languages.

Recently, our vibrant ESHOPMAN community identified and proposed a significant enhancement to how our core UI components render and behave in RTL locales. This discussion highlights the dedication of our developer community to refining the ESHOPMAN experience for a truly global audience.

The Challenge: Navigating UI Layouts in RTL Languages

The ESHOPMAN Admin Hub, where you manage your storefronts and products within HubSpot, supports various languages, including RTL scripts like Arabic, Hebrew, and Persian. While the document's direction is correctly set to dir="rtl" for these locales, a core challenge emerged:

• Physical Direction Classes: ESHOPMAN's UI components were utilizing physical Tailwind CSS direction classes (e.g., ml- for margin-left, pr- for padding-right, left-0 for absolute positioning, text-left for text alignment, rounded-l for left-side rounding). In an RTL context, these physical directions cause elements to appear on the wrong side, leading to misaligned icons, incorrect spacing, and borders that don't follow the reading flow.
• Underlying UI Primitives: Many of the foundational UI primitives (such as those used for select menus, dropdowns, tooltips, popovers, tabs, and radio groups) were not inheriting the application's direction. This resulted in their keyboard navigation and positioning logic remaining Left-to-Right (LTR), creating a disjointed user experience.

This issue manifested across various parts of the Admin Hub, from data tables and dropdown menus to drawers and switches, impacting the overall usability for merchants operating in RTL languages.

Proposed ESHOPMAN Community Solution: A Three-Pronged Approach

The ESHOPMAN community has put forward a comprehensive plan to address these RTL rendering inconsistencies, ensuring that our UI components mirror correctly and behave intuitively in all supported languages. The proposed changes focus on:

1. Adopting Logical Tailwind Properties

Instead of physical direction classes, the ESHOPMAN core UI component library will transition to logical Tailwind properties. These properties are direction-aware and adapt automatically based on the document's reading direction. For instance, ms- (margin-start) will replace ml- (margin-left), and pe- (padding-end) will replace pr- (padding-right).

This transition will involve a systematic refactoring, potentially utilizing a codemod script to automate the conversion of existing physical classes to their logical counterparts, followed by targeted manual adjustments.

// Example: Transitioning from physical to logical classes
// Old (physical):
// 
...

// New (logical):
// 
...

2. Enhancing the I18nProvider for Direction Awareness

To ensure that underlying UI primitives also respect the reading direction, ESHOPMAN's I18nProvider will be enhanced. This provider, responsible for internationalization, will also render a Direction.Provider. The direction will be dynamically determined using a locale detection mechanism (e.g., from a useLocale hook), ensuring that all UI primitives inherit the correct dir="rtl" property when needed.

This integration ensures that elements like dropdown menus, tooltips, and popovers not only display correctly but also respond to keyboard navigation in a directionally appropriate manner.

3. Implementing ESLint Guards for Future Consistency

To prevent any regression and ensure that new UI development adheres to these internationalization best practices, an ESLint guard will be introduced into ESHOPMAN's development workflow. This linting rule will flag and reject the use of new physical direction classes, enforcing the adoption of logical properties across the codebase. This proactive measure will maintain the integrity of RTL support as ESHOPMAN continues to evolve.

Why This Matters for ESHOPMAN Merchants and Developers

This comprehensive approach to RTL support significantly enhances the ESHOPMAN experience:

• Global Reach: It empowers merchants to expand confidently into markets that primarily use RTL languages, offering a professional and localized experience for their administrative tasks.
• Improved Usability: A consistent and correctly mirrored UI in the Admin Hub means less frustration and more efficient storefront management for users in RTL locales.
• Development Best Practices: For developers extending ESHOPMAN or building custom components, this sets a clear standard for internationalization, fostering a robust and future-proof development environment.

The ESHOPMAN community's initiative to tackle this complex UI challenge demonstrates our platform's commitment to delivering a truly global and accessible headless commerce solution, tightly integrated with HubSpot's powerful ecosystem.