React and redux app-wide translation best practices

Question

My team and I want to translate an entire React-redux app into another language (english to arabic) and have a switch that does the app-wide translation via a redux action. The content for the first language is already written and hard coded.

I was wondering if I could get advice, tips, pointers on how devs on here would approach the implementation of such a feature. What tools would you use, how would you organize the content mapping, how would you account for long term maintainability, any gotchas to be aware of, etc...

The other tricky part, is how would you account for the fact that arabic is read from right to left, which means you would potentially have to change the layout of a bunch of pages when arabic is selected.

Answer 1

Some things to be aware of not mentioned by the other answer. Localisation can be very tough, with thing you might take for granted going totally out of the window. For example, some languages have different forms of words depending if there are 1, 2, 3, 4 or 5 of them, rather than a simple singular or plural. It can help to do quite a bit of research into this, or hire an expert. There may also be libraries to help with this. I don't know your stack but in my experience with C# there was a very useful library, Humanizer, that helped a lot with this.

Something specific to Arabic - make sure you check if you need to implement the Hijri or Islamic calendar - this doesn't completely correlate one-to-one with the gregorian/western calendar, which can be tricky.

To work Right-To-Left, you can acheive a basic version quickly by adding the css property direction: rtl; to the body tag. However, you will probably need to make further adjustments to make individual elements work. It is probably worth having two stylesheets, one for each direction. If you use a preprocessor for your CSS such as SASS or LESS this will be much easier to maintain.

Additionally, when flipping from right to left, some icons are reversed whilst others should not be. For example, icons showing the flow of time round a clockface, should not be reversed, whilst icons showing documents or writing should be. There is a good in depth guide of this at material.io.

Answer 2

Translation can be quite time consuming to do if you do not prepare for it in the initial design of the application. If you have a lot of in line defined text in your front end files, I don't think there's a better answer than having to go through and replace all the text with variable references. You may be able to set up some tools or Regex to automate some of this, but at minimum it's going to take a lot of manual reviewing to ensure you converted them all.

Since you are using React, you will need to check any string defined in your JavaScript that may be shown to the user, You also may need to hunt through your back end and find any hard coded strings that may be displayed to the user.

The most obvious thing to do to handle the actual translation is to have all text displayed to the user in a static file or your database. Then you read the language you need into an object that your components reference to display the proper text. Assuming this app is actively maintained with new features and updates, you will need to set up a process where new or modified strings can get flagged for translation. I've mainly seen in house tools for this but there is probably dedicated software available as well.

I recommend however you decide to do it, that the translation variables be in the intellisense of your IDE and have a naming convention so that developers can quickly find a string or realize they need to add a new one. Your translators should also be able to directly save to the database/static file without programmer assistance.

The Arabic left to right thing will depend a lot on the styling of your existing site, but ideally you can handle that entirely within your CSS. If just changing the text alignment will work for the majority of cases without looking too bad, setting a simple CSS class on the entire body may be enough. Otherwise you can check for this class and set up special rules for your individual components until your application looks nice in the new language.