Question 283967 in CSS Question posted in
Some basic documentation can be found here.

Language Selector by overriding global CSS

I want to create a simple CSS-based language switcher.

Consider a single static HTML page with content in, say, 3 languages:

<h1 lang="en">Hello World</h1>
<h2 lang="de">Hallo Welt</h1>
<h2 lang="fr">Bonjour la Mond</h1>
...
<p lang="en">This is my english webpage...</p>
<p lang="de">Dies ist meine deutsche Webseite...</p>
<p lang="fr">Je ne parles pas francais</p>

When the page loads, we want to detect the user’s language (navigator.language || navigator.userLanguage) and display only :lang(en) elements hiding all german or french sections.

*[lang=en] {display:block}
*[lang=de] {display:none}
*[lang=fr] {display:none}

Now, if the user selects German, we want some JavaScript to switch the stylesheet out globally (not by element) so that we override the above CSS with:

*[lang=en] {display:none}
*[lang=de] {display:block}
*[lang=fr] {display:none}

How can one achieve such a CSS override globally in JavaScript?

Notes:

  • I don’t want to select HTML elements and toggle their display – I want to overwrite the global CSS.
  • How the language is selected is irelevant – it will be an onclick or onchange event which triggers the JS
  • I don’t mind having all lang elements display as block though it would be interesting how to toggle their display property between none and <original> without losing say display:inline.
Tags:

2

Answers


  1. 0

    I can only say this is a costly idea but basically doable

    const languages = ["en", "de", "fr", "ja"]

function changeLanguage(language) {
  if (!languages.includes(language)) language = languages[0]

  const style = document.querySelector("[data-type=css-language]") ?? document.createElement('style')
  style.textContent = `[lang="${language}"] { display: block }`
  style.setAttribute("data-type", "css-language")
  document.body.appendChild(style)
}



changeLanguage(navigator.language)
    [lang] { display: none }
    <h1 lang="en">Hello World</h1>
<h2 lang="de">Hallo Welt</h1>
<h2 lang="fr">Bonjour la Mond</h1>
<h2 lang="ja">こにちは</h1>
...
<p lang="en">This is my english webpage...</p>
<p lang="de">Dies ist meine deutsche Webseite...</p>
<p lang="fr">Je ne parles pas francais</p>
<p lang="ja">私わオタク</p>

<button onclick="changeLanguage('ja')">Switch to Japanese</button>
    Login or Signup to reply.
  2. 0

    One way which I can think of achieving this is to create separate stylesheets for languages and then programmatically switch between them.

    1. Create separate css files for each language.(You can put display:block to *[lang=de] {display: block} to german.css and others none and so on) 
       /* english.css */
 *[lang=en] {display:block}
 *[lang=de] {display:none}
 *[lang=fr] {display:none}
    2. Add the link to that css file which you want to keep it as default. Also provide an Id to it. 
      <link id="languageStylesheet" rel="stylesheet" type="text/css" href="english.css">
    3. Create a function to switch the stylesheet based on selected language. setAttribute is the key. 
      function switchLanguage(lang) {
let stylesheetUrl;
switch (lang) {
  case 'en':
    stylesheetUrl = 'english.css';
    break;
  case 'de':
    stylesheetUrl = 'german.css';
    break;
  case 'fr':
    stylesheetUrl = 'french.css';
    break;
  default:
    stylesheetUrl = 'english.css';
}
 document.getElementById('languageStylesheet').setAttribute('href', stylesheetUrl);
}

    CODE DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search