Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SugarCube v2 basic internationalization (i18n) example using a switching method (in Twee notation)
:: StoryTitle
SugarCube i18n example
:: Language Switching [script]
;(function () {
Set up a `i18n` object on SugarCube's `setup` object.
setup.i18n = {
Map of language codes to labels for all supported
languages go here.
languages : {
// NOTE: User customization required here.
'de' : 'Deutsche',
'en' : 'English',
'fr' : 'Français'
The active language. The initial value will be the
lang : 'en',
Sets the active language by code—e.g. 'en'.
setLang : function (code) {
Set the `l10nStrings` properties to the appropriate
values for each supported language.
English need not receive a case, unless you simply
want to alter the default values, as it is the
default language.
switch (code) {
NOTE 1: User customization required here.
NOTE 2: The `l10nStrings` properties shown in the cases below
are an abbreviated set for example purposes. There are many
more properties within the `l10nStrings` object which you'll
need to handle.
case 'de':
l10nStrings.settingsTitle = 'Einstellungen';
l10nStrings.settingsOff = 'Deaktivieren';
l10nStrings.settingsOn = 'Aktivieren';
l10nStrings.settingsReset = 'Auf Standardeinstellung zurücksetzen';
case 'fr':
l10nStrings.settingsTitle = 'Paramètres';
l10nStrings.settingsOff = 'Désactiver';
l10nStrings.settingsOn = 'Activer';
l10nStrings.settingsReset = 'Réinitialiser les paramètres par défaut';
Set our `lang` property to the appropriate value.
this.lang = code;
Set the `lang` attribute on the document element to
the appropriate value. This is mostly notational,
though it could also be used to enable localization
specific styling.
$('html').attr('lang', code);
Utility methods. You probably do not need to worry
about any of these.
codes : function () {
return Object.keys(this.languages);
labels : function () {
return Object.keys(this.languages).map(function (code) {
return this.languages[code];
}, this);
Set up a `postrender` task which renders the appropriate
language code suffixed passage into each non-suffixed
postrender['i18n-passage-include'] = function (content) {
var passage = State.passage + '_' + setup.i18n.lang;
Initialize the default language.
:: Start
The non-suffixed passages are here to prevent Twine from
complaining endlessly about missing passages, SugarCube from
showing broken links, and to keep the story history free of
suffixed passage names so that changing languages on the fly
will work.
The actual passages are the language code suffixed versions.
For example, for this starting passage the German version
would be Start_de, the French Start_fr, and English Start_en.
When creating links between passages, you must always link to
the non-suffixed versions and never to the suffixed versions.
The postrender task will handle displaying the correct version
based on the currently selected language.
NOTE: While nothing within the non-suffixed passages will be
displayed, they will be rendered. Meaning side-effects from
included code will be in effect—e.g. modifications to story
variables. Thus, you should either leave them empty or place
all contents within comment blocks—like this one.
:: Start_de
:: Start_en
:: Start_fr
:: Next
/* This should be empty. */
:: Next_de
:: Next_en
:: Next_fr

This comment has been minimized.

Copy link

commented Feb 20, 2018

That is useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.