Today we’re releasing one of the most requested features our customers have been asking for – Spanish language support.
If your browser language is set to Spanish you’ll see our new Spanish language version by default – anywhere Syncta is available you can use us in Spanish as well!
Multi-lingual application design is tough to implement – let’s look at some of the details…
Back in the day making an application or website available in multiple languages meant you made a copy of your application or website and went through and updated all the text to be in your new language.
There are a lot of pros to that – it’s easy, you hit copy & paste and then run through your application and make text changes. But the downside – say you want to make a change to your application – you discover a bug or want to add a new feature – now you have to make a change in two places. Sure, it’s really just duplicating the change in two places. But as you go forward you’ll have to make changes to support those different languages and how they are displayed in your application – before too long you have two applications that are pretty different from each other. That’s really painful to maintain and it doesn’t let you offer the best product to all of your customers (which is the most important part!)
With the need for applications to be multilingual, the process has mostly standardized. Wikipedia provides a good backdrop.
As times progressed, copying applications fell out of favor – now a days we use locale dictionaries – we don’t have to duplicate the entire application – only the parts that are different between languages.
We wrote Syncta with English words directly in the code. A segment of one of our pages might look like below.
p strong | Name = user.name p strong | Email = user.email p strong | Role = user.role_label p strong | Address = user.address_block p strong | Company = user.company_name = link_to 'Edit', edit_user_path(user)
Most of this is layout – the p & strong blocks are HTML. the =user.name and related blocks are where we get information from the entered information. But what’s important in our example is anything with the pipe (|) – those are English words – we need to take those out and put them in a dictionary.
To move to a dictionary we remove those hard coded strings of text and replace them with a dictionary key – a way for us to locate the piece of text that should be there regardless of the language it’s in.
now that example looks like below:
p strong =t('contact_name_label') = user.name p strong = t('email_label') = user.email p strong = t('contact_role_label'): = user.role_label p strong = t('contact_address_label') = user.address_block p strong = t('contact_company_label'): = user.company_name = link_to t('edit_user'), edit_user_path(user)
We create a dictionary that has English and any other languages we need – in this case Spanish.
the dictionary looks like below:
english: contact_name_label: Name email_label: Email contact_role_label: Role contact_address_label: Address contact_company_label: Company edit_user: Edit spanish: contact_name_label: Nombre email_label: Email contact_role_label: Puesto contact_address_label: Direccion contact_company_label: Impresa edit_user: Editar
Now when that page is requested by a user the server knows if it needs to provide a copy with Spanish or English words – it looks through it’s dictionary for each key for that language and returns the text in that location in the dictionary.
It’s not much more complicated than that – find every piece of hard-coded text in your application and replace it with a dictionary key. That’s easier said than done – we replaced over 25,000 hard-coded text blocks with dictionary keys!
Once you have that dictionary, you find a great translating service and have them build a dictionary for the language you need.
There are some complications depending on layout & syntax – different languages have different sentence structure. This can cause issues when you’re stylizing your interface – an example is on the top of our pricing page (and the Spanish version.) In English we say ‘Affordable Simple Pricing’ – because we’re styling the ‘simple’ we have that in a different formatting block. We have keys for ‘affordable’, ‘simple’, & ‘pricing’ – in Spanish this same statement is ‘Precisios Simples Asequible’. If our translator just looked at the English value of our keys we would have ended up with functionally ‘pricing simple affordable’ – that’s no good!
The hardest part of the process is the initial conversion from hard-coded text to dictionary keys. Now that we have that out of the way we’re already working on another frequently requested feature – French!