DEV Community

Discussion on: Help: How to make a multilanguage website?

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

Where and how do you want to do the detection? Server side? Client side? User selected?

That's the biggest thing to consider. Best option, if you really can consistently translate and keep everything up-to-date by hand, is to do it server side (this is quite simply the most portable approach, it will work even for truly ancient browsers). You don't need PHP or Node or any other server-side scripting language though, you can do it with URL rewrites and simple regex matching on the contents of the Accept-Languages header.

In short:

  • Structure your site so that you have one sub-directory per-language, with your default language at the top level (this is good practice if you're handling things server-side even if you're doing some form of scripting to do it).
  • If you're on a UNIX-like platform, make a symbolic link for the default language code pointing to the top-level directory. On Windows, set up the equivalent as a URL rewrite rule in the server configuration. This is just a consistency bit to help users who actually manually edit URLs.
  • On each page, add something (usually in the footer, sidebar, or menu) to allow users to jump to the same page in each other language. This is something you can easily generate dynamically while deploying your site. The two popular options are flags for the country the language is associated with, or a list of languages using their native names (so Español, Svenska, François instead of Spanish, Swedish, French).
  • In your server configuration, add a rule to look at the contents of the Accept-Languages header. If the header isn't present, contains none of the languages you support, or the URL is explicitly matching a specific language directory, don't modify the URL. Otherwise, pick the leftmost language code in the Accept-Languages header that you support, and rewrite the URL (or redirect) to the appropriate language directory.

This is, in essence, the traditional method of handling web page translations. I'm pretty sure MDN and a number of other sites are still doing it this way in fact. It puts no significant burden on the client (again, well behaved user agents set the Accept-Languages header properly in most cases) or the user, means you send nothing extra over the network, and makes it surprisingly easy to manage on the server side too. The downside is that it doesn't scale past maybe half a dozen languages very well unless you use some form of scripting to generate the web-server config and the language-switchers in the pages.