> Markdown version of [RTL Support for Custom Elements](https://vaadin.com/docs/next/flow/i18n/custom-element-rtl). Section index: [llms.txt](https://vaadin.com/docs/next/flow/llms.txt)

# RTL Support for Custom Elements

Vaadin components support right-to-left (RTL) text direction out of the box. Custom elements and custom styles can respond to text direction using the native CSS [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) pseudo-class: with the `:dir(rtl)` selector in styles, and with `element.matches(':dir(rtl)')` in JavaScript.

> **Note:** Previously, custom elements had to extend Vaadin’s `DirMixin`, which synchronized the element’s `dir` attribute with the document-level `dir` attribute so that styles and JavaScript code could respond to text direction changes. The mixin is now deprecated in favor of the native `:dir()` selector, and it’s scheduled for removal in Vaadin 26, after which components no longer set the `dir` attribute on themselves.

## <a id="adjusting-styles-for-rtl"></a>Adjusting Styles for RTL

Review properties like `padding`, `margin`, `text-align`, `float`, and `transform`. For example, if your styles define directional padding:

```css
:host {
    padding-right: 1em;
    padding-left: 2em;
}
```

Add an RTL override:

```css
:host(:dir(rtl)) {
    padding-right: 2em;
    padding-left: 1em;
}
```

You can replace directional properties with [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). Flex and Grid containers are handled well by the browser and typically don’t require adjustments.

For help adjusting styles, you can use the tools at [RTLCSS](https://rtlcss.com/playground/#). See also this [comprehensive right-to-left styling guide](https://rtlstyling.com/posts/rtl-styling/).

## <a id="icons-and-directional-symbols"></a>Icons and Directional Symbols

If your element uses icons or Unicode symbols that indicate direction (e.g., a *Back* button arrow), use the appropriate icons for RTL mode.

## <a id="keyboard-navigation"></a>Keyboard Navigation

If keyboard interactions use arrow keys for navigation, adjust the direction based on the text direction:

```javascript
const dirIncrement = this.matches(':dir(rtl)') ? -1 : 1;

switch (event.key) {
    // ...
    case 'ArrowLeft':
        idx = currentIdx - dirIncrement;
        break;
    case 'ArrowRight':
        idx = currentIdx + dirIncrement;
        break;
    // ...
}
```

Custom elements that rely on JavaScript calculations for sizing, position, or horizontal scroll may also need adjustments for RTL.

If you have visual tests, consider adding or updating them to run in RTL mode as well.

## <a id="frontend-only-rtl"></a>Frontend-Only RTL

For frontend-only applications, set `document.dir = 'rtl'` to enable right-to-left mode.