I continue with my notes regarding my app for encrypting and decrypting text messages (DoCrypt.org). I decided to use two languages, Italian and English. But I intend to add more languages in the future. I have chosen to create a specific component to manage the different languages. I think it’s an easy way to build multilingual apps. In this post I talk about how to create a multilingual component with Svelte.
I use Svelte, because it’s simple. It can also translate all the components of the application in real time.
The idea is simple: I create a component to display the text in a specific language. To decide in which language, I use a store, which is a general variable that I can access from any other component. This way, if I decide to change the language, all the components that show some text update automatically.
This way, I can change the language anywhere in the application, simply by using lang.set("it") or lang.set("en").
The second step is to create a dictionary. I can use various techniques, but for a small project one object is enough.
At the first level I enter the name of the page that is displayed (for example, Home), at the second level a string that identifies the text I want to show (for example, Encrypt), at the third level the translation identified by the language (for example, en).
Now I can access the translation of a string on a specific page, using languages.Home.Encrypt.en or languages.Home.Encrypt.it.
Finally I need a component whose only job is to read the string value and insert it into another component:
Instead of {languages[p][w][$lang]} I can use {@html languages[p][w][$lang]} to use HTML tags in the string. I think it’s a good idea to translate some text with some formatting or links. But for simple text such as button labels this is not necessary.
To use this component, I can use code similar to this:
Save the settings
The problem is that the user has to manually reset the language each time they visit the site. To fix this, I can save the user’s preferred language in the browser. When the user visits the site, he uses his preferred language.
To do this I can use Jake Archibald’s IDB-Keyval library. This library allows you to save and read values from a local database.
I add the library to my project:
npm install idb-keyval
So I create a new file
I use the setLang function to set the default language. I also use getLang to read the preferred language from the browser memory. If the user has never set a language, the getLang function will return the browser language.
Then I modify the Svelte store to apply any changes to the local database:
Finally I change the main page of the app to read the preferred language on startup:
Well, that’s all for now. If you want to see the full code, you can find it on GitHub. The application is available on docrypt.org.
