To set the language direction of the content in the element, we use either the HTML dir attribute or CSS direction property. The default value is ltr (left to right direction), while languages like Arabic and Hebrew use rtl (right to left direction). In WordPress themes, the direction is usually inside the
<html> tag. Sometimes, we might want to change the value of the current direction and this is the focus of this article.
If we look at the default WordPress themes, they use language_attributes() function in the
<html> tag as shown below:
<html <?php language_attributes(); ?>>
This function is used to display the dir or lang attributes. It will only display dir attribute if the current locale is rtl.
Set language direction using a filter
We can force the language_attributes() function to set the dir attribute by using a language_attributes filter in the
functions.php file as shown below:
return $lang." ".$dir_attr;
In the above example, we set dir attribute to rtl to the front-end of WordPress, if it is not already set. Let’s examine the above code in more detail:
functions.php is used by WordPress as a plugin, which means the above filter will also run on the back-end of the WordPress. This will cause the change in direction in the Dashboard as well. To avoid that, the code above uses is_admin() function and if true, we return without doing any change.
if is_rtl() returns true, the $lang parameter already has dir attribute set to ‘rtl’, so we won’t add another one. If you want to change the value of direction to ‘ltr‘, use PHP string replacement functions, like str_replace.
Note: The $lang parameter might also contain the ‘lang’ attribute, so we return it with the appended value of $dir_attr variable.
Set direction when using qTranslate-X plugin
With qTranslate-X multilingual plugin, you might need to set the direction based on the currently selected language. We can do that with the following code:
<html<?php if(qtranxf_getLanguage() == 'ar') echo ' dir="rtl"' ?>>
The above code checks if the current language is Arabic, and if so it sets the direction to “right to left”.
Have both directions on the same posts or pages
With the HTML5, we can add dir attribute on any element. That way, we can specify direction to specific element that differs from the rest of the page. A simple example:
<p dir='ltr'>Some text in English.</p>
But what if we want to edit the text in Visual Editor? This is where the WP-RTL plugin can become handy. It allows you to quickly set paragraphs to be direction of rtl or ltr simply by clicking on added new buttons in the WYSIWG editor.
Other ways to set the direction on specific elements are:
Using the <bdo> HTML tag
<bdo> tag is used to override the bidirectional algorithm and is used in special cases, where simply using dir attribute would cause the incorrect presentation. In most cases though, the <bdo> element is not needed. Check this answer from StackOverflow for more information.
The CSS has a direction property for setting direction of text in block-level element. The possible values are:
With jQuery, we can insert an attribute to the element like this:
In the above code, the dir=”ltr” is added to the
There are times when we need to set the language direction of the text that differs from the currently selected language. We examined the different ways to achieve that, from using a WordPress filter, to using a plugin, the dedicated HTML tag, CSS and a jQuery.
Did you find this article useful? Is there another way to achieve this not mentioned in the article? Drop a comment and let us know.