Right to Left Text (RTL)

Hyvä offers robust support for Right-to-Left (RTL) languages with minimal setup. While most elements adapt automatically, static properties like margins and text alignments require specific adjustments for RTL layouts.

Specifying HTML Text Direction

To enable RTL, set the dir attribute on the <html> tag. This globally controls text direction: dir="rtl" for right-to-left, or dir="ltr" for left-to-right (the default). Always include it alongside the lang attribute.

For information on the dir attribute, see the developer mozilla docs.

Method 1: Static (Theme Configuration)

The simplest approach is to statically set the dir attribute in your theme's default_head_blocks.xml file:

<?xml version="1.0"?>
<page
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
>
    <html>
        <attribute name="dir" value="rtl"/>
    </html>
</page>

Tip

Always set the dir attribute on the <html> tag, not <body>, for correct document semantics and compatibility with the lang attribute.

Method 2: Conditional (Based on Store Language)

For dynamic dir attribute assignment based on the current store language, create a Magento module with an observer.

1. Create your module's etc/frontend/events.xml file:

<?xml version="1.0"?>
<config
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"
>
    <event name="layout_load_before">
        <observer
            name="<VENDOR>_<MODULE>_add_dir_support"
            instance="<VENDOR>\<MODULE>\Observer\AddDirSupport"
        />
    </event>
</config>

2. Create the Observer/AddDirSupport.php file in your module:

Code Sample for the Observer AddDirSupport

<?php

declare(strict_types=1);

namespace <VENDOR>\<MODULE>\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Locale\ResolverInterface;
use Magento\Framework\View\Page\Config as PageConfig;

class AddDirSupport implements ObserverInterface
{
    private $localeResolver;
    private $pageConfig;

    public function __construct(
        ResolverInterface $localeResolver,
        PageConfig $pageConfig
    ) {
        $this->localeResolver = $localeResolver;
        $this->pageConfig = $pageConfig;
    }

    /**
     * @inheritDoc
     */
    public function execute(Observer $observer)
    {
        $currentLang = strtolower(substr($this->localeResolver->getLocale(), 0, 2));
        $rtlLanguages = array('ar', 'arc', 'dv', 'fa', 'ha', 'he', 'khw', 'ks', 'ku', 'ps', 'ur', 'yi');
        $isRtl = in_array($currentLang, $rtlLanguages);
        $this->pageConfig->setElementAttribute(
            PageConfig::ELEMENT_TYPE_HTML,
            'dir',
            $isRtl ? 'rtl' : 'ltr'
        );
    }
}

Tailwind RTL Modifier (`rtl:`)

Tailwind CSS v3.0+ supports an rtl: modifier for direction-specific styles. This allows you to apply different styles when the dir="rtl" attribute is present on the <html> tag.

Example: To set a right margin of 4 in LTR, but a left margin of 4 and no right margin in RTL, use: mr-4 rtl:mr-0 rtl:ml-4.

For more details on usage, refer to the Tailwind documentation.

Tailwind Direction-Aware Utilities (Logical Properties)

Tailwind CSS v3.3+ simplifies RTL styling with direction-aware utilities (logical properties). These utilities use s (start) and e (end) to automatically apply correct LTR/RTL styles, reducing manual adjustments.

Example: Use ps-4 for padding at the 'start' of an element. This translates to padding-left: 1rem in LTR and padding-right: 1rem in RTL, eliminating the need for rtl: modifiers.

This applies to padding (ps-, pe-), margin (ms-, me-), and border (border-s, border-e).

To delve deeper into this feature, refer to the Tailwind v3.3 release blog post: tailwindcss.com/blog/tailwindcss-v3-3#simplified-rtl-support-with-logical-properties.

For Tailwind versions prior to v3.3: The community-maintained tailwindcss-rtl plugin provides similar direction-aware utilities for backward compatibility.