Localisation & RTL Support

Gymlium supports 14 languages, including right-to-left (RTL) languages like Arabic and Persian. Every template must fully support RTL layouts — this is a hard requirement enforced during review.

Supported languages

Code	Language	Direction
`en`	English	LTR
`ar`	Arabic	RTL
`fa`	Persian (Farsi)	RTL
`fr`	French	LTR
`de`	German	LTR
`es`	Spanish	LTR
`pt`	Portuguese	LTR
`it`	Italian	LTR
`nl`	Dutch	LTR
`tr`	Turkish	LTR
`ru`	Russian	LTR
`zh`	Chinese	LTR
`ja`	Japanese	LTR
`ko`	Korean	LTR

Key rules

Never hardcode user-facing text. Always use the t() function from useApp().
Never hardcode link paths. Always use localePath() to prefix paths with the active locale.
All templates must support RTL. The rtlSupported field in your manifest must be true.
Test with at least Arabic to verify RTL layouts work correctly.

Core utilities

The `t()` function

Translates a key into the user’s current language:


const { t } = useApp()
 
return <h1>{t('welcomeMessage')}</h1>
// English: "Welcome to My Gym"
// Arabic: "مرحبًا بك في صالتي الرياضية"

The `localePath()` function

Prefixes a path with the current locale:


const { localePath } = useApp()
 
return <a href={localePath('/about')}>About</a>
// English: href="/en/about"
// Arabic: href="/ar/about"

The `isRtl` flag

Tells you whether the current locale is RTL:


const { isRtl } = useApp()
 
return (
  <div style={{ textAlign: isRtl ? 'right' : 'left' }}>
    {/* content */}
  </div>
)

Prefer CSS-based RTL handling (using [dir="rtl"] selectors) over JavaScript-based approaches. CSS handles most RTL adaptations automatically and performs better.

Section guides

This section is split into focused guides:

RTL Layout — CSS and layout patterns for right-to-left support
Working with Translations — using t() and locale-aware formatting
Font Support — available font families and RTL font considerations
Bidirectional Components — navigation, sliders, forms, and icons