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). Sometimes, we might want to change the value of the current direction and this is the focus of this article.
In WordPress themes, they usually use language_attributes function in the <html> tag as shown below:
This function is used to display the dir or lang attributes. It will only display dir attribute if the current locale is rtl.
.mo and .po language files in the languages folder. Check WordPress Localization documentation for more information.There are many ways to modify language directions.
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:
function custom_dir_attr($lang){
if (is_admin())
return $lang;
$dir_attr="";
if (!is_rtl())
$dir_attr='dir="rtl"';
return $lang." ".$dir_attr;
}
add_filter('language_attributes','custom_dir_attr');
In the above example, we force the dir attribute to be rtl in the front-end of WordPress.
Let's examine the above code in more detail:
-
Line 2-3
Since the
functions.phptheme file also runs when we are in a back-end, the above filter will run on both front-end and the back-end of WordPress. This will cause the change in direction in the Dashboard as well. To avoid that, the code above uses is_admin function to check if we are currently in the Dashboard and if true, we return without doing any change. -
Line 5-6
if is_rtl function returns true, the $lang parameter already has dir attribute set to 'rtl', so we won't add another one.
But, what if we want to leave the front-end as it is, but change the language direction only in the back-end.
Switch direction between rtl and ltr on an Admin Dashboard only
If your Admin Dashboard is using RTL language direction, but you would prefer to switch it back to LTR, check LTR RTL Admin content plugin. When you are in Dashboard, the switch button will appear on top of the dashboard and you can easily switch back and forth. Note that this switching won't work in the front-end.
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:
The above code checks if the current language is Arabic, and if so it sets the direction to "right to left".
Mix both rtl and ltr directions on the same post or page
With the HTML5, we can add dir attribute on any element. That way, we can specify the direction to a specific element that differs from the rest of the page. A simple example:
Some other ways to set the direction on specific elements are:
Changing language direction using the <bdo> HTML tag
The <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.
Changing language direction using CSS
The CSS has a direction property for setting the direction of text in the block-level element. The possible values are:
- ltr
- rtl
Changing language direction using jQuery
With jQuery, we can insert an attribute to the element like this:
<script>
jQuery(document).ready(function(){
jQuery("html").attr("dir", "ltr")
});
</script>
In the above code, the dir="ltr" is added to the <html> tag.
Conclusion
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 jQuery.
I hope you have found this article useful. If there is another way to achieve this not mentioned in the article, drop a comment and let us know.
Sergey
September 22, 2021Thank You very much! It was exactly what I needed