How to translate part of text in html with i18n?

Question

I am trying to use i18next to translate my app, which has some html checkboxes. here is the html code:

<p> <input type="checkbox" data-i18n= "content.body" id="CNCities" /> Beijing, Shanghai, Guangzhou... </p>
<p> <input type="checkbox" data-i18n= "content.body" id="AsiaCities"/> Beijing, Shanghai, Seoul, Tokyo... </p>

I can write json file to translate them to Chinese like this:

{
"CNCities": "北京， 上海，广州...",
"AsiaCities": "北京，上海，首尔，东京...."
}

Obviously there will be quite some of city names are duplicated in various collections. Therefore I am trying to have a json dictionary like this and make it work:

{
"Beijing": "北京",
"Shanghai": "上海",
"Seoul": "首尔"
}

So what is the proper javascript code to make it work? Or i18n is not a solution for this purpose and I have use something as gettext?

Answer 1

Translating location names is fairly difficult and I don't thing regular I18n libraries will handle this situation well.

Basically, as you already mentioned a lot of places have common name in most of the languages. What you need is, to translate the name only if it differs. The proper solution, I believe would involve some database with say English names as IDs and the translations for specific places if it is different in given language.

The only problem is, it is very hard to do. I haven't seen any company so far to make it right. Which is not very strange, since there are only few powerful enough to attempt to do it (Facebook, Google, ...).
What you need here is large international user base; these people will translate names of their home towns, etc. As you can see there are only handful of services that could allow for translating location names... And I regret it, but Facebook is not one of them.