Supporting RTL languages
A multi-language setup might include a language with a different reading direction – not left-to-right (ltr) but right-to-left (rtl). To support and display these languages properly, some changes are necessary.
Set up the language
The first step is to specify the reading direction when setting up languages. To do so, add a
direction entry to your language array with a value of
rtl for right-to-left or
ltr for left-to-right (default).
Add the body CSS class
The second step is to add the reading direction as a body class e.g. in your header snippet. To fetch and output the current language's reading direction use
Modify your CSS
The biggest changes have to be made to your CSS. First you specify the reading direction for the body element when the
rtl class is applied:
Then you have to mirror every horizontal CSS layout positioning, alignment, padding, margins from left to right and from right to left when
body.rtl is applied:
Using SASS as CSS preprocessor
If you are using a CSS preprocessor like SASS, you can simplify this with some handy code: