Web Components Right-to-Left Support

The Smart HTML Elements framework provides right-to-left support for its custom elements that can be useful for developers who wish to localize their web projects to languages that use right-to-left scripts, such as Hebrew, Arabic, Syriac, and Thaana. Numerous different languages are written with these scripts, including Hebrew, Arabic, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.

Moreover, when right-to-left support is enabled for Smart custom elements, their layouts are inverted as is the expectation for right-to-left reading, scrolling and navigation.

Enabling Right-to-Left Layout for Elements

All Smart web components support right-to-left layout. To enable it, the property rightToLeft has to be set to true. This can be done statically in the element's tag:

<smart-calendar right-to-left></smart-calendar>

or by setting it with JavaScript:

document.querySelector('smart-calendar').rightToLeft = true;

This functionality complements the localization capability of Smart HTML Elements. For example, by enabling rightToLeft and setting locale to 'he', a Smart.Calendar element will have right-to-left layout and labels in Hebrew, as seen in the image below:

Calendar in Hebrew


Accordion in Hebrew

Smart.Accordion with right-to-left layout

Below you can find a list of demos that showcase the right-to-Left support of various elements: