Website in different languages

1

if i have a website and i wanna have it in lets say 3 different languages. Do i have to build like 3 (for example) index.html pages? or is there a better way to do it?

2

Building n versions of the website its not practical. Imagine you have to make some changes.
I would build only one version and i would deal with switching the language in js.

3

Generally, no. The website is exactly the same so it is pointless make three identical things. If the website is tiny, and is unlikely to ever need updating – eg it’s just one small index page – then yes, it will be faster to just copy paste. Otherwise you would normally use a tool. Normal way is:

  • you seperate all the text to translate from the HTML, so you need a templating step. In pseudocode, the HTML will look something like:
<h1>{ translate("Main Title") }</h1>
<h2>{ translate("Main Subtitle") }</h2>
  • you put the text to translate into a file, normally under a folder structure like localization/En, localization/Es, localization/De etc etc. In folders under standard localization codes anyway.
  • In each of those files, you have a set of keys/values, where the key is what is used in the template, and the value is what is used in the relevant rendering for that language (this example using gettext syntax):
msgid "Main Title"
msgstr "I am the main title"

msgid "Main Subtitle"
msgstr "I am the main subtitle"

and

msgid "Main Title"
msgstr "Yo soy el titulo principal"

msgid "Main Subtitle"
msgstr "Yo soy el subtitulo principal"

I can then do a number of things, for example:

  • I could have the translation files as just JS objects - rather than above, more like:
    {
  "Main Title": {
    en: "This is the main title",
    es: "Yo soy el titulo principal",
  }
  "Main Subtitle": {
    ...
}
    And when I load the page, I use some JS to read through the HTML and grab the correct values from those JS objects - this is really simple, but is pretty fragile.
  • I can use an HTML templating language, and build a separate page for each translation and then use those prebuilt pages.
  • I can have the pages built dynamically (ie I have a server rendering them), and have some UI on the front end that rerenders the site when a user says they want to change language.
  • I can integrate the tool I am using with the server I am using, so that it detects where a user is viewing the site from, and renders the correct language automatically.

So none of this is simple, but using tooling is the only way that you can sanely manage this if it is anything more than tiny little one page site.

2 Likes