SugarCube v2 basic internationalization (i18n) example using the Settings menu (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 labels to codes for all supported | |
languages go here. | |
*/ | |
langs : { | |
// NOTE: User customization required here. | |
'Deutsche' : 'de', | |
'English' : 'en', | |
'Français' : 'fr', | |
}, | |
/* | |
Utility code. You probably do not need to worry | |
about any of these. | |
*/ | |
codes : function () { | |
return Object.keys(this.langs).map(function (label) { | |
return this.langs[label]; | |
}, this); | |
}, | |
labels : function () { | |
return Object.keys(this.langs); | |
}, | |
labelFromCode : function (code) { | |
var label = Object.keys(this.langs).find(function (label) { | |
return this.langs[label] === code; | |
}, this); | |
if (!label) { | |
throw new Error('unknown language code "' + code + '"'); | |
} | |
return label; | |
} | |
}; | |
/*********************************************************** | |
Language switching setting. | |
***********************************************************/ | |
function initLanguage() { | |
/* | |
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 (setup.i18n.langs[settings.lang]) { | |
/* | |
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'; | |
break; | |
case 'fr': | |
l10nStrings.settingsTitle = 'Paramètres'; | |
l10nStrings.settingsOff = 'Désactiver'; | |
l10nStrings.settingsOn = 'Activer'; | |
l10nStrings.settingsReset = 'Réinitialiser les paramètres par défaut'; | |
break; | |
} | |
/* | |
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', setup.i18n.langs[settings.lang]); | |
} | |
function changeLanguage() { | |
/* | |
Reload the application to ensure that the proper | |
localizations are loaded. | |
*/ | |
window.location.reload(); | |
} | |
Setting.addList('lang', { | |
label : 'Language.', | |
list : setup.i18n.labels(), | |
default : setup.i18n.labelFromCode('en'), | |
onInit : initLanguage, | |
onChange : changeLanguage | |
}); | |
/*********************************************************** | |
Set up a `postrender` task which renders the appropriate | |
language code suffixed passage into each non-suffixed | |
passage. | |
***********************************************************/ | |
postrender['i18n-passage-include'] = function (content) { | |
var passage = State.passage + '_' + setup.i18n.langs[settings.lang]; | |
$(content).empty().wiki(Story.get(passage).processText()); | |
}; | |
})(); | |
:: 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 | |
Deutsche. | |
[[Nächster|Next]] | |
:: Start_en | |
English. | |
[[Next]] | |
:: Start_fr | |
Français. | |
[[Prochain|Next]] | |
:: Next | |
/* This should be empty. */ | |
:: Next_de | |
Nächster | |
:: Next_en | |
Next | |
:: Next_fr | |
Prochain | |
This comment has been minimized.
This comment has been minimized.
Assuming you mean that you want it to change based on the currently selected language, then you do not without dipping into undocumented internals. The If something which does not integrate into the Setting dialog would be acceptable, then there's the alternative example sc-i18n-example-2.twee. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Hi, how can i change lable "Language" in settings?