LanguageDirectionMixin

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.

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

API

Used by classes Carousel, Carousel, CarouselSlideshow, CarouselSlideshow, CarouselWithThumbnails, CarouselWithThumbnails, CenteredStrip, CenteredStripHighlight, CenteredStripOpacity, Drawer, Explorer, ListBox, ListExplorer, SlideshowWithPlayControls, SlidingPages, SlidingStage, TabButton, TabStrip, Tabs, and Toast.