Localization gets an update with right-to-left (RTL) support

We’re excited to announce that Vaadin’s localization capabilities just got a major upgrade with the implementation of right-to-left (RTL) script support-- one of the Vaadin community’s most-requested and long-awaited features.

What is RTL support?

A number of the world’s major languages rely on scripts that flow from right to left (RTL scripts). Some of the most commonly-known RTL-based languages in use today are:

• Arabic
• Hebrew
• Persian / Farsi
• Urdu
• Thaana
• Syriac

Apps that support RTL-based languages must allow the “flipping” of all UI components, support bidirectional elements (elements rendered LTR within RTL scripts) and provide a consistent, user-friendly way to toggle between languages.

Understanding RTL support in Vaadin

All core and commercial Vaadin components now come with RTL support out of the box. Please note that while Vaadin Charts does support RTL functionality such as axis mirroring, a few extra steps are necessary.

RTL mode relies on the standard HTML dir attribute and toggling it only requires calling:

UI.getCurrent().setDirection(Direction.RIGHT_TO_LEFT)

Vaadin’s RTL support includes UI mirroring and ensures that the appropriate UI and text alignments required for bidirectional languages are made. This ensures that the application correctly displays LTR content, such as numbers, emails and English words, within RTL UIs.

To try out the toggle and UI mirroring capabilities of RTL, visit https://start.vaadin.com

Implementing RTL mode in Vaadin applications

Enabling co-existing LTR and RTL modes in an application is simple, but does require minor changes to your code.

It is also important to note that RTL mode is not engaged automatically based on the user’s incoming accept-language header, as this could potentially break existing apps that are not built to support RTL. Instead, developers interested in implementing RTL should handle the implementation on an application-by-application basis.

A detailed guide to implementing RTL mode is included in our updated localization documentation.

Localized English / Persian (Farsi) RTL demo application

We have also released a brand new bookstore inventory management system demo that supports RTL languages. This example application allows toggling between English (LTR) and Persian / Farsi (RTL), and showcases a UI that includes bidirectional content in RTL mode.

To try the demo, visit: https://demo.vaadin.com/bookstore-example-rtl

For the source code, visit: https://github.com/vaadin/bookstore-example/tree/rtl-demo

Please refer to the project README on GitHub for instructions on how to run the project. At present, this demo is available exclusively for Vaadin 16. However, it only uses Java for the UI (no TypeScript is required).

Which versions of Vaadin include RTL support?

In order to enable RTL support for Vaadin applications with Java-based UIs, developers should update their applications to the latest available release of either:

• Vaadin 14.3 (LTS release track): Available now. Try it out here.
• Vaadin 16 (non-LTS track): Available now. Try it out here.

Please note that Vaadin 16 belongs to our non-LTS release track. Non-LTS versions only receive features, fixes and patches for 4 months from the initial release date. In the case of Vaadin 16, this means until October 2020.

We therefore recommend the latest release of our current LTS (long-term release) version, Vaadin 14, for most production and enterprise use cases, unless features currently exclusive to non-LTS releases are required.

For more information about Vaadin’s release model, please read Johannes’ blog post here.

View all RTL documentation here.