RTL Language Support

Avenue Luxe includes comprehensive right-to-left (RTL) language support that automatically detects RTL languages and applies appropriate layout, typography, and component adjustments.

Supported Languages

Language	Code	Font Support
Arabic	`ar`	Tajawal, Dubai, Naskh, Kufi
Hebrew	`he`	Rubik, Alef, Open Sans Hebrew
Persian (Farsi)	`fa`	Vazir, Samim, Tahoma
Urdu	`ur`	Noto Nastaliq Urdu

Automatic Features

Detection

Detects RTL languages based on locale code
Sets dir="rtl" attribute on HTML element
Applies RTL-specific CSS automatically

Layout Adjustments

Text alignment (right-aligned)
Flexbox and grid direction reversal
Navigation menu reversal
Cart drawer slides from left
Modal positioning adapted
Form element alignment

Typography

Language-specific font families
Increased line-height for readability
Letter spacing adjustments

Component Support

Product cards (mirrored layout)
Breadcrumbs (reversed separators)
Sliders and carousels (RTL navigation)
Search inputs (icon on left)
Modals (close button on left)

Icon Handling

Automatic flipping of directional icons (arrows, chevrons)
Control with data-flip-rtl (force flip) or data-no-flip (prevent flip) attributes

Configuration

Navigate to Theme Settings > RTL Language Support:

Setting	Description
Enable RTL Support	Master toggle
Flip Directional Icons	Auto-flip arrows and chevrons
Arabic Font Family	Choose from Tajawal, Dubai, Naskh, Kufi
RTL Line Height	Adjust spacing (1.4 - 2.0)
Reverse Cart Drawer	Position cart on left side
Reverse Mobile Menu	Position menu on right side
Mirror Product Gallery	Reverse gallery navigation

Customization

Adding Custom RTL Styles

[dir="rtl"] .my-custom-component {
  flex-direction: row-reverse;
  text-align: right;
}

Numbers in RTL

Numbers remain left-to-right automatically:

[dir="rtl"] .price {
  direction: ltr;
  display: inline-block;
}

Performance

RTL CSS only loads for RTL locales (~2KB gzipped)
RTL detection runs once on page load
No measurable impact on First Contentful Paint
Zero Cumulative Layout Shift

Common Issues

Icons not flipping: Add data-flip-rtl attribute to the SVG element.

Custom component not mirroring: Add [dir="rtl"] CSS rule with flex-direction: row-reverse.

Font not loading: Check font family setting in Theme Settings > RTL.

Numbers display incorrectly: Numbers should remain LTR (this is handled automatically).

SEO Considerations

Automatic hreflang tags for language alternates
Proper lang attribute on HTML element
Correct dir attribute for text direction
Language-aware structured data