CSS RTL Cheat Sheet
As the world becomes more interconnected, creating websites and applications that cater to a global audience is increasingly important. This includes supporting languages that are read from right to left (RTL), such as Arabic and Persian. By using the techniques mentioned below, you can write CSS only once and have it work for both LTR and RTL languages, making your development process more efficient and your applications more accessible.
Direction Property
The direction property in CSS is essential for setting the text direction for an element. It can take three values:
ltr: Sets the text direction to left-to-right.rtl: Sets the text direction to right-to-left.auto: Dynamically sets the text direction based on the content or the parent element's direction.
Using direction: auto; is particularly useful when you want the text direction to automatically adjust based on the language of the content.
CSS Properties for RTL
| Property | LTR Example | RTL Equivalent |
|---|---|---|
| Text Alignment Left | text-align: left; |
text-align: start; |
| Text Alignment Right | text-align: right; |
text-align: end; |
| Margin Left | margin-left: 20px; |
margin-inline-start: 20px; |
| Margin Right | margin-right: 20px; |
margin-inline-end: 20px; |
| Padding Left | padding-left: 10px; |
padding-inline-start: 10px; |
| Padding Right | padding-right: 10px; |
padding-inline-end: 10px; |
| Border Left | border-left: 10px; |
border-inline-start: 10px; |
| Border Right | border-right: 10px; |
border-inline-end: 10px; |
| Border Radius | border-top-left-radius: 10px; |
border-start-start-radius: 10px; |
border-top-right-radius: 10px; |
border-start-end-radius: 10px; |
|
border-bottom-left-radius: 10px; |
border-end-start-radius: 10px; |
|
border-bottom-right-radius: 10px; |
border-end-end-radius: 10px; |
|
| Positioning Left | left: 30px; |
inset-inline-start: 30px; |
| Positioning Right | right: 30px; |
inset-inline-end: 30px; |
Conclusion
Designing for RTL languages can be straightforward if you know which properties to adjust. By using this cheat sheet, you can ensure your website or application is accessible and user-friendly for RTL language users. Embrace the global audience by considering RTL support in your design and development process.
For an easy and practical solution, you can use the online RTL converter available at the following link: habibhinn.com/rtl-converter . This tool allows you to quickly convert your LTR CSS code to RTL, saving you time and ensuring consistency across languages.
Happy coding!