3.0 KiB
Title, Added
| Title | Added |
|---|---|
| Right-to-left language support | 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 added to the main <body> 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.
// 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.
{
...
"locale": "ar",
"languages": [
...
{
"key": "ar",
"direction": "rtl"
},
...
],
...
}
UserPreferencesService
For cases where a component logic depends on direction values over time, UserPreferencesService can be used to get information about the current direction value.
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 doesn't support directionality 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 components will also be affected by direction.
/* app.component.scss */
[dir='rtl'] .mat-icon {
transform: scale(-1, 1);
}
Also, we have a translation file for Arabic (code: "ar"), which is the most widely used language written from right to left.
It is on our roadmap to extend and improve our support for RTL languages in the coming versions of ADF.