Locale settings (v4 and below)

Text and settings within JavaScript-enhanced modules can be updated for the specific locale they are to be used in through the addition of a separate JavaScript file. The locale used is determined by the lang attribute that has been set on the html element for the document; if no match is found, the English defaults will be used.

The additional JavaScript file should contain a JSON object with all the required test/settings within it, and should be linked as follows:

From v4.12.0

If you are only including locale variants for existing Framework components and no other JavaScript files, you will still need to include the init.js file to determine the correct path and implementation for your locale file:

<script id="js-init" src="[ CDN url ]/js/init.js" data-app="[ App JS url ]" data-locale="[ locale JS file url ]" async></script>

Here your locale file will be loaded in using RequireJS before any of the other modules for the page are loaded so please be aware of the size of the file you are loading as it will block other JavaScript from running until it is ready.

Note: No longer load the locale settings file separately as it may not load before the locale settings are setup ready for modules to use.

Note that the file may contain settings for more than one locale.

v4.11.0 and earlier

<script src="[ locale JS file url ]"></script>

If you are only including locale variants for existing Framework components and no other JavaScript files, you will still need to include the init.js file to determine the correct path and implementation for your locale file:

<script id="js-init" src="[ CDN url ]/js/init.js" data-app="[ App JS url ]" async></script>

Note that the file may contain settings for more than one locale.

Example locale JS file

var locale = {
	'...' : {
		accessibilitySettings : {
			error : '...',
			success : '...'
		},
		agentCallback : { closeText : '...' },
		autocomplete : {
			instruction : '...',
			location : '...',
			locationUnavailable : '...',
			resultsFound : '...',
			noResults : '...'
		},
		contextHelp : {
			formText : '...',
			closeText : '...'
		},
		cookieSetting : {
			successfullySaved : '...',
			failed : '...'
		},
		creditCard : {
			default : '...',
			noMatch : '...',
			amex : '...'
		},
		datepicker : {
			locale : '...',
			previousMonth : '...',
			nextMonth : '...',
			weekdaysShort : [ '...', '...', '...', '...', '...', '...', '...' ],
			interactionInstruction : '...',
			triggerLabelSingle : '...',
			confirmLabelSingle : '...',
			triggerLabelRange : '...',
			confirmLabelRange : '...',
			clearLabel : '...',
			totalSelectedSingular : '...',
			totalSelectedPlural : '...',
			yearLabel : '...',
			monthLabel : '...',
			startDateTitle : '...',
			endDateTitle : '...'
		},
		faqList : { backLinkText : '...' },
		faqPanel : {
			showMore : '...',
			showLess : '...'
		},
		fileUpload : { multipleCaption : '...' },
		formHelp : {
			showMore : '...',
			showLess : '...'
		},
		mStickyCtaBar : { mobileText : '...' },
		masthead : {
			closeText : '...',
			loadingText : '...',
			switcherInitial : '...',
			switcherSelection : '...'
		},
		mediaPlayer : {
			progress : '...',
			progressTime : '...',
			restart : '...',
			rewind : '...',
			play : '...',
			playVideo : '...',
			playAudio : '...',
			pause : '...',
			forward : '...',
			mute : '...',
			volume : '...',
			captions : '...',
			subtitles : '...',
			fullscreen : '...',
			seconds : '...',
			on : '...',
			off : '...'
		},
		modalWindow : {
			closeText : '...',
			loadingText : '...'
		},
		multiselect : {
			pleaseSelect : '...',
			allSelected : '...',
			selected : '...',
			selectAll : '...'
		},
		notificationclose : { closeText : '...' },
		showMore : {
			expand : '...',
			contract : '...'
		},
		tabs : {
			moreText : '...',
			closeText : '...',
			loadingText : '...'
		},
		textAreaCount : {
			multipleCaption : '...',
			limitMessage: '...',
			limitMetMessage : '...'
		}
	}
};

Default locale settings (English)

You can use this information to check the default settings and also to look up formats and so on to ensure your locale settings match the expected pattern - some values contain variables to insert character counts, dates and so on, which can be seen in the settings below.

accessibilitySettings : {
	error : 'The ability to store your accessibility preferences for this website requires the use of cookies. Please accept cookies for this site so that we can save your preference.',
	success : 'Your preferences have been successfully updated.'
},
agentCallback : { closeText : 'Close' },
autocomplete : {
	instruction : 'When auto-complete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
	location : 'Use current location',
	locationUnavailable : 'Location services are unavailable',
	resultsFound : 'results are available.',
	noResults : 'No search results.'
},
contextHelp : {
	formText : 'Help',
	closeText : 'Close'
},
cookieSetting : {
	successfullySaved : 'The cookie setting has been successfully saved.',
	failed : 'Cookies are not enabled so your preference could not be saved.'
},
creditCard : {
	default : 'For %s, look for the three digits on the back',
	noMatch : 'Look for the three digits on the back',
	amex : 'For American Express, look for the four digits on the front'
},
datepicker : {
	locale : 'en-gb',
	previousMonth : 'Previous month',
	nextMonth : 'Next month',
	weekdaysShort : [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
	interactionInstruction : 'Use the arrow keys to pick a date',
	triggerLabelSingle : 'Select date',
	confirmLabelSingle : 'Confirm date',
	triggerLabelRange : 'Select dates',
	confirmLabelRange : 'Confirm dates',
	clearLabel : 'Clear',
	totalSelectedSingular : 'Total days selected: <strong>{days} day</strong>',
	totalSelectedPlural : 'Total days selected: <strong>{days} days</strong>',
	yearLabel : 'Year',
	monthLabel : 'Month',
	startDateTitle : 'Set start date',
	endDateTitle : 'Set end date'
},
faqList : { backLinkText : 'Back to FAQ list' },
faqPanel : {
	showMore : 'Show more',
	showLess : 'Show less'
},
fileUpload : { multipleCaption : '{count} files selected' },
formHelp : {
	showMore : 'Show more',
	showLess : 'Show less'
},
mStickyCtaBar : { mobileText : 'Ready to get going?' },
masthead : {
	closeText : 'Close',
	loadingText : 'Please wait',
	switcherInitial : 'Select your preferred option',
	switcherSelection : 'You are on {option}'
},
mediaPlayer : {
	progress : 'played',
	progressTime : 'time',
	restart : 'Restart',
	rewind : 'Rewind',
	play : 'Play',
	playVideo : 'Play video',
	playAudio : 'Play audio',
	pause : 'Pause',
	forward : 'Forward',
	mute : 'Mute',
	volume : 'Volume',
	captions : 'Captions',
	subtitles : 'Subtitles',
	fullscreen : 'Fullscreen',
	seconds : 'seconds'
},
modalWindow : {
	closeText : 'Close',
	loadingText : 'Please wait'
},
multiselect : {
	pleaseSelect : 'Please select\u2026',
	allSelected : 'All selected',
	selected : ' selected',
	selectAll : 'Select all'
},
notificationclose : { closeText : 'Close' },
showMore : {
	expand : 'Show more',
	contract : 'Show less'
},
tabs : {
	moreText : 'More',
	closeText : 'Less',
	loadingText : 'Please wait'
},
textAreaCount : {
	multipleCaption : '{count} characters left',
	limitMessage : 'There is a character limit of {count}',
	limitMetMessage : 'Character limit of {count} met'
}