Readabler script localization

By default, Readabler script localization is set according to the user’s browser settings. So, the accessibility settings are displayed in the browser language.

This is a i18next language detection plugin use to detect user language in the browser with support for:

  • cookie (set cookie i18next=LANGUAGE)
  • sessionStorage (set key i18nextLng=LANGUAGE)
  • localStorage (set key i18nextLng=LANGUAGE)
  • navigator (set browser language)
  • querystring (append ?lng=LANGUAGE to URL)
  • htmlTag (add html language tag <html lang=”LANGUAGE” …)
  • path (http://my.site.com/LANGUAGE/…)
  • subdomain (http://LANGUAGE.site.com/…)

Set the specific Readabler script localization

The Readabler comes with two preset languages: English(en) and Ukrainian(uk). To add a new language follow the steps below:

Step 1

Create a translation JSON file for your language based on the readabler/locales/en/en-translation.json file. The name of the new translation file must be similar to the en-translation.json, where en – your language code.

For example, to create translation for French, you need to copy the file en-translation.json> rename the copy to fr-translation.json >open the file fr-translation.json>translate each line into your language.

Translate each line in the JSON file
Step 2

Go to readabler/locales on your site and create here a new folder named with the language code.

For example, for French, the folder should be named “fr“.

step 3

Paste your JSON translation file into the newly created folder.

Below is an example of the added French translation file.

Added french translation file
step 4

Specify which localization you want to use in plugin parameters.

As an example below, added the parameter locale: 'fr' to use French localization.

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const readabler = new Readabler( {

            locale: 'fr',
            
        });
    });
</script>

Was this article helpful to you?