Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve interpolation #1952

Open
3 tasks done
Ionys320 opened this issue Sep 13, 2024 · 2 comments
Open
3 tasks done

Improve interpolation #1952

Ionys320 opened this issue Sep 13, 2024 · 2 comments
Labels
🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing Status: Proposal Request for comments Type: Feature Includes new features

Comments

@Ionys320
Copy link

Clear and concise description of the problem

Hi!
I'm using vue-i18n for my Nuxt project, and be used to use react-i18next for my React Native app. And I faced a significant difference between them regarding interpolation. Currently, when we want to have something such as

<i>Family</i> <strong>name</strong>

, we need two distinct translations. This cause issues in the translation process: it requires two separate keys, and doesn't allow automated translation to invert words when needed (in french, it would be "Nom de famille", so "Family" and "name" would be revert).

Suggested solution

Such as in react-i18next, it would be useful to have a syntax as

{
     "familyName": "<0>Family</0> <1>name</1>"
}

, in order to let automated translation translate the content easily, and just have something as

<i18n key="familyName">
    <i></i>
    <strong></strong>
</i18n>

in our code. The output would be

<i>Family</i> <strong>name</strong>

Alternative

No response

Additional context

No response

Validations

@Ionys320 Ionys320 added the Status: Proposal Request for comments label Sep 13, 2024
@kazupon kazupon added Type: Feature Includes new features 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing labels Sep 14, 2024
@kazupon
Copy link
Member

kazupon commented Sep 14, 2024

This is interesting!
vue-i18n has message format. we can extend for new syntax, but vue-i18n will be extend to like Intl.MessageFormat syntax, or adopt it for future.
https://github.com/tc39/proposal-intl-messageformat

we need to more discuss for syntax

@Ionys320
Copy link
Author

Ionys320 commented Sep 16, 2024

It seems the proposal is suggesting a syntax like {#b}text{/b} (https://github.com/tc39/proposal-intl-messageformat?tab=readme-ov-file#markup), so I guess my proposal could be a bit reworked by using {#0}Text{/0} instead of <0>Text</0>!

Feel free to reach me out if you need me for the discussions 👌🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing Status: Proposal Request for comments Type: Feature Includes new features
Projects
None yet
Development

No branches or pull requests

2 participants