Multiligual support for the app (UI)

[kultuk]

have you alread implemented any way to do that?

[leo-rp]

I would like to help with the spanish localization.

[chrismaltby]

My thought here is to add a folder of JSON files named as the values returned from navigator.language and wrap all text with an l10n function that looks up the translation for that string and uses that if defined but falls back to US English if not. I nominate myself to do an en-GB.json for any references to colour and things like that (if there are any, I forget!)

so instead of

  [EVENT_SET_TRUE]: "Set Variable To 'True'",

We'd use

  [EVENT_SET_TRUE]: l10n("Set Variable To 'True'"),

then in src/lang/es-419.json we'd have something like

{
"Set Variable To 'True'": "Cambia la variable a true",
etc...
}

[kultuk]

That sounds great. Should you use one file per language for the entire app? Would be easier to translate later one. Plus, if possible, sould consider an option of a rtl ui, so it would be more accessible for rtl languages.

[leo-rp]

[EVENT_SET_TRUE]: l10n("Set Variable To 'True'"),

I dont like this way due you can't change the GUI text without modify the other keys on en.GB.json, es.GB.json, jpn.GB.json etc..

I had been working with i18n on ruby on rails and use this workflow for my proyects, so I write this example in ruby languaje :

in the menu the user selects the languaje then the app loads the content of the localization file in i18n[] Array:

English selection "default" src/i18n/locale.en.yml

en: 
  EVENT_SET_TRUE : "Set Variable To 'True"
  ETC : "More words "

Spanish selection src/i18n/locale.es.yml

es: 
  EVENT_SET_TRUE : "Cambia el valor de la variable a verdadero"  #same key, more text if needed
  ETC : "Lorem ipsum"

Then the view or render file just put the i18n with the corresponding key, in ruby :
i18n[:EVENT_SET_TRUE] or [EVENT_SET_TRUE]: i18n[:EVENT_SET_TRUE]

this workflow is modular and allows me add more text in the GUI and translate later without modify the GUI files.

[chrismaltby]

Hah, @leo-rp I started implementing and immediately thought the same! My initial implementation is in commit d0c4507b1aea37d1bc480ac04e1108588a299477 I've added an en.json

https://github.com/chrismaltby/gb-studio/blob/d0c4507b1aea37d1bc480ac04e1108588a299477/src/lang/en.json

and duplicating this file into the lang folder with the locale name as found in the Electron docs https://electronjs.org/docs/api/locales will allow you to override values for that language (missing values will fall back to US English)

There is also an RTL field which when set to true will RTL language support by editing a new RTL override CSS file https://github.com/chrismaltby/gb-studio/blob/d0c4507b1aea37d1bc480ac04e1108588a299477/src/styles/RTL.css I don't know much about what's needed for RTL languages so someone else might need to help with this one.

I've not got 100% of the text moved to this method yet, but wanted to get the implementation up so people can maybe start putting their requested language translation JSON files together.

[kultuk]

@chrismaltby that sounds great. Next time I'm ij my office I'll check with one if my FED developers ti see if anything else is required for the rtl support... Let me know when is ut safe to start translating the app.

[leo-rp]

looks good!!

[kultuk]

https://github.com/chrismaltby/gb-studio/blob/d0c4507b1aea37d1bc480ac04e1108588a299477/src/lang/en.json

is this file ready to be translated yet?

[chrismaltby]

Hi @kultuk this is the latest version of that file https://github.com/chrismaltby/gb-studio/blob/develop/src/lang/en.json I think it's got pretty much everything in there now (including a few bits of text that will be needed for upcoming features) I can't say for certain that there won't be some extra bits here or there that need adding later but it's probably ready to be translated now.

We've also got a Norwegian translation at https://github.com/chrismaltby/gb-studio/blob/develop/src/lang/nb.json kindly created by @thomas-alrek

[kultuk]

how can i run a build with my translation for testing?

[thomas-alrek]

@kultuk check the contribution guideline.

Also, when you have the project successfully set up locally, you can run it by executing

yarn start

inside of the project directory.

[kultuk]

that's not what i meant. i created an he.json (for hebrew). i want to run gb studio with that locale active.

[thomas-alrek]

For now you would have to change your system locale to match the name of the json file. I have submitted an issue that addresses this.

150