Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rtl support #22

Closed
yong86 opened this issue Jan 8, 2015 · 2 comments · Fixed by #56
Closed

rtl support #22

yong86 opened this issue Jan 8, 2015 · 2 comments · Fixed by #56

Comments

@yong86
Copy link

yong86 commented Jan 8, 2015

Does angular localization supports rtl?.I mean if i select a rtl language,the directional context of the page is shifted from right to left.

@tolbahadi
Copy link
Contributor

The framework does not support that. You will need to add a locale change event handler to the direction of the document from ltr to rtl.

app.run(function ($rootScope, localeEvents, locale) {
    function localeChangeHandler() {
        var currentLocale = locale.getLocale();
        if (currentLocale === 'ar-AR') {
            angular.element(document.body).attr('direction', 'rtl')
        } else {
            angular.element(document.body).attr('direction', 'ltr')
        }
    }

    $rootScope.$on(localeEvents.localeChanges, localeChangeHandler);

    // do this the first time
    localeChangeHandler();
});

I will be nice though, if the framework were to automatically maintain the lang attribute of the html tag to match the current locale. That way you can write you css targeting this attribute.

html[lang="ar"] {
  direction: rtl;
}
html[lang="en"] {
  direction: ltr;
}

@doshprompt
Copy link
Owner

@tolbahadi yes I was thinking about modifying the lang attribute of the html document on localeChanges. Do you want to open a PR?

tolbahadi added a commit to tolbahadi/angular-localization that referenced this issue Aug 17, 2015
Angular-localization will now update the lang attribute
of the root html tag to match the current locale's lang

This closes doshprompt#22 because users can now use the lang
attribute in their css to change the direction of the
document and/or add any other language specific css

Example:

```css
html[lang=ar] {
  direction: rtl;
}
```
tolbahadi added a commit to tolbahadi/angular-localization that referenced this issue Aug 17, 2015
Angular-localization will now update the `lang` attribute
of the root `html` tag to match the current locale's language

This closes doshprompt#22 because users can now use the lang
attribute in their css to change the direction of the
document and/or add any other language specific css

Example:

```css
html[lang=ar] {
  direction: rtl;
}
```
tolbahadi added a commit to tolbahadi/angular-localization that referenced this issue Aug 17, 2015
Angular-localization will now update the `lang` attribute
of the root `html` tag to match the current locale's language

This closes doshprompt#22 because users can now use the lang
attribute in their css to change the direction of the
document and/or add any other language specific css

Example:

```css
html[lang=ar] {
  direction: rtl;
}
```
tolbahadi added a commit to tolbahadi/angular-localization that referenced this issue Aug 18, 2015
Angular-localization will now update the `lang` attribute
of the root `html` tag to match the current locale's language

This closes doshprompt#22 because users can now use the lang
attribute in their css to change the direction of the
document and/or add any other language specific css

Example:

```css
html[lang=ar] {
  direction: rtl;
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants