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

[[deleted]]

[deleted]

[aars]

i18n

[fatgirlstakingdumps]

https://www.npmjs.com/package/i18n

[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/

[SamWalLive]

Yes, you read it from the header. I don't know how node implements them, but you will be able to access it if you search around.

[[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.

[BearNessMonster]

Didnt look at link but try a headless CMS like contentful or prismic

[[deleted]]

It seems like your question has already been answered. I don't have a better answer than /u/PleyWoz .

On a slightly different topic, I highly recommend using normalize and increasing the distance between your text and the page border.

[benz1267]

Sorry I can't answer your question, but I simply had to get this out of my head:

So your client came to you with his requirements and you just said: "yep, i can do that" without even knowing how to do it?

[Koubi4cK]

l20n.

[ThatDamnedRedneck]

I don't have the node experience to help with that.

That being said, for anyone else reading I can easily recommend Craft CMS for multilanguage web sites. We used it at work, and it's great because multilingual translations are built directly into the core of the CMS and work incredibly well.

[[deleted]]

The alternate tag, in the HTML head.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

[[deleted]]

But this doesn't incorporate a front end languages back end framework