Japanese Translation of Web Editor

[koji]

Hi,
I'm trying to add Japanese translation to the web editor.

Would like to get some advice from @catarak and @oruburos.

1. The folder name for translations.json
   Currently, I named it ja because date-fns/locale is using ja for Japanese translation.
   If you guys have any idea for the folder naming, I want to know about it.
   Ex. lang-Area en-UK
   In terms of Japanese, it will be ja-JP or ja-JA

2. Display dropdown menu
   I could run the Docker image on my local machine.
   I created a new translations.json file and add ja to client/i18n.js and add a button to client/components/Nav.jsx.

<li className="nav__dropdown-item">
  <button
    onFocus={this.handleFocusForLang}
    onBlur={this.handleBlur}
    value="ja"
    onClick={e => this.handleLangSelection(e)}
  >
    日本語
  </button>
</li>

Currently, I hard-coded ja to check the UI
https://twitter.com/koji_kanao/status/1317094279517536256/photo/1

If there is a way to enable a dropdown menu that the current p5 web editor has, I want to know about it.

3. space in translations.json
   I copied en-US/translations.json to translate items to Japanese.
   Then I noticed a couple of items have space like the following.

https://github.com/processing/p5.js-web-editor/blob/develop/translations/locales/en-US/translations.json#L520

Is this on purpose? If so, space should be a single byte or I need to align to Japanese 2 bytes?

Thanks!

Nature of issue?

• Existing feature enhancement

Details about the bug:

• Web browser and version:
• Operating System:
• Steps to reproduce this bug:

Feature enhancement details:

• Add Japanese translation

New feature details:

Add "Japanese" button on the top right corner

[oruburos]

Hi @koji , so sorry but I don't fully understand the issue.

So let's run a quick recap

• So, in this file, you already added your 'ja' option?
  https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L5-L24

• the link that is built in line can access your new translation file?
  https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L31

• And in Nav you already played with this?
  https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L547-L589

• The mapping in line 561 goes to i18js, is the dictionary returning the right value?
  https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L561

• Regarding the spaces, yes, is on purpose given that I didn't want to play with the current style, and to give space I'd rather introduce extra spaces. So in this aspect, I don't know the difference because I lack of knowledge in Japanese, Visual style for your culture and etc. Maybe further discussion would help.

See you around

[koji]

Hi @oruburos thank you for your reply.

So, in this file, you already added your 'ja' option?
https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L5-L24

Yes, That what I did.

the link that is built-in line can access your new translation file?
https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L31

The following is loadPath value since it is set as string.

loadPath: "/locales/{{lng}}/translations.json"

And in Nav you already played with this?
https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L547-L589

I added the following after Español.

<li className="nav__dropdown-item">
  <button
    onFocus={this.handleFocusForLang}
    onBlur={this.handleBlur}
    value="ja"
    onClick={e => this.handleLangSelection(e)}
  >
    日本語
  </button>
</li>

There isn't dropdown next to the Login.

Temporary, I hardcoded the following line to see the UI
https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L43

Regarding the spaces, yes, is on purpose given that I didn't want to play with the current style, and to give space I'd rather introduce extra spaces. So in this aspect, I don't know the difference because I lack of knowledge in Japanese, Visual style for your culture and etc. Maybe further discussion would help.

Okay got it. Probably keeping the spaces makes sense.

Thanks!

[oruburos]

Hi @koji
Also, you need to put this line in your env file
TRANSLATIONS_ENABLED=true

[koji]

Hi @oruburos

dropdown showed up.
Thank you for your help!!! Really appreciate.

[oruburos]

Hi @koji, that's great. you're welcome. As soon as I have time I will submit a PR to add that part to the documentation

[koji]

@oruburos opened a PR
#1641