0

In my application, I change the language by clicking buttons. Now I want to change and make some words uppercase depending on that language's uppercase rules. I tried to do this by changing the <html/> lang attribute dynamically. My language options are turkish and english

To change the html tag, I use react-helmet and to translate the words I use react-i18next . It seems like working for some codes, but for some words, uppercase rules apply depending on the previous language. 

<Helmet htmlAttributes={{lang: currentlySelectedLanguage}} /> 

function getHeader(){
   return[
     { id: headerOne, label: t("kit")}
   ]

}

t is a translator function from react-i18n. This function checks the translation json file of currentlySelectedLanguage and writes its value as the label.

Header item has text-transform:uppercase in its css class.

In turkish, there are two types of letters: i -> İ and ı -> I.

When I select english, happens but instead of writing KIT, I get KİT. Which is uppercase rule for turkish, not english.

When I select turkish, happens but then I get KIT, but it should be KİT, which is also uppercase rule for english

Bilge Yücel
  • 37
  • 5

1 Answers1

0

I had a similar problem. Setting React Helmet's htmlAttributes with current lang (as in your statement),

<Helmet htmlAttributes={{ lang: currentlySelectedLanguage }} />

does not affect the elements in the DOM (button, headings, ... etc.) which have text-transform: uppercase; CSS declaration.

I solved it by setting document.documentElement.lang immediately at the beginning of the triggered set language action:

    setLanguage(currentlySelectedLanguage) {
        if (document.documentElement) {
            document.documentElement.lang = currentlySelectedLanguage
        }

        // do other stuff ...
    }

Setting <html lang="??"> this way to solve the problem does not discourage me of using React Helmet, I continue managing all of the changes to the document head with React Helmet.

ayhandoslu
  • 1
  • 3