Skip to content

Right to Left Text (RTL)

The changes required to make Hyvä use RTL are quite minimal.
With Hyvä everything pretty much works, apart from margins between elements that are on the right that will need to be changed to be left margins.

Specifying the text direction

You specify a language direction with the dir attribute.
By adding dir="rtl" or dir="ltr" (ltr is the default value) to the <body> tag, the text direction is applied to the whole page.

Adding an attribute to the body tag conditionally

If you want to add an attribute to the <body> tag conditionally - for example depending on the language selection - you can do this with the \Magento\Framework\View\Page\Config class using a layout_load_before event observer.

/** @var \Magento\Framework\View\Page\Config */
private $pageConfig;

/** @var \Magento\Framework\Locale\ResolverInterface */
private $localeResolver;

public function execute(Observer $observer): void
{
    if (strtolower(substr($this->localeResolver()->getLocale(), 0, 2)) === 'ar') {
        $this->pageConfig->setElementAttribute('body' 'dir', 'rtl');
    }
}

The Tailwind RTL Plugin (optional)

To support both LTR and RTL text direction with the same theme, the tailwindcss-rtl plugin can be installed.

The plugin introduces new utility classes that use s for "start direction" and e for "end direction".

So rather than using pl-2 to add padding to the left side of an element with RTL text, and pr-2 to add padding to the right side for LTR text, the class ps-2 would cover both cases, adding the padding to whatever side the text direction start side is.

The full list of new utility classes introduced by the plugin is documented in the readme.