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=LANGUAGEto 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.
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.
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>