How to do localization on web application?

There is several way to do so, I can define all the text element, and load the localization string json from javascript, and using some javascript to replace text to do so... Also, I check out there is some other way to do so too. For example, some is using platform depends way to do that. For example, the J2EE have it开发者_StackOverflow中文版 own way to implement it. Also, I can create separate page for each language.

But is there any way to do localization is flexible or suggested? Thank you.

It seems to me that what you are really asking for is: How to implement Localizability correctly? Or how to program in order to make it easy to localize an application.

That is actually Internationalization-related question. There are several things you need to keep in mind in order to make your application easy to localize:

• Do not hardcode strings (that one is obvious)
• Do not hardcode styling information (do not use formatting tags like <b>, <i>, <strong>, etc.; do not use this: <p style="font-weight: bold;color: green;">Success!</p>). This will prevent localization guys from modifying them (i.e. removing bolded text from CJKV translations)
• Avoid using compound messages (like "Function [A,B,C] does [a,b,c]"). They are pretty hard to translate correctly. If you do not have a lot of variables it won't hurt to add few more strings out in resources.
• Do not concatenate compound messages either with concatenate operator or just by placing strings next to each other (i.e. don't do this: String message = "Function " + function + " does " + whatItDoes; or this: #{['something']}<a href="whatever">#{['some_link']}</a>#{['something_else']}), use formatting instead (i.e. MessageFormat.format("Hello, {0}. You have {1} new messages.", name, mailCount);). This won't allow the Translator to re-order the sentence and it might be required due to target's language grammar rules.
• Do not use raw placeholders (like %s %i %u) if you have more than one of that kind in a sentence (it is actually better to use numbered placeholder like {0}, {1} instead). Again, sometimes translators need to re-order the sentence...
• Do not use language constructs specific to English (i.e. "Paweł's dashboard" where Paweł is a name I provided during registration). There is no way to translate it correctly to several languages

Also, there are things to do:

• Do provide style sheet override mechanism (so that localization guys could modify element's style)
• Assign unique id for each element of rendered HTML page (this will allow them to target the exact control with their overridden style)
• Use UTF-8 encoding wherever you can (obviously HTML pages, e-mails if any, but possibly resource files [i.e. properties] as well)

There is much more things not related to localizability, like language detection workflow, formatting and validating numbers, currencies, dates (including setting proper timezones) that you would need to care about in properly globalized application, but that's actually different story.

Almost all decent web development frameworks out there have a notion of localized "resource bundles". You just make sure that you have a resource bundle for each supported language by your application, wherein each one of them uses the same "key" to refer to a localized string. Just use the facility provided by the framework/language to load the text from the bundle based on the "key" and you should be good to go.

As far as locale detection goes, there are again two ways of doing it; auto-detection, which is a fairly common mechanism used by web applications and selection based mechanism which uses a combination of auto-detection along with a locale drop-down provided to the user.

Specific steps would be language/framework specific so you might want to mention the framework which you are using for specific answers.

On the other hand, if you are actually asking how to extract translatable resources, I have to come with a totally different answer.

I wouldn't use page per language idea. It could be good if you have few and far between static web pages. When you build dynamic web application especially if there is any chance of fast growth in terms of contents size, this will kill you. And you won't be able to add new languages in easy way.

Localization on a client side will result in horribly slow application, don't do that. People will hate it.

Last but not least: typical way to implement (it is not best word here because it has lot of other meanings) localizability is to simply extract strings to some resource files (i.e. ResourceBundle in Java world) and keep them in a separate jar (I'd suggest one jar per language named in accordance to locale identifier, i.e. ja.jar, de.jar, fr-CA.jar) file. The jar file should also contain additional CSS file (contents of which would be used to override certain styles). Everything else you'll find in my previous answer...