🚀 A new era: Kirby 4 Get to know
Skip to content

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).

/site/languages/ar.php
<?php

return [
  'code'    => 'ar',
  'name'    => 'Arabic',
  'locale'  => 'ar_EG',
  'url'     => '/ar',
  'direction' => 'rtl'
];

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 $kirby->language()->direction().

<body class="<?php echo $kirby->language()->direction() ?>">

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:

body.rtl {
  direction: rtl;
}

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:

/* left to right */
div {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 2em;
  padding: 1em 3em 1em 0;
  border-right: 1px solid #eee;
}

/* right to left */
body.rtl div {
  right: 0;
  margin-right: 2em;
  padding: 1em 0 1em 3em;
  border-left: 1px solid #eee;
}

Using SASS as CSS preprocessor

If you are using a CSS preprocessor like SASS, you can simplify this with some handy code:

div {
  /* general */
  position: absolute;
  top: 0;

  /* left to right */
  body.ltr & {
    left: 0;
    margin-left: 2em;
    padding: 1em 3em 1em 0;
    border-right: 1px solid #eee;
  }

  /* right to left */
  body.rtl & {
    right: 0;
    margin-right: 2em;
    padding: 1em 0 1em 3em;
    border-left: 1px solid #eee;
  }
}