RTL Direction
Dashpro supports both Left-to-Right (LTR) and Right-to-Left (RTL) layouts. This flexibility allows you to create dashboards in multiple languages and regions, including Arabic and Hebrew. Tailwind CSS, combined with custom directives, makes it simple to implement RTL in your project.
Quick Start
To enable RTL mode in Dashpro, you need to modify the HTML file by setting the <html> tag with both the lang="ar" (or your preferred RTL language) and the dir="rtl" attribute. This ensures the entire layout adapts to RTL properly.
<html lang="ar" dir="rtl">
After setting the RTL direction in your HTML, all elements within the page will follow RTL positioning automatically. However, you can also explicitly define styles to switch between LTR and RTL layouts dynamically using Tailwind utilities.
RTL vs LTR Custom Styling
When building layouts for both LTR and RTL, you may need to apply different positioning or margin classes. For example, a common adjustment is flipping from left to right, such as changing left-0 to right-0 in RTL. Tailwind makes this easy with the rtl: and ltr: prefixes. Here’s an example of how you can switch positioning based on the text direction:
<div class="ltr:left-0 rtl:right-0"></div>
Alternatively, for simpler layout changes, you can use more generalized Tailwind classes like ms-4 (margin start) and me-4 (margin end), which automatically adjust based on the document direction (LTR or RTL).
<div class="ms-4">Margin Start (auto-adapts to LTR/RTL)</div>
<div class="me-4">Margin End (auto-adapts to LTR/RTL)</div>
Conclusion
Enabling RTL support in Dashpro is simple and effective, allowing you to create dashboards in any language, including those that use right-to-left. Whether you're building a multilingual site or focusing on RTL-only projects, Tailwind's utilities and Dashpro's flexibility make it easy to adjust layouts and styles accordingly.