Enabling RTL display standard for Wordpress

Enable RTL support for Wordpress

In fact, vast majority of websites are now developed supporting multilingual functionality. But it can turn out to be a problem, if there’s a need to apply different writing systems. So in this blog post we will tell, how to set up different page display standards on your website.

In general, LTR (left-to-right) and RTL (right-to-left) mean writing standart. But in this blog post we will consider LTR and RTL as pages display standards. For example, here is a screenshot of one website in English and Hebrew:

As we see, the pages look like a mirror reflection. So, if the website you’re working with, should be displayed in Hebrew, Arabic or some other rare right-to-left script (Aramaic, Southern Balochi, Bakthiari, Sorani, Dhivehi, Persian, Gilaki, Kurdish, Mazanderani, Western Punjabi, Pashto, Sindhi, Uyghur, Urdu, Yiddish), you need your website to be support RTL standards. In this case you will probably need simultaneous support of RTL and LTR, for example, support of English and Hebrew. You can apply one of following practices:

  • Create separate css files for LTR and RTL (which means, that you have to enable only the one you need).

Advantages: you need to upload needed file just once.

Disadvantages: any changes in css file have to be duplicated (even if they do not influence page display standards).

  • Create additional css file for RTL (this means, that additional css file is enabled. This file rewrites from the main css file only those characteristics, that depend on page display standard).

Advantages: You don’t have to duplicate the changes, which do not have impact on page display standart while changing css file.

Disadvantages: Two files instead of one will be uploaded for displaying the RTL script.

  • Enable RTL and LTR support in one file.

Advantages: Just one file.

Disadvantages: Greater amount of code in one file, which creates the risk of making a mistake while changing anything.

If you have css file for LTR and need to create another one for RTL, you should copy and rename the original file and rewrite the characteristics, that influence the writing standards. Similarly to that we do with additional css file (we leave just those characteristics, which should be rewritten). It is done in such a way:

float: left should be replaced with float: right; margin-right with margin-left; padding: 10px 30px 5px 0 with padding: 10px 0 5px 30px and so on.

It could take quite much time, if you have much code in css file. Those changes are mechanical and there’s a clear logic in this process, so you might want to use specific resources to do this work for you. Here’s some examples of such resources:

So getting RTL css from LTR won’t be a problem. Next stage is enabling the css. It is quite clear — we check the language or display standart and disable relational/additional css, or apply css file, supporting both RTL and LTR. If you enable additional css file, which rewrites the characteristics of the original one, ensure, that it is enabled after the original file. If you have just one file for LTR and RTL, you can attach relational characteristics to display standards using selectors like, for example, [dir="ltr"] and [dir="rtl"].

Let’s analyze enabling of additional RTL css file for Wordpress theme step by step:

  • Analyse, how the page would look like in language, requiring RTL support. Pay attention to those css files defining the places of elements, which are to be mirrored (the ones to be displayed in RTL standart).
  • Create RTL versions of needed files and save them to the same folder with original files, adding to the names “rtl-” prefix.
  • Find, where needed files are enabled. You can use grep for that: grep -r "studio.css" '/home/voron/ssh/wp-content/themes/studio’
  • Enable css for RTL in the file we found:

// here the original css is enabled (found with grep):
wp_enqueue_style( 'studio', get_template_directory_uri() . '/_inc/css/studio.css', array(), $version );

// here the additional css is enabled, if it is needed:

if (is_rtl()) {

              wp_enqueue_style( 'studio-rtl', get_template_directory_uri() . '/_inc/css/studio-rtl.css', array(), $version );


where if (is_rtl()) — is a function of Wordpress, checking, if current language of page is those with rigt-to-left script standart.

If you use the resources, which automatically convert RTL to LTR, you should pay greater attention to testing, as there’s a risk, that the resource can mirror the parts you don’t need. You also should pay attention to sprites, as they are not mirrored automatically. The problem could be solved by creating separate sprites for RTL. If you use SCSS and you need LTR and RTL, try Directional-SCSS:

7 votes, Rating: 5

Read also


Facebook makes one of the most popular online networking services in the world. For now it has got...


The migrate module makes it possible to import website’s content into Drupal from other sources. Read in our blog how to install and set up this framework for the correct work.


Developing our store package CommerceBox, we have faced an issue of keeping specific functionality for apps in features. Feature Injection technique solved this problem.


Being a member of Drupal Community is very responsible. That is why internetDevels company organized regular 3-months contribution code sprint. The results are promising.


Node.js is a powerful platform for building all kinds of applications which can be integrated with Drupal 7. From our blog you will learn how to install and set up...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime