Static Html Website - Bootstrap - Multi language Support

Question

To begin with I want to state that I am newbie in Web Development.

I was asked to build a static website (for a small - size hotel), and I bought this responsive html5 - CSS3 template. It consists of pure html5 - css3 , and some JavaScript for slideshows etc and uses the bootstrap framework.

I have already build the website, and now I was asked to add multilanguage support to it. Can I accomplish this via bootstrap? Can it even be done with CSS?

If not, should I have a copy of all my .html files in a subfolder (e.g "website"/en/"content" ) and redirect the user via a link at the top of the page, or should I use JavaScript to decide the language?

Briefly, I would like a user that visits my website from another country to get the English version of the site, while all others get the default language. I want as fast development as possible (that's why I bought a template) to get up and running asap (summer season has already started). I have a reasonable background in programming, but I am totally new in Web Development.

Karlykarlyn

Answer 1

You can do this within a single file without using any server-side programming languages. You should check out i18next for a proper javascript solution.

You can also use pure CSS to translate a homepage. Try something like

.en, .de, .it { display:none; } /* hide all elements with a language class */
.en:lang(en), .de:lang(de), .it:lang(it) { display:block; } /* show those elements that match their language class */

When you set a proper lang attribute on your html tag (e.g. by javascript) you can translate your page very easy:

<div class="en">Good morning</div>
<div class="de">Guten Morgen</div>
<div class="it">Ciao</div>

Schall

i18next did the job. I was not aware of it. I suppose I can add a button for manually changing language right? Like calling i18n.init and passing the selected language when the language button is pressed. – Karlykarlyn

Yes, you can do this by calling setLng. See reference. I have not ever worked with i18next, but have adapted the concepts behind it for a intranet page at my work. I guess the documented functions work properly. – Schall

that is not scalable and is insane to hard-code copy the same elements over and over again, for each language. An improvement would be to use pseudo-class content property and have your texts in a SASS variable. would be more scalable and easier to maintain. – Galenic

There is a problem with SEO here, but you could use JS files and render any block of text anywhere you want, using the chosen language. – Galenic

Sure, you could store all your texts in your CSS files or wherever you like, but before doing so I would recommend using a CMS, which solves this classical problem best. – Schall

I don't get this, how do I change the language? – Quinta

@Galenic Check this article link. Apparently google follows even dynamic content and is able to index the text. That is good news, since it means you no longer need plain text as recommended by traditional SEO guidelines. – Maudemaudie

Using CSS for this totally breaks accessibility and would even be a illegal solution in some countries. – Culprit

Can the css approach be search engine optimized? – Boito

will this be SEO friendly? – Coniferous

Answer 2

Bootstrap has nothing to do with that. No, you cannot translate a site using pure CSS. You'll have to change the HTML source to contain different text. Yes, you can do that by making a copy of all your HTML files and changing the text in them. Typically you'd have a server-side language with HTML templates which enable you to swap in translations for text dynamically without having to have a complete copy of your code. However, it doesn't sound like this is something you would be able to get up and running quickly enough.

Detection of client language and serving an appropriate version of the site is also something that will require some amount of server-side programming. Again, it doesn't sound like something you would be able to get into quickly enough.

Cobblestone

Could you be more specific about the "swap in translations for text dynamically without having to have a complete copy of your code" solution. thx. – V

Answer 3

Another example of the same thing what guys are already saying

let langs = ['en', 'fr', 'it'];
let lang = 'en';
setLangStyles(lang);

function setStyles(styles) {
  var elementId = '__lang_styles';
  var element = document.getElementById(elementId);
  if (element) {
    element.remove();
  }

  let style = document.createElement('style');
  style.id = elementId;
  style.type = 'text/css';

  if (style.styleSheet) {
    style.styleSheet.cssText = styles;
  } else {
    style.appendChild(document.createTextNode(styles));
  }
  document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
  setLangStyles(lang);
}

function setLangStyles(lang) {
  let styles = langs
    .filter(function (l) {
      return l != lang;
    })
    .map(function (l) {
      return ':lang('+ l +') { display: none; }';
    })
    .join(' ');

  setStyles(styles);
}

<a href="#" hreflang="it" onclick="setLang('it'); return false">Italiano</a>
<a href="#" hreflang="en" onclick="setLang('en'); return false">English</a>
<a href="#" hreflang="fr" onclick="setLang('fr'); return false">French</a>
<p lang='it'>Ciao a tutti!</p>
<p lang='en'>Hi everyone!</p>
<p lang='fr'>Bon Baguette!</p>

Ellswerth

will this be SEO friendly? – Coniferous

Answer 4

If your website it supposed to be static and use the same solution as the bootstrap page, that is powered by Jekyll, you can use Jekyll and github pages to mark in the template text files and reference externally in a Yaml file that holds the strings in each language (like en.yml and br.yml).

So when jekyll builds the static page it will generate the proper files, directories and references to navigate the page in different languages. This should not be done by Javascript, the page in each language it should be generated.

I made this with a website: https://github.com/worknenjoy/airspace-jekyll that generate the page https://worknenjoy.github.io/airspace-jekyll/

The language chooser redirects to a pt address to a brazilian portuguese page and the default page is english. The code is open source and it's there.

You can see in Gemfile the gem used is the jekyll-multiple-languages-plugin (https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)

that is responsible to create all you need to have this translation made easier.

Maharashtra

Answer 5

You can use multi button for multi button like two button for two languages and linked them to each other. for example:

english languages link here

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DESIGN</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="services.html">Services<span class="caret"></span></a>

<ul class="dropdown-menu">
      <li><a href="logo.html">logo design</a></li>
      <li><a href="banner.html">Banner Design</a></li>
      <li><a href="psd.html">Psd Desgin</a></li>
    </ul>
  </li>
  <li><a href="contact.html">contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"  height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello Listen Dear !!!!</h1>
<p>Why i listen you?</p>
</div>






french language page
link here
fr_index


<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CONCEPTION</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="fr_index.html">Accueil</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="fr_services.html">Prestations de service<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="fr_logo.html">création de logo</a></li>
      <li><a href="fr_banner.html">Conception de bannière</a></li>
      <li><a href="fr_psd.html">Psd Design</a></li>
    </ul>
  </li>
  <li><a href="fr_contact.html">Contactez nous</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.html"><span><img src="img/fr.png" height="20px" width="20px"></span>English</a></li>
  <li><a href="fr_index.html"><span><img src="img/eng.png"  height="20px" width="20px"></span> French</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Bonjour Cher Ecoute !!!!</h1>
<p>Pourquoi je t'écoute?</p>
</div>

it's work definatly thank you

Zootomy

Could you please provide some example? – Record

It seems this is your first answer on SO. NO worries. Kindly provide example link to code snippets with your answer. Otherwise your answer would be down voted. – Myatt

will this be SEO friendly? – Coniferous

Answer 6

No it's not possible to translate a website using only CSS, since CSS is used for styling only.

For a really smooth and easy translation you can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.

It could even modify the Bootstrap style and other styles to support Right-To-Left out of the box, you just have to set the direction of the language to rtl.

You should add reference to jQuery first, then to the CloudTranslation JavaScript file:

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

And add the configuration within the HTML head as follows:

<script type="application/json" id="CloudTranslationConfig">
    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.

More information found on https://www.angrymonkeycloud.com/translation

Cumulostratus

Answer 7

I know its really old post but I fall on this and after much trouble for a project of mine, I found a solution that works.

For two different languages, Greek and English, I added a separate version of each element in every page, one version in Greek and one in English. In each page I put the Greek versions into a div with attribute lang='el' and English versions into a div with lang='en'. I have a function that changes the lang in every div setting display from none to block and viceversa depending on the language.

function allagiglossas() {
    const l = document.getElementsByTagName("*");
    if(document.querySelector('html').lang === 'en'){
      for(i = 0;  i<l.length; i++) {
        if (l[i].lang === 'el') {
          l[i].style.display = 'none';
        } 
        if (l[i].lang === 'en') {
          l[i].style.display = 'block';
        //location.reload();
        }
      } 
    }else{
        for(i = 0;  i<l.length; i++) {
          if (l[i].lang === 'en') {
            l[i].style.display = 'none';
          } 
          if (l[i].lang === 'el') {
            l[i].style.display = 'block';
          
          }
        }
  
      }
  }

Another function that sets the HTML lang attribute.

function bilingual() {
  if(document.querySelector('html').lang === 'el'){
    sessionStorage.setItem("language", "en");
  }else{
    sessionStorage.setItem("language", "el");
  }
  
  document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
  allagiglossas();
     
  } 

And some code to remember in the browser's session storage what language the user has chosen in order to keep this language when navigating from page to page on my website.

document.querySelector('html').setAttribute("lang",sessionStorage.getItem("language"));
document.getElementById("change").onclick = bilingual;//Με το κουμπί αλλάζει η γλώσσα
document.addEventListener('DOMContentLoaded', allagiglossas);

Of course I added a button in every page and with every click it changes the language.

Hope this will help someone who face the same problem and I will be very grateful if someone tells me if i have something wrong or some way to get things better.

Schluter