LanguageDirectionMixin

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:

events ➞ setState → render DOM → post-render

Provides the component with:

• [internal.state].rightToLeft state member that is true if the component was attached to the document in the context of a right-to-left language, false otherwise.

Usage

import LanguageDirectionMixin from "elix/src/base/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

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).

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.

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