WordPress / openverse

Openverse is a search engine for openly-licensed media. This monorepo includes all application code.
https://openverse.org
MIT License
239 stars 190 forks source link

Translation strings partials should be linked with the whole sentence. #617

Closed obulat closed 5 months ago

obulat commented 2 years ago

Problem

Currently, we are using the Vue-i18n's json file format for our strings that need to be translated. To use an HTML element within a string, we split a string into 2 values.

For example, the disclaimer from the homepage contains a link within it. Below you can see the HTML result and the JSON values that are used for it: `

All Openverse content is under a Creative Commons license or is in the public domain.

"disclaimer": {
  "content": "All Openverse content is under a {license} or is in the public domain.",
  "license": "Creative Commons license"
},

In the PolyGlot interface, the translators see the two parts of this sentence as separate strings, and it is not possible to understand that they are part of the same sentence. This can be fine for languages that don't change the word forms based on their sentence role (as English). But for Russian, for example, translating the license key value cannot be done correctly without knowing the sentence it is used in. Here you can see the two strings in the translation interface:

Screen Shot 2022-02-16 at 4 58 01 PM

Description

We should investigate the best way of linking the strings that are part of a sentence in the Vue JSON format.

Implementation

sarayourfriend commented 2 years ago

@obulat could we use the v-html directive and include the HTML directly in the translated strings? Or potentially add "holes" in the text that could be passed through sprintf or something like that? Translation strings like the example would then become:

All Openverse content is under a %sCreative Commons license%s or is in the public domain.

Or something like that? Then sprintf can "just" (I think this is probably more complicated than a "just" :stuck_out_tongue:) format the translated string with the HTML. This could be done in postTranslation maybe? I'm not sure how we'd pass the HTML tags through as arguments :disappointed: Of course, we could create a wrapper around the i18n translation methods that used sprintf and allowed passing HTML to the strings. vue-i18n recommends against using v-html due to XSS issues but I think it would be safe as long as we trust the translation source :thinking:

lidialab commented 1 year ago

I totally agree with @obulat. These difficulties are there also for the Italian locale.