All Components

Right-to-Left Support

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

Configuration

In web applications, the RTL mode can be enabled with the dir attribute of a DOM element.

To enable the RTL mode for all Kendo UI components in your Angular application, provide a text direction value by using the RTL token in the root module of the application.

You can also limit the RTL mode to a part of the application by providing the token to a sub-module. By default, the RTL mode is disabled.

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [pageable]="true">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
export class AppComponent {
  public items: any[] = [
    { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
  ];
  public width: string = "100%";
  public height: string = "500px";
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ScrollViewModule],
    providers:    [{ provide: RTL, useValue: true }]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article