A little code to allow word substitution depending on user

Question

I'm creating a demo web app in html in order for people to physically see and comment on the app prior to committing to a proper build.

Whilst the proper app will be database driven, my demo is just standard html with some JavaScript effects.

What I do want to demonstrate is that different user group will see different words. For example, imagine I have an html sentence that says:

This will cost £100 to begin.

What I need to some way of identifying that if the user has deemed themselves to be from the US, the sentence says:

This will cost $100 to begin.

This requirement is peppered throughout the pages but I'm happy to add each one manually. So I envisage some code along the lines of 'first, remove the [boot US] trunk' where the UK version is 'first remove the boot' but the code is saying that the visitor needs the US version. It then looks up boot (in an Access database perhaps) and sees that the table says for boot for US, display 'trunk'.

I'm not a programmer but I can normally cobble together scripts so I'm hoping someone may have a relatively easy solution in JavaScript, CSS or ASP.

To recap: I have a number of words or short sentences that need to appear differently and I'm happy to manually insert each one if necessary (but would be even better if the words were automatically changed). And I need a device which allows me to tell the pages to choose the US version, or for example, the New Zealand version.

Answer 1

The simplest approach to to this is to use localised "dictionaries". This could be a table in the database or a "resource" file of strings, but the same principle applies.

You have a main dictionary that holds all of your text. This will be in the "neutral" language - the one where most of your users come from (for example).

You then have sub dictionaries for each language variant that holds the localised text. So your main dictionary (UK) will contain:

Id    Text
 1    First remove the boot

Your sub dictionary (US) will contain:

Id    Text
 1    First remove the trunk

Note that the ids are the same and that the whole phrase is present.

Then your application will check the users language (either by asking the user or by checking the locale of the browser/operating system they are using) and use the appropriate dictionary to find the text.

If the required id doesn't exist in the sub dictionary it will then look in the main dictionary for the default text to use.

The whole test is present as translations aren't usually as simple as replacing the odd word here and there. Often the same word (boot - footwear or part of car) has two or more meanings and a blind substitution doesn't take context into account. Also, while you might start off with a UK/US system it might require other languages later. This scheme is also easier to implement than a word substitution one.

As for currency symbols - store the numeric value only and format it with the users culture to output it as a string. Most frameworks have this ability.

Answer 2

If all you want is a quick and dirty demo to show what functionality will be in the app without actually making a full blown app. Make every section of localized text its own container and have one container for each localization. Then just use JavaScript and CSS to hide/display the containers that match the desired location, your HTML page would look like this.

<p class='UK' >This will cost £100 to begin.</p>
<p class='US' >This will cost $100 to begin.</p>
<p class='CAN' >This will cost $150 to begin.</p>