HTML two language input- label, is it possibile?

Question

my question is really simple, but I cant figured it out, because I'm not so good with web-programming.

Is it possibile to have a MultiLanguage label/ input value for a .html page ?

I need to show some text if the default browser Language is Italian, and another text if the browser is with another Language. For Example I need to automatically switch from Ciao to Hello.

Is there a way to achieve that ? Maybe I can do that with Javascript...

Thanks all.

you can do with a lot.. A LOT of JS/jQuery or you can create two instances and host the sites on 2 domains — treyBake, Jun 15 '17 at 14:59
This is called "internationalization," (or sometimes i18n for short). It's practically an entire coding sub-specialty; there are many many different ways to handle it -- searching for those terms should get you started. — Daniel Beck, Jun 15 '17 at 15:00
[What are Content-Language and Accept-Language?](https://stackoverflow.com/questions/6157485/content-language-and-accept-language) — Quentin, Jun 15 '17 at 15:01
No need of 2 domains @ThisGuyHasTwoThumbs, If we can define language constant files and we will use that constants as per the user need. — Mr.Throg, Jun 15 '17 at 15:01
[Content negotiation (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation) — Quentin, Jun 15 '17 at 15:03
@VenkatLokeswar no there isn't - that's just the easiest and quickest way, I liked how Magento handles it, XML defined, tis tidy - though not sure how to implement such things with html and js — treyBake, Jun 15 '17 at 15:03

score 2 · Accepted Answer · answered Jun 15 '17 at 15:11

There are many, many different ways to go about this, and I advise you to put some time into searching google and finding the way that best suits your needs.

I will give you an example I like to use, but keep in mind that the information I'm posting is only one out of a multiple possible approaches.

First off, you have to get the user's language. To do this you can either use geolocation and base the language off of where the user is (see this answer for a good way, or search google and use one of many other approaches), or you can get it from the user's browser (see this thread for information on doing that).

Once you have that, it's just a matter of displaying localized content to the user. My preferred approach is the following, which combines all variants into a single file (alternative ways of doing this utilize multiple different HTML files):

First off you have your HTML:

<body>
    <h2>
        <span class="lang lang_en">This is in english!</span>
        <span class="lang lang_it">Questo è in italiano!</span>
    </h2>
</body>

Each version of the text exists within its own span. Then in your CSS you hide all the spans:

.lang{
    display:none;
}

Finally, in the JS, we reveal only the spans that contain text in the language we want to display:

var lang = ...; //language
switch (lang) {
    case "en":
        $(".lang_en").css("display", "inline");
        break;
    case "it":
        $(".lang_it").css("display", "inline");
        break;
    default:
        // Set your default language here
}

Of course, whether or not this approach is a good choice for you depends on your needs. I like it because it doesn't depend on any framework besides JQuery, and is simple to understand. Of course, depending on your needs, it may be even prohibitively inefficient (such is the case with very, very large webpages). That is up to you to decide.

score -1 · Answer 2 · answered Jun 15 '17 at 15:16

If what you want to get is the browser language you can get that with the following code:

navigator.language || navigator.userLanguage

Otherwise, just create a dropdown or something that onChange just change a variable into localStorage:

localStorage.setItem('language', languageValue)

And then check that every time:

localStorage.getItem('language')

Having that you will be able to change everything just with js / redirect to a different page that is on the language saved.

HTML two language input- label, is it possibile?

2 Answers2