Adapting your site for right-to-left reading

In some parts of the world people read from right to left. Initually it might be hard to imagine what changes your code needs to go through, to make it more apealing but no worries, it’s quite simple.

1. By default all text is left aligned. You can change this by adding dir=”rtl” attribute to your body tag. The new default would be text-align: right; Now, if you have specified somewhere in your css text-align: left, you would need to overwrite it explicitly.
– Don’t like extra attributes in your html? No worries – you can do it through css like so:

body {
    direction: rtl;

2. Change float left to float right and the other way around.
3. Change margin/padding-left to margin/padding-right and don’t forget to reset the previous rule.
4. Make sure your carousels slide rtl, too. Inspect the JavaScript code you use and change the logic. If you use Owl Carousel or FlexSlider, you can just add “rtl: true” to your options where you initialize.
Don’t go to crazy to flip the order and direction of buttons on video players as that’s actually uneccessary!
5. Elements with position: absolute need their lefts to be overwritten to rights or the other way arround.
6. Bootstrap 3 unfortunately doesn’t have support for rtl. Yet, you can use a special theme – Bootstrap RTL or Bootstrap 3 Arabic

Please, share your experience. I actually never had a task where I needed to adapt a web site for rtl, but it has always been interesting to me how it can be done.

Leave a Reply

Your email address will not be published. Required fields are marked *