Lang attribute doesn't change when changing locale on profile

feature
1

Hi ,
I have set the default locale to fr and I changed the language to Arabic on my profile.
when I check the html while on Arabic page I get lang="fr" as attribute for html tag.

The reason why I want it to change is to display a correct font for Arabic using CSS

html {
font-family: "Roboto", sans-serif;
font-weight: 400;
}
html:lang(ar) {
   font-family: 'Noto Naskh Arabic', serif !important; 
}
1 Like
2

How is this wrong? You set the default locale so it is listed as the default on every page.

3

The user-locale can be added to the html classes with a plugin, but is it something you would consider adding to the Discourse core?

4

I just don’t understand the purpose of this change or what it would achieve.

5

It would make it possible to change font-family or font-size based on the user-locale. I don’t know if there are many forums that would need that. It can be done easily with a plugin.

6

I think a custom JS script is more appropriate here.

// pseudocode
discourse_api_on_load_i_forget_how_that_ones_written(function() {
  if (user.locale == 'ar') {
    var st = document.createElement('style');
    st.innerHTML = "html {font-family: 'Noto Naskh Arabic', serif !important; }";
    document.head.appendChild(st);
  }
})
4 Likes
7

I can figure out how to get the user locale on the client side, except for in the PreferencesRoute. It would be great to know how to do that.

8

Hi Jeff,
As explained by Simon, the purpose of that, is to load different fonts for users using different locale on their profiles.

9

Hi ! Can you please tell me the exact code to add ?

10

This is working for me. Warning, I broke my development site while trying to figure this out. I think this is safe, but maybe someone else can take a look at it.

<script type="text/discourse-plugin" version="0.3">
  let currentUser = api.getCurrentUser();
  if (currentUser) {
      let username = currentUser.username;
      api.container.lookup('store:main').find('user', username).then(function (user) {
        let userLocale = user.get('locale');
        if ('ar' === userLocale) {
          let st = document.createElement('style');
          st.innerHTML = "html {font-family: 'Noto Naskh Arabic', serif !important; }";
          document.head.appendChild(st); 
        }
      });
  }
</script>
8 Likes
11

It worked ! Thank you man

1 Like