Automactially set direction and text-align based on rtl or ltr languages

We can set direction property for body tag to instruct direction either rtl to ltr. Similarly we can set text-align properties for individual elements.

Is there any way to minimize or centralize coding efforts to design an application which can support both LTR(English) and RTL(Arabic) languages.
Its OK, I can write separate css for both directions, but what could be the best way to switch between these css(e.g, in master page load event)?

There also comes an exceptional case, like in English language I need first column of grid to display as text-align:left (it contains text), but remaining columns should be display with text-align:left, because that columns contains numeric values. Similarly the case will be reverse for Arabic language.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You can target elements under <body> where direction is set to a specific value like so:

body span { text-align: left } /* default value */
body[direction="rtl"] span { text-align: right } /* override for rtl languages */

However if you have a lot of elements using text-align, this can get tiresome. Perhaps you could make a class for text-align using the same method:

.aligned { text-align: left }
body[direction="rtl"] .aligned { text-align: right }

Finally, for more complex situations you may find RTLCSS useful:

RTLCSS is a framework for converting Left-To-Right (LTR) Cascading
Style Sheets(CSS) to Right-To-Left (RTL).

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply