LanguageDirectionMixin

Lets an element determine whether it resides in right-to-left text

Overview

Purpose: helps an element determine whether it's in the context of right-to-left text.

This mixin works at the beginning of the Elix render pipeline:

eventssetState → updates → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • state.languageDirection state member equal to "ltr" (left-to-right) or "rtl" (right-to-left), depending on the element's effective dir attribute value.
  • rightToLeft property.

Usage

import LanguageDirectionMixin from 'elix/src/LanguageDirectionMixin.js';
class MyElement extends LanguageDirectionMixin(HTMLElement) {}

This mixin is useful for components that need to orient a sequence horizontally. In right-to-left languages (Arabic, Hebrew), the beginning of a list should appear on the right, instead on the left in left-to-right languages (English, etc.).

Example

😀
😁
😂
😍
Demo: Horizontal list set for right-to-left layout

This horizontally-scrolling ListBox is layed out right-to-left, as in languages like Arabic and Hebrew. Accordingly, the list starts on the right and goes to the left. The Left and Right arrow keys are sensitive to the text direction, so still work as expected. The Home and End keys select the rightmost and leftmost items, respectively (the opposite of what they would do in left-to-right text).

Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: Carousel set for right-to-left layout

In the context of a right-to-left language, this Carousel starts with the first item on the right instead of the left. You can compare this with its standard left-to-right demo on the Carousel page.

By default, PopupButton opens a popup on the source button's leading edge. In the sample below, which is configured for right-to-left text, the "Below Start" and "Above Start" buttons show a popup aligned with the leading right edge.

Below start Below stretch Below end
Above start Above stretch Above end
Demo: PopupButton set for right-to-left layout

Similarly, Drawer opens from the right side in a right-to-left context:

Drawer elements go here...
Demo: Drawer set for right-to-left layout