mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
---
|
|
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 `<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`.
|
|
|
|
```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.
|