Base solution for your next web application
Open Closed

German content will be mistaken for english and translated to german (in Google Chrome) #10608

User avatar
0
alexanderpilhar created

10.3.0, Angular

I wonder if there is an easy way to change the lang-attribute of the html-tag according to the currently selected language!?

Here is why: Most if not all of our users speak german and therefor our application's default language is german. There is no problem with that. Some of our users do not speak english and therefor have their browser (Google Chrome) set to translate english to german automatically. And this is where issues arise.

Since the application's lang-attribute is set to 'en' (<html lang="en">) the browser (Google Chrome) will try to translate the content to german. Since all of the content is in german already most of it can't be translated and will stay as it is. Some words in german are similar to words in english (missing just one letter and so on) but have a different meaning. The browser (Google Chrome) will now accept these words as english with spelling mistake and translates them to german. Which leads to more ore less funny results.

E.g. the german word "offen" (open) will be translated to "beleidigen" (to offend) since the browser thinks "offen" is "offend" with the last letter missing.

I think if we could set the lang-attribute of the html-tag to the currently selected language the issue would be resolved. I tried to change the attribute's value via develper tools without success. But maybe testing like that is just not a valid approach.

Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @alexanderpilhar

    I think you can change it as shown below;

    window.document.documentElement.lang = "de"
  • User Avatar
    0
    alexanderpilhar created

    Hi @ismcagdas and thank your for your response!

    It seems like it doesn't work when it wasn't already set on page load.

    If I change the value from "en" to "de" in index.html all is fine. If I change the value in root.component.ts (using LocalizationService.currentLanguage.name) Google Chrome just ignores it.

    Any other ideas how to solve this?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Could you try this in app.component.ts's ngOnInit ?

    ngOnInit() {
    this.document.documentElement.lang = 'de'; 
  }
  • User Avatar
    0
    alexanderpilhar created

    Sadly, this also doesn't work.

    But I just found a solution :)

    I removed the value from the html-tag's lang-attribute in index.html:

    <html lang="" dir="ltr">

    Then in root.component.ts' ngOnInit() I set the attribute's value to the current language:

    ngOnInit(): void {
    document.documentElement.lang = this.localizationService.currentLanguage.name;
}

    This seems to resolve the problem for me so far.

Assignee
No one
Labels
Non yet