New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Right-to-Left Languages

Right-to-left (RTL) support refers to the ability of a library, website, or application to handle and respond to users who communicate through a right-to-left language such as Arabic, Hebrew, Chinese or Japanese.

The default language input for most users of the web is left-to-right. However, many websites and applications wish to also provide RTL support for their visitors. The RTL functionality falls more into the internationalization space but can be considered as an accessibility feature as well. After all, RTL is about making user experiences more accessible for visitors who use right-to-left languages.

Configuration

Unless you are building an application that exclusively uses RTL languages, it is intuitive to apply the RTL support feature based on external input, such as language selection or information from the user agent of a visitor. In that case, you can apply the k-rtl class at runtime using the jQuery addClass method.

For example, if you want to allow the user to trigger RTL support by selecting a language from a drop-down list or by clicking a button:

  1. Add a button to your page by using the <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" /> setting.
  2. Add a click handler for the button and toggle RTL support by adding or removing the k-rtl class to a form, in this case, a collection of form fields to which you assigned an ID of speakerForm. With that handler in place, the user can now trigger RTL support on demand.
    $('#toggleRTL').on('click', function(event) {
        var form = $('#speakerForm');

        if (form.hasClass('k-rtl')) {
            form.removeClass('k-rtl')
        } else {
            form.addClass('k-rtl');
        }
    })

Supported Telerik UI for ASP.NET MVC Components

The following table lists the Telerik UI for ASP.NET MVC Components that support rendering of content in a right-to-left direction for right-to-left languages, such as Arabic, Hebrew, Chinese, or Japanese.

Component RTL Support Demo
AutoComplete Yes Browse
BottomNavigation Yes Browse
Breadcrumb Yes Browse
Button Yes Browse
ButtonGroup Yes Browse
Calendar Yes Browse
Charts Yes Browse
CheckBoxGroup Yes Browse
ComboBox Yes Browse
DateInput Yes Browse
DatePicker Yes Browse
DateTimePicker Yes Browse
Dialog Yes Browse
DropDownList Yes Browse
DropDownTree Yes Browse
Editor Yes Browse
ExpansionPanel Yes Browse
FileManager Yes Browse
FloatingActionButton Yes Browse
Gantt Yes Browse
Grid Yes Browse
ListBox Yes Browse
ListView Yes Browse
MaskedTextbox Yes Browse
Menu Yes Browse
MultiColumnComboBox Yes Browse
MultiSelect Yes Browse
Notification Yes Browse
NumericTextbox Yes Browse
PanelBar Yes Browse
RadioGroup Yes Browse
Scheduler Yes Browse
Slider Yes Browse
Splitter Yes Browse
Stepper Yes Browse
Switch Yes Browse
TabStrip Yes Browse
TaskBoard Yes Browse
TextArea Yes Browse
TextBox Yes Browse
TimePicker Yes Browse
TreeView Yes Browse
Upload Yes Browse
Window Yes Browse

Known Limitations

  • Vertical scrollbar position may be on the left or right side depending on the used browser. This cannot be controlled via CSS or script.
  • The layout of the Kendo UI ListView widget depends entirely on the defined template. The widget itself does nothing to convert an existing LTR template to RTL layout. If a k-rtl CSS class is present and applied to a wrapper element, text direction will be reversed, but floats, margins, paddings, etc., will keep their orientation.
  • Kendo UI Splitter does not reverse the order of its panes in RTL mode.
In this article