Messages Internationalization

[croxarens]

Hi there,

is there any way I can translate the messages like "Request Camera Permissions", "Scan an Image File"?

[cheweytoo]

Can I help?

https://github.com/mebjas/html5-qrcode/blob/master/src/strings.ts already separates the UI strings (and considers internationalization a TODO :-), so this looks well prepared for.

@mebjas: Have you already thought about how you'd want the internationalization to be triggered/configured? Via an additional config option maybe?

It would of course be nice to just automatically match the first language in navigator.languages that is supported by html5-qrcode's translations, but I don't know if this can be relied on to be available in all environments supported by html5-qrcode.

[mebjas]

@cheweytoo Thanks for the interest. This has been a key issue in my mind.

Have you already thought about how you'd want the internationalisation to be triggered/configured? Via an additional config option maybe?

I am happy to hear your thoughts on this topic. Different languages baked into the JS code with a config deciding the language is definitely one option. In case of missing language support it could fallback to English. I have not worked on projects where this is purely frontend based.

An alternative that comes to mind is generating different JS files for diff languages but that seems like a huge pain for consumers.

The design in my mind is:

| src 
......| strings.ts (become an interface only)
......| strings-factory.ts
......| strings
..................| strings.en.ts
..................| strings.fr.ts
..................| (all diff languages)

strings-factory.ts could either consume argument like this:

enum StringMode {
    ENGLISH_ONLY,  // default
    AUTO_DETECT,
    EXPLICIT
}

interface StringsConfig {
   stringMode: StringMode;
   language?: string; // only honoured when stringMode is 'EXPLICIT'.
}

And return the impl or default to english if the language is not implemented. Based on contributors we can keep adding more strings.

[jpaoletti]

Hi all, nice library !

Is there a way to manually set the texts at render or creation time ? I'd like to use Html5QrcodeScanner but I really need it translated. Some workaround comes to your mind?

Thanks!

[croxarens]

Hi @mebjas, I'm mostly a backend developer, and I have just general knowledge of JS.
My suggestion, or at least my point of view, is to allow everyone to easily change/update/amend the language file without the need to compile something.
So, for this reason, I'd stay with some basic JS options, like a file with a single object called lang and each property as a word/phrase. I think this should allow some sort of easy attribute injection too.

lang = { hello : "ciao" }

Hi @jpaoletti, I just looked for the phrase I want to translate in the codebase, and just changed it in the code. Of course this solution doesn't work with multilanguage applications.

[jpaoletti]

@croxarens Yeah I ended up doing that but it is not ideal. I agree with your proposed solution

[faustort]

@cheweytoo Thanks for the interest. This has been a key issue in my mind.

Have you already thought about how you'd want the internationalisation to be triggered/configured? Via an additional config option maybe?

I am happy to hear your thoughts on this topic. Different languages baked into the JS code with a config deciding the language is definitely one option. In case of missing language support it could fallback to English. I have not worked on projects where this is purely frontend based.

An alternative that comes to mind is generating different JS files for diff languages but that seems like a huge pain for consumers.

The design in my mind is:

| src 
......| strings.ts (become an interface only)
......| strings-factory.ts
......| strings
..................| strings.en.ts
..................| strings.fr.ts
..................| (all diff languages)

strings-factory.ts could either consume argument like this:

enum StringMode {
    ENGLISH_ONLY,  // default
    AUTO_DETECT,
    EXPLICIT
}

interface StringsConfig {
   stringMode: StringMode;
   language?: string; // only honoured when stringMode is 'EXPLICIT'.
}

And return the impl or default to english if the language is not implemented. Based on contributors we can keep adding more strings.

If you start the:
......| strings.ts (become an interface only)
......| strings-factory.ts

I'll be glad to help up create
..................| strings.pt-pt.ts
..................| strings.pt-br.ts
..................| strings.es.ts

Btw thanks for this amazing work @mebjas

[IlyaDiallo]

Hi @mebjas, I'm mostly a backend developer, and I have just general knowledge of JS. My suggestion, or at least my point of view, is to allow everyone to easily change/update/amend the language file without the need to compile something. So, for this reason, I'd stay with some basic JS options, like a file with a single object called lang and each property as a word/phrase. I think this should allow some sort of easy attribute injection too.

lang = { hello : "ciao" }

Yes string injection at runtime is the most versatile, no need to hardcode translation then (but it's possible to do both).

[mebjas]

@mebjas

• Start an effort on this with Spanish and French
• Write a blog post describing how to do this for any language.
• Request contributors to add support for more languages within the library

[AymaneSilini]

Hi all. I am currently working on a React scanning app. Did you find a way to efficacely change language of elements ?
Thank you.