Lang attribute doesn't change when changing locale on profile

Contribute Feature

AI-generated summary

The discussion revolves around the lang attribute not changing when a user changes their locale on their profile. Aymane_Shuichi is trying to display a correct font for Arabic using CSS by targeting the lang attribute. However, the attribute remains set to the default locale (fr in this case).

Codinghorror questions the necessity of changing the lang attribute, while simon suggests that adding the user-locale to the HTML classes could be a solution, possibly through a plugin or core addition. Riking proposes a custom JS script to achieve the desired font change.

After some discussion, simon provides a working Discourse plugin code snippet that changes the font based on the user’s locale. Aymane_Shuichi confirms that the solution works.

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 « J'aime »
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 « J'aime »
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 « J'aime »
11

It worked ! Thank you man

1 « J'aime »