When WordPress will load rtl.css?

Question

We have an English WP website and now use GTranslate to support Arabic language as well.

The English site is https://www.example.com/ The Arabic version is https://www.example.com/ar/ (Note /ar/ is a virtual directory created by .htaccess redirection)

Now after studying the WordPress document at https://codex.wordpress.org/Right-to-Left_Language_Support#Method_2:_rtl.css. It said to create a rtl.css but does not say how to use it.

Based on other document such as https://torquemag.io/2018/03/rtl-support-wordpress/, it seems WP will automatically load rtl.css if I put the file under the same directory as style.css and the language is rtl.

However, based on my test, it is not the case. I put the rtl.css at the same directory as style.css, then go do Arabic version https://www.example.com/ar/ but in Chrome DevTools, rtl.css is not loaded.

So, I just wonder how WP determine whether it should load rtl.css, based on the tag or something else?

Answer 1

WordPress uses the function is_rtl() to decide whether it should load the rtl.css file or not. What this function does based on WordPress is:

Determines whether the current locale is right-to-left (RTL).

Since the main language for the website is English, it will always return false which will result in the rtl.css not being loaded.

So, there are 2 ways to load this files. Either by setting the global variable $text_direction before WP_Locale class is initialized when the URL has /ar. Or by enqueuing the rtl.css files based a similar URL condition.

This is an example snippet to enqueue styles conditionally based on the current URL:

add_action('wp_enqueue_scripts', 'xyz_enqueue_styles');
function xyz_enqueue_styles()
{
    if (substr($_SERVER['REQUEST_URI'], 0, strlen('/ar')) === '/ar') {
        wp_enqueue_style(
            'rtl-style',
            get_stylesheet_directory_uri() . '/rtl.css',
            array(),
            '1.0.0'
        );
    }

}