Internationalizing Smoosic

EDIT: The translation editor is available by specifying 'mode:"translate"' in the configuration file, not through the query string. See here for an example translation editor. If you don't want to check the translation in as a PR, you can just email me the translation file directly from the example, and I'll do it.

Translation Editor

I've created some graphical tools that will make it easier for translators to create and maintain translations.

Translations for the Smoosic UI are stored in JSON files that are part of the source of the project. When you switch languages as a user, Smoosic replaces the English strings with that of your language of choice in dialogs, menus, and the ribbon buttons. It will even switch direction right-to-left for languages that work that way (for the UI, not the music!)

Editing large JSON files is no fun, so I created a little widget to help with this. You can get to the page by adding ?translate=xx to the Smoosic URL, where 'xx' ISO-639 language code for your language (If you are creating a new translation from whole cloth, instructions are listed below).

Note: this is about editing the strings used in the application. Help files are also included in the translation files, but the method for creating those is a bit different.

There are separate entries for each dialog, menu, and ribbon button that contains text. Each entry contains 3 columns:

• the variable or id in the source code that identifies this text in the application. This might be similar to the English text, or somewhat cryptic, depending on that the value is used for.
• the English string for the value.
• the editable Language-specific string for the value. If the value has not been translated yet, you will just see the English text in an input box with a green outline.

Saving your changes

Once you are done editing the file, you click the submit button to slurp all the text into a new JSON file. Then you just have to copy the existing JSON file to the source file and paste it between the backticks, replacing the original text.

Creating a new language file

The convention for naming language files is: language_xx.js where 'xx' is the ISO-639 language code for your language, e.g. fr for French, es for Spanish, etc. (I may incorporate dialects, e.g. es-mx for Mexican dialect of Spanish, but for now it's just the language code).

If a translation file doesn't exist for your language, you can seed it with the English one (or a different one, if you want). So you would copy src/ui/i18n/language_en.js to src/ui/i18n/language_es.js, for instance. Then add the file to the gruntfile under the 'src' section (Grunt builds the library from source. Even if you've never used this, you can just follow the pattern). You also need to add the string to the language.js file, e.g.

class SmoLanguage {
...
  static get es() {
    var strings = JSON.parse(smoLanguageStringEs);
    var rv = {dir:'ltr',strings:strings,helpHtml:{}};
    return rv;
   }

You did it! The language should now be available in the language editor, and also in the language menu in the application.

Help Files

Help files are created using GitHub markdown, e.g. this help file. Since they are just long prose, translating them is a bit more straightforward. You can see examples of this in the language_en.js file. My advice would be to clone this Wiki and do your translations there. I have a utility that converts the MD to HTML for the inline application help. I will also link to it from here.