RTL and Logical Properties
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The portfolio project implements a robust internationalization (i18n) system that supports both Left-to-Right (LTR) and Right-to-Left (RTL) layouts. This is primarily achieved through a combination of Next.js server-side locale detection and the application of CSS logical properties. By using logical properties instead of physical directions (e.g., start instead of left), the interface automatically adjusts its orientation based on the active language, such as English or Persian (Farsi).
The system ensures that UI components like the desktop widgets, window management system, and mobile navigation maintain visual consistency and usability across different linguistic contexts.
Sources: app/layout.tsx:21-35, messages/fa.json, messages/en.json
Architecture and Data Flow
The RTL implementation begins at the root of the application. The system detects the current locale and dynamically sets the document's direction attribute.
Locale-Driven Directionality
The RootLayout component serves as the entry point for directionality. It retrieves the current locale using getLocale() and determines whether the direction (dir) should be rtl (for "fa") or ltr (for other languages). This direction is then applied to the <html> element.
The flow ensures that all child components inherit the correct text and layout direction automatically.
Sources: app/layout.tsx:21-27
Implementation of Logical Properties
The project utilizes Tailwind CSS and standard CSS logical properties to handle bidirectional layouts without manual style overrides.
Spatial Positioning and Spacing
Instead of using physical directions like left or right, the codebase utilizes logical equivalents. This allows elements like widgets to be positioned relative to the "start" of the reading line.
| Physical Property | Logical Property | Usage in Project |
|---|---|---|
left / right | start / end | Positioning widgets and resize handles. |
padding-left | padding-inline-start | Element spacing. |
margin-right | margin-inline-end | Gap management. |
Sources: features/desktop/components/Widgets.tsx:106, features/desktop/components/Window.tsx:127, components.json:13
Component-Specific Adjustments
Certain components require explicit transformations when the direction changes. For example, in the mobile view, navigation icons are rotated 180 degrees when the RTL direction is active to maintain intuitive navigation flow.
// Example of directional rotation in MobileHome.tsx
<ChevronLeft className="size-6 rtl:rotate-180" />
Sources: features/desktop/components/MobileHome.tsx:23
Localization and Formatting
RTL support extends beyond layout to include data formatting and content translation.
Number and Date Formatting
The system uses the Intl API to ensure that numbers and dates are formatted according to the specific locale. This is particularly evident in the Widgets component, where the calendar and weather data use locale-aware formatters.
Translation Mappings
The project maintains separate JSON files for English (en.json) and Persian (fa.json). These files provide the text content that populates the RTL-ready UI.
| Feature | English (en.json) | Persian (fa.json) |
|---|---|---|
| Language Label | Language | زبان |
| Close Window | Close | بستن |
| Weather Condition | Sunny | آفتابی |
Sources: messages/en.json, messages/fa.json
Conclusion
The implementation of "RTL and Logical Properties" in this project provides a seamless user experience for both English and Persian users. By anchoring the layout logic in the root configuration and utilizing logical CSS properties, the application avoids the maintenance overhead of directional stylesheets while ensuring technical accuracy in localized data presentation.