Spectrum: Internationalization

[baofengyv]

I am user live in China. So, I prefer a Chinese UI to use.

And I think if we provide multi language support ,this will be friendly for who are not familiar with English.

[brianlovin]

Would love to get here some day! At this point I think we'd need someone to really lead the charge and own internationalization, as we just won't have the time or teampower to handle ad-hoc mistranslations or supporting new languages as users request them

[mxstbr]

Some initial thoughts:

• Definitely want this given the influx of international users!
• We should use some UI service (I know there are a couple) that let folks help us translate the UI
• I initially wouldn't worry about the marketing pages, since their copy changes constantly and would be hard to keep up to date
• Instead, let's focus on internationalizing the text used in the UI (I think there isn't a lot of it)

[baofengyv]

If we support i18n in the pragram,
I can do the work(translate into chinese),
if i know:
1. the list of what need to translate.
2. which format the program need.

As the user growth, many people who can use multi language (like me)
can help us to translate into certain language.

[brianlovin]

@baofengyv I'm not sure of best i18n practices at other software companies; do you know of tools or best practices here? Would love to make sure this can be structured and maintainable before we embark :)

[ruffle1986]

I recommend to use Transifex (https://www.transifex.com/) to translate your content

and react-intl (https://github.com/yahoo/react-intl) to support i18n in the code base.

[mxstbr]

Transifex looks very expensive for our use case, given that we'll hopefully have a ton of collaborators on these translations. Are there any options suited for open source apps? What do e.g. the React docs use?

[ruffle1986]

You can get benefits from open source projects but as I see, it doesn't have effect on the pricing :)

[ruffle1986]

Wait! It says:

What are the basic requirements to qualify as an Open Source account?

We are proud and humbled to be hosting the largest Open Source translation community in the world. We offer Transifex for free to Open Source projects that have no funding, revenue, and/or commercialization model. If you have a question whether your organization qualifies for our Open Source program, please contact us.

UPDATE: Ahh sorry, for Spectrum it's a no go I guess 👇

We offer Transifex for free to Open Source projects that have no funding, revenue, and/or commercialization model

Source: https://www.transifex.com/pricing/

[mxstbr]

I don't mind paying for a good service, but Transifex charges per collaborator—I expect we'll have dozens, if not hundreds of small collaborators at which point we'd be looking at $x,xxx/month, which is a bit much :sweat_smile:

[ruffle1986]

Yeah, sure! 😅

[mxstbr]

Here is a great discussion about potential i18n libraries and services: https://spectrum.chat/thread/9c0e95b6-3c52-4375-be99-71563f82cd2e

[baofengyv]

@brianlovin I don't konw what is the best practice for Open Source project.
Yes, to see how other Open Source project to do this is a good idea.

I have a little idea, the simplest JSON

{
    "home": {
        "zh": "主页",
        "jp": "ホームページ"
        ...
    },
    "explore": {
        "zh": "探索",
        "jp": "探検"
        ...
    }
}

{
    "zh":{
        "home":"主页",
        "explore":"探索"
        ...
    },
    "jp":{
        "home":"ホームページ",
        "explore":"探検"
        ...
    }
}

[brianlovin]

I see; how would this end up in the UI itself? I know there's a react i18n library out there, but never had the chance to see how implementation works

[LetItRock]

@brianlovin I've implemented internationalisation some time ago in one app and generally it was a HOC which served "strings" prop to childrens with the piece of json they were interested in... and selected language was stored in redux store... and changed by triggering action...
I think its possible to implement this with new Context API...

[brianlovin]

@LetItRock did you ever use https://github.com/i18next/react-i18next ?

[ruffle1986]

Here's our approach:

• we use react-intl
• react-intl has a babel plugin which collects your copies from the source code
• then, we transform it into a structure that is compatible with Transifex (or any other 3rd party)
• upload it

At this point, the service (where the translation happens) gets the text that has to be translated. We do it when we make the production build in circle ci.

• we also have to get the texts are translated already from Transifex and we need to transform it into a structure that can be accepted by react-intl.
• this also happens at build time in circle ci.
• at the end, normally, we get a messages-de.js or messages-en.js.
• We inject one of these scripts based on the user's locale code which can be detected automagically or set by the user.

[LetItRock]

@brianlovin nope I don't have any experience with that library...

[brianlovin]

Thanks for the context here @ruffle1986!

At this point I'd be super happy to review PRs, but as I mentioned above I think the only way this will really happen is if someone commits to owning the i18n process and helping us work through the build process, handling locale changes on the client, etc. as well as establishing a best practice for submitting and reviewing new languages + string translations over time.

[ruffle1986]

@mxstbr @brianlovin Is it possible that the react docs page made of this? https://docusaurus.io/

If so, they use https://crowdin.com/

[mxstbr]

If so, they use https://crowdin.com/

Their pricing looks a lot more reasonable for us: it is based on the number of unique strings, you can always have unlimited participants! 😍😍😍

[alejandronanez]

A little bit late here, but I've used react-intl, it was a nice experience.

Why I ended up having was:

• src/i18n/ with all the translations, one file per language: /en.js /es.js
• Replace all hardcoded strings with a react-intl's component that handles translations
• profit.

It is time-consuming, but it's doable. Especially if more people are down to contribute to the translations.

[gaianinja]

Hi there,

I would like to contribute to a French translation. Which file do I have to edit?

Thank you.

[leinue]

Hi there,

I would like to contribute to a Chinese translation. Which file do I have to edit?

Thank you.

[leinue]

Can we find a solution that everyone recognizes and then advance this?
By the way, I am in China, I want to have a spectrum that is friendly to Chinese people.

Otherwise I will promote internationalization in my own way. But I think the solution is best to contribute to the community.

So can we reach a consensus?

[jonschlinkert]

One thing that might help accelerate progress on this is to start externalizing existing (hard-coded) UI text into separate data files. Seem like this would need to be done first, no matter what direction we decide to take on internationalization.

[mxstbr]

@jonschlinkert that makes sense to me, I would merge a PR that sets this up!

[veerjainATgmail]

Is this in progress? Any pointers to the development branch?

[brianlovin]

This isn’t in progress, so no development branch 😊

[gabrielcmarinho]

@brianlovin Is there any forecast of the possibility of new translations of the website?

[Em-AK]

I'd like to try the first step which is to extract current hard coded strings.
I have read about this tutorial from LinguiJS: https://lingui.js.org/tutorials/react.html.
Will look at the doc from alternative libs before starting.

[brianlovin]

Hey @Em-AK I would hold off on this now as we prioritize GitHub discussions :)

[listopad]

hey 🙋‍♂️
any movement in this direction?

[brianlovin]

This won't be prioritized in the near future, sorry @listopad!