Multilingual : Detect browser language

support
1

Hello all,

I made this website with english default language, and french as second language.
Unfortunately (as a french), when I go on the website (with french browser/OS), it doesn’t detect the language and show me the english version.
How can I enable language detection then?
Please note that it’s hosted on Netlify.

Here’s the website : http://www.sabir.paris/
Here’s the repo : http://github.com/indaviande/sabir

Thanks for your help,
Vianney.

2

Just have a look here: https://docs.netlify.com/routing/redirects/redirect-options/#redirect-by-country-or-language

1 Like
3

Thanks @nfriedli, I just created a _redirects file in my static folder including :

# Redirect users with french language preference from / to /cfr
/*  /fr/:splat  302  Language=fr

but it doesn’t do anything.

They mention nf_lang cookie, but I don’t know how to create that one.
Do you have a link for that?

4

It seems need to use JS to write cookie and manage it :wink:

Both the language and the country can be specified in a cookie as well ( nf_lang and nf_country respectively), so you can override the default behavior with JavaScript

In fact, it’s normal to use dynamic language (as JS, PHP, …) because you need to detect supported lang and redirect to same lang version.

5

Je viens de passer sur le site et j’ai bien été redirigé vers /fr/.

6

Ce qui n’est pas mon cas.
Suis sous OpenBSD 6.6, session en fr_FR, interfaces régionalisées en FR pour Firefox v69.0.2, et Chromium v79.0.3945.88, mais j’obtiens la version EN ! :wink:
Et, bien sûr, je vis en France.

It’s not my case.
I run Firefox v69.0.2, and Chromium v79.0.3945.88, GUI i18n FR, on OpenBSD stable 6.6, with lang session in fr_FR, but your site is delivered into EN!
And, I live in France. :stuck_out_tongue:

7

So, I added a cookie like this :

// Create cookie to get the Browser Language
const userLang = navigator.language || navigator.userLanguage;
document.cookie = `nf_lang = ${userLang}`;

& I just rewrite these redirects and it seems to work (‘language = fr’ alone doesn’t work) !

# Redirect users with french language preference from / to /fr
/  /fr/  302  Language=fr
/  /fr/  302  Language=fr-be
/  /fr/  302  Language=fr-ca
/  /fr/  302  Language=fr-ch
/  /fr/  302  Language=fr-fr
/  /fr/  302  Language=fr-lu
/  /fr/  302  Language=fr-mc

  1. The only problem is when I click on “Pardon my french” to go to the english version, it redirects to the French version logically. So I can’t access the other language anymore.
    How would you fix this?

  2. Also, I couldn’t load the images & css at first because all URLs were re-written with /fr/.
    I had to change it but it’s not perfect. How would you do ?

/*  /fr/:splat  302  Language=fr # Was re-writing all assets with /fr/
/  /fr/  302  Language=fr # work only with the homepage

I have only one page now, but might have several pages later.
How would you use the * & :splat without affecting the assets so they can load properly ?

Thanks for your help!
Vianney.

8

Hi, can anyone help me on this ?

I still have the issue, when I click on button (Pardon My French button) to switch to the English version, it keeps redirecting to the french version : www.sabir.paris/.

How can I fix that ?
Thanks a lot !

9

Use defaultContentLanguageInSubdir: true to push your default language in /en/ directory.

Then redirect your homepage to /fr/ with your rules.
Or redirect to /en/ at the end for all other languages.

Something like:

/  /fr/  302  Language=fr
/  /fr/  302  Language=fr-be
/  /fr/  302  Language=fr-ca
/  /fr/  302  Language=fr-ch
/  /fr/  302  Language=fr-fr
/  /fr/  302  Language=fr-lu
/  /fr/  302  Language=fr-mc
/  /en/  302

So, there is only an automatic language redirect on the homepage.
And you can add links in all /fr/* and /en/* pages.

10

Thank you Nicolas !
The defaultContentLanguageInSubdir makes it working.

For all the others pages, I did :

/*  /fr/:splat 302  Language=fr
/*  /fr/:splat 302  Language=fr-be
/*  /fr/:splat 302  Language=fr-ca
/*  /fr/:splat 302  Language=fr-ch
/*  /fr/:splat 302  Language=fr-fr
/*  /fr/:splat 302  Language=fr-lu
/*  /fr/:splat 302  Language=fr-mc
/*  /en/:splat 302

but the stylesheets & assets were not loading because their URL was modified too (I did a translation by directory).
Here’s what I have :
<link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/app.css">

11

Put your CSS in a root /css/ folder, and:

<link type="text/css" rel="stylesheet" href="/css/app.css">

:wink:

13

Hi !

I don’t know why but the redirection by language doesn’t work anymore.
If i list my cookies in the console, I have nf_lang=fr-FR but it still redirects me to the english version.

I have set defaultContentLanguageInSubdir = true and my _redirects file lools like this :

Redirect users with french language preference from / to /fr
/  /fr/  302  Language=fr
/  /fr/  302  Language=fr-be
/  /fr/  302  Language=fr-ca
/  /fr/  302  Language=fr-ch
/  /fr/  302  Language=fr-fr
/  /fr/  302  Language=fr-lu
/  /fr/  302  Language=fr-mc
/  /en/  302

URL is sabir.paris/

14

Apparently we are both stuck with the same problem and from what I have read those past few days the reason is : Netlify does not understand if your request has multiple languages set in the request.

That is why some will say they are redirected and others don’t