Drupal 8 multilingual tidbits 6: easier right to left styling

Up to date as of October 16th, 2015.

One of the strongly supported language features of Drupal is right to left (RTL) language support. For some Drupal core versions, introducing an RTL language on the site is easy. Language settings include the choice of left to right and right to left orientation per language. This is still the same in Drupal 8.

There are two notable improvements though. Language settings being at the front of the installer, we have clean support for right to left orientation from picking the install profile even:

Also, Drupal 6 and 7 had a special solution for writing right to left CSS. For any CSS file in the system (file.css), you could have an RTL counterpart (file-rtl.css) that was automatically added to the page when needed. This was a Drupalism and browsers got much better at supporting attribute selectors in the past years, so now the right to left CSS is all integrated in the actual CSS files. You should now use attribute selectors such as [dir="rtl"] to target specific parts of the CSS at RTL displays. By keeping the right to left styles close to the base CSS, there is less chance for mistakes and missing or out of sync RTL styling, so we hope this will result in even better RTL support!

See https://drupal.org/node/2032405 for more information and code examples.

Issues to work on

  • DONE! Ok, ok, I cheated a bit with the above screenshot. There is still a bug with the sidebar position of the installer in RTL. See https://drupal.org/node/2033137 - should be an easy one to fix though
  • One more thing that you may notice on the screenshot is that even English text got the RTL treatment in terms of the placement of the end of sentence period. This is not a very easy problem to resolve. An issue is going for over two years at https://drupal.org/node/1165476 to resolve this by printing additional language and direction information in this case, so the browser knows which parts are not in the (RTL) language requested. This would be useful for left to right settings also to mark the language of parts that are untranslated. Creative ideas welcome!
  • There still may be missing RTL styles, especially on the administration interface. See https://www.drupal.org/node/2359331 for a collection of issues dealing with the situation.


yannickoo's picture

There is already a patch for the rtl issue ;)

Ahmed's picture

i can't edit 1600+ lines css file to add [dir="rtl"] to every selector. the old way of adding file-rtl.css file to the theme is easier.
is there any way to use this method with drupal 8?

Gábor Hojtsy's picture

You can just add [dir="rtl"] to all selectors in the old -rtl.css file and append the old file to the base CSS. It will not help with the maintainability of your CSS but it will work the same way.

Add new comment