--- Title: Right-to-left language support Added: 2019-03-13 --- # Right-to-left language support ADF currently has partial support for languages that are written from right to left (such as Arabic) and has been tested to work with the HTML [`dir` attribute](https://www.w3.org/TR/html51/dom.html#the-dir-attribute) added to the main `` element. This is handled automatically by the framework and can be configured through `app.config.json`. ## Configuration Since directionality cannot be inferred from information about the locale, there is a one-to-one relation between locale and language configuration in `app.config.json`. The minimum configuration is to declare the `"direction": "rtl"` alt the level of the language entry associated with your browser locale. Omitting `direction` or failing to map it with a language key will default to `ltr`. ```json // browser locale 'ar' { ... "languages": [ ... { "key": "ar", "direction": "rtl" }, ... ], ... } ``` If it is desired to start the application with a certain language locale and not default to browser locale, we can specify the `locale` at the configuration level and associate it with a language entry. ```json { ... "locale": "ar", "languages": [ ... { "key": "ar", "direction": "rtl" }, ... ], ... } ``` ## UserPreferencesService For cases where a component logic depends on direction values over time, [`UserPreferencesService`](../core/services/user-preferences.service.md) can be used to get information about the current direction value. ```typescript import { Component, OnInit } from '@angular/core'; import { Direction } from '@angular/cdk/bidi'; import { UserPreferencesService } from '@alfresco/adf-core'; @Component({ ... }) export class MyComponent implements InInit { constructor( private userPreferencesService: UserPreferencesService) { } ngOnInit() { this.userPreferencesService .select('textOrientation') .subscribe((direction: Direction) => { console.log(direction); // 'ltr' / 'rtl' }); } } ``` ## MatIcon Currently, [mat-icon](https://material.angular.io/components/icon/overview) doesn't support [directionality](https://material.angular.io/components/icon/overview#bidirectionality) out of the box. As a workaround, this can be managed by adding a general styling rule, to the application top styling file. This will also ensure that [overlay](https://material.angular.io/cdk/overlay/overview) components will also be affected by direction. ```css /* app.component.scss */ [dir='rtl'] .mat-icon { transform: scale(-1, 1); } ``` Also, we have a [translation file](internationalization.md) for Arabic (code: "ar"), which is the [most widely used](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) language written from right to left. It is on our [roadmap](../roadmap.md) to extend and improve our support for RTL languages in the coming versions of ADF.