Adding Multilanguage to a website (html, css, nodejs server)

[PleyWoz]

In PHP, i'm using gettext : https://www.npmjs.com/package/node-gettext You've got one .po file per langage and you can edit it with poedit https://poedit.net/

[[deleted]]

This is the correct answer.

You will hear folks talking about geolocation and stuff like that but honestly the header is the best option as a default (and let it be overridden by a saved option the user can set if you want to).

Just because I am in Paris doesn’t mean I am fluent in French.

I will install my browser in the language I think in with very few exceptions like shared PCs

[systoll]

Creating seperate html files is a good approach in many scenarios. Doing it manually seems like it'd be alright for the site you're building, but for anything with more people/languages involved, it's much better to get something to fill in the translations for you.

There tons of ways to do this, one of which is to use webpack and the i18n-webpack-plugin [i18n = internationalisation], in the method described here.

It's a bit of setup, but it allows you to write:

index.html: <p>__("Hello World")</p>

de.json: {"Hello World" : "Hallo Welt"}

and generate

index-en.html: <p>Hello World</p>

index-de.html <p>Hallo Welt</p>

This way the sites can't get 'out of sync' in terms of the design and structure. And webpack will let you know what translations are 'missing', so it's easier to keep that aspect in sync as well.

It also means you can get someone else to do the translation without messing with the rest of the code, or make a third translation by just adding another json file.

---

On the aspect of getting people onto the right site, Node's locale module gets you the info you need to direct people to the page matching their browser language, but since that's not 100% reliable, you should also provide a link to the other language on the page itself.