Rough plan for implementing i18n for Karma


  • Integrate with pootle
  • Handle strings inside code and html markup
 $("#someDiv").text(gettext("Hello World"));
  <div>Hello <strong>W</strong>orld</div>
  • All strings stored in one file per locale, messages.json
  • All message identifiers must be unique within an a lesson
  • Accommodating numeric, currency, and date formatting is not an immediate requirement

General Strategy

JavaScript Strings

We try to follow a subset of the gettext api quite closely. After including jquery.i18n.js you can use the following gettext functions in your javascript scripts:

  • $.i18n.gettext('text to be translated') or $. _('text to be translated'): to translate a simple string
  • $.i18n.ngettext('a car', 'multiple cars', n): to choose a pluralized form depending on n
  • $.i18n.pgettext('context', 'text to be translated'): this is useful if you are writing plugins. E.g. in ui.kFooter.js the context is '$.ui.kFooter'.


  • you can add the statement var _ = $._; at the beginning of your $(document).ready function and then use _('message') without needing to add the $. However the name of the function you are calling should be _, gettext, ngettext or pgettext. Otherwise the strings can not be automatically be extracted with xgettext.
  • the arguments to the different calls should be string literals. Otherwise xgettext will not be able to extract the messages to be translated.

The lesson examples/6_Maths_matchingAnglesAndShapes/ contains an example.

HTML Strings

We will try to use the Internationalization Tag Set for handling strings inline with html. The Okapi tool may be able to parse out strings marked with ITS.

There is first attempt at internationalizing html without using ITS. It will be in git under karma/i18n.

  • You annotate the tags of elements that need translation with a class attribute: class="translate".
  • i18n/ is the equivalent of xgettext for html.
  • i18n/ translates an html page.

Have a look at karma/i18n/example for an example.

The following is no longer true ( generates a static translated html page), but can be implemented if needed:

  • For the immediate future we will dynamically change out strings per locale on page load