RAMP Localization Setup

This document explains how RAMP handles the localization of text in different scenarios.

Template Strings

WET Strings

Read about how locale strings are loaded during the build in WET Customization.

Language-specific strings used in WET templates are stored in ./lib/wet-boew/site/data/i18n - one flat file per language.

To override, create a file name as the corresponding language and place in ./site/data/i18. To augment, copy the original file from ./lib/wet-boew/site/data/i18n to ./site/data/i18 and modify.

To insert a string in the template, use assemble-contrib-i18n helper:

<li class="wb-slc">
    <a class="wb-sl" href="#wb-cont">{{{i18n "tmpl-skip-cont"}}}</a>
</li>

RAMP Strings

Text displayed on the site and related to the content of the site is defined separately from WET strings. Specifically, the text lookups can be found in directory ./src/locales. In this directory, there is a directory for each specific locale (e.g. en-CA or fr-CA for Canadian English and French), and in the specific folder there is a file called translation.json containing the strings.

These files are used as resources for i18next localization library.

To insert RAMP strings into Handlebars templates, use helper-i18n (deep lookup is possible):

<li><a href="#implement" class="item"></a>
	<ul class="sm list-unstyled" id="implement" role="menu">
		<li><a href="...">{{t "page.menu.link1sub1Title"}}</a></li>
		<li><a href="...">{{t "page.menu.link1sub2Title"}}</a></li>
		<li><a href="...">{{t "page.menu.link1sub3Title"}}</a></li>
		<li><a href="...">{{t "page.menu.link1sub4Title"}}</a></li>
	</ul>
</li>

To insert a string using JS, use a global call:

i18n.t('gui.actions.close');

RAMP Themes

RAMP Themes have their own localization files located in ./src/locales same as RAMP Core. During build, both JSON files are merged (./src/locales/[locale]/translation.json and ./lib/ramp-pcar/src/locales/[locale]/translation.json) to allow easy augmentation of defaults strings without duplication.

Any entries in a theme repository will override an entry in the core RAMP repository.

Back To Top

Mega-menu String Settings

Note

Please, avoid modifying megamenu templates inside ./lib folder. Use instructions below to properly override templates.

RAMP Core

To configure text in the megamenu, edit the file fullmenu.hbs in folder ./site/includes.

If the file doesn’t exist, a copy may be found in folder ./lib/wet-boew/site/includes/. Copy the files to ./site/includes and feel free to modify the copy. Use use helper-i18n to insert strings as described above.

RAMP Intranet and Usability Themes

To configure text in the megamenu for RAMP Intranet and Usability these, edit the file fullmenu.hbs in folder ./site/includes.

If the file doesn’t exist, a copy may be found in folder ./lib/theme-gc-intranet/site/includes/ or ./lib/theme-gcwu-fegc/site/includes/. Copy the file to ./site/includes and feel free to modify the copy.

RAMP Canada.ca Theme

To configure text in the megamenu for RAMP Intranet and Usability these, edit the files fullmenu-[locale].hbs in folder ./site/includes.

If the files don’t exist, a copy may be found in folder ./lib/gcweb/site/includes/. Copy the file to ./site/includes and feel free to modify the copy.

Back To Top

Static Config File String

To simplify maintenance of the app configuration, the RAMP source code has a single config file (config.json). When the build process runs, two language-specific config files are generated and can be found in the build folder. To allow these language-specific files to have the appropriate text, RAMP utilizes placeholders in the source config file that point to text elements in the locale translation files.

Here is an example for defining the display name of a feature layer.

In the feature object of src\config.json, we use the @@ notation followed by the JSON path of the element in the locale translation files.

{
    "displayName": "@@config.layers.feature.duckLayer.displayName"	    
}

In the English locale file src\locales\en-CA\translation.json

{
    "config": {        
        "layers": {
            "feature": {
                "duckLayer": {
                    "displayName": "Ducks"
                }
			}
		}
	}
}

In the French locale file src\locales\fr-CA\translation.json

{
    "config": {        
        "layers": {
            "feature": {
                "duckLayer": {
                    "displayName": "Canards"
                }
			}
		}
	}
}

When the build process runs, the resultant files config.en.json and config.fr.json will have display name values “Ducks” and “Canards” respectively.

Back To Top

Advanced Tools Strings

As the Advanced Toolbar tools act as plugins, any language displayed on tool interfaces and popups are stored in their own language file. The convention for the file name and location is __./src/locales//tools/.json__. In the tool javascript module, the language files are accessed using the [i18n library](external-libraries-en.html#i18next---i18n-for-javascript)

Back To Top

Date modified: