What is the rtl-CSS file in WordPress?

No comments

The WordPress default Twenty Twenty – theme comes with multiple CSS-files ending with *rtl.css.

Example rtl-css file

Have you ever wondered what they are used for?

Use of rtl-css files

“rtl” stands for right to left. These rtl files handling the layout in right to left languages like for example Arabic or Hebrew.

This can be handle special cases where your default layout might need some specific improvements for right to left languages.

How does WordPress determine if it should use the rtl-css files?

WordPress decides based on the current locale, what css files should be used. You don’t have to change anything if you’re using the Twenty Twenty – theme. The required evaluation is already implemented in the File “/wp-includes/l10n.php” and used within WordPress:

/**
 * Determines whether the current locale is right-to-left (RTL).
 *
 * For more information on this and similar theme functions, check out
 * the {@link https://developer.wordpress.org/themes/basics/conditional-tags/
 * Conditional Tags} article in the Theme Developer Handbook.
 *
 * @since 3.0.0
 *
 * @global WP_Locale $wp_locale WordPress date and time locale object.
 *
 * @return bool Whether locale is RTL.
 */
function is_rtl() {
	global $wp_locale;
	if ( ! ( $wp_locale instanceof WP_Locale ) ) {
		return false;
	}
	return $wp_locale->is_rtl();
}
Tags